fix(ui-buttons): fix ai-secondary button size diff

[git-nandor]

INSTUI-5061

Summary

An ai-secondary button was 2px taller (and, for icon-only buttons, 2px wider) than the same button in any other color.

ai-secondary removes the real border and renders its gradient "border" as a ::before ring whose space is reserved by padding. That padding is additive to the content's full minHeight, adding 2px to the outer size.

The fix shrinks the ai-secondary content box by 2 × borderWidth (height, plus width for icon-only buttons), so the reserved padding is compensated and the outer size is identical regardless of color.

Update (review feedback)

• Condensed sizes also covered.
• Refactor. Collapsed the duplicated calc / size list / height tokens into a single aiSecondaryContentSize const.
• Regression coverage. The button page now renders every size's ai-secondary button next to a default one so the screenshot catches any size drift, condensed included.

Test:

Verify that the buttons have the same size.

{[
  'small',
  'medium',
  'large',
  'condensedSmall',
  'condensedMedium'
].map((size) => (
  <div
    key={size}
  >
    <h3>{size}</h3>

    {/* text: ai-secondary vs default */}
    <Button size={size} color="ai-secondary">{size}</Button>
    <Button size={size} color="secondary">{size}</Button>

    {/* icon-only: ai-secondary vs default (width parity) */}
    <IconButton size={size} color="ai-secondary" screenReaderLabel="Add">
      <IconAddLine />
    </IconButton>
    <IconButton size={size} color="secondary" screenReaderLabel="Add">
      <IconAddLine />
    </IconButton>

    {/* icon-only circle ai-secondary */}
    <IconButton size={size} shape="circle" color="ai-secondary" screenReaderLabel="Add">
      <IconAddLine />
    </IconButton>
    <IconButton size={size} shape="circle" color="secondary" screenReaderLabel="Add">
      <IconAddLine />
    </IconButton>
  </div>
))}

[github-actions]

PR Preview Action v1.8.1
🚀 View preview at https://instructure.design/pr-preview/pr-2617/
Built to branch gh-pages at 2026-07-17 09:41 UTC. Preview will be ready when the GitHub Pages deployment is complete.

[github-actions]

Visual regression report

⚠️ Changes detected.

Status	Count
Unchanged	31
Changed	1
New	0
Removed	0

📊 View full report

Diff images (1)

button-and-derivatives.png — 474230 pixels differ

_{Baselines come from the visual-baselines branch. They refresh on every merge to master.}

[balzss]

Nice fix, root cause is spot on and I checked that small/medium/large are pixel-perfect now (both icon and text buttons).

Condensed sizes are still off. The fix only kicks in for small/medium/large, but the wrapper padding at line 477 gets added for every size — so condensedSmall and condensedMedium ai-secondary buttons are still 2px taller and wider. Confirmed by measuring. Since condensed is a real combo we need to cover it too — heads up, condensed uses height instead of minHeight, so it needs its own little branch subtracting 2 × borderWidth there.

Add a case to the regression test suite — render the ai-secondary buttons next to the default ones (all sizes) on the button page so the screenshot catches any size drift.

Small cleanup on the code itself. Right now the calc is written twice (minHeight + width), the size list is repeated (once as the heightForAiSize keys, once in the size === ... check), and heightForAiSize duplicates height tokens we already have. You can collapse all three — pull the value into one const and index the theme directly:

const aiContentSize =
  color === 'ai-secondary' && componentTheme[`${size}Height`]
    ? `calc(${componentTheme[`${size}Height`]} - ${componentTheme.borderWidth} * 2)`
    : undefined

then use aiContentSize for both minHeight and the icon-only width. No map, no repeated calc, no repeated size list. (You'll still want the separate condensed branch since those don't have a ${size}Height token.)

Heads up: this only works because it's spread last and overrides the minHeight from sizeVariants — that's the existing pattern here, just good to know.

[balzss]

see my (and claude's 😺 ) comment

[git-nandor]

Thanks, the fix and the cleanup is done.