TreeView: Add count to TreeView trailing actions

.changeset/two-pots-battle.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': minor
+---
+
+TreeView: Add `count` and `className` support for trailing actions

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,
  },
  ]}
  >

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 (
  <>
  <div id={trailingActionId} className={clsx('PRIVATE_VisuallyHidden', classes.TreeViewVisuallyHidden)}>
-; {shortcutText}
+- {shortcutText}
  </div>
  <div
  className={classes.TreeViewItemTrailingAction}
@@ -751,25 +754,50 @@ const TrailingAction = (props: TreeViewTrailingAction) => {
  }
  onKeyDown={event => event.stopPropagation()}
  >
- {items.map(({label, onClick, icon}, index) => (
- <IconButton
- icon={icon}
- variant="invisible"
- aria-label={label}
- className={classes.TreeViewItemTrailingActionButton}
- onClick={onClick}
- tabIndex={-1}
- aria-hidden={true}
- key={index}
- onKeyDown={() => {
- // 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 (
+ <Tooltip key={index} text={label}>
+ <Button
+ aria-label={label}
+ leadingVisual={icon}
+ variant="invisible"
+ className={clsx(className, classes.TreeViewItemTrailingActionButton)}
+ onClick={onClick}
+ onKeyDown={() => {
+ // 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()
+ }}
+ tabIndex={-1}
+ aria-hidden={true}
+ count={count}
+ />
+ </Tooltip>
+ )
+ }
+
+ return (
+ <IconButton
+ icon={icon}
+ variant="invisible"
+ aria-label={label}
+ className={clsx(className, classes.TreeViewItemTrailingActionButton)}
+ onClick={onClick}
+ tabIndex={-1}
+ aria-hidden={true}
+ key={index}
+ onKeyDown={() => {
+ const parentElement = document.getElementById(itemId)
+ parentElement?.focus()
+ }}
+ />
+ )
+ })}
  </div>
  </>
  )
@@ -816,12 +844,18 @@ const ActionDialog: React.FC<TreeViewActionDialogProps> = ({items, onClose}) =>
  }}
  >
  <ActionList>
- {items.map(({label, onClick, icon: Icon}, index) => (
+ {items.map(({label, onClick, icon: Icon, count}, index) => (
  <ActionList.Item key={index} onSelect={onClick}>
  <ActionList.LeadingVisual>
  <Icon />
  </ActionList.LeadingVisual>
  {label}
+ {count ? (
+ <ActionList.TrailingVisual>
+ {count}
+ <VisuallyHidden>items</VisuallyHidden>
+ </ActionList.TrailingVisual>
+ ) : null}
  </ActionList.Item>
  ))}
  </ActionList>