Button width not working when style used inline vs sx

Author: jonrohan

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

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