diff --git a/.changeset/perf-actionlist-subgroup-active-indicator.md b/.changeset/perf-actionlist-subgroup-active-indicator.md new file mode 100644 index 00000000000..c309ee81d1a --- /dev/null +++ b/.changeset/perf-actionlist-subgroup-active-indicator.md @@ -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. diff --git a/packages/react/src/ActionList/ActionList.module.css b/packages/react/src/ActionList/ActionList.module.css index 6195a4a1bb8..03779e6f3d4 100644 --- a/packages/react/src/ActionList/ActionList.module.css +++ b/packages/react/src/ActionList/ActionList.module.css @@ -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 `