diff --git a/.changeset/selfish-pigs-chew.md b/.changeset/selfish-pigs-chew.md
new file mode 100644
index 00000000000..4e45f3e9129
--- /dev/null
+++ b/.changeset/selfish-pigs-chew.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Adjust `ActionList.Item` danger variant CSS to support trailing count/keybinding hint
diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Keyboard-shortcuts-dark-colorblind-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Keyboard-shortcuts-dark-colorblind-linux.png
new file mode 100644
index 00000000000..cb920b6a6dd
Binary files /dev/null and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Keyboard-shortcuts-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Keyboard-shortcuts-dark-dimmed-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Keyboard-shortcuts-dark-dimmed-linux.png
new file mode 100644
index 00000000000..382f60354bf
Binary files /dev/null and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Keyboard-shortcuts-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Keyboard-shortcuts-dark-high-contrast-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Keyboard-shortcuts-dark-high-contrast-linux.png
new file mode 100644
index 00000000000..9ba97d7c28d
Binary files /dev/null and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Keyboard-shortcuts-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Keyboard-shortcuts-dark-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Keyboard-shortcuts-dark-linux.png
new file mode 100644
index 00000000000..b226ca34310
Binary files /dev/null and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Keyboard-shortcuts-dark-linux.png differ
diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Keyboard-shortcuts-dark-tritanopia-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Keyboard-shortcuts-dark-tritanopia-linux.png
new file mode 100644
index 00000000000..b226ca34310
Binary files /dev/null and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Keyboard-shortcuts-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Keyboard-shortcuts-light-colorblind-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Keyboard-shortcuts-light-colorblind-linux.png
new file mode 100644
index 00000000000..34cadbc39ed
Binary files /dev/null and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Keyboard-shortcuts-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Keyboard-shortcuts-light-high-contrast-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Keyboard-shortcuts-light-high-contrast-linux.png
new file mode 100644
index 00000000000..c0c075bda5d
Binary files /dev/null and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Keyboard-shortcuts-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Keyboard-shortcuts-light-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Keyboard-shortcuts-light-linux.png
new file mode 100644
index 00000000000..70121fc7b60
Binary files /dev/null and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Keyboard-shortcuts-light-linux.png differ
diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Keyboard-shortcuts-light-tritanopia-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Keyboard-shortcuts-light-tritanopia-linux.png
new file mode 100644
index 00000000000..70121fc7b60
Binary files /dev/null and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Keyboard-shortcuts-light-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Trailing-count-dark-colorblind-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Trailing-count-dark-colorblind-linux.png
new file mode 100644
index 00000000000..2de8ad14484
Binary files /dev/null and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Trailing-count-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Trailing-count-dark-dimmed-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Trailing-count-dark-dimmed-linux.png
new file mode 100644
index 00000000000..5457f48f096
Binary files /dev/null and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Trailing-count-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Trailing-count-dark-high-contrast-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Trailing-count-dark-high-contrast-linux.png
new file mode 100644
index 00000000000..2ddf74db094
Binary files /dev/null and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Trailing-count-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Trailing-count-dark-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Trailing-count-dark-linux.png
new file mode 100644
index 00000000000..e5d7fa8aac3
Binary files /dev/null and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Trailing-count-dark-linux.png differ
diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Trailing-count-dark-tritanopia-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Trailing-count-dark-tritanopia-linux.png
new file mode 100644
index 00000000000..e5d7fa8aac3
Binary files /dev/null and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Trailing-count-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Trailing-count-light-colorblind-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Trailing-count-light-colorblind-linux.png
new file mode 100644
index 00000000000..5370cce11a2
Binary files /dev/null and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Trailing-count-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Trailing-count-light-high-contrast-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Trailing-count-light-high-contrast-linux.png
new file mode 100644
index 00000000000..d23fd89e576
Binary files /dev/null and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Trailing-count-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Trailing-count-light-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Trailing-count-light-linux.png
new file mode 100644
index 00000000000..950317e1edf
Binary files /dev/null and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Trailing-count-light-linux.png differ
diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Trailing-count-light-tritanopia-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Trailing-count-light-tritanopia-linux.png
new file mode 100644
index 00000000000..950317e1edf
Binary files /dev/null and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Trailing-count-light-tritanopia-linux.png differ
diff --git a/e2e/components/ActionList.test.ts b/e2e/components/ActionList.test.ts
index 3689a48c558..33f9462ce5a 100644
--- a/e2e/components/ActionList.test.ts
+++ b/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', () => {
diff --git a/packages/react/src/ActionList/ActionList.features.stories.tsx b/packages/react/src/ActionList/ActionList.features.stories.tsx
index b5a5adac7a1..a91dcfacbc6 100644
--- a/packages/react/src/ActionList/ActionList.features.stories.tsx
+++ b/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 = () => (
)
+export const WithKeyboardShortcuts = () => (
+
+
+ New file
+
+
+
+
+
+ Open file
+
+
+
+
+
+ Save
+
+
+
+
+
+
+ Delete
+
+
+
+
+
+)
+
+export const WithTrailingCount = () => (
+
+
+
+
+
+ Open issues
+
+ 24
+
+
+
+
+
+
+ Pull requests
+
+ 8
+
+
+
+
+
+
+ Projects
+
+ 3
+
+
+
+
+
+
+ Alerts
+
+ 12
+
+
+
+)
+
export const WithTrailingAction = () => {
const [loadingState, setLoadingState] = React.useState(false)
diff --git a/packages/react/src/ActionList/ActionList.module.css b/packages/react/src/ActionList/ActionList.module.css
index 64feb5d8d88..f8007fb3e63 100644
--- a/packages/react/src/ActionList/ActionList.module.css
+++ b/packages/react/src/ActionList/ActionList.module.css
@@ -162,7 +162,9 @@
/* danger */
&:where([data-variant='danger']) {
- & * :not([popover], .TrailingVisual) {
+ & .LeadingAction,
+ .LeadingVisual,
+ .ItemLabel {
color: var(--control-danger-fgColor-rest);
}
@@ -170,18 +172,32 @@
&: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;
+ }
}
}