Button, ButtonLink: Ensure inner label is full width

seek-oss · Dec 17, 2024 · f35c198 · f35c198
1 parent da61412
commit f35c198
Show file tree

Hide file tree

Showing 4 changed files with 72 additions and 0 deletions.
diff --git a/.changeset/four-cups-live.md 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
@@ -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
@@ -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
@@ -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>
+      ),
+    },
   ],
 };