Merge c580434 into 6d8b7f4

primer · Oct 8, 2024 · c9a2c4d · c9a2c4d
2 parents 6d8b7f4 + c580434
commit c9a2c4d
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 4 deletions.
diff --git a/.changeset/silver-cheetahs-compare.md 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
@@ -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
@@ -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 = () => (
   <IconButton aria-label="Expand" variant="invisible" size="small" icon={ChevronDownIcon} sx={{color: 'red'}} />
 )
+
+export const CustomSizeWithStyleProp = () => (
+  <Box sx={{border: '1px solid', borderColor: 'border.default', display: 'inline-block'}}>
+    <IconButton
+      icon={BoldIcon}
+      aria-label="Bold"
+      size="large"
+      variant="invisible"
+      style={{width: '20px', height: '28px'}}
+    />
+  </Box>
+)