diff --git a/.changeset/two-pots-battle.md b/.changeset/two-pots-battle.md new file mode 100644 index 00000000000..3218b1c5120 --- /dev/null +++ b/.changeset/two-pots-battle.md @@ -0,0 +1,5 @@ +--- +'@primer/react': minor +--- + +TreeView: Add `count` and `className` support for trailing actions diff --git a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Trailing-Actions-dark-colorblind-linux.png b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Trailing-Actions-dark-colorblind-linux.png index 6eb557f2cb8..905a5038918 100644 Binary files a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Trailing-Actions-dark-colorblind-linux.png and b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Trailing-Actions-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Trailing-Actions-dark-dimmed-linux.png b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Trailing-Actions-dark-dimmed-linux.png index c261aa4af8c..0b183bfb1fd 100644 Binary files a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Trailing-Actions-dark-dimmed-linux.png and b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Trailing-Actions-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Trailing-Actions-dark-high-contrast-linux.png b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Trailing-Actions-dark-high-contrast-linux.png index 3d1d2416920..37b061ef50e 100644 Binary files a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Trailing-Actions-dark-high-contrast-linux.png and b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Trailing-Actions-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Trailing-Actions-dark-linux.png b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Trailing-Actions-dark-linux.png index 6eb557f2cb8..905a5038918 100644 Binary files a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Trailing-Actions-dark-linux.png and b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Trailing-Actions-dark-linux.png differ diff --git a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Trailing-Actions-dark-tritanopia-linux.png b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Trailing-Actions-dark-tritanopia-linux.png index 6eb557f2cb8..905a5038918 100644 Binary files a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Trailing-Actions-dark-tritanopia-linux.png and b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Trailing-Actions-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Trailing-Actions-light-colorblind-linux.png b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Trailing-Actions-light-colorblind-linux.png index 3df5decf425..1eeb464bfd7 100644 Binary files a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Trailing-Actions-light-colorblind-linux.png and b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Trailing-Actions-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Trailing-Actions-light-high-contrast-linux.png b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Trailing-Actions-light-high-contrast-linux.png index efc89535b80..dab1f18c373 100644 Binary files a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Trailing-Actions-light-high-contrast-linux.png and b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Trailing-Actions-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Trailing-Actions-light-linux.png b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Trailing-Actions-light-linux.png index 3df5decf425..1eeb464bfd7 100644 Binary files a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Trailing-Actions-light-linux.png and b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Trailing-Actions-light-linux.png differ diff --git a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Trailing-Actions-light-tritanopia-linux.png b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Trailing-Actions-light-tritanopia-linux.png index 3df5decf425..1eeb464bfd7 100644 Binary files a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Trailing-Actions-light-tritanopia-linux.png and b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Trailing-Actions-light-tritanopia-linux.png differ diff --git a/packages/react/src/TreeView/TreeView.examples.stories.tsx b/packages/react/src/TreeView/TreeView.examples.stories.tsx index 01bfb179af2..3a60e0a20a7 100644 --- a/packages/react/src/TreeView/TreeView.examples.stories.tsx +++ b/packages/react/src/TreeView/TreeView.examples.stories.tsx @@ -85,6 +85,7 @@ export const TrailingActions: StoryFn = () => { label: 'Pull Requests', onClick: () => alert('Pull Requests clicked'), icon: GitPullRequestIcon, + count: 5, }, ]} > diff --git a/packages/react/src/TreeView/TreeView.tsx b/packages/react/src/TreeView/TreeView.tsx index c94caefc773..ccb08352102 100644 --- a/packages/react/src/TreeView/TreeView.tsx +++ b/packages/react/src/TreeView/TreeView.tsx @@ -22,10 +22,11 @@ import {useTypeahead} from './useTypeahead' import {SkeletonAvatar} from '../SkeletonAvatar' import {SkeletonText} from '../SkeletonText' import {Dialog} from '../Dialog/Dialog' -import {IconButton} from '../Button' +import {Button, IconButton} from '../Button' import {ActionList} from '../ActionList' import {getAccessibleKeybindingHintString} from '../KeybindingHint' import {useIsMacOS} from '../hooks' +import {Tooltip} from '../TooltipV2' // ---------------------------------------------------------------------------- // Context @@ -80,6 +81,8 @@ export type TreeViewSecondaryActions = { label: string onClick: () => void icon: Icon + count?: number | string + className?: string } /* Size of toggle icon in pixels. */ @@ -739,7 +742,7 @@ const TrailingAction = (props: TreeViewTrailingAction) => { return ( <>
- ; {shortcutText} + - {shortcutText}
{ } onKeyDown={event => event.stopPropagation()} > - {items.map(({label, onClick, icon}, index) => ( - { - // hack to send focus back to the tree item after the action is triggered via click - // this is needed because the trailing action shouldn't be focused, as it does not interact well with - // the focus management of TreeView - const parentElement = document.getElementById(itemId) - parentElement?.focus() - }} - /> - ))} + {items.map(({label, onClick, icon, count, className}, index) => { + // If there is a count, we render a Button instead of an IconButton, + // as IconButton doesn't support displaying a count. + if (count) { + return ( + +
) @@ -816,12 +844,18 @@ const ActionDialog: React.FC = ({items, onClose}) => }} > - {items.map(({label, onClick, icon: Icon}, index) => ( + {items.map(({label, onClick, icon: Icon, count}, index) => ( {label} + {count ? ( + + {count} + items + + ) : null} ))}