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
primer · Oct 18, 2024 · 96ce586 · 96ce586
1 parent ccf7cbe
commit 96ce586
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 42 deletions.
diff --git a/.changeset/pink-lemons-clean.md 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
@@ -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
@@ -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')
-    })
-  })
 })