From aa9df91f33be76237b550d2606d03f3e320c1f17 Mon Sep 17 00:00:00 2001
From: Jon Rohan <yes@jonrohan.codes>
Date: Tue, 8 Oct 2024 23:29:29 +0000
Subject: [PATCH 1/2] Button width not working when style used inline vs sx

---
 packages/react/src/Button/ButtonBase.module.css   |  4 +---
 .../react/src/Button/IconButton.dev.stories.tsx   | 15 ++++++++++++++-
 2 files changed, 15 insertions(+), 4 deletions(-)

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

From c580434e6e0212a44ade48e2ee0b57c34b5b34b4 Mon Sep 17 00:00:00 2001
From: Jon Rohan <yes@jonrohan.codes>
Date: Tue, 8 Oct 2024 16:32:24 -0700
Subject: [PATCH 2/2] Create silver-cheetahs-compare.md

---
 .changeset/silver-cheetahs-compare.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/silver-cheetahs-compare.md

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.