Remove the CSS modules feature flag from the Hidden component (#5683)

* Remove the CSS modules feature flag from the Hidden component

* Create violet-ladybugs-melt.md

* Remove unused imports

Author: jonrohan

.changeset/violet-ladybugs-melt.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Remove the CSS modules feature flag from the Hidden component

packages/react/src/Hidden/Hidden.test.tsx

@@ -2,8 +2,7 @@ import React from 'react'
 import {render} from '@testing-library/react'
 import {Hidden} from '.'
 import MatchMediaMock from 'jest-matchmedia-mock'
-import {behavesAsComponent, checkExports, renderStyles, checkStoriesForAxeViolations} from '../utils/testing'
-import {mediaQueries} from '../utils/layout'
+import {behavesAsComponent, checkExports, checkStoriesForAxeViolations} from '../utils/testing'
 
 let matchMedia: MatchMediaMock
 describe('Hidden', () => {
@@ -40,37 +39,31 @@ describe('Hidden', () => {
   })
 
   it('renders the styles as expected when a single viewport value is provided as a string via `when` prop', () => {
-    const expectedStyles = {
-      // `.replace` is used because renderStyles return the JSON object without a space after the column
-      [`${mediaQueries.regular.replace(': ', ':')}`]: {
-        display: 'none',
-      },
-    }
-    expect(
-      renderStyles(
+    const hiddenElement = render(
+      <div data-testid="hidden-regular">
         <Hidden when="regular">
           <div>This is hidden when regular viewports</div>
-        </Hidden>,
-      ),
-    ).toEqual(expect.objectContaining(expectedStyles))
+        </Hidden>
+      </div>,
+    )
+    expect(hiddenElement.getAllByTestId('hidden-regular')[0].firstChild).toHaveAttribute(
+      'style',
+      '--hiddenDisplay-regular: none;',
+    )
   })
 
   it('renders the styles as expected when multiple viewport values are provided as an array via `when` prop', () => {
-    const expectedStyles = {
-      [`${mediaQueries.narrow.replace(': ', ':')}`]: {
-        display: 'none',
-      },
-      [`${mediaQueries.wide.replace(': ', ':')}`]: {
-        display: 'none',
-      },
-    }
-    expect(
-      renderStyles(
+    const hiddenElement = render(
+      <div data-testid="hidden-regular">
         <Hidden when={['narrow', 'wide']}>
-          <div>This is hidden when regular and wide viewports</div>
-        </Hidden>,
-      ),
-    ).toEqual(expect.objectContaining(expectedStyles))
+          <div>This is hidden when regular viewports</div>
+        </Hidden>
+      </div>,
+    )
+    expect(hiddenElement.getAllByTestId('hidden-regular')[0].firstChild).toHaveAttribute(
+      'style',
+      '--hiddenDisplay-narrow: none; --hiddenDisplay-wide: none;',
+    )
   })
 })
 

packages/react/src/Hidden/Hidden.tsx

@@ -1,13 +1,8 @@
 import React, {type CSSProperties} from 'react'
 import {clsx} from 'clsx'
 import type {ResponsiveValue} from '../hooks/useResponsiveValue'
-import {getBreakpointDeclarations} from '../utils/getBreakpointDeclarations'
-import Box from '../Box'
-import {useFeatureFlag} from '../FeatureFlags'
 import classes from './Hidden.module.css'
 
-const CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_staff'
-
 type Viewport = 'narrow' | 'regular' | 'wide'
 
 export type HiddenProps = {
@@ -39,15 +34,11 @@ function normalize(hiddenViewports: Array<Viewport> | Viewport): ResponsiveValue
 }
 
 export const Hidden = ({when, className, style, children}: HiddenProps) => {
-  const enabled = useFeatureFlag(CSS_MODULES_FEATURE_FLAG)
   const normalizedStyles = normalize(when)
 
-  // Get breakpoint declarations for the normalized ResponsiveValue object
-  const breakpointSx = getBreakpointDeclarations(normalizedStyles, 'display', () => 'none')
-
-  return enabled ? (
+  return (
     <div
-      className={clsx(className, {[classes.Hidden]: enabled})}
+      className={clsx(className, classes.Hidden)}
       style={
         {
           '--hiddenDisplay-narrow': normalizedStyles.narrow ? 'none' : undefined,
@@ -59,8 +50,6 @@ export const Hidden = ({when, className, style, children}: HiddenProps) => {
     >
       {children}
     </div>
-  ) : (
-    <Box sx={breakpointSx}>{children}</Box>
   )
 }
 

packages/react/src/Hidden/__snapshots__/Hidden.test.tsx.snap

@@ -1,15 +1,10 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Hidden renders \`when\` prop as expected 1`] = `
-@media screen and (max-width:calc(768px - 0.02px)) {
-  .c0 {
-    display: none;
-  }
-}
-
 <div>
   <div
-    class="c0"
+    class="Hidden"
+    style="--hiddenDisplay-narrow: none;"
   >
     <div>
       Hidden when narrow