Merge 97c0679 into 27d2c15

.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

@@ -269,7 +269,7 @@ export const SingleSelect = () => {
   )
 }
 
-export const MultiSelect = () => {
+export const MenuMultiSelect = () => {
   const [selectedIndices, setSelectedIndices] = React.useState<number[]>([0])
   const handleSelect = (index: number) => {
     if (selectedIndices.includes(index)) {
@@ -300,6 +300,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

@@ -1,7 +1,6 @@
 import React from 'react'
 import {Box, ActionMenu, ActionList, Button, IconButton} from '../'
 import {
-  GearIcon,
   MilestoneIcon,
   KebabHorizontalIcon,
   IssueOpenedIcon,
@@ -26,12 +25,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>
@@ -236,7 +236,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>
@@ -245,7 +245,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>
@@ -267,9 +267,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},
   ])