feat(Hidden): Convert Hidden to CSS modules behind feature flag (#5403)

* Convert Hidden to CSS modules behind feature flag

* Add changeset

* Add block fallback for display variable

Author: JelloBagel

.changeset/sixty-starfishes-grab.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": minor
+---
+
+Convert `Hidden` to CSS modules behind team feature flag

packages/react/src/Hidden/Hidden.module.css

@@ -0,0 +1,13 @@
+.Hidden {
+  @media screen and (--viewportRange-narrow) {
+    display: var(--hiddenDisplay-narrow, block);
+  }
+
+  @media screen and (--viewportRange-regular) {
+    display: var(--hiddenDisplay-regular, block);
+  }
+
+  @media screen and (--viewportRange-wide) {
+    display: var(--hiddenDisplay-wide, block);
+  }
+}

packages/react/src/Hidden/Hidden.tsx

@@ -1,19 +1,27 @@
-import React from 'react'
+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_team'
 
 type Viewport = 'narrow' | 'regular' | 'wide'
 
 export type HiddenProps = {
   when: Array<Viewport> | Viewport
   children: React.ReactNode
+  className?: string
+  style?: CSSProperties
 }
+
 /* Normalize the value that is received from the prop `when`.
  * For array types : ['narrow', 'wide'] -> {narrow: true, wide: true}
  * For string types: 'narrow' -> {narrow: true}
  */
-function normalize(hiddenViewports: Array<Viewport> | Viewport): ResponsiveValue<boolean> | null {
+function normalize(hiddenViewports: Array<Viewport> | Viewport): ResponsiveValue<boolean> {
   // For array types
   if (Array.isArray(hiddenViewports)) {
     const breakpoints: ResponsiveValue<boolean> = {}
@@ -30,11 +38,30 @@ function normalize(hiddenViewports: Array<Viewport> | Viewport): ResponsiveValue
   }
 }
 
-export const Hidden = ({when, children}: HiddenProps) => {
+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 styles = getBreakpointDeclarations(normalize(when), 'display', () => 'none')
-  // Render the children with the styles
-  return styles ? <Box sx={styles}>{children}</Box> : null
+  const breakpointSx = getBreakpointDeclarations(normalizedStyles, 'display', () => 'none')
+
+  return enabled ? (
+    <div
+      className={clsx(className, {[classes.Hidden]: enabled})}
+      style={
+        {
+          '--hiddenDisplay-narrow': normalizedStyles.narrow ? 'none' : undefined,
+          '--hiddenDisplay-regular': normalizedStyles.regular ? 'none' : undefined,
+          '--hiddenDisplay-wide': normalizedStyles.wide ? 'none' : undefined,
+          ...style,
+        } as CSSProperties
+      }
+    >
+      {children}
+    </div>
+  ) : (
+    <Box sx={breakpointSx}>{children}</Box>
+  )
 }
 
 Hidden.displayName = 'Hidden'