Adjust ActionList.Item danger variant CSS to support trailing count/keybinding hint

[langermank]

Just making sure that KeybindingHint and count look alright in ActionList with the danger variant (hover state is the critical one).

CleanShot.2025-11-18.at.15.54.00.mp4

CleanShot.2025-11-18.at.15.54.28.mp4

Changelog

New

Changed

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]

🦋 Changeset detected

Latest commit: ba83cda

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	Patch

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]

👋 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. Or, apply the integration-tests: skipped manually label to skip these checks.

[changeset-bot]

⚠️ No Changeset found

Latest commit: e246dc6

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

[Copilot]

Pull Request Overview

This PR adjusts the CSS for the ActionList.Item danger variant to properly support trailing count labels and keyboard binding hints, particularly focusing on the hover state styling. The previous implementation used overly broad selectors (& * :not([popover], .TrailingVisual)) which didn't adequately handle the new trailing elements.

Key Changes:

• Replaced broad wildcard selectors with specific class-based selectors for danger variant styling
• Added explicit styling for keyboard binding hints ([data-kbd-chord]) in hover and active states
• Added two new Storybook stories demonstrating keyboard shortcuts and trailing counts with the danger variant

Reviewed Changes

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

Show a summary per file

File	Description
packages/react/src/ActionList/ActionList.module.css	Updated danger variant CSS selectors and added keybinding hint styles for hover/active states
packages/react/src/ActionList/ActionList.features.stories.tsx	Added WithKeyboardShortcuts and WithTrailingCount stories with danger variant examples
e2e/components/ActionList.test.ts	Added E2E test entries for the two new stories
.playwright/snapshots/**/*.png	Visual regression test snapshots for new stories across all themes
.changeset/selfish-pigs-chew.md	Changeset documenting the patch-level change

Comments suppressed due to low confidence (1)

packages/react/src/ActionList/ActionList.module.css:204

• Missing comma in CSS selector list. The selector .LeadingVisual, on line 203 should be followed by & for the next selector to maintain proper specificity. The current code has:

& .LeadingAction,
.LeadingVisual,
.ItemLabel {

This means .LeadingVisual and .ItemLabel are being selected globally, not scoped to the [data-variant='danger'] element. It should be:

& .LeadingAction,
& .LeadingVisual,
& .ItemLabel {

The same issue exists on lines 214-215 (hover state) and lines 231-232 (active state).

    }

    /* active state [aria-current] */

[primer-integration]

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

[primer-integration]

🟢 ci completed with status success.