Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore(VisuallyHidden): Remove CSS modules feature flag from VisuallyHidden #5469

Draft
wants to merge 2 commits into
base: main
Choose a base branch
from
Draft

chore(VisuallyHidden): Remove CSS modules feature flag from VisuallyHidden #5469

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
bf976b4
Remove CSS modules feature flag from VisuallyHidden
jonrohan Dec 19, 2024
201f626
Create angry-bugs-dance.md
jonrohan Dec 19, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/angry-bugs-dance.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@primer/react": minor
---

Remove CSS modules feature flag from VisuallyHidden
24 changes: 2 additions & 22 deletions packages/react/src/CounterLabel/__snapshots__/CounterLabel.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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"
Expand All @@ -20,7 +10,7 @@ exports[`CounterLabel renders with secondary scheme when no "scheme" prop is pro
1234
</span>
<span
class="c0"
class="VisuallyHidden"
>
 (
1234
Expand All @@ -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"
Expand All @@ -49,7 +29,7 @@ exports[`CounterLabel respects the primary "scheme" prop 1`] = `
1234
</span>
<span
class="c0"
class="VisuallyHidden"
>
 (
1234
Expand Down
41 changes: 3 additions & 38 deletions packages/react/src/VisuallyHidden/VisuallyHidden.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,52 +1,17 @@
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'

/**
* Provides a component that implements the "visually hidden" technique. This is
* analagous to the common `sr-only` class. Children that are rendered inside
* this component will not be visible but will be available to screen readers.
*
* Note: if this component, or a descendant, has focus then this component will
* no longer be visually hidden.
*
* @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, ...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>
)
}

export type VisuallyHiddenProps = React.PropsWithChildren<
HTMLAttributes<HTMLSpanElement> & {
className?: string
} & SxProp
}
>
12 changes: 1 addition & 11 deletions packages/react/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -537,16 +537,6 @@ exports[`snapshots renders a loading state 1`] = `
justify-content: center;
}

.c3: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;
}

.c2 {
-webkit-animation: rotate-keyframes 1s linear infinite;
animation: rotate-keyframes 1s linear infinite;
Expand Down Expand Up @@ -606,7 +596,7 @@ exports[`snapshots renders a loading state 1`] = `
/>
</svg>
<span
className="c3"
className="VisuallyHidden"
id=":r2h:"
>
Loading
Expand Down
Loading