Skip to content
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
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/perf-actionlist-subgroup-active-indicator.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@primer/react': patch
---

ActionList: improve rendering performance by replacing an expensive `:has()` selector for the collapsed-parent active indicator with a plain attribute selector. No visual or API changes.
37 changes: 21 additions & 16 deletions packages/react/src/ActionList/ActionList.module.css
Original file line number Diff line number Diff line change
Expand Up @@ -556,26 +556,31 @@
& ~ .SubGroup {
display: none;
}
}
}

/* show active indicator on parent collapse if child is active */
/* stylelint-disable-next-line selector-pseudo-class-disallowed-list -- scoped to CSS Module, audited (github/github-ui#17224) */
&:has(~ .SubGroup [data-active='true']) {
background: var(--control-transparent-bgColor-selected);
/*
* Show active indicator on a collapsed parent item when one of its descendants
* is active. Relies on the consumer (e.g. NavList.ItemWithSubNav) passing
* `active` to the parent `ActionList.Item` so `data-active` lands on the `<li>`.
* Previously expressed as `.ActionListContent[aria-expanded='false']:has(~ .SubGroup [data-active='true'])`,
* which forced the engine to re-walk every collapsed parent's subtree on any
* descendant attribute change. Plain attribute + child combinator is O(1) per element.
*/
.ActionListItem[data-has-subitem='true'][data-active='true'] > .ActionListContent[aria-expanded='false'] {
background: var(--control-transparent-bgColor-selected);

& .ItemLabel {
font-weight: var(--base-text-weight-semibold);
}
& .ItemLabel {
font-weight: var(--base-text-weight-semibold);
}

& .ActionListSubContent::before,
& + .ActionListItem .ActionListSubContent::before {
visibility: hidden;
}
& .ActionListSubContent::before {
visibility: hidden;
}

/* blue accent line */
&::after {
@mixin activeIndicatorLine;
}
}
/* blue accent line */
&::after {
@mixin activeIndicatorLine;
}
}

Expand Down
Loading