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; + } } }