Add screenshot test

seek-oss · Nov 22, 2024 · f781c76 · f781c76
1 parent fdca66c
commit f781c76
Showing 1 changed file with 52 additions and 0 deletions.
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,57 @@ 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="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>
+      ),
+    },
   ],
 };