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

Author: git-nandor

packages/ui-buttons/src/BaseButton/v2/styles.ts

@@ -55,6 +55,26 @@ const generateStyle = (
     condensedMedium: componentTheme.gapButtonContentSm
   }
 
+  // Outer height token per size, keyed like `sizeVariants`. Used to compensate
+  // the ai-secondary gradient-border padding.
+  const heightForSize = {
+    small: componentTheme.smallHeight,
+    medium: componentTheme.mediumHeight,
+    large: componentTheme.largeHeight,
+    condensedSmall: componentTheme.heightXxs,
+    condensedMedium: componentTheme.heightXs
+  }
+
+  // ai-secondary draws its gradient "border" as a ::before ring whose space is
+  // reserved by padding on the button wrapper (see the `&&&&&&&&&&` block below).
+  // That padding is additive to the content box, so an ai-secondary button ends
+  // up 2 × borderWidth taller — and, when icon-only, wider — than the same button
+  // in any other color. Shrink the content box by the same amount to compensate.
+  const aiSecondaryContentSize =
+    color === 'ai-secondary'
+      ? `calc(${heightForSize[size!]} - ${componentTheme.borderWidth} * 2)`
+      : undefined
+
   const shapeVariants = {
     circle: { borderRadius: componentTheme.borderRadiusFull },
     rectangle: {}
@@ -560,6 +580,14 @@ const generateStyle = (
       }),
       ...(!withBorder && {
         borderStyle: 'none'
+      }),
+      // ai-secondary uses padding to render its gradient border, which increases
+      // the outer size. Reduce the content size to keep dimensions consistent.
+      ...(aiSecondaryContentSize && {
+        ...(size === 'condensedSmall' || size === 'condensedMedium'
+          ? { height: aiSecondaryContentSize }
+          : { minHeight: aiSecondaryContentSize }),
+        ...(hasOnlyIconVisible && { width: aiSecondaryContentSize })
       })
     },
 

regression-test/src/app/button/page.tsx

@@ -237,6 +237,37 @@ export default function ButtonPage() {
           </IconButton>
         </View>
       </div>
+      {/*
+        Unlike every other color, ai-secondary has no real CSS border — it fakes
+        its gradient "border" with a ::before ring whose space is reserved by
+        padding on the wrapper. That padding inflates the outer size, so the
+        content box has to be shrunk back by a hand-written, per-size calc
+        (2 × borderWidth) to stay identical to the other colors. Because that
+        compensation is manual and size-specific, it's easy to miss a size or
+        variant.
+      */}
+      ai-secondary size parity (all sizes):
+      {(
+        ['small', 'medium', 'large', 'condensedSmall', 'condensedMedium'] as const
+      ).map((size) => (
+        <div
+          key={size}
+          style={{ display: 'flex', gap: '0.5rem', alignItems: 'flex-start' }}
+        >
+          <Button size={size} color="secondary">
+            {size}
+          </Button>
+          <Button size={size} color="ai-secondary">
+            {size}
+          </Button>
+          <IconButton size={size} color="secondary" screenReaderLabel="Add">
+            <IconAddLine />
+          </IconButton>
+          <IconButton size={size} color="ai-secondary" screenReaderLabel="AI">
+            <IconAiColoredSolid />
+          </IconButton>
+        </div>
+      ))}
     </main>
   )
 }