diff --git a/.changeset/silver-cheetahs-compare.md b/.changeset/silver-cheetahs-compare.md new file mode 100644 index 00000000000..cb207d8e358 --- /dev/null +++ b/.changeset/silver-cheetahs-compare.md @@ -0,0 +1,5 @@ +--- +"@primer/react": patch +--- + +Bug fix for `IconButton` to respect the `style` prop width when the feature flag is on. diff --git a/packages/react/src/Button/ButtonBase.module.css b/packages/react/src/Button/ButtonBase.module.css index ee184dec98b..19464c3c4e4 100644 --- a/packages/react/src/Button/ButtonBase.module.css +++ b/packages/react/src/Button/ButtonBase.module.css @@ -68,7 +68,7 @@ /* IconButton */ - &:where(.IconButton) { + &.IconButton { display: inline-grid; width: var(--control-medium-size); min-width: unset; @@ -78,12 +78,10 @@ &:where([data-size='small']) { width: var(--control-small-size); - min-width: var(--control-small-size); } &:where([data-size='large']) { width: var(--control-large-size); - min-width: var(--control-large-size); } } diff --git a/packages/react/src/Button/IconButton.dev.stories.tsx b/packages/react/src/Button/IconButton.dev.stories.tsx index dd0bffffbe5..bc772a04f28 100644 --- a/packages/react/src/Button/IconButton.dev.stories.tsx +++ b/packages/react/src/Button/IconButton.dev.stories.tsx @@ -1,6 +1,7 @@ -import {ChevronDownIcon} from '@primer/octicons-react' +import {BoldIcon, ChevronDownIcon} from '@primer/octicons-react' import React from 'react' import {IconButton} from '.' +import Box from '../Box' export default { title: 'Components/IconButton/DevOnly', @@ -25,3 +26,15 @@ export const CustomSizeWithMedia = () => { export const CustomIconColor = () => ( ) + +export const CustomSizeWithStyleProp = () => ( + + + +)