From 670a228bc2213c02922871231b12698054cdb677 Mon Sep 17 00:00:00 2001
From: Randall Krauskopf <104226843+randall-krauskopf@users.noreply.github.com>
Date: Tue, 29 Oct 2024 21:34:16 +0000
Subject: [PATCH 1/3] Migrate VisuallyHidden to CSS Modules

---
 .changeset/loud-spoons-explode.md             |  5 ++
 packages/react/src/DataTable/Pagination.tsx   |  2 +-
 .../VisuallyHidden/VisuallyHidden.module.css  | 10 ++++
 .../src/VisuallyHidden/VisuallyHidden.tsx     | 48 ++++++++++++++-----
 4 files changed, 52 insertions(+), 13 deletions(-)
 create mode 100644 .changeset/loud-spoons-explode.md
 create mode 100644 packages/react/src/VisuallyHidden/VisuallyHidden.module.css

diff --git a/.changeset/loud-spoons-explode.md b/.changeset/loud-spoons-explode.md
new file mode 100644
index 00000000000..a34200c9342
--- /dev/null
+++ b/.changeset/loud-spoons-explode.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': minor
+---
+
+Migrated `VisuallyHidden` to CSS Modules
diff --git a/packages/react/src/DataTable/Pagination.tsx b/packages/react/src/DataTable/Pagination.tsx
index 7a3bfdfea70..42ee2a1fccb 100644
--- a/packages/react/src/DataTable/Pagination.tsx
+++ b/packages/react/src/DataTable/Pagination.tsx
@@ -373,7 +373,7 @@ function Range({pageStart, pageEnd, totalCount}: RangeProps) {
       <Message value={`Showing ${start} through ${end} of ${totalCount}`} />
       <p className="TablePaginationRange">
         {start}
-        <VisuallyHidden as="span">&nbsp;through&nbsp;</VisuallyHidden>
+        <VisuallyHidden>&nbsp;through&nbsp;</VisuallyHidden>
         <span aria-hidden="true">‒</span>
         {end} of {totalCount}
       </p>
diff --git a/packages/react/src/VisuallyHidden/VisuallyHidden.module.css b/packages/react/src/VisuallyHidden/VisuallyHidden.module.css
new file mode 100644
index 00000000000..6a167181098
--- /dev/null
+++ b/packages/react/src/VisuallyHidden/VisuallyHidden.module.css
@@ -0,0 +1,10 @@
+.VisuallyHidden {
+  &:not(:focus):not(:active):not(:focus-within) {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    white-space: nowrap;
+    clip-path: inset(50%);
+  }
+}
\ No newline at end of file
diff --git a/packages/react/src/VisuallyHidden/VisuallyHidden.tsx b/packages/react/src/VisuallyHidden/VisuallyHidden.tsx
index 546b6d2d812..7b7fc7b99e4 100644
--- a/packages/react/src/VisuallyHidden/VisuallyHidden.tsx
+++ b/packages/react/src/VisuallyHidden/VisuallyHidden.tsx
@@ -1,6 +1,13 @@
 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_staff'
 
 /**
  * Provides a component that implements the "visually hidden" technique. This is
@@ -12,17 +19,34 @@ import sx from '../sx'
  *
  * @see https://www.scottohara.me/blog/2023/03/21/visually-hidden-hack.html
  */
-export const VisuallyHidden = 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;
-  }
+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}
+  `,
+)
 
-  ${sx}
-`
+export const VisuallyHidden = ({className, children, ...rest}: VisuallyHiddenProps) => {
+  const enabled = useFeatureFlag(CSS_MODULES_FEATURE_FLAG)
+  return (
+    <StyledVisuallyHidden className={clsx(className, enabled && classes.VisuallyHidden)} {...rest}>
+      {children}
+    </StyledVisuallyHidden>
+  )
+}
 
-export type VisuallyHiddenProps = React.ComponentPropsWithoutRef<typeof VisuallyHidden>
+export type VisuallyHiddenProps = React.PropsWithChildren<
+  HTMLAttributes<HTMLSpanElement> & {
+    className?: string
+  } & SxProp
+>

From b0da5dc92a8e296af7977b8efaba4fada2431e22 Mon Sep 17 00:00:00 2001
From: Randall Krauskopf <104226843+randall-krauskopf@users.noreply.github.com>
Date: Wed, 30 Oct 2024 13:22:21 +0000
Subject: [PATCH 2/3] lint fix

---
 packages/react/src/VisuallyHidden/VisuallyHidden.module.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react/src/VisuallyHidden/VisuallyHidden.module.css b/packages/react/src/VisuallyHidden/VisuallyHidden.module.css
index 6a167181098..0b7ea0f8148 100644
--- a/packages/react/src/VisuallyHidden/VisuallyHidden.module.css
+++ b/packages/react/src/VisuallyHidden/VisuallyHidden.module.css
@@ -7,4 +7,4 @@
     white-space: nowrap;
     clip-path: inset(50%);
   }
-}
\ No newline at end of file
+}

From 04dd8851d3798852b97523846356d1c66c31b57e Mon Sep 17 00:00:00 2001
From: Randall Krauskopf <104226843+randall-krauskopf@users.noreply.github.com>
Date: Wed, 30 Oct 2024 13:56:30 +0000
Subject: [PATCH 3/3] add storybook dev for flag testing

---
 .../VisuallyHidden/VisuallyHidden.dev.stories.tsx | 15 +++++++++++++++
 .../react/src/VisuallyHidden/VisuallyHidden.tsx   |  2 +-
 2 files changed, 16 insertions(+), 1 deletion(-)
 create mode 100644 packages/react/src/VisuallyHidden/VisuallyHidden.dev.stories.tsx

diff --git a/packages/react/src/VisuallyHidden/VisuallyHidden.dev.stories.tsx b/packages/react/src/VisuallyHidden/VisuallyHidden.dev.stories.tsx
new file mode 100644
index 00000000000..2941dcf449a
--- /dev/null
+++ b/packages/react/src/VisuallyHidden/VisuallyHidden.dev.stories.tsx
@@ -0,0 +1,15 @@
+import React from 'react'
+import type {Meta} from '@storybook/react'
+import {VisuallyHidden} from './VisuallyHidden'
+
+export default {
+  title: 'Components/VisuallyHidden/Dev',
+  component: VisuallyHidden,
+} as Meta<typeof VisuallyHidden>
+
+export const Default = () => (
+  <div>
+    <span>Visible Text</span>
+    <VisuallyHidden>Visually Hidden Text</VisuallyHidden>
+  </div>
+)
diff --git a/packages/react/src/VisuallyHidden/VisuallyHidden.tsx b/packages/react/src/VisuallyHidden/VisuallyHidden.tsx
index 7b7fc7b99e4..da4e99be21b 100644
--- a/packages/react/src/VisuallyHidden/VisuallyHidden.tsx
+++ b/packages/react/src/VisuallyHidden/VisuallyHidden.tsx
@@ -7,7 +7,7 @@ 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_staff'
+const CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_team'
 
 /**
  * Provides a component that implements the "visually hidden" technique. This is