diff --git a/.changeset/four-cups-live.md b/.changeset/four-cups-live.md new file mode 100644 index 00000000000..645f9016df5 --- /dev/null +++ b/.changeset/four-cups-live.md @@ -0,0 +1,13 @@ +--- +'braid-design-system': patch +--- + +--- +updated: + - Button + - ButtonLink +--- + +**Button, ButtonLink:** Ensure inner label is full width + +Ensuring the inner label element is full width to maintain backwards compatibility with previous block layout. diff --git a/packages/braid-design-system/src/lib/components/Button/Button.screenshots.tsx b/packages/braid-design-system/src/lib/components/Button/Button.screenshots.tsx index 9454a585235..ade1fac63ee 100644 --- a/packages/braid-design-system/src/lib/components/Button/Button.screenshots.tsx +++ b/packages/braid-design-system/src/lib/components/Button/Button.screenshots.tsx @@ -518,5 +518,34 @@ export const screenshots: ComponentScreenshot = { ), }, + { + label: + 'Ensure inner label element is full width (red dots should touch horizontal edges)', + Example: () => ( + + ), + }, ], }; diff --git a/packages/braid-design-system/src/lib/components/Button/Button.tsx b/packages/braid-design-system/src/lib/components/Button/Button.tsx index a1855d290b3..30e7c42082c 100644 --- a/packages/braid-design-system/src/lib/components/Button/Button.tsx +++ b/packages/braid-design-system/src/lib/components/Button/Button.tsx @@ -361,6 +361,7 @@ export const ButtonText = ({ position="relative" display="flex" justifyContent="center" + flexGrow={1} flexWrap="wrap" overflow="hidden" pointerEvents="none" diff --git a/packages/braid-design-system/src/lib/components/ButtonLink/ButtonLink.screenshots.tsx b/packages/braid-design-system/src/lib/components/ButtonLink/ButtonLink.screenshots.tsx index 0359c67fc9b..2bdc789f587 100644 --- a/packages/braid-design-system/src/lib/components/ButtonLink/ButtonLink.screenshots.tsx +++ b/packages/braid-design-system/src/lib/components/ButtonLink/ButtonLink.screenshots.tsx @@ -325,5 +325,34 @@ export const screenshots: ComponentScreenshot = { ), }, + { + label: + 'Ensure inner label element is full width (red dots should touch horizontal edges)', + Example: () => ( + + + + + + + + + + + + Label + + ), + }, ], };