fix: Align button content to the center

[gabyzif]

Whenever a button has an icon larger than the label's font size, it becomes misaligned

Currently, we are adding an icon through the icon prop. While version 5.17 (we are currently in 5.13) introduces iconPosition this prop only allows switching the icon between the left and right sides, not centering it.

Since we are adding it though props and not in the children, we can't use a Flex container to make the button aligned, and we can't let the children handle the alignment either. Here is a code snippet from ant's implementation on the icon/children. The rest of the code you can find it here:

const genButtonContent = (iconComponent: React.ReactNode, kidsComponent: React.ReactNode) =>
  iconPosition === 'start' ? (
    <>
      {iconComponent}
      {kidsComponent}
    </>
  ) : (
    <>
      {kidsComponent}
      {iconComponent}
    </>
  );

As a workaround for this problem, I set up a class that makes the button flex and center aligned only when it has an icon

The button with the fix:

[Seebiscuit]

question I'm suprised that this is happening. My hunch is that maybe we've missed a Design Token. Have those been investigated?

[gabyzif]

The bottom button is a raw ant component without our theme on top nor the new class.

[tibuurcio]

I was obligated to left a comment by github

[jared-dickman]

hum, um, yea can we do this in a different way? why not use a utility class, or a Flex component?

also, why do we need every single button from the aquarium to always be flex? shouldnt it def be a props.children level concern?

if this is fixed in 5.17, might it be better to find an update path instead of patch a hack with display?

[jared-dickman]

nit hey its me again 〰️
could prefer present tense here, align over aligned, its less typing too 😉

but really per the Style Guide, modifier selectors should only be used in conjunction with the unmodified class. this ensures a higher specificity and that the modifier will "always override" the base class

in this case, it would be like .aquarium-button.aquarium-button--aligned-center {}

which would be correct doesnt really make a ton of sense since we dont have any other .aquarium-buttons or rules for a base .aquarium-button

peronally for things like this i'm more a fan of utility classes

we have a place for more in the aquarium

could be something like

<AntButton {...props} className={props.icon ? 'u-display-flex u-align-items-center' : ''}>

[gabyzif]

I was literally changing it for the utility class 🙏 . I'm also big fan of utility classes

[tibuurcio]

Good job on the investigation, evolution of context and alignment seeking in this PR :)

[mparticle-automation]

🎉 This PR is included in version 1.15.0-icons-integration.3 🎉

The release is available on:

• npm package (@feature dist-tag)
• GitHub release

Your semantic-release bot 📦🚀