diff --git a/.changeset/short-fireants-jog.md b/.changeset/short-fireants-jog.md new file mode 100644 index 00000000000..da0b60ece71 --- /dev/null +++ b/.changeset/short-fireants-jog.md @@ -0,0 +1,5 @@ +--- +"@primer/react": patch +--- + +Add `flex-shrink` to IconButton diff --git a/e2e/components/IconButton.test.ts b/e2e/components/IconButton.test.ts index 83b00e325e1..cea9f1af0ae 100644 --- a/e2e/components/IconButton.test.ts +++ b/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', + }, + }, + }) + }) + }) + } + }) }) diff --git a/packages/react/src/Button/ButtonBase.module.css b/packages/react/src/Button/ButtonBase.module.css index 3df7e8c1e48..00c49d97207 100644 --- 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 index bc772a04f28..0850080490e 100644 --- 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 = () => ( /> ) + +export const IconButtonWithinFlexContainer = () => ( + + + 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. + + + + +) diff --git a/packages/react/src/TreeView/TreeView.module.css b/packages/react/src/TreeView/TreeView.module.css index 70be89a0310..40ded1ddc36 100644 --- a/packages/react/src/TreeView/TreeView.module.css +++ b/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 { diff --git a/packages/react/src/TreeView/TreeView.tsx b/packages/react/src/TreeView/TreeView.tsx index cb043e06f04..db2564f3a4a 100644 --- a/packages/react/src/TreeView/TreeView.tsx +++ b/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 {