Add flex-shrink to IconButton + tests (#5467)

* add flex-shrink

* Create short-fireants-jog.md

* fix test

* try rename

* fix regression

* fine

* fix test

* test(e2e): update ActionBar test

* test(vrt): update snapshots

---------

Co-authored-by: Josh Black <joshblack@github.com>
Co-authored-by: langermank <langermank@users.noreply.github.com>

.changeset/short-fireants-jog.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Add `flex-shrink` to IconButton

e2e/components/IconButton.test.ts

@@ -371,4 +371,38 @@ test.describe('IconButton', () => {
       })
     }
   })
+
+  test.describe('Flex', () => {
+    for (const theme of themes) {
+      test.describe(theme, () => {
+        test('default @vrt', async ({page}) => {
+          await visit(page, {
+            id: 'components-iconbutton-devonly--icon-button-within-flex-container',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+
+          // Default state
+          expect(await page.screenshot()).toMatchSnapshot(`IconButton.Flex.${theme}.png`)
+        })
+
+        test('axe @aat', async ({page}) => {
+          await visit(page, {
+            id: 'components-iconbutton-devonly--icon-button-within-flex-container',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+          await expect(page).toHaveNoViolations({
+            rules: {
+              'color-contrast': {
+                enabled: theme !== 'dark_dimmed',
+              },
+            },
+          })
+        })
+      })
+    }
+  })
 })

e2e/components/drafts/ActionBar.test.ts

@@ -41,12 +41,15 @@ test.describe('ActionBar', () => {
             },
           })
           const toolbarButtonSelector = `button[data-component="IconButton"]`
-          await expect(page.locator(toolbarButtonSelector)).toHaveCount(10)
+          await expect(page.locator(toolbarButtonSelector)).toHaveCount(9)
           await page.setViewportSize({width: viewports['primer.breakpoint.xs'], height: 768})
-          await expect(page.locator(toolbarButtonSelector)).toHaveCount(6)
+          await page.getByLabel('Insert Link').waitFor({
+            state: 'hidden',
+          })
+          await expect(page.locator(toolbarButtonSelector)).toHaveCount(5)
           const moreButtonSelector = page.getByLabel('More Comment box toolbar items')
           await moreButtonSelector.click()
-          await expect(page.locator('ul[role="menu"]>li')).toHaveCount(5)
+          await expect(page.locator('ul[role="menu"] [role="menuitem"]')).toHaveCount(6)
         })
       })
     }

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);

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>
+)

packages/react/src/TreeView/TreeView.module.css

@@ -174,6 +174,10 @@
     display: flex;
     color: var(--fgColor-muted);
     grid-area: leadingAction;
+
+    & > button {
+      flex-shrink: 1;
+    }
   }
 
   .TreeViewItemLevelLine {

packages/react/src/TreeView/TreeView.tsx

@@ -242,6 +242,10 @@ const UlBox = toggleStyledComponent(
       display: flex;
       color: ${get('colors.fg.muted')};
       grid-area: leadingAction;
+
+      & > button {
+        flex-shrink: 1;
+      }
     }
 
     .PRIVATE_TreeView-item-level-line {