add flex-shrink

primer · Dec 19, 2024 · ca9d935 · ca9d935
1 parent 00600f7
commit ca9d935
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 0 deletions.
diff --git a/e2e/components/IconButton.test.ts b/e2e/components/IconButton.test.ts
@@ -371,4 +371,16 @@ test.describe('IconButton', () => {
       })
     }
   })
+  test.describe('In Flex Container', () => {
+    for (const theme of themes) {
+      test('default @vrt', async ({page}) => {
+        await visit(page, {
+          id: 'components-iconbutton-devonly--icon-button-within-flex-container',
+        })
+
+        // Default state
+        expect(await page.screenshot()).toMatchSnapshot(`IconButton.In Flex Container.${theme}.png`)
+      })
+    }
+  })
 })
diff --git a/packages/react/src/Button/ButtonBase.module.css b/packages/react/src/Button/ButtonBase.module.css
@@ -75,6 +75,7 @@
     /* stylelint-disable-next-line primer/spacing */
     padding: unset;
     place-content: center;
+    flex-shrink: 0;
 
     &:where([data-size='small']) {
       width: var(--control-small-size);

diff --git a/packages/react/src/Button/IconButton.dev.stories.tsx b/packages/react/src/Button/IconButton.dev.stories.tsx
@@ -2,6 +2,7 @@ import {BoldIcon, ChevronDownIcon} from '@primer/octicons-react'
 import React from 'react'
 import {IconButton} from '.'
 import Box from '../Box'
+import {Stack} from '../Stack'
 
 export default {
   title: 'Components/IconButton/DevOnly',
@@ -38,3 +39,16 @@ export const CustomSizeWithStyleProp = () => (
     />
   </Box>
 )
+
+export const IconButtonWithinFlexContainer = () => (
+  <Stack direction="horizontal">
+    <span>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore
+      magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+      Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+    </span>
+
+    <IconButton icon={BoldIcon} aria-label="Icon button" />
+  </Stack>
+)