diff --git a/.changeset/perf-actionlist-subgroup-active-indicator.md b/.changeset/perf-actionlist-subgroup-active-indicator.md new file mode 100644 index 00000000000..1ee0fce51aa --- /dev/null +++ b/.changeset/perf-actionlist-subgroup-active-indicator.md @@ -0,0 +1,5 @@ +--- +'@primer/react': patch +--- + +ActionList: replace the `:has(~ .SubGroup [data-active='true'])` selector that styled collapsed parent items containing an active descendant with a plain attribute + child-combinator selector. The collapsed-parent active indicator now depends on the parent item carrying `data-active='true'`, which the supported `NavList.ItemWithSubNav` consumer already sets via its `containsCurrentItem` walk. diff --git a/packages/react/src/ActionList/ActionList.module.css b/packages/react/src/ActionList/ActionList.module.css index fcc0bfda7e0..fdd1b835932 100644 --- a/packages/react/src/ActionList/ActionList.module.css +++ b/packages/react/src/ActionList/ActionList.module.css @@ -546,26 +546,32 @@ & ~ .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 `