feat(VisuallyHidden): Convert VisuallyHidden to CSS module behind fea…

…ture flag (#5193)

* Migrate VisuallyHidden to CSS Modules

* lint fix

* add storybook dev for flag testing

.changeset/loud-spoons-explode.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': minor
+---
+
+Migrated `VisuallyHidden` to CSS Modules

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>

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>
+)

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%);
+  }
+}

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_team'
 
 /**
  * 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
+>