From a48d1f29bbb0a3fb4d5c911b35606a5046edd6c7 Mon Sep 17 00:00:00 2001
From: Stephanie Hong <41085564+JelloBagel@users.noreply.github.com>
Date: Thu, 12 Dec 2024 17:43:23 +0000
Subject: [PATCH 1/8] Add DeprecatedSxProp

---
 packages/react/src/sx.ts | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/packages/react/src/sx.ts b/packages/react/src/sx.ts
index 5b9a20fc011..d66c30672df 100644
--- a/packages/react/src/sx.ts
+++ b/packages/react/src/sx.ts
@@ -29,6 +29,11 @@ export interface SxProp {
   sx?: BetterSystemStyleObject
 }
 
+export interface DeprecatedSxProp {
+  /** @deprecated Update `sx` using CSS modules or style. */
+  sx?: BetterSystemStyleObject
+}
+
 const sx = (props: SxProp) => css(props.sx)
 
 export default sx

From e897770baafd6f38d6923b7e6ed41f435ad374aa Mon Sep 17 00:00:00 2001
From: Stephanie Hong <41085564+JelloBagel@users.noreply.github.com>
Date: Thu, 12 Dec 2024 17:44:02 +0000
Subject: [PATCH 2/8] Deprecate sx prop support from LabelGroup

---
 .../src/LabelGroup/LabelGroup.module.css      | 14 +++++++++++++
 packages/react/src/LabelGroup/LabelGroup.tsx  | 20 +++++++++----------
 2 files changed, 23 insertions(+), 11 deletions(-)
 create mode 100644 packages/react/src/LabelGroup/LabelGroup.module.css

diff --git a/packages/react/src/LabelGroup/LabelGroup.module.css b/packages/react/src/LabelGroup/LabelGroup.module.css
new file mode 100644
index 00000000000..b9d5ab7462b
--- /dev/null
+++ b/packages/react/src/LabelGroup/LabelGroup.module.css
@@ -0,0 +1,14 @@
+.IconButton_0 {
+  flex-shrink: 0;
+}
+
+.Div_0 {
+  display: flex;
+  align-items: flex-start;
+}
+
+.Div_1 {
+  gap: var(--base-size-4);
+  display: flex;
+  flex-wrap: wrap;
+}
diff --git a/packages/react/src/LabelGroup/LabelGroup.tsx b/packages/react/src/LabelGroup/LabelGroup.tsx
index 5aaf6f8edd8..bcbc83c6414 100644
--- a/packages/react/src/LabelGroup/LabelGroup.tsx
+++ b/packages/react/src/LabelGroup/LabelGroup.tsx
@@ -5,11 +5,11 @@ import {getFocusableChild} from '@primer/behaviors/utils'
 import {get} from '../constants'
 import VisuallyHidden from '../_VisuallyHidden'
 import {AnchoredOverlay} from '../AnchoredOverlay'
-import Box from '../Box'
 import {Button, IconButton} from '../Button'
 import {useTheme} from '../ThemeProvider'
-import type {SxProp} from '../sx'
+import type {DeprecatedSxProp} from '../sx'
 import sx from '../sx'
+import classes from './LabelGroup.module.css'
 
 export type LabelGroupProps = {
   /** Customize the element type of the rendered container */
@@ -18,12 +18,12 @@ export type LabelGroupProps = {
   overflowStyle?: 'inline' | 'overlay'
   /** How many tokens to show. `'auto'` truncates the tokens to fit in the parent container. Passing a number will truncate after that number tokens. If this is undefined, tokens will never be truncated. */
   visibleChildCount?: 'auto' | number
-} & SxProp
+} & DeprecatedSxProp
 
-const StyledLabelGroupContainer = styled.div<SxProp>`
+const StyledLabelGroupContainer = styled.div<DeprecatedSxProp>`
   display: flex;
   flex-wrap: nowrap;
-  gap: ${get('space.1')};
+  gap: var(--base-size-4);
   line-height: 1;
   max-width: 100%;
   overflow: hidden;
@@ -136,18 +136,16 @@ const OverlayToggle: React.FC<
       )}
       focusZoneSettings={{disabled: true}}
     >
-      <Box alignItems="flex-start" display="flex" width={overlayWidth} padding={`${overlayPaddingPx}px`}>
-        <Box display="flex" flexWrap="wrap" sx={{gap: 1}}>
-          {children}
-        </Box>
+      <div className={classes.Div_0} style={{width: overlayWidth, padding: `${overlayPaddingPx}px`}}>
+        <div className={classes.Div_1}>{children}</div>
         <IconButton
           onClick={closeOverflowOverlay}
           icon={XIcon}
           aria-label="Close"
           variant="invisible"
-          sx={{flexShrink: 0}}
+          className={classes.IconButton_0}
         />
-      </Box>
+      </div>
     </AnchoredOverlay>
   ) : null
 

From e68d80e814ad5268d0e86a583c9c58c6f9e14662 Mon Sep 17 00:00:00 2001
From: Stephanie Hong <41085564+JelloBagel@users.noreply.github.com>
Date: Thu, 12 Dec 2024 17:44:30 +0000
Subject: [PATCH 3/8] Add changeset

---
 .changeset/empty-feet-roll.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/empty-feet-roll.md

diff --git a/.changeset/empty-feet-roll.md b/.changeset/empty-feet-roll.md
new file mode 100644
index 00000000000..667e3605a52
--- /dev/null
+++ b/.changeset/empty-feet-roll.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": minor
+---
+
+Deprecate sx prop from LabelGroup

From 121e737b4be41829925b61fa241b1bc29f2bac4d Mon Sep 17 00:00:00 2001
From: Stephanie Hong <41085564+JelloBagel@users.noreply.github.com>
Date: Thu, 12 Dec 2024 19:25:14 +0000
Subject: [PATCH 4/8] Remove sxProp support from LabelGroup

---
 packages/react/src/LabelGroup/LabelGroup.tsx | 12 +++---------
 1 file changed, 3 insertions(+), 9 deletions(-)

diff --git a/packages/react/src/LabelGroup/LabelGroup.tsx b/packages/react/src/LabelGroup/LabelGroup.tsx
index bcbc83c6414..d65619565fd 100644
--- a/packages/react/src/LabelGroup/LabelGroup.tsx
+++ b/packages/react/src/LabelGroup/LabelGroup.tsx
@@ -7,8 +7,6 @@ import VisuallyHidden from '../_VisuallyHidden'
 import {AnchoredOverlay} from '../AnchoredOverlay'
 import {Button, IconButton} from '../Button'
 import {useTheme} from '../ThemeProvider'
-import type {DeprecatedSxProp} from '../sx'
-import sx from '../sx'
 import classes from './LabelGroup.module.css'
 
 export type LabelGroupProps = {
@@ -18,9 +16,9 @@ export type LabelGroupProps = {
   overflowStyle?: 'inline' | 'overlay'
   /** How many tokens to show. `'auto'` truncates the tokens to fit in the parent container. Passing a number will truncate after that number tokens. If this is undefined, tokens will never be truncated. */
   visibleChildCount?: 'auto' | number
-} & DeprecatedSxProp
+}
 
-const StyledLabelGroupContainer = styled.div<DeprecatedSxProp>`
+const StyledLabelGroupContainer = styled.div`
   display: flex;
   flex-wrap: nowrap;
   gap: var(--base-size-4);
@@ -38,8 +36,6 @@ const StyledLabelGroupContainer = styled.div<DeprecatedSxProp>`
     margin-block-end: 0;
     list-style-type: none;
   }
-
-  ${sx};
 `
 
 const ItemWrapper = styled.div`
@@ -154,7 +150,6 @@ const LabelGroup: React.FC<React.PropsWithChildren<LabelGroupProps>> = ({
   children,
   visibleChildCount,
   overflowStyle = 'overlay',
-  sx: sxProp,
   as = 'ul',
 }) => {
   const containerRef = React.useRef<HTMLElement>(null)
@@ -334,7 +329,6 @@ const LabelGroup: React.FC<React.PropsWithChildren<LabelGroupProps>> = ({
       ref={containerRef}
       data-overflow={overflowStyle === 'inline' && isOverflowShown ? 'inline' : undefined}
       data-list={isList || undefined}
-      sx={sxProp}
       as={as}
     >
       {React.Children.map(children, (child, index) => (
@@ -376,7 +370,7 @@ const LabelGroup: React.FC<React.PropsWithChildren<LabelGroupProps>> = ({
       </ToggleWrapper>
     </StyledLabelGroupContainer>
   ) : (
-    <StyledLabelGroupContainer data-overflow="inline" data-list={isList || undefined} sx={sxProp} as={as}>
+    <StyledLabelGroupContainer data-overflow="inline" data-list={isList || undefined} as={as}>
       {isList
         ? React.Children.map(children, (child, index) => {
             return <li key={index}>{child}</li>

From 8176260f74234e7fa60c1025122f0a3c9067e9ae Mon Sep 17 00:00:00 2001
From: Stephanie Hong <41085564+JelloBagel@users.noreply.github.com>
Date: Thu, 12 Dec 2024 19:40:54 +0000
Subject: [PATCH 5/8] Skip sx test for LabelGroup

---
 packages/react/src/__tests__/LabelGroup.test.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react/src/__tests__/LabelGroup.test.tsx b/packages/react/src/__tests__/LabelGroup.test.tsx
index 77a89f65581..d0b972abc16 100644
--- a/packages/react/src/__tests__/LabelGroup.test.tsx
+++ b/packages/react/src/__tests__/LabelGroup.test.tsx
@@ -29,7 +29,7 @@ describe('LabelGroup', () => {
     thresholds: [],
   })) as jest.Mock<IntersectionObserver>
 
-  behavesAsComponent({Component: LabelGroup, options: {skipAs: true}})
+  behavesAsComponent({Component: LabelGroup, options: {skipAs: true, skipSx: true}})
 
   checkExports('LabelGroup', {
     default: LabelGroup,

From a32da291b2bc50ac55923756d59bdb3acf69d26f Mon Sep 17 00:00:00 2001
From: Stephanie Hong <41085564+JelloBagel@users.noreply.github.com>
Date: Fri, 13 Dec 2024 17:18:58 +0000
Subject: [PATCH 6/8] Rename CSS classes

---
 packages/react/src/LabelGroup/LabelGroup.module.css | 6 +++---
 packages/react/src/LabelGroup/LabelGroup.tsx        | 6 +++---
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/react/src/LabelGroup/LabelGroup.module.css b/packages/react/src/LabelGroup/LabelGroup.module.css
index b9d5ab7462b..6ba3521cc62 100644
--- a/packages/react/src/LabelGroup/LabelGroup.module.css
+++ b/packages/react/src/LabelGroup/LabelGroup.module.css
@@ -1,13 +1,13 @@
-.IconButton_0 {
+.CloseButton {
   flex-shrink: 0;
 }
 
-.Div_0 {
+.OverlayToggle_Container {
   display: flex;
   align-items: flex-start;
 }
 
-.Div_1 {
+.OverlayToggle_LabelWrapper {
   gap: var(--base-size-4);
   display: flex;
   flex-wrap: wrap;
diff --git a/packages/react/src/LabelGroup/LabelGroup.tsx b/packages/react/src/LabelGroup/LabelGroup.tsx
index d65619565fd..89c0d0d1209 100644
--- a/packages/react/src/LabelGroup/LabelGroup.tsx
+++ b/packages/react/src/LabelGroup/LabelGroup.tsx
@@ -132,14 +132,14 @@ const OverlayToggle: React.FC<
       )}
       focusZoneSettings={{disabled: true}}
     >
-      <div className={classes.Div_0} style={{width: overlayWidth, padding: `${overlayPaddingPx}px`}}>
-        <div className={classes.Div_1}>{children}</div>
+      <div className={classes.OverlayToggle_Container} style={{width: overlayWidth, padding: `${overlayPaddingPx}px`}}>
+        <div className={classes.OverlayToggle_LabelWrapper}>{children}</div>
         <IconButton
           onClick={closeOverflowOverlay}
           icon={XIcon}
           aria-label="Close"
           variant="invisible"
-          className={classes.IconButton_0}
+          className={classes.CloseButton}
         />
       </div>
     </AnchoredOverlay>

From 9d1757d264a214d752034b97c87c7fb07e438e92 Mon Sep 17 00:00:00 2001
From: Stephanie Hong <41085564+JelloBagel@users.noreply.github.com>
Date: Fri, 13 Dec 2024 19:05:43 +0000
Subject: [PATCH 7/8] Replace div with Stack

---
 .../src/LabelGroup/LabelGroup.module.css      | 15 +++--------
 packages/react/src/LabelGroup/LabelGroup.tsx  | 27 ++++++++++++-------
 2 files changed, 21 insertions(+), 21 deletions(-)

diff --git a/packages/react/src/LabelGroup/LabelGroup.module.css b/packages/react/src/LabelGroup/LabelGroup.module.css
index 6ba3521cc62..c623694e4cf 100644
--- a/packages/react/src/LabelGroup/LabelGroup.module.css
+++ b/packages/react/src/LabelGroup/LabelGroup.module.css
@@ -1,14 +1,7 @@
-.CloseButton {
-  flex-shrink: 0;
-}
-
-.OverlayToggle_Container {
-  display: flex;
-  align-items: flex-start;
+.OverlayToggle_LabelWrapper {
+  gap: var(--base-size-4) !important;
 }
 
-.OverlayToggle_LabelWrapper {
-  gap: var(--base-size-4);
-  display: flex;
-  flex-wrap: wrap;
+.OverlayToggle_CloseButtonWrapper {
+  min-inline-size: unset !important;
 }
diff --git a/packages/react/src/LabelGroup/LabelGroup.tsx b/packages/react/src/LabelGroup/LabelGroup.tsx
index 89c0d0d1209..80193753f59 100644
--- a/packages/react/src/LabelGroup/LabelGroup.tsx
+++ b/packages/react/src/LabelGroup/LabelGroup.tsx
@@ -7,6 +7,7 @@ import VisuallyHidden from '../_VisuallyHidden'
 import {AnchoredOverlay} from '../AnchoredOverlay'
 import {Button, IconButton} from '../Button'
 import {useTheme} from '../ThemeProvider'
+import {Stack, StackItem} from '../Stack/Stack'
 import classes from './LabelGroup.module.css'
 
 export type LabelGroupProps = {
@@ -132,16 +133,22 @@ const OverlayToggle: React.FC<
       )}
       focusZoneSettings={{disabled: true}}
     >
-      <div className={classes.OverlayToggle_Container} style={{width: overlayWidth, padding: `${overlayPaddingPx}px`}}>
-        <div className={classes.OverlayToggle_LabelWrapper}>{children}</div>
-        <IconButton
-          onClick={closeOverflowOverlay}
-          icon={XIcon}
-          aria-label="Close"
-          variant="invisible"
-          className={classes.CloseButton}
-        />
-      </div>
+      <Stack gap="none" direction="horizontal" style={{width: overlayWidth, padding: `${overlayPaddingPx}px`}}>
+        <StackItem>
+          <Stack
+            wrap="wrap"
+            gap="none"
+            align="start"
+            direction="horizontal"
+            className={classes.OverlayToggle_LabelWrapper}
+          >
+            {children}
+          </Stack>
+        </StackItem>
+        <StackItem className={classes.OverlayToggle_CloseButtonWrapper}>
+          <IconButton onClick={closeOverflowOverlay} icon={XIcon} aria-label="Close" variant="invisible" />
+        </StackItem>
+      </Stack>
     </AnchoredOverlay>
   ) : null
 

From 48a5d19098ba79c826ec52fe3db01db98c0dbc35 Mon Sep 17 00:00:00 2001
From: Stephanie Hong <41085564+JelloBagel@users.noreply.github.com>
Date: Fri, 13 Dec 2024 19:07:31 +0000
Subject: [PATCH 8/8] Update changeset

---
 .changeset/empty-feet-roll.md   | 5 -----
 .changeset/hip-balloons-wash.md | 5 +++++
 2 files changed, 5 insertions(+), 5 deletions(-)
 delete mode 100644 .changeset/empty-feet-roll.md
 create mode 100644 .changeset/hip-balloons-wash.md

diff --git a/.changeset/empty-feet-roll.md b/.changeset/empty-feet-roll.md
deleted file mode 100644
index 667e3605a52..00000000000
--- a/.changeset/empty-feet-roll.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"@primer/react": minor
----
-
-Deprecate sx prop from LabelGroup
diff --git a/.changeset/hip-balloons-wash.md b/.changeset/hip-balloons-wash.md
new file mode 100644
index 00000000000..3a85c12fd76
--- /dev/null
+++ b/.changeset/hip-balloons-wash.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": major
+---
+
+Remove sx prop from LabelGroup