(
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;
-}
-
(
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`
- &: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 (
+
+ {children}
+
+ )
+ }
-export const VisuallyHidden = ({className, children, ...rest}: VisuallyHiddenProps) => {
- const enabled = useFeatureFlag(CSS_MODULES_FEATURE_FLAG)
return (
-
+
{children}
-
+
)
}
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`] = `
/>
Loading