perf(ActionList): replace :has() selector with JS-computed attribute by hectahertz · Pull Request #7714 · primer/react

hectahertz · 2026-03-30T16:26:26Z

Closes https://github.com/github/github-ui/issues/17359

This CSS selector on the ActionList container forces the browser to walk the entire subtree on every DOM mutation:

&:has([data-has-description='true']):has([data-has-description='false']) {
  & .ItemLabel { font-weight: var(--base-text-weight-normal); }
}

With 100 items (~1860 DOM elements), sequential DOM mutations with forced style recalc (the pattern during React reconciliation):

Metric	Before (`:has()`)	After (data attr)	Improvement
Remove all items	426ms	10ms	42x faster
Add all items	415ms	27ms	15x faster
Total	841ms	37ms	✨ 23x faster ✨
Per mutation	4.2ms	0.18ms	23x faster

(Chrome, 100 items, 6x CPU throttle. Safari is worse due to historically quadratic :has() invalidation, causing the 10-20+ second freezes reported in github/github-ui#17223.)

Replaced with a data-mixed-descriptions attribute computed via useLayoutEffect in List.tsx. Two querySelector calls after render replace continuous full-subtree style invalidation from the CSS engine.

Why DOM queries instead of React children/context:

Each Item's description is detected via useSlots at render time, so the List can't know which Items have descriptions without duplicating slot detection or deeply inspecting opaque children trees (fragile with Groups, conditional rendering, wrapper components)
A context-based approach (Items registering description state) would work but adds registration/unregistration callbacks, a new provider, and re-renders when the count changes. Not worth the complexity for a single derived boolean

Related: #7708 (stylelint guard for container-level :has() selectors), github/github-ui#17223

Changelog

New

N/A

Changed

Replaced CSS :has([data-has-description]) container selector with data-mixed-descriptions attribute computed in JS

Removed

N/A

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

Open Storybook, navigate to StressTests/Components/ActionList/MixedDescriptions. Click "Start" to run the stress test
Verify labels use font-weight: normal when the list has mixed items (some with descriptions, some without)
Check an ActionList where all items have descriptions, or none do. Labels should use their default font-weight
For perf validation: open Chrome DevTools Performance tab with 6x CPU throttling, run the stress test. Style recalculation per mutation should be <1ms

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-ui (Learn more about how to run integration tests)

changeset-bot · 2026-03-30T16:26:35Z

⚠️ No Changeset found

Latest commit: 849232e

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 · 2026-03-30T16:26:59Z

⚠️ 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.

primer · 2026-03-30T16:34:08Z

🤖 Lint issues have been automatically fixed and committed to this PR.

Copilot

Pull request overview

This PR aims to improve ActionList rendering performance by removing an expensive container-level :has() selector and replacing it with a JS-computed data-mixed-descriptions attribute. However, the PR also introduces a new packages/primer-api workspace plus a new GitHub Actions workflow for a Slack/LLM “Primer Bot”, which significantly expands scope beyond the stated goal.

Changes:

ActionList: replace container :has() selector with data-mixed-descriptions computed after render.
Add a new @primer/api workspace (HTTP server + GitHub Action entrypoint) for answering Primer questions via LLM + primer.style docs.
Add a new primer-bot.yml workflow to run the bot on repository_dispatch / manual dispatch.

Reviewed changes

Copilot reviewed 13 out of 14 changed files in this pull request and generated 13 comments.

Show a summary per file

File	Description
packages/react/src/ActionList/List.tsx	Computes and sets `data-mixed-descriptions` on the list element post-render.
packages/react/src/ActionList/ActionList.module.css	Switches styling condition from `:has()` to `[data-mixed-descriptions='true']`.
packages/primer-api/tsconfig.json	Adds TS config for the new `@primer/api` workspace.
packages/primer-api/src/prompts.ts	Defines the LLM system prompt and user prompt builder.
packages/primer-api/src/llm.ts	Adds OpenAI/GitHub Models chat completion integration and context retrieval wiring.
packages/primer-api/src/knowledge.ts	Retrieves relevant component docs from primer.style and formats context for the prompt.
packages/primer-api/src/index.ts	Implements a small HTTP server with `/ask` and `/health` endpoints.
packages/primer-api/src/config.ts	Loads configuration from environment variables (tokens, model, port, etc.).
packages/primer-api/src/action.ts	GitHub Actions entrypoint to read dispatch payload and post an answer to Slack.
packages/primer-api/package.json	Declares the new workspace package, scripts, and dependencies.
packages/primer-api/README.md	Documents bot setup (Slack + repo dispatch + workflow) and local dev usage.
packages/primer-api/.env.example	Provides example env vars for local usage.
.github/workflows/primer-bot.yml	Adds workflow to run the Primer bot from dispatch events or manual input.
package-lock.json	Updates lockfile for new workspace/dependencies and version bumps.

packages/primer-api/src/prompts.ts

packages/primer-api/src/index.ts

packages/primer-api/src/llm.ts

.github/workflows/primer-bot.yml

packages/primer-api/src/config.ts

Copilot · 2026-03-30T16:34:17Z

packages/primer-api/README.md

+
+Adds dynamic LLM-powered answers to the #primer Slack channel. When someone reacts to a question with :robot_face:, a GitHub Action fires, retrieves relevant Primer docs, generates an answer via GitHub Models, and posts it back as a thread reply.
+
+Runs alongside the existing Moveworks-based Primer Bot (which handles @mentions with FAQ matching). No hosted endpoint, no API keys to manage.


The README says “No hosted endpoint, no API keys to manage.”, but the setup requires at least a GitHub Models token/PAT and a Slack bot token (and optionally OpenAI/PRIMER_API_KEY). Consider rephrasing to clarify that there’s no hosted service to operate, but secrets/tokens are still required.

Suggested change

Runs alongside the existing Moveworks-based Primer Bot (which handles @mentions with FAQ matching). No hosted endpoint, no API keys to manage.

Runs alongside the existing Moveworks-based Primer Bot (which handles @mentions with FAQ matching). There’s no separate hosted endpoint or long-lived service to operate—you just configure the required GitHub and Slack tokens as GitHub Actions secrets (see Setup).

packages/react/src/ActionList/List.tsx

primer · 2026-03-30T16:44:42Z

🤖 Lint issues have been automatically fixed and committed to this PR.

- Use useIsomorphicLayoutEffect for SSR compatibility - Only update data-mixed-descriptions when value changes - Remove attribute when not needed instead of setting 'false'

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 Mar 30, 2026

hectahertz added the skip changeset This change does not need a changelog label Mar 30, 2026

hectahertz marked this pull request as ready for review March 30, 2026 16:27

hectahertz requested a review from a team as a code owner March 30, 2026 16:27

hectahertz requested review from Copilot and jonrohan March 30, 2026 16:27

Copilot started reviewing on behalf of hectahertz March 30, 2026 16:28 View session

Copilot AI reviewed Mar 30, 2026

View reviewed changes

github-actions bot temporarily deployed to storybook-preview-7714 March 30, 2026 16:36 Inactive

hectahertz force-pushed the hectahertz/perf-action-list-has-selector branch from a721664 to c383302 Compare March 30, 2026 16:36

github-actions bot requested a deployment to storybook-preview-7714 March 30, 2026 16:41 Abandoned

hectahertz added 2 commits March 30, 2026 18:48

perf(ActionList): replace :has() selector with JS-computed attribute

a0eb6fd

test(ActionList): add mixed descriptions stress test story

0919c3b

hectahertz force-pushed the hectahertz/perf-action-list-has-selector branch from faeb40f to 0919c3b Compare March 30, 2026 16:48

jonrohan approved these changes Mar 30, 2026

View reviewed changes

fix(ActionList): address review comments

cb1dc51

- Use useIsomorphicLayoutEffect for SSR compatibility - Only update data-mixed-descriptions when value changes - Remove attribute when not needed instead of setting 'false'

github-actions bot temporarily deployed to storybook-preview-7714 March 30, 2026 16:51 Inactive

hectahertz enabled auto-merge March 30, 2026 16:56

Merge branch 'main' into hectahertz/perf-action-list-has-selector

849232e

github-actions bot requested a deployment to storybook-preview-7714 March 30, 2026 17:00 Abandoned

hectahertz deployed to github-pages March 30, 2026 17:09 — with GitHub Actions View deployment

github-actions bot deployed to storybook-preview-7714 March 30, 2026 17:10 View deployment

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

perf(ActionList): replace :has() selector with JS-computed attribute#7714

perf(ActionList): replace :has() selector with JS-computed attribute#7714
hectahertz wants to merge 4 commits intomainfrom
hectahertz/perf-action-list-has-selector

hectahertz commented Mar 30, 2026 •

edited

Loading

Uh oh!

changeset-bot bot commented Mar 30, 2026 •

edited

Loading

Uh oh!

github-actions bot commented Mar 30, 2026

Uh oh!

primer bot commented Mar 30, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI Mar 30, 2026

Uh oh!

Uh oh!

Uh oh!

Uh oh!

primer bot commented Mar 30, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants


		Adds dynamic LLM-powered answers to the #primer Slack channel. When someone reacts to a question with :robot_face:, a GitHub Action fires, retrieves relevant Primer docs, generates an answer via GitHub Models, and posts it back as a thread reply.

		Runs alongside the existing Moveworks-based Primer Bot (which handles @mentions with FAQ matching). No hosted endpoint, no API keys to manage.

Conversation

hectahertz commented Mar 30, 2026 • 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-bot bot commented Mar 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

⚠️ No Changeset found

Uh oh!

github-actions bot commented Mar 30, 2026

⚠️ Action required

Uh oh!

primer bot commented Mar 30, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI Mar 30, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

primer bot commented Mar 30, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

hectahertz commented Mar 30, 2026 •

edited

Loading

changeset-bot bot commented Mar 30, 2026 •

edited

Loading