Skip to content

feat(ActionList): update loading styles for specific child elements #7468

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

Open
jonrohan wants to merge 6 commits into
base: main
Choose a base branch
from
Open

feat(ActionList): update loading styles for specific child elements #7468

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
c2daca3
feat(ActionList): update loading styles for specific child elements
jonrohan Jan 22, 2026
d3319db
Scan only the trailingaction for data-loading
jonrohan Jan 23, 2026
e389b16
Merge branch 'main' into remove_expensive_star_query_actionlist
jonrohan Jan 23, 2026
0c7be88
Update to direct descendent selector
jonrohan Jan 23, 2026
8dcc929
Optimize CSS selectors in ActionList
jonrohan Jan 23, 2026
79b2187
Update packages/react/src/ActionList/ActionList.module.css
jonrohan Jan 23, 2026
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/orange-walls-buy.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@primer/react": patch
---

feat(ActionList): Optimizes CSS selector performance in ActionList by replacing expensive universal selectors (`*`) and broad `:has()` queries with targeted class selectors.
9 changes: 7 additions & 2 deletions packages/react/src/ActionList/ActionList.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -277,8 +277,13 @@
}

&:where([data-loading='true']),
&:has([data-loading='true']) {
& * {
& > [data-loading='true'] {
Comment on lines 279 to +280
Copy link

Copilot AI Jan 23, 2026

Choose a reason for hiding this comment

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

& > [data-loading='true'] likely never matches with the current ActionList.Item markup. data-loading is set on the <li> itself (Item.tsx:210), and when TrailingAction is loading the attribute is on the nested button inside .TrailingAction, not on a direct child of the <li>. Consider removing this selector (keeping only &:where([data-loading='true'])) to avoid dead/incorrect CSS, or update it to match an actual DOM structure that needs support.

See below for a potential fix:

    &:where([data-loading='true']) {

Copilot uses AI. Check for mistakes.
& .ItemLabel,
& .Description,
& .LeadingVisual,
& .TrailingVisual,
& .LeadingAction,
& .VisualWrap {
color: var(--fgColor-muted);
}
}
Expand Down
Loading