Button, ButtonLink: Ensure label is vertically centered (#1656)

seek-oss · Nov 22, 2024 · 1fb2d5d · 1fb2d5d
1 parent 02aba06
commit 1fb2d5d
Show file tree

Hide file tree

Showing 4 changed files with 98 additions and 2 deletions.
diff --git a/.changeset/lemon-fishes-enjoy.md b/.changeset/lemon-fishes-enjoy.md
@@ -0,0 +1,14 @@
+---
+'braid-design-system': patch
+---
+
+---
+updated:
+  - Button
+  - ButtonLink
+---
+
+**Button, ButtonLink:** Ensure label is vertically centered
+
+Fixes a bug where a `ButtonLink` label would not be vertically centered inside containers that stretch elements to fill the available space, such as `Tiles`.
+While the issue did not affect `Button`, the fix was applied to both components to ensure there is no reliance on browser default styling.
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
@@ -478,5 +478,45 @@ export const screenshots: ComponentScreenshot = {
         </Stack>
       ),
     },
+    {
+      label:
+        'Vertically centered labels in containers that stretch elements to fill',
+      Example: () => (
+        <Stack space="small">
+          <Box
+            display="flex"
+            gap="small"
+            style={{ alignItems: 'stretch', width: 300, maxWidth: '100%' }}
+          >
+            <Button>Non elit</Button>
+            <Button>Non elit do do incididunt nostrud</Button>
+          </Box>
+          <Box
+            display="flex"
+            gap="small"
+            style={{ alignItems: 'stretch', width: 300, maxWidth: '100%' }}
+          >
+            <Button icon={<IconWorkExperience />} iconPosition="leading">
+              Non elit
+            </Button>
+            <Button icon={<IconWorkExperience />} iconPosition="leading">
+              Non elit do do incididunt nostrud
+            </Button>
+          </Box>
+          <Box
+            display="flex"
+            gap="small"
+            style={{ alignItems: 'stretch', width: 300, maxWidth: '100%' }}
+          >
+            <Button icon={<IconWorkExperience />} iconPosition="trailing">
+              Non elit
+            </Button>
+            <Button icon={<IconWorkExperience />} iconPosition="trailing">
+              Non elit do do incididunt nostrud
+            </Button>
+          </Box>
+        </Stack>
+      ),
+    },
   ],
 };
diff --git a/packages/braid-design-system/src/lib/components/Button/Button.tsx b/packages/braid-design-system/src/lib/components/Button/Button.tsx
@@ -440,7 +440,9 @@ export const useButtonStyles = ({
     borderRadius: radius,
     width: 'full',
     position: 'relative',
-    display: 'block',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
     transform: { active: 'touchable' },
     transition: 'touchable',
     outline: '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
@@ -1,6 +1,6 @@
 import React, { type ReactNode } from 'react';
 import type { ComponentScreenshot } from 'site/types';
-import { ButtonLink, IconSend, Stack, Inline, Text, IconArrow } from '../';
+import { ButtonLink, IconSend, Stack, Inline, Text, IconArrow, Box } from '../';
 
 const Container = ({ children }: { children: ReactNode }) => (
   <div style={{ maxWidth: '300px' }}>{children}</div>
@@ -285,5 +285,45 @@ export const screenshots: ComponentScreenshot = {
         </Stack>
       ),
     },
+    {
+      label:
+        'Vertically centered labels in containers that stretch elements to fill',
+      Example: () => (
+        <Stack space="small">
+          <Box
+            display="flex"
+            gap="small"
+            style={{ alignItems: 'stretch', width: 300, maxWidth: '100%' }}
+          >
+            <ButtonLink href="#">Non elit</ButtonLink>
+            <ButtonLink href="#">Non elit do do incididunt nostrud</ButtonLink>
+          </Box>
+          <Box
+            display="flex"
+            gap="small"
+            style={{ alignItems: 'stretch', width: 300, maxWidth: '100%' }}
+          >
+            <ButtonLink href="#" icon={<IconSend />} iconPosition="leading">
+              Non elit
+            </ButtonLink>
+            <ButtonLink href="#" icon={<IconSend />} iconPosition="leading">
+              Non elit do do incididunt nostrud
+            </ButtonLink>
+          </Box>
+          <Box
+            display="flex"
+            gap="small"
+            style={{ alignItems: 'stretch', width: 300, maxWidth: '100%' }}
+          >
+            <ButtonLink href="#" icon={<IconSend />} iconPosition="trailing">
+              Non elit
+            </ButtonLink>
+            <ButtonLink href="#" icon={<IconSend />} iconPosition="trailing">
+              Non elit do do incididunt nostrud
+            </ButtonLink>
+          </Box>
+        </Stack>
+      ),
+    },
   ],
 };