From f35c198440ed22c7774a15bbd176f1dddfc80ddd Mon Sep 17 00:00:00 2001
From: Michael Taranto <michael.taranto@gmail.com>
Date: Wed, 18 Dec 2024 08:46:46 +1100
Subject: [PATCH] Button, ButtonLink: Ensure inner label is full width

---
 .changeset/four-cups-live.md                  | 13 +++++++++
 .../components/Button/Button.screenshots.tsx  | 29 +++++++++++++++++++
 .../src/lib/components/Button/Button.tsx      |  1 +
 .../ButtonLink/ButtonLink.screenshots.tsx     | 29 +++++++++++++++++++
 4 files changed, 72 insertions(+)
 create mode 100644 .changeset/four-cups-live.md

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 = {
         </Stack>
       ),
     },
+    {
+      label:
+        'Ensure inner label element is full width (red dots should touch horizontal edges)',
+      Example: () => (
+        <Button>
+          <Box position="absolute" left={0}>
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              height={24}
+              width={24}
+            >
+              <circle cx="12" cy="12" r="10" fill="red" />
+            </svg>
+          </Box>
+          <Box position="absolute" right={0}>
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              height={24}
+              width={24}
+            >
+              <circle cx="12" cy="12" r="10" fill="red" />
+            </svg>
+          </Box>
+          Label
+        </Button>
+      ),
+    },
   ],
 };
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 = {
         </Stack>
       ),
     },
+    {
+      label:
+        'Ensure inner label element is full width (red dots should touch horizontal edges)',
+      Example: () => (
+        <ButtonLink href="#">
+          <Box position="absolute" left={0}>
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              height={24}
+              width={24}
+            >
+              <circle cx="12" cy="12" r="10" fill="red" />
+            </svg>
+          </Box>
+          <Box position="absolute" right={0}>
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              height={24}
+              width={24}
+            >
+              <circle cx="12" cy="12" r="10" fill="red" />
+            </svg>
+          </Box>
+          Label
+        </ButtonLink>
+      ),
+    },
   ],
 };