From 96ce586a6fd831fe6dff8fc4ec770d4904e1e587 Mon Sep 17 00:00:00 2001
From: Jon Rohan <yes@jonrohan.codes>
Date: Fri, 18 Oct 2024 16:33:51 -0700
Subject: [PATCH] chore(Button): Move Button CSS module feature flag from staff
 to ga (#5086)

* Move Button CSS module feature flag from staff to ga

* Create pink-lemons-clean.md

* Replace flag in test also

* Update Button.test.tsx
---
 .changeset/pink-lemons-clean.md               |  5 ++
 packages/react/src/Button/ButtonBase.tsx      |  2 +-
 .../src/Button/__tests__/Button.test.tsx      | 83 ++++++++++---------
 3 files changed, 48 insertions(+), 42 deletions(-)
 create mode 100644 .changeset/pink-lemons-clean.md

diff --git a/.changeset/pink-lemons-clean.md b/.changeset/pink-lemons-clean.md
new file mode 100644
index 00000000000..f144d1577b5
--- /dev/null
+++ b/.changeset/pink-lemons-clean.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Move Button CSS module feature flag from staff to ga
diff --git a/packages/react/src/Button/ButtonBase.tsx b/packages/react/src/Button/ButtonBase.tsx
index 2cbbed2ca7d..dc4ffdcfad1 100644
--- a/packages/react/src/Button/ButtonBase.tsx
+++ b/packages/react/src/Button/ButtonBase.tsx
@@ -70,7 +70,7 @@ const ButtonBase = forwardRef(
       ...rest
     } = props
 
-    const enabled = useFeatureFlag('primer_react_css_modules_staff')
+    const enabled = useFeatureFlag('primer_react_css_modules_ga')
     const innerRef = React.useRef<HTMLButtonElement>(null)
     useRefObjectAsForwardedRef(forwardedRef, innerRef)
 
diff --git a/packages/react/src/Button/__tests__/Button.test.tsx b/packages/react/src/Button/__tests__/Button.test.tsx
index d1a0fe74ee0..3a5a253ff0e 100644
--- a/packages/react/src/Button/__tests__/Button.test.tsx
+++ b/packages/react/src/Button/__tests__/Button.test.tsx
@@ -25,6 +25,48 @@ const StatefulLoadingButton = (props: StatefulLoadingButtonProps) => {
   return <Button loading={isLoading} onClick={handleClick} {...props} />
 }
 
+describe('IconButton', () => {
+  it('should support `className` on the outermost element', () => {
+    const Element = () => <IconButton className={'test-class-name'} icon={SearchIcon} aria-label="Search button" />
+    const FeatureFlagElement = () => {
+      return (
+        <FeatureFlags
+          flags={{
+            primer_react_css_modules_team: true,
+            primer_react_css_modules_staff: true,
+            primer_react_css_modules_ga: true,
+          }}
+        >
+          <Element />
+        </FeatureFlags>
+      )
+    }
+    expect(render(<Element />).container.firstChild).toHaveClass('test-class-name')
+    expect(render(<FeatureFlagElement />).container.firstChild).toHaveClass('test-class-name')
+  })
+})
+
+describe('LinkButton', () => {
+  it('should support `className` on the outermost element', () => {
+    const Element = () => <LinkButton className={'test-class-name'} />
+    const FeatureFlagElement = () => {
+      return (
+        <FeatureFlags
+          flags={{
+            primer_react_css_modules_team: true,
+            primer_react_css_modules_staff: true,
+            primer_react_css_modules_ga: true,
+          }}
+        >
+          <Element />
+        </FeatureFlags>
+      )
+    }
+    expect(render(<Element />).container.firstChild).toHaveClass('test-class-name')
+    expect(render(<FeatureFlagElement />).container.firstChild).toHaveClass('test-class-name')
+  })
+})
+
 describe('Button', () => {
   behavesAsComponent({
     Component: TestButton,
@@ -320,45 +362,4 @@ describe('Button', () => {
     expect(tooltipEl).toBeInTheDocument()
     expect(triggerEl.getAttribute('aria-describedby')).toEqual(expect.stringContaining(tooltipEl.id))
   })
-
-  describe('with primer_react_css_modules_staff enabled', () => {
-    it('iconbutton should support custom `className` along with default classnames', () => {
-      const {container} = render(
-        <FeatureFlags
-          flags={{
-            primer_react_css_modules_staff: true,
-          }}
-        >
-          <IconButton className="test" aria-label="Test" icon={HeartIcon} />
-        </FeatureFlags>,
-      )
-      expect(container.firstChild).toHaveClass('IconButton')
-    })
-
-    it('button should support custom `className` along with default classnames', () => {
-      const {container} = render(
-        <FeatureFlags
-          flags={{
-            primer_react_css_modules_staff: true,
-          }}
-        >
-          <Button className="test">Hello</Button>
-        </FeatureFlags>,
-      )
-      expect(container.firstChild).toHaveClass('ButtonBase')
-    })
-
-    it('linkbutton should support custom `className` along with default classnames', () => {
-      const {container} = render(
-        <FeatureFlags
-          flags={{
-            primer_react_css_modules_staff: true,
-          }}
-        >
-          <LinkButton className="test">Hello</LinkButton>
-        </FeatureFlags>,
-      )
-      expect(container.firstChild).toHaveClass('ButtonBase')
-    })
-  })
 })