ActionMenu: Only use checkmarks in menus and improve examples

.changeset/fifty-cooks-try.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": minor
+---
+
+ActionMenu: Only use checkmarks in menus instead of checkboxes

src/ActionList/ActionList.features.stories.tsx

@@ -319,6 +319,37 @@ export const MultiSelect = () => {
  )
 }
 
+export const ListBoxMultiSelect = () => {
+ const [selectedIndices, setSelectedIndices] = React.useState<number[]>([0])
+ const handleSelect = (index: number) => {
+ if (selectedIndices.includes(index)) {
+ setSelectedIndices(selectedIndices.filter(i => i !== index))
+ } else {
+ setSelectedIndices([...selectedIndices, index])
+ }
+ }
+ return (
+ <ActionList selectionVariant="multiple" aria-label="Project">
+ {projects.map((project, index) => (
+ <ActionList.Item
+ key={index}
+ role="menuitemcheckbox"
+ selected={selectedIndices.includes(index)}
+ aria-checked={selectedIndices.includes(index)}
+ onSelect={() => handleSelect(index)}
+ disabled={index === 3 ? true : undefined}
+ >
+ <ActionList.LeadingVisual>
+ <TableIcon />
+ </ActionList.LeadingVisual>
+ {project.name}
+ <ActionList.Description variant="block">{project.scope}</ActionList.Description>
+ </ActionList.Item>
+ ))}
+ </ActionList>
+ )
+}
+
 export const DisabledSelectedMultiselect = () => (
  <ActionList selectionVariant="multiple" role="menu" aria-label="Project">
  <ActionList.Item role="menuitemcheckbox" selected aria-checked disabled>

src/ActionList/Selection.tsx

@@ -8,7 +8,7 @@ import Box from '../Box'
 
 type SelectionProps = Pick<ActionListItemProps, 'selected'>
 export const Selection: React.FC<React.PropsWithChildren<SelectionProps>> = ({selected}) => {
- const {selectionVariant: listSelectionVariant} = React.useContext(ListContext)
+ const {selectionVariant: listSelectionVariant, role: listRole} = React.useContext(ListContext)
  const {selectionVariant: groupSelectionVariant} = React.useContext(GroupContext)
 
  /** selectionVariant in Group can override the selectionVariant in List root */
@@ -29,7 +29,7 @@ export const Selection: React.FC<React.PropsWithChildren<SelectionProps>> = ({se
  }
  }
 
- if (selectionVariant === 'single') {
+ if (selectionVariant === 'single' || listRole === 'menu') {
  return <LeadingVisualContainer>{selected && <CheckIcon />}</LeadingVisualContainer>
  }
 

src/ActionMenu/ActionMenu.examples.stories.tsx

@@ -31,12 +31,13 @@ export const GroupsAndDescriptions = () => {
  {name: 'FY23 - Q2', due: 'December 30, 2022', progress: 0},
  ]
 
- const [selectedMilestone, setSelectedMilestone] = React.useState<(typeof milestones)[0] | undefined>()
+ const [selectedMilestone, setSelectedMilestone] = React.useState<(typeof milestones)[0] | undefined>(milestones[2])
 
  return (
  <ActionMenu open>
- <ActionMenu.Button variant="default" trailingVisual={GearIcon}>
- Milestone
+ <ActionMenu.Button variant="default">
+ <Box sx={{display: 'inline-block', color: 'fg.muted'}}>Milestone:</Box>{' '}
+ {selectedMilestone?.name || 'Make a selection'}
  </ActionMenu.Button>
  <ActionMenu.Overlay width="medium">
  <ActionList selectionVariant="single" showDividers>
@@ -241,7 +242,7 @@ export const MixedSelection = () => {
 export const MultipleSections = () => {
  const items = [{name: 'Show code folding buttons'}, {name: 'Wrap lines'}, {name: 'Center content'}]
 
- const [selectedMilestone, setSelectedMilestone] = React.useState<(typeof items)[0] | undefined>()
+ const [selectedMilestone, setSelectedMilestone] = React.useState<(typeof items)[0] | undefined>(items[0])
 
  return (
  <ActionMenu open>
@@ -250,7 +251,7 @@ export const MultipleSections = () => {
  </ActionMenu.Anchor>
  <ActionMenu.Overlay width="small">
  <ActionList>
- <ActionList.Group title="Raw file content">
+ <ActionList.Group title="Raw file content" selectionVariant="multiple">
  <ActionList.Item onSelect={() => alert('Workflows clicked')}>Download</ActionList.Item>
  <ActionList.Divider />
  <ActionList.Item onSelect={() => alert('Workflows clicked')}>Jump to line</ActionList.Item>
@@ -272,9 +273,11 @@ export const MultipleSections = () => {
  ))}
  </ActionList.Group>
  <ActionList.Divider />
- <ActionList.Item onSelect={() => alert('Delete file')} variant="danger">
- Delete file
- </ActionList.Item>
+ <ActionList.Group title="View options" selectionVariant="multiple">
+ <ActionList.Item onSelect={() => alert('Delete file')} variant="danger">
+ Delete file
+ </ActionList.Item>
+ </ActionList.Group>
  </ActionList>
  </ActionMenu.Overlay>
  </ActionMenu>

src/ActionMenu/ActionMenu.features.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import {ActionMenu, ActionList} from '../'
+import {ActionMenu, ActionList, Box} from '../'
 import {WorkflowIcon, ArchiveIcon, GearIcon, CopyIcon, RocketIcon, CommentIcon, BookIcon} from '@primer/octicons-react'
 
 export default {
@@ -36,7 +36,7 @@ export const LinksAndActions = () => (
  </ActionList.LeadingVisual>
  </ActionList.Item>
  <ActionList.Divider />
- <ActionList.Group title="Github projects">
+ <ActionList.Group title="GitHub projects">
  <ActionList.LinkItem href="/">
  What&apos;s new
  <ActionList.LeadingVisual>
@@ -75,7 +75,9 @@ export const SingleSelect = () => {
 
  return (
  <ActionMenu>
- <ActionMenu.Button>Options: {selectedType.name}</ActionMenu.Button>
+ <ActionMenu.Button>
+ <Box sx={{color: 'fg.muted', display: 'inline-block'}}>Options:</Box> {selectedType.name}
+ </ActionMenu.Button>
  <ActionMenu.Overlay width="auto">
  <ActionList selectionVariant="single">
  {options.map((options, index) => (
@@ -93,7 +95,7 @@ export const MultiSelect = () => {
  type Option = {name: string; selected: boolean}
 
  const [options, setOptions] = React.useState<Option[]>([
- {name: 'Show code folding buttons', selected: false},
+ {name: 'Show code folding buttons', selected: true},
  {name: 'Wrap lines', selected: false},
  {name: 'Center content', selected: false},
  ])