diff --git a/.changeset/perf-actionlist-replace-has-disabled.md b/.changeset/perf-actionlist-replace-has-disabled.md new file mode 100644 index 00000000000..9fbae4cd34b --- /dev/null +++ b/.changeset/perf-actionlist-replace-has-disabled.md @@ -0,0 +1,5 @@ +--- +'@primer/react': patch +--- + +perf(ActionList): replace `:has([aria-disabled])` child scan with `data-is-disabled` attribute for faster style recalculation diff --git a/packages/react/src/ActionList/ActionList.module.css b/packages/react/src/ActionList/ActionList.module.css index 1e24e4d07cf..e82a19d16bf 100644 --- a/packages/react/src/ActionList/ActionList.module.css +++ b/packages/react/src/ActionList/ActionList.module.css @@ -121,7 +121,7 @@ } } - &:not(:has([aria-disabled], [disabled]), [data-has-subitem='true']) { + &:not([data-is-disabled], [data-has-subitem='true']) { @media (hover: hover) { &:hover, &:active { @@ -330,7 +330,7 @@ /* disabled */ &[aria-disabled='true'], - &:has([aria-disabled='true'], [disabled]) { + &[data-is-disabled] { & .ActionListContent * { color: var(--control-fgColor-disabled); } @@ -371,7 +371,7 @@ } /* When TrailingAction is in loading state, keep labels and descriptions accessible */ - &:has(.TrailingAction [data-loading='true']):not([aria-disabled='true']) { + &:has(.TrailingAction [data-loading='true']):not([data-is-disabled]) { /* Ensure labels and descriptions maintain accessibility contrast */ & .ItemLabel { color: var(--fgColor-default); diff --git a/packages/react/src/ActionList/Item.tsx b/packages/react/src/ActionList/Item.tsx index ac917743fd5..f9be0d11bc7 100644 --- a/packages/react/src/ActionList/Item.tsx +++ b/packages/react/src/ActionList/Item.tsx @@ -256,6 +256,7 @@ const UnwrappedItem = ( data-variant={variant === 'danger' ? variant : undefined} data-active={active ? true : undefined} data-inactive={inactiveText ? true : undefined} + data-is-disabled={disabled ? true : undefined} data-has-subitem={slots.subItem ? true : undefined} data-has-description={slots.description ? true : false} className={clsx(classes.ActionListItem, className)}