Skip to content

Move shared utilities out of React component files#7940

Open
joshblack wants to merge 1 commit into
joshblack/eslint-react-refresh/fix-contextsfrom
joshblack/eslint-react-refresh/fix-utilities
Open

Move shared utilities out of React component files#7940
joshblack wants to merge 1 commit into
joshblack/eslint-react-refresh/fix-contextsfrom
joshblack/eslint-react-refresh/fix-utilities

Conversation

@joshblack

@joshblack joshblack commented Jun 8, 2026

Copy link
Copy Markdown
Member

Closes #

No linked issue.

Extracts constants and utility helpers from component files into local constants.ts, utils.ts, or hook/component modules for React Refresh compatibility.

Changelog

New

  • Added local constants/utilities modules for FilteredActionList, KeybindingHint, Overlay, Timeline, Token, and UnderlineNav.
  • Split useMedia into a hook module with separate MatchMedia component/context modules.

Changed

  • Updated component files to consume the extracted helpers from non-component modules.

Removed

  • Removed non-component helper declarations from component implementation files.

Rollout strategy

  • Patch release
  • Minor release
  • Major release; if selected, include a written rollout or migration plan
  • None; internal refactor with existing public import paths preserved.

Testing & Reviewing

Review moved helpers by component area; useMedia keeps the existing extensionless import surface.

Merge checklist

@changeset-bot

changeset-bot Bot commented Jun 8, 2026

Copy link
Copy Markdown

⚠️ No Changeset found

Latest commit: c703182

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

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

@github-actions github-actions Bot added the staff Author is a staff member label Jun 8, 2026
@github-actions

github-actions Bot commented Jun 8, 2026

Copy link
Copy Markdown
Contributor

⚠️ Action required

👋 Hi, this pull request contains changes to the source code that github/github-ui depends on. If you are GitHub staff, test these changes with github/github-ui using the integration workflow. Check the integration testing docs for step-by-step instructions. Or, apply the integration-tests: skipped manually label to skip these checks.

To publish a canary release for integration testing, apply the Canary Release label to this PR.

@github-actions github-actions Bot added the integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm label Jun 8, 2026
@joshblack joshblack changed the title Move React Refresh utility exports out of components Move shared utilities out of React component files Jun 8, 2026
@joshblack joshblack added skip changeset This change does not need a changelog integration-tests: skipped manually Changes in this PR do not require an integration test labels Jun 8, 2026
@joshblack joshblack marked this pull request as ready for review June 8, 2026 17:37
@joshblack joshblack requested a review from a team as a code owner June 8, 2026 17:37
@joshblack joshblack requested review from Copilot and llastflowers June 8, 2026 17:37

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Refactors several @primer/react components and hooks to move non-component constants/helpers into local constants.ts, utils.ts, or dedicated modules to improve React Refresh compatibility while preserving existing public exports/import surfaces.

Changes:

  • Extracted shared constants/utilities from component implementation files into colocated constants.ts / utils.ts modules (e.g. Overlay, Timeline, Token, UnderlineNav, FilteredActionList, KeybindingHint).
  • Kept existing public exports stable by re-exporting moved symbols from the original component modules.
  • Split MatchMedia/context out of useMedia.ts into separate hook modules while keeping useMedia’s import surface intact.
Show a summary per file
File Description
packages/react/src/UnderlineNav/utils.ts Introduces extracted getValidChildren helper.
packages/react/src/UnderlineNav/UnderlineNav.tsx Consumes extracted helper and re-exports it to preserve public API.
packages/react/src/Token/utils.ts Extracts isTokenInteractive helper.
packages/react/src/Token/constants.ts Extracts token size constants/types.
packages/react/src/Token/TokenBase.tsx Switches to extracted constants/utils and re-exports them.
packages/react/src/Timeline/constants.ts Extracts TimelineBadgeVariants constant.
packages/react/src/Timeline/Timeline.tsx Imports and re-exports extracted TimelineBadgeVariants.
packages/react/src/Overlay/constants.ts Extracts heightMap/widthMap constants.
packages/react/src/Overlay/Overlay.tsx Imports and re-exports extracted overlay dimension maps.
packages/react/src/KeybindingHint/components/utils.ts Extracts key-chord parsing/sorting + accessible string helpers.
packages/react/src/KeybindingHint/components/Chord.tsx Uses extracted chord utilities and re-exports accessibleChordString.
packages/react/src/KeybindingHint/components/Sequence.tsx Uses extracted sequence accessibility helper and re-exports it.
packages/react/src/hooks/MatchMediaContext.ts New module for MatchMediaContext and MediaQueryFeatures type.
packages/react/src/hooks/MatchMedia.tsx New module for MatchMedia component + shallow-stabilization helper.
packages/react/src/hooks/useMedia.ts Updated to consume extracted context and re-export MatchMedia.
packages/react/src/FilteredActionList/constants.ts Extracts loader type class + constants.
packages/react/src/FilteredActionList/FilteredActionListLoaders.tsx Imports and re-exports extracted loader symbols.

Copilot's findings

  • Files reviewed: 17/17 changed files
  • Comments generated: 1

Comment on lines +1 to +6
import React from 'react'

export const getValidChildren = (children: React.ReactNode) => {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
return React.Children.toArray(children).filter(child => React.isValidElement(child)) as React.ReactElement<any>[]
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm integration-tests: skipped manually Changes in this PR do not require an integration test skip changeset This change does not need a changelog staff Author is a staff member

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants