chore(_VisuallyHidden): Convert internal component _VisuallyHidden to CSS module styling by jonrohan · Pull Request #6083 · primer/react

jonrohan · 2025-05-20T18:16:35Z

Changelog

New

Changed

Convert internal component _VisuallyHidden to CSS module styling

Removed

Rollout strategy

Patch release
Minor release
Major release; if selected, include a written rollout or migration plan
None; if selected, include a brief description as to why

Testing & Reviewing

Merge checklist

Added/updated tests
Added/updated documentation
Added/updated previews (Storybook)
Changes are SSR compatible
Tested in Chrome
Tested in Firefox
Tested in Safari
Tested in Edge
(GitHub staff only) Integration tests pass at github/github (Learn more about how to run integration tests)

changeset-bot · 2025-05-20T18:16:39Z

🦋 Changeset detected

Latest commit: d83f48e

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@primer/react	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

github-actions · 2025-05-20T18:17:05Z

👋 Hi, this pull request contains changes to the source code that github/github depends on. If you are GitHub staff, we recommend testing these changes with github/github using the integration workflow. Thanks!

github-actions · 2025-05-20T18:31:44Z

size-limit report 📦

Path	Size
packages/react/dist/browser.esm.js	91.98 KB (-0.04% 🔽)
packages/react/dist/browser.umd.js	92.23 KB (+0.01% 🔺)

Copilot

Pull Request Overview

This PR replaces the styled‐component implementation of the internal _VisuallyHidden component with a CSS module and updates snapshots to use the new InternalVisuallyHidden class.

Migrates _VisuallyHidden from styled.span to a BoxWithFallback + CSS module.
Introduces _VisuallyHidden.module.css with the visually‐hidden styles.
Regenerates snapshots across several components to reference the new CSS class.

Reviewed Changes

Copilot reviewed 8 out of 8 changed files in this pull request and generated no comments.

Show a summary per file

File	Description
packages/react/src/_VisuallyHidden.tsx	Replaced styled‐component implementation with CSS module and `BoxWithFallback`.
packages/react/src/_VisuallyHidden.module.css	New CSS module defining the `.InternalVisuallyHidden` styles.
packages/react/src/Token/tests/snapshots/Token.test.tsx.snap	Updated snapshot spans to use `InternalVisuallyHidden` class.
packages/react/src/TextInput/snapshots/TextInput.test.tsx.snap	Updated snapshot spans to use `InternalVisuallyHidden` class.
packages/react/src/CircleBadge/snapshots/CircleBadge.test.tsx.snap	Snapshot class names updated (unrelated styled-component change).
.changeset/smooth-steaks-hug.md	Adds a changeset for the minor version bump.

Comments suppressed due to low confidence (3)

packages/react/src/_VisuallyHidden.tsx:19

[nitpick] There are no unit tests covering the new _VisuallyHidden component; consider adding tests for both visible and hidden states to ensure the CSS module is applied correctly.

<BoxWithFallback as={as} className={clsx(...

packages/react/src/_VisuallyHidden.tsx:11

You reference React.ElementType and React.HTMLAttributes but never import React; please add import React from 'react' or import type {React} from 'react' to satisfy the type usage.

function VisuallyHidden({

packages/react/src/CircleBadge/snapshots/CircleBadge.test.tsx.snap:5

[nitpick] These CircleBadge snapshot updates seem unrelated to the _VisuallyHidden change—you may want to verify they’re intentional or revert to avoid introducing noisy snapshot diffs.

 class="sc-fUnMCh kvrJCk"

primer-integration · 2025-05-21T00:09:12Z

👋 Hi from github/github! Your integration PR is ready: https://github.com/github/github/pull/379060

primer-integration · 2025-05-21T00:27:24Z

🟢 golden-jobs completed with status success.

Co-authored-by: Josh Black <joshblack@github.com>

github-actions · 2025-07-07T21:23:04Z

👋 Hi, there are new commits since the last successful integration test. We recommend running the integration workflow once more, unless you are sure the new changes do not affect github/github. Thanks!

github-actions · 2025-07-07T21:29:11Z

👋 Hi, there are new commits since the last successful integration test. We recommend running the integration workflow once more, unless you are sure the new changes do not affect github/github. Thanks!

jonrohan · 2025-07-07T21:34:42Z

-interface Props {
+interface Props extends React.ComponentPropsWithoutRef<'span'> {
 isVisible?: boolean
+ as?: React.ElementType


This component is only used internally, and I verified the only instances pass as="h2"

github-actions · 2025-07-10T00:46:44Z

👋 Hi, there are new commits since the last successful integration test. We recommend running the integration workflow once more, unless you are sure the new changes do not affect github/github. Thanks!

… CSS module styling (#6083) Co-authored-by: Josh Black <joshblack@github.com> Co-authored-by: primer[bot] <119360173+primer[bot]@users.noreply.github.com>

jonrohan added 2 commits May 20, 2025 18:14

Convert to CSS modules
3fc2f59

Add changeset
e645c17

github-actionsBot added staff Author is a staff member integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm labels May 20, 2025

jonrohan added 3 commits May 20, 2025 18:25

Handle as prop
764b996

Add sx prop
670f040

Type fix
815d3d5

github-actionsBottemporarily deployed to storybook-preview-6083 May 20, 2025 18:29 Inactive

Pass along className in case needed
41cd518

github-actionsBot requested a deployment to storybook-preview-6083 May 20, 2025 18:38 Abandoned

jonrohan deployed to github-pages May 20, 2025 18:51 — with GitHub Actions View deployment

github-actionsBottemporarily deployed to storybook-preview-6083 May 20, 2025 18:51 Inactive

Updating snapshots
8b3957e

jonrohan deployed to github-pages May 20, 2025 19:08 — with GitHub Actions View deployment

github-actionsBottemporarily deployed to storybook-preview-6083 May 20, 2025 19:09 Inactive

jonrohan marked this pull request as ready for review May 20, 2025 21:24

CopilotAI review requested due to automatic review settings May 20, 2025 21:24

jonrohan requested a review from a team as a code owner May 20, 2025 21:24

jonrohan requested a review from joshblack May 20, 2025 21:24

CopilotAI reviewed May 20, 2025
View reviewed changes

github-actionsBot added integration-tests: passing Changes in this PR do NOT cause breaking changes in gh/gh and removed integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm labels May 21, 2025

joshblack requested changes May 21, 2025
View reviewed changes

Comment threadpackages/react/src/_VisuallyHidden.tsx Outdated

Update packages/react/src/_VisuallyHidden.tsx
b5cf78a
Co-authored-by: Josh Black <joshblack@github.com>

jonrohan requested a review from joshblack May 21, 2025 16:26

github-actionsBottemporarily deployed to storybook-preview-6083 May 21, 2025 17:00 Inactive

jonrohan added 2 commits July 7, 2025 21:21

Merge branch 'main' into css_module_convert/_visuallyhidden
5eff7b6

Generate new snapshot
24a9823

github-actionsBot added integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm and removed integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm labels Jul 7, 2025

chore(VisuallyHidden): simplify Props interface and remove generic type
671f047

github-actionsBot added integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm and removed integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm labels Jul 7, 2025

github-actionsBottemporarily deployed to storybook-preview-6083 July 7, 2025 21:32 Inactive

jonrohan commented Jul 7, 2025
View reviewed changes

jonrohan requested a review from joshblack July 7, 2025 21:35

jonrohan deployed to github-pages July 7, 2025 21:44 — with GitHub Actions View deployment

github-actionsBottemporarily deployed to storybook-preview-6083 July 7, 2025 21:44 Inactive

joshblack approved these changes Jul 7, 2025
View reviewed changes

jonrohan enabled auto-merge July 7, 2025 22:18

Merge branch 'main' into css_module_convert/_visuallyhidden
d83f48e

github-actionsBot added integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm and removed integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm labels Jul 10, 2025

jonrohan added this pull request to the merge queue Jul 10, 2025

primerBotdeployed to github-pages July 10, 2025 00:59 View deployment

github-actionsBottemporarily deployed to storybook-preview-6083 July 10, 2025 00:59 Inactive

auto-merge was automatically disabled July 10, 2025 01:03
Pull Request is not mergeable

Merged via the queue into main with commit 26232b3Jul 10, 2025

jonrohan deleted the css_module_convert/_visuallyhidden branch July 10, 2025 01:10

primerBot mentioned this pull request Jul 10, 2025
Release tracking #6312
Merged

Navigation Menu

Uh oh!

chore(_VisuallyHidden): Convert internal component _VisuallyHidden to CSS module styling - #6083

chore(_VisuallyHidden): Convert internal component _VisuallyHidden to CSS module styling#6083
jonrohan merged 13 commits into
mainfrom
css_module_convert/_visuallyhidden

jonrohan commented May 20, 2025•
edited
Loading

Uh oh!

changeset-botBot commented May 20, 2025•
edited
Loading

Uh oh!

github-actionsBot commented May 20, 2025

Uh oh!

github-actionsBot commented May 20, 2025•
edited
Loading

Uh oh!

CopilotAI left a comment

Uh oh!

primer-integrationBot commented May 21, 2025

Uh oh!

primer-integrationBot commented May 21, 2025

Uh oh!

Uh oh!

github-actionsBot commented Jul 7, 2025

Uh oh!

github-actionsBot commented Jul 7, 2025

Uh oh!

jonrohanJul 7, 2025

Uh oh!

github-actionsBot commented Jul 10, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Uh oh!

Conversation

jonrohan commented May 20, 2025• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changelog

New

Changed

Removed

Rollout strategy

Testing & Reviewing

Merge checklist

Uh oh!

changeset-botBot commented May 20, 2025• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

github-actionsBot commented May 20, 2025

Uh oh!

github-actionsBot commented May 20, 2025• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

size-limit report 📦

Uh oh!

CopilotAI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

primer-integrationBot commented May 21, 2025

Uh oh!

primer-integrationBot commented May 21, 2025

Uh oh!

Uh oh!

github-actionsBot commented Jul 7, 2025

Uh oh!

github-actionsBot commented Jul 7, 2025

Uh oh!

jonrohanJul 7, 2025

Choose a reason for hiding this comment

Uh oh!

github-actionsBot commented Jul 10, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

jonrohan commented May 20, 2025•
edited
Loading

changeset-botBot commented May 20, 2025•
edited
Loading

github-actionsBot commented May 20, 2025•
edited
Loading