Add Modal variant with declarative buttons to PRC SelectPanel

.changeset/selectpanel-modal.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": minor
+---
+
+SelectPanel: Add variant="modal"

e2e/components/SelectPanel.test.ts

@@ -15,6 +15,8 @@ const scenarios = matrix({
     {id: 'components-selectpanel-features--with-item-dividers', name: 'With Item Dividers'},
     {id: 'components-selectpanel-features--with-label-internally', name: 'With Label Internally'},
     {id: 'components-selectpanel-features--with-label-visually-hidden', name: 'With Label Visually Hidden'},
+    {id: 'components-selectpanel-features--multi-select-modal', name: 'Multi Select Modal'},
+    {id: 'components-selectpanel-features--single-select-modal', name: 'Single Select Modal'},
     {
       id: 'components-selectpanel-features--with-placeholder-for-search-input',
       name: 'With Placeholder for Search Input',

packages/react/src/ActionList/Selection.tsx

@@ -8,6 +8,7 @@ import Box from '../Box'
 import {useFeatureFlag} from '../FeatureFlags'
 import classes from './ActionList.module.css'
 import {actionListCssModulesFlag} from './featureflag'
+import Radio from '../Radio'
 
 type SelectionProps = Pick<ActionListItemProps, 'selected' | 'className'>
 export const Selection: React.FC<React.PropsWithChildren<SelectionProps>> = ({selected, className}) => {
@@ -34,6 +35,15 @@ export const Selection: React.FC<React.PropsWithChildren<SelectionProps>> = ({se
     }
   }
 
+  if (selectionVariant === 'radio') {
+    return (
+      <VisualContainer className={className} sx={enabled ? undefined : {marginRight: '8px'}}>
+        {/* This is just a way to get the visuals from Radio, but it should be ignored in terms of accessibility */}
+        <Radio value="unused" checked={selected} aria-hidden tabIndex={-1} />
+      </VisualContainer>
+    )
+  }
+
   if (selectionVariant === 'single' || listRole === 'menu') {
     if (enabled) {
       return (

packages/react/src/ActionList/shared.ts

@@ -124,7 +124,7 @@ export type ActionListProps = React.PropsWithChildren<{
   /**
    * Whether multiple Items or a single Item can be selected.
    */
-  selectionVariant?: 'single' | 'multiple'
+  selectionVariant?: 'single' | 'radio' | 'multiple'
   /**
    * Display a divider above each `Item` in this `List` when it does not follow a `Header` or `Divider`.
    */

packages/react/src/AnchoredOverlay/AnchoredOverlay.tsx

@@ -216,6 +216,7 @@ export const AnchoredOverlay: React.FC<React.PropsWithChildren<AnchoredOverlayPr
           width={width}
           top={currentResponsiveVariant === 'anchored' ? position?.top || 0 : undefined}
           left={currentResponsiveVariant === 'anchored' ? position?.left || 0 : undefined}
+          responsiveVariant={variant.narrow === 'fullscreen' ? 'fullscreen' : undefined}
           data-variant={currentResponsiveVariant}
           anchorSide={position?.anchorSide}
           className={className}

packages/react/src/Overlay/Overlay.docs.json

@@ -143,6 +143,13 @@
     {
       "name": "sx",
       "type": "SystemStyleObject"
+    },
+    {
+      "name": "responsiveVariant",
+      "type": "'fullscreen'",
+      "required": false,
+      "description": "Optional prop to set responsive variant for narrow screen sizes",
+      "defaultValue": ""
     }
   ],
   "subcomponents": []

packages/react/src/Overlay/Overlay.module.css

@@ -157,14 +157,16 @@
     visibility: hidden;
   }
 
-  &:where([data-variant='fullscreen']) {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100vw;
-    height: 100vh;
-    margin: 0;
-    border-radius: unset;
+  &:where([data-responsive='fullscreen']) {
+    @media screen and (--viewportRange-narrow) {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100vw;
+      height: 100vh;
+      margin: 0;
+      border-radius: unset;
+    }
   }
 
   @supports (height: 100dvh) {

packages/react/src/Overlay/Overlay.tsx

@@ -103,14 +103,16 @@ const StyledOverlay = toggleStyledComponent(
       max-width: calc(100vw - 2rem);
     }
 
-    &:where([data-variant='fullscreen']) {
-      position: fixed;
-      top: 0;
-      left: 0;
-      width: 100vw;
-      height: 100vh;
-      margin: 0;
-      border-radius: unset;
+    &:where([data-responsive='fullscreen']) {
+      @media screen and (max-width: calc(768px - 0.02px)) {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100vw;
+        height: 100vh;
+        margin: 0;
+        border-radius: unset;
+      }
     }
 
     ${sx};
@@ -128,6 +130,7 @@ type BaseOverlayProps = {
   role?: AriaRole
   children?: React.ReactNode
   className?: string
+  responsiveVariant?: 'fullscreen' // we only support fullscreen today but we might add bottomsheet in the future
 }
 
 type OwnOverlayProps = Merge<StyledOverlayProps, BaseOverlayProps>
@@ -266,6 +269,7 @@ const Overlay = React.forwardRef<HTMLDivElement, internalOverlayProps>(
       role = 'none',
       visibility = 'visible',
       width = 'auto',
+      responsiveVariant,
       ...props
     },
     forwardedRef,
@@ -323,6 +327,7 @@ const Overlay = React.forwardRef<HTMLDivElement, internalOverlayProps>(
           right={right}
           height={height}
           visibility={visibility}
+          data-responsive={responsiveVariant}
           {...props}
         />
       </Portal>

packages/react/src/Radio/Radio.tsx

@@ -51,6 +51,7 @@ const Radio = React.forwardRef<HTMLInputElement, RadioProps>(
       required,
       value,
       className,
+      'aria-hidden': ariaHidden = false,
       ...rest
     }: RadioProps,
     ref,
@@ -62,7 +63,7 @@ const Radio = React.forwardRef<HTMLInputElement, RadioProps>(
     }
     const name = nameProp || radioGroupContext?.name
 
-    if (!name) {
+    if (!name && !ariaHidden) {
       // eslint-disable-next-line no-console
       console.warn(
         'A radio input must have a `name` attribute. Pass `name` as a prop directly to each Radio, or nest them in a `RadioGroup` component with a `name` prop',
@@ -84,6 +85,7 @@ const Radio = React.forwardRef<HTMLInputElement, RadioProps>(
           required={required}
           onChange={handleOnChange}
           className={clsx(className, sharedClasses.Input, classes.Radio)}
+          aria-hidden={ariaHidden}
           {...rest}
         />
       )

packages/react/src/SelectPanel/SelectPanel.dev.stories.tsx

@@ -7,6 +7,8 @@ import {Button} from '../Button'
 import {SelectPanel} from '.'
 import type {ItemInput} from '../deprecated/ActionList/List'
 import FormControl from '../FormControl'
+import Text from '../Text'
+import {MultiSelectModal, SingleSelect, SingleSelectModal, WithOnCancel} from './SelectPanel.features.stories'
 
 const meta: Meta<typeof SelectPanel> = {
   title: 'Components/SelectPanel/Dev',
@@ -187,3 +189,45 @@ export const WithSxAndCSS = () => {
     </FormControl>
   )
 }
+
+export const AllVariants = () => {
+  return (
+    <>
+      <Text fontSize={3} fontWeight="bold">
+        Showcase of all the SelectPanel variants
+      </Text>
+      <br />
+      <Text>
+        Test the different interactions below to see how the SelectPanel behaves in different selection and anchoring
+        modes. The size of the screen also affects how the user interacts with the SelectPanel.
+      </Text>
+      <br />
+      <br />
+
+      <Text fontWeight="bold">Single Select Panel</Text>
+      <br />
+      <Text>This panel allows selecting a single item from the list.</Text>
+      <SingleSelect />
+      <br />
+
+      <Text fontWeight="bold">Single Select Modal</Text>
+      <br />
+      <Text>This modal allows selecting a single item with a modal interface.</Text>
+      <SingleSelectModal />
+      <br />
+
+      <Text fontWeight="bold">Multi Select Panel</Text>
+      <br />
+      <Text>This panel allows selecting multiple items from the list.</Text>
+      <WithOnCancel />
+      <br />
+
+      <Text fontWeight="bold">Multi Select Modal</Text>
+      <Text>
+        <br />
+        This modal allows selecting multiple items with a modal interface.
+      </Text>
+      <MultiSelectModal />
+    </>
+  )
+}

packages/react/src/SelectPanel/SelectPanel.docs.json

@@ -130,7 +130,7 @@
     {
       "name": "onCancel",
       "type": "() => void",
-      "description": "(Narrow screens) Callback when the user hits cancel or close",
+      "description": "(Narrow screens and variant=modal) Callback when the user hits cancel or close",
       "defaultValue": ""
     },
     {
@@ -145,6 +145,12 @@
       "defaultValue": "",
       "description": "See [TextInput props](/react/TextInput#props)."
     },
+    {
+      "name": "variant",
+      "type": "'anchored' | 'modal'",
+      "description": "Anchored by default, SelectPanel can be opened as a modal",
+      "defaultValue": "'anchored'"
+    },
     {
       "name": "footer",
       "type": "string | React.ReactElement",

packages/react/src/SelectPanel/SelectPanel.features.stories.tsx

@@ -167,12 +167,6 @@ export const SingleSelect = () => {
   const [selected, setSelected] = useState<ItemInput | undefined>(items[0])
   const [filter, setFilter] = useState('')
   const filteredItems = items.filter(item => item.text.toLowerCase().startsWith(filter.toLowerCase()))
-  // design guidelines say to sort selected items first
-  const selectedItemsSortedFirst = filteredItems.sort((a, b) => {
-    if (a.text === selected?.text) return -1
-    if (b.text === selected?.text) return 1
-    return 0
-  })
   const [open, setOpen] = useState(false)
 
   return (
@@ -187,12 +181,12 @@ export const SingleSelect = () => {
         placeholder="Select labels" // button text when no items are selected
         open={open}
         onOpenChange={setOpen}
-        items={selectedItemsSortedFirst}
+        items={filteredItems}
         selected={selected}
         onSelectedChange={setSelected}
         onFilterChange={setFilter}
         width="medium"
-        message={selectedItemsSortedFirst.length === 0 ? NoResultsMessage(filter) : undefined}
+        message={filteredItems.length === 0 ? NoResultsMessage(filter) : undefined}
       />
     </FormControl>
   )
@@ -202,14 +196,6 @@ export const MultiSelect = () => {
   const [selected, setSelected] = useState<ItemInput[]>(items.slice(1, 3))
   const [filter, setFilter] = useState('')
   const filteredItems = items.filter(item => item.text.toLowerCase().startsWith(filter.toLowerCase()))
-  // design guidelines say to sort selected items first
-  const selectedItemsSortedFirst = filteredItems.sort((a, b) => {
-    const aIsSelected = selected.some(selectedItem => selectedItem.text === a.text)
-    const bIsSelected = selected.some(selectedItem => selectedItem.text === b.text)
-    if (aIsSelected && !bIsSelected) return -1
-    if (!aIsSelected && bIsSelected) return 1
-    return 0
-  })
   const [open, setOpen] = useState(false)
 
   return (
@@ -226,12 +212,12 @@ export const MultiSelect = () => {
         )}
         open={open}
         onOpenChange={setOpen}
-        items={selectedItemsSortedFirst}
+        items={filteredItems}
         selected={selected}
         onSelectedChange={setSelected}
         onFilterChange={setFilter}
         width="medium"
-        message={selectedItemsSortedFirst.length === 0 ? NoResultsMessage(filter) : undefined}
+        message={filteredItems.length === 0 ? NoResultsMessage(filter) : undefined}
       />
     </FormControl>
   )
@@ -756,14 +742,6 @@ export const WithOnCancel = () => {
   const [selected, setSelected] = React.useState<ItemInput[]>(intialSelection)
   const [filter, setFilter] = React.useState('')
   const filteredItems = items.filter(item => item.text.toLowerCase().startsWith(filter.toLowerCase()))
-  // design guidelines say to sort selected items first
-  const selectedItemsSortedFirst = filteredItems.sort((a, b) => {
-    const aIsSelected = selected.some(selectedItem => selectedItem.text === a.text)
-    const bIsSelected = selected.some(selectedItem => selectedItem.text === b.text)
-    if (aIsSelected && !bIsSelected) return -1
-    if (!aIsSelected && bIsSelected) return 1
-    return 0
-  })
 
   const [open, setOpen] = useState(false)
   React.useEffect(() => {
@@ -784,7 +762,7 @@ export const WithOnCancel = () => {
         )}
         open={open}
         onOpenChange={setOpen}
-        items={selectedItemsSortedFirst}
+        items={filteredItems}
         selected={selected}
         onSelectedChange={setSelected}
         onCancel={() => setSelected(intialSelection)}
@@ -794,3 +772,68 @@ export const WithOnCancel = () => {
     </FormControl>
   )
 }
+
+export const MultiSelectModal = () => {
+  const [intialSelection, setInitialSelection] = React.useState<ItemInput[]>(items.slice(1, 3))
+
+  const [selected, setSelected] = React.useState<ItemInput[]>(intialSelection)
+  const [filter, setFilter] = React.useState('')
+  const [open, setOpen] = useState(false)
+
+  React.useEffect(() => {
+    if (!open) setInitialSelection(selected) // Save selection as initialSelection for next time
+  }, [open, selected])
+
+  const filteredItems = items.filter(item => item.text.toLowerCase().startsWith(filter.toLowerCase()))
+
+  return (
+    <SelectPanel
+      variant="modal"
+      title="Select labels"
+      placeholder="Select labels"
+      subtitle="Use labels to organize issues and pull requests"
+      renderAnchor={({children, ...anchorProps}) => (
+        <Button trailingAction={TriangleDownIcon} {...anchorProps} aria-haspopup="dialog">
+          {children}
+        </Button>
+      )}
+      open={open}
+      onOpenChange={setOpen}
+      items={filteredItems}
+      selected={selected}
+      onSelectedChange={setSelected}
+      onCancel={() => setSelected(intialSelection)}
+      onFilterChange={setFilter}
+      width="medium"
+    />
+  )
+}
+
+export const SingleSelectModal = () => {
+  const [selected, setSelected] = useState<ItemInput | undefined>(undefined)
+  const [filter, setFilter] = useState('')
+  const [open, setOpen] = useState(false)
+  const filteredItems = items.filter(item => item.text.toLowerCase().startsWith(filter.toLowerCase()))
+
+  return (
+    <SelectPanel
+      variant="modal"
+      title="Select labels"
+      placeholder="Select labels"
+      subtitle="Use labels to organize issues and pull requests"
+      renderAnchor={({children, ...anchorProps}) => (
+        <Button trailingAction={TriangleDownIcon} {...anchorProps} aria-haspopup="dialog">
+          {children}
+        </Button>
+      )}
+      open={open}
+      onOpenChange={setOpen}
+      items={filteredItems}
+      selected={selected}
+      onSelectedChange={setSelected}
+      onCancel={() => {}}
+      onFilterChange={setFilter}
+      width="medium"
+    />
+  )
+}