From 8376b65ea5c1df8a1645e7815304c3ba0d7135de Mon Sep 17 00:00:00 2001
From: Jon Rohan <yes@jonrohan.codes>
Date: Mon, 17 Mar 2025 21:35:01 +0000
Subject: [PATCH] Remove CSS modules feature flag from VisuallyHidden

---
 .changeset/gold-ducks-grin.md                 |  5 +++
 .../__snapshots__/CounterLabel.test.tsx.snap  | 24 +-----------
 .../src/VisuallyHidden/VisuallyHidden.tsx     | 38 ++++++-------------
 .../__snapshots__/Autocomplete.test.tsx.snap  | 12 +-----
 4 files changed, 20 insertions(+), 59 deletions(-)
 create mode 100644 .changeset/gold-ducks-grin.md

diff --git a/.changeset/gold-ducks-grin.md b/.changeset/gold-ducks-grin.md
new file mode 100644
index 00000000000..548cab3ea44
--- /dev/null
+++ b/.changeset/gold-ducks-grin.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": minor
+---
+
+Remove CSS modules feature flag from VisuallyHidden
diff --git a/packages/react/src/CounterLabel/__snapshots__/CounterLabel.test.tsx.snap b/packages/react/src/CounterLabel/__snapshots__/CounterLabel.test.tsx.snap
index 77ff00aad26..27f0f50a32b 100644
--- a/packages/react/src/CounterLabel/__snapshots__/CounterLabel.test.tsx.snap
+++ b/packages/react/src/CounterLabel/__snapshots__/CounterLabel.test.tsx.snap
@@ -1,16 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`CounterLabel renders with secondary scheme when no "scheme" prop is provided 1`] = `
-.c0:not(:focus):not(:active):not(:focus-within) {
-  -webkit-clip-path: inset(50%);
-  clip-path: inset(50%);
-  height: 1px;
-  overflow: hidden;
-  position: absolute;
-  white-space: nowrap;
-  width: 1px;
-}
-
 <div>
   <span
     aria-hidden="true"
@@ -20,7 +10,7 @@ exports[`CounterLabel renders with secondary scheme when no "scheme" prop is pro
     1234
   </span>
   <span
-    class="c0"
+    class="VisuallyHidden"
   >
      (
     1234
@@ -30,16 +20,6 @@ exports[`CounterLabel renders with secondary scheme when no "scheme" prop is pro
 `;
 
 exports[`CounterLabel respects the primary "scheme" prop 1`] = `
-.c0:not(:focus):not(:active):not(:focus-within) {
-  -webkit-clip-path: inset(50%);
-  clip-path: inset(50%);
-  height: 1px;
-  overflow: hidden;
-  position: absolute;
-  white-space: nowrap;
-  width: 1px;
-}
-
 <div>
   <span
     aria-hidden="true"
@@ -49,7 +29,7 @@ exports[`CounterLabel respects the primary "scheme" prop 1`] = `
     1234
   </span>
   <span
-    class="c0"
+    class="VisuallyHidden"
   >
      (
     1234
diff --git a/packages/react/src/VisuallyHidden/VisuallyHidden.tsx b/packages/react/src/VisuallyHidden/VisuallyHidden.tsx
index de1addffe15..393eac0e732 100644
--- a/packages/react/src/VisuallyHidden/VisuallyHidden.tsx
+++ b/packages/react/src/VisuallyHidden/VisuallyHidden.tsx
@@ -1,13 +1,9 @@
-import styled from 'styled-components'
 import type {SxProp} from '../sx'
-import sx from '../sx'
-import {toggleStyledComponent} from '../internal/utils/toggleStyledComponent'
 import {clsx} from 'clsx'
-import {useFeatureFlag} from '../FeatureFlags'
 import React, {type HTMLAttributes} from 'react'
 import classes from './VisuallyHidden.module.css'
-
-const CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_ga'
+import {defaultSxProp} from '../utils/defaultSxProp'
+import Box from '../Box'
 
 /**
  * Provides a component that implements the "visually hidden" technique. This is
@@ -19,29 +15,19 @@ const CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_ga'
  *
  * @see https://www.scottohara.me/blog/2023/03/21/visually-hidden-hack.html
  */
-const StyledVisuallyHidden = toggleStyledComponent(
-  CSS_MODULES_FEATURE_FLAG,
-  'span',
-  styled.span<SxProp>`
-    &:not(:focus):not(:active):not(:focus-within) {
-      clip-path: inset(50%);
-      height: 1px;
-      overflow: hidden;
-      position: absolute;
-      white-space: nowrap;
-      width: 1px;
-    }
-
-    ${sx}
-  `,
-)
+export const VisuallyHidden = ({className, children, sx: sxProp = defaultSxProp, ...rest}: VisuallyHiddenProps) => {
+  if (sxProp !== defaultSxProp) {
+    return (
+      <Box sx={sxProp} className={clsx(className, classes.VisuallyHidden)} {...rest}>
+        {children}
+      </Box>
+    )
+  }
 
-export const VisuallyHidden = ({className, children, ...rest}: VisuallyHiddenProps) => {
-  const enabled = useFeatureFlag(CSS_MODULES_FEATURE_FLAG)
   return (
-    <StyledVisuallyHidden className={clsx(className, enabled && classes.VisuallyHidden)} {...rest}>
+    <span className={clsx(className, classes.VisuallyHidden)} {...rest}>
       {children}
-    </StyledVisuallyHidden>
+    </span>
   )
 }
 
diff --git a/packages/react/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap b/packages/react/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap
index a69251c0332..f8396d6b20a 100644
--- a/packages/react/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap
+++ b/packages/react/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap
@@ -539,16 +539,6 @@ exports[`snapshots renders a loading state 1`] = `
   justify-content: center;
 }
 
-.c2:not(:focus):not(:active):not(:focus-within) {
-  -webkit-clip-path: inset(50%);
-  clip-path: inset(50%);
-  height: 1px;
-  overflow: hidden;
-  position: absolute;
-  white-space: nowrap;
-  width: 1px;
-}
-
 .c0 {
   position: absolute;
   width: 1px;
@@ -603,7 +593,7 @@ exports[`snapshots renders a loading state 1`] = `
           />
         </svg>
         <span
-          className="c2"
+          className="VisuallyHidden"
           id=":r2h:"
         >
           Loading