Adjust ActionList.Item danger variant CSS to support trailing count/keybinding hint

.changeset/selfish-pigs-chew.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Adjust `ActionList.Item` danger variant CSS to support trailing count/keybinding hint

e2e/components/ActionList.test.ts

@@ -128,6 +128,14 @@ const stories = [
     title: 'Large Item',
     id: 'components-actionlist-features--large-item',
   },
+  {
+    title: 'Trailing count',
+    id: 'components-actionlist-features--with-trailing-count',
+  },
+  {
+    title: 'Keyboard shortcuts',
+    id: 'components-actionlist-features--with-keyboard-shortcuts',
+  },
 ] as const
 
 test.describe('ActionList', () => {

packages/react/src/ActionList/ActionList.features.stories.tsx

@@ -29,6 +29,7 @@ import {
   IssueOpenedIcon,
   ProjectIcon,
 } from '@primer/octicons-react'
+import {KeybindingHint} from '../KeybindingHint'
 import {FeatureFlags} from '../FeatureFlags'
 import classes from './ActionList.features.stories.module.css'
 
@@ -837,6 +838,77 @@ export const WithCustomTrailingVisuals = () => (
   </ActionList>
 )
 
+export const WithKeyboardShortcuts = () => (
+  <ActionList>
+    <ActionList.Item>
+      New file
+      <ActionList.TrailingVisual>
+        <KeybindingHint keys="Mod+N" />
+      </ActionList.TrailingVisual>
+    </ActionList.Item>
+    <ActionList.Item>
+      Open file
+      <ActionList.TrailingVisual>
+        <KeybindingHint keys="Mod+O" />
+      </ActionList.TrailingVisual>
+    </ActionList.Item>
+    <ActionList.Item>
+      Save
+      <ActionList.TrailingVisual>
+        <KeybindingHint keys="Mod+S" />
+      </ActionList.TrailingVisual>
+    </ActionList.Item>
+    <ActionList.Divider />
+    <ActionList.Item variant="danger">
+      Delete
+      <ActionList.TrailingVisual>
+        <KeybindingHint keys="Mod+D" />
+      </ActionList.TrailingVisual>
+    </ActionList.Item>
+  </ActionList>
+)
+
+export const WithTrailingCount = () => (
+  <ActionList>
+    <ActionList.Item>
+      <ActionList.LeadingVisual>
+        <IssueOpenedIcon />
+      </ActionList.LeadingVisual>
+      Open issues
+      <ActionList.TrailingVisual>
+        <CounterLabel>24</CounterLabel>
+      </ActionList.TrailingVisual>
+    </ActionList.Item>
+    <ActionList.Item>
+      <ActionList.LeadingVisual>
+        <GitPullRequestIcon />
+      </ActionList.LeadingVisual>
+      Pull requests
+      <ActionList.TrailingVisual>
+        <CounterLabel>8</CounterLabel>
+      </ActionList.TrailingVisual>
+    </ActionList.Item>
+    <ActionList.Item>
+      <ActionList.LeadingVisual>
+        <ProjectIcon />
+      </ActionList.LeadingVisual>
+      Projects
+      <ActionList.TrailingVisual>
+        <CounterLabel>3</CounterLabel>
+      </ActionList.TrailingVisual>
+    </ActionList.Item>
+    <ActionList.Item variant="danger">
+      <ActionList.LeadingVisual>
+        <AlertIcon />
+      </ActionList.LeadingVisual>
+      Alerts
+      <ActionList.TrailingVisual>
+        <CounterLabel>12</CounterLabel>
+      </ActionList.TrailingVisual>
+    </ActionList.Item>
+  </ActionList>
+)
+
 export const WithTrailingAction = () => {
   const [loadingState, setLoadingState] = React.useState(false)
 

packages/react/src/ActionList/ActionList.module.css

@@ -162,26 +162,42 @@
 
     /* danger */
     &:where([data-variant='danger']) {
-      & * :not([popover], .TrailingVisual) {
+      & .LeadingAction,
+      .LeadingVisual,
+      .ItemLabel {
         color: var(--control-danger-fgColor-rest);
       }
 
       @media (hover: hover) {
         &:hover {
           background: var(--control-danger-bgColor-hover);
 
-          & * :not([popover]) {
+          & .LeadingAction,
+          .LeadingVisual,
+          .ItemLabel {
             color: var(--control-danger-fgColor-hover);
           }
+
+          & [data-kbd-chord] {
+            background-color: var(--bgColor-default);
+            transition: none;
+          }
         }
       }
 
       &:active {
         background: var(--control-danger-bgColor-active);
 
-        & * :not([popover]) {
+        & .LeadingAction,
+        .LeadingVisual,
+        .ItemLabel {
           color: var(--control-danger-fgColor-hover);
         }
+
+        & [data-kbd-chord] {
+          background-color: var(--bgColor-default);
+          transition: none;
+        }
       }
     }