INSTUI-4682 fix(ui-buttons): fix for AI secondary button visual glitch

[git-nandor]

When rendering the AI button inside a flex container with a fixed height, the button was being stretched vertically due to the parent’s default align-items: stretch.

Test:
You can verify the fix by trying the example below on the button docs page.
The visual glitch should no longer appear when the AI secondary button is inside a flex parent with a fixed height.

<>
  <View display="block">
    <Button color="ai-primary" renderIcon={IconAiSolid} margin="small">AI Primary</Button>
    <Button color="ai-secondary" renderIcon={IconAiColoredSolid} margin="small">AI Secondary</Button>
    <IconButton color="ai-primary" screenReaderLabel="AI button" margin="small"><IconAiSolid/></IconButton>
    <IconButton color="ai-secondary" screenReaderLabel="AI button"  margin="small"><IconAiColoredSolid/></IconButton>
  </View>
  
  <div style={{height:"100px", display: "flex", marginLeft:"15px", gap: "24px"}}>
    <Button color="ai-primary" renderIcon={IconAiSolid} >AI Primary</Button>
    <Button color="ai-secondary" renderIcon={IconAiColoredSolid} >AI Secondary</Button>
    <IconButton color="ai-primary" screenReaderLabel="AI button" ><IconAiSolid/></IconButton>
    <IconButton color="ai-secondary" screenReaderLabel="AI button" ><IconAiColoredSolid/></IconButton>
    <IconButton color="secondary" screenReaderLabel="AI button" ><IconAiColoredSolid/></IconButton>
  </div>
</>

[github-actions]

PR Preview Action v1.6.2
Preview removed because the pull request was closed.
2025-09-25 08:53 UTC

[ToMESSKa]

@git-nandor in some cases, the the focus ring still looks stretched, can you please take a look at this?

[ToMESSKa]

see my comment

[git-nandor]

The vertical stretch caused by flex wasn’t limited to the secondary version, although the visual glitch only appeared there. I moved the fix to baseButton so it now applies everywhere. I also reviewed the other buttons and they look fine to me. Thanks for catching that!

[matyasf]

Now components look off in the regression test (check out the Chromatic diff), there are 3 different vertical positions. It looked better in the original version

[joyenjoyer]

UI tests show an anomaly, please check.

[git-nandor]

The bug is not limited to the AI button. The components may look “off” at first glance, but i think this is their correct alignment.

The visually appealing centered alignment we saw earlier was actually a side effect of the bug. The flex wrapper was automatically stretching its children, and that stretching caused the background and focus ring to render incorrectly on all of our buttons.

Once the stretch was removed as part of the fix, the children reverted to their natural height and aligned accordingly. I believe this is the expected behavior without additional CSS specifications. If users want a different alignment, they can apply their own CSS rules (e.g. align-items on the wrapper or alignment rules on the children).

I wouldn’t enforce any extra default alignment on the buttons themselves. In fact, the lack of extra specifications is what made the bug visible in the first place. If the wrapper or children had been given custom CSS for alignment that overrode the default stretching, the bug would have been masked.

[matyasf]

looks good!

Reviewer on holiday.