From 3d9d10b3e6be62b1b593fc489252d5af82010ee8 Mon Sep 17 00:00:00 2001 From: Arthurk12 Date: Wed, 2 Sep 2026 19:46:11 -0300 Subject: [PATCH] fix(BBButton): make `size` resize `circle` and `squared` layouts MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit `circle` hardcoded a 3rem width/height regardless of `size`, and `squared` hardcoded its padding, overriding the size-derived padding from commonButtonStyles — both contradicted the `size` doc, which claims it affects padding and the circle's diameter. Add a shared `iconBoxSize` per size to CSS_SIZE_PROPERTIES and an `iconOnlyBoxStyles` fragment reused by both layouts, so `circle` and `squared` always render at the same fixed box size for a given `size` (sm: 2rem, md: 3rem, the latter promoted to a new `spacingXXLarge` token to match the previous circle default). This changes squared's default look: it no longer sizes itself from icon + padding, and now matches circle's box size instead. --- src/components/Button/component.stories.tsx | 40 ++++++++++++++++++++- src/components/Button/constants.ts | 8 +++-- src/components/Button/styles.ts | 29 ++++++++------- src/components/Button/type.ts | 3 +- src/stylesheets/sizing.ts | 1 + 5 files changed, 64 insertions(+), 17 deletions(-) diff --git a/src/components/Button/component.stories.tsx b/src/components/Button/component.stories.tsx index 8020311..83d251f 100644 --- a/src/components/Button/component.stories.tsx +++ b/src/components/Button/component.stories.tsx @@ -55,7 +55,7 @@ const meta = { size: { control: 'select', options: SIZE_VALUES, - description: `Button size. Allowed values: ${SIZE_VALUES.join(', ')}. Note: size affects padding and, for \`circle\` layout, the overall diameter.`, + description: `Button size. Allowed values: ${SIZE_VALUES.join(', ')}. Note: size affects padding and, for \`circle\`/\`squared\` layouts, the overall box size (both render at the same size).`, table: { defaultValue: { summary: `${DEFAULT_SIZE}` } }, }, layout: { @@ -323,6 +323,44 @@ export const AllSizes: Story = { ), }; +/** Renders the icon-only `circle` and `squared` layouts across every available `size`, showing that both render at the same box size for a given `size`. */ +export const IconOnlySizes: Story = { + name: 'Icon-Only Layout Sizes', + args: { + variant: 'primary', + }, + render: (args) => ( +
+
+ {SIZE_VALUES.map((size) => ( + } + ariaLabel={`Circle ${size}`} + tooltipLabel={`Circle ${size}`} + /> + ))} +
+
+ {SIZE_VALUES.map((size) => ( + } + ariaLabel={`Squared ${size}`} + tooltipLabel={`Squared ${size}`} + /> + ))} +
+
+ ), +}; + /** Shows the button in its disabled state. */ export const Disabled: Story = { args: { diff --git a/src/components/Button/constants.ts b/src/components/Button/constants.ts index 22517be..5df5521 100644 --- a/src/components/Button/constants.ts +++ b/src/components/Button/constants.ts @@ -15,7 +15,9 @@ import { colorGray, colorBrandAux, } from '../../stylesheets/palette'; -import { spacingMedium, spacingSmall, spacingSmallMedium } from '../../stylesheets/sizing'; +import { + spacingSmall, spacingSmallMedium, spacingMedium, spacingXLarge, spacingXXLarge, +} from '../../stylesheets/sizing'; import { CSSColorPropertiesType, CSSSizePropertiesType, EssentialColorProperties } from './type'; const VARIANTS = { @@ -193,9 +195,11 @@ const CSS_COLOR_PROPERTIES_DISABLED: EssentialColorProperties = { const CSS_SIZE_PROPERTIES: CSSSizePropertiesType = { sm: { padding: `${spacingSmall} ${spacingSmallMedium}`, + iconBoxSize: spacingXLarge, }, md: { - padding: spacingMedium + padding: spacingMedium, + iconBoxSize: spacingXXLarge, }, }; diff --git a/src/components/Button/styles.ts b/src/components/Button/styles.ts index d384e80..b44c596 100644 --- a/src/components/Button/styles.ts +++ b/src/components/Button/styles.ts @@ -119,10 +119,15 @@ const stackedLayoutStyles = css` align-items: center; `; -const circleLayoutStyles = css` - border-radius: 50%; - width: 3rem; - height: 3rem; +// Shared by `circle` and `squared`: both are icon-only, fixed-box layouts that +// must render at the same width/height for a given `size` — they differ only +// in border-radius (round vs. slightly rounded square). +const iconOnlyBoxStyles = css` + ${({ $size }) => { + const safeSize = $size ?? DEFAULT_SIZE; + const { iconBoxSize } = CSS_SIZE_PROPERTIES[safeSize] ?? CSS_SIZE_PROPERTIES[DEFAULT_SIZE]; + return `width: ${iconBoxSize}; height: ${iconBoxSize};`; + }} aspect-ratio: 1; padding: 0; display: flex; @@ -130,16 +135,14 @@ const circleLayoutStyles = css` align-items: center; `; -// Icon-only, sized by its own (equal, non-text) padding rather than a fixed -// box — stays compact next to a single line of text instead of forcing a -// fixed height like circle/stacked do. -const squaredLayoutStyles = css` +const circleLayoutStyles = css` + ${iconOnlyBoxStyles} + border-radius: 50%; +`; + +const squaredLayoutStyles = css` + ${iconOnlyBoxStyles} border-radius: ${borderRadiusSmall}; - aspect-ratio: 1; - padding: ${spacingSmall}; - display: flex; - justify-content: center; - align-items: center; `; const defaultLayoutStyles = css` diff --git a/src/components/Button/type.ts b/src/components/Button/type.ts index 30c9281..bc38ae0 100644 --- a/src/components/Button/type.ts +++ b/src/components/Button/type.ts @@ -30,6 +30,7 @@ export type CSSColorPropertiesType = { export type SizeProperties = { padding: string; + iconBoxSize: string; } export type CSSSizePropertiesType = { @@ -97,7 +98,7 @@ type BaseButtonProps = { /** Visual variant controlling emphasis and background/border styling. @default 'primary' */ variant?: VariantType; - /** Button size; affects padding and, for the `circle` layout, the overall diameter. @default 'md' */ + /** Button size; affects padding and, for the `circle`/`squared` layouts, the overall box size (both render at the same size). @default 'md' */ size?: SizeType; /** Disables interaction and applies disabled styling. @default false */ diff --git a/src/stylesheets/sizing.ts b/src/stylesheets/sizing.ts index 1e0c76a..af3ef60 100644 --- a/src/stylesheets/sizing.ts +++ b/src/stylesheets/sizing.ts @@ -8,6 +8,7 @@ export const spacingMedium = '1rem'; // 16px export const spacingMediumLarge = '1.25rem'; // 20px export const spacingLarge = '1.5rem'; // 24px export const spacingXLarge = '2rem'; // 32px +export const spacingXXLarge = '3rem'; // 48px // Border sizes export const borderRadiusDefault = '1rem'; //16px