From 1fb2d5d955ce07f832c42a4578bf27abe32f3c79 Mon Sep 17 00:00:00 2001
From: Michael Taranto <michaeltaranto@users.noreply.github.com>
Date: Fri, 22 Nov 2024 16:14:33 +1100
Subject: [PATCH] Button, ButtonLink: Ensure label is vertically centered
 (#1656)

---
 .changeset/lemon-fishes-enjoy.md              | 14 +++++++
 .../components/Button/Button.screenshots.tsx  | 40 ++++++++++++++++++
 .../src/lib/components/Button/Button.tsx      |  4 +-
 .../ButtonLink/ButtonLink.screenshots.tsx     | 42 ++++++++++++++++++-
 4 files changed, 98 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/lemon-fishes-enjoy.md

diff --git a/.changeset/lemon-fishes-enjoy.md b/.changeset/lemon-fishes-enjoy.md
new file mode 100644
index 00000000000..6136e01864e
--- /dev/null
+++ 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
index 0cdc2c340dd..9454a585235 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
@@ -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
index 64b77be9ab2..a1855d290b3 100644
--- 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
index f8b3c06e1f0..0359c67fc9b 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
@@ -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>
+      ),
+    },
   ],
 };