SelectPanel: Add variant=modal

.changeset/selectpanel-modal.md

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

packages/react/src/ActionList/ActionList.module.css

@@ -409,6 +409,10 @@
   visibility: hidden;
 }
 
+.SingleSelectRadio {
+  margin-right: var(--base-size-8);
+}
+
 /* button or a tag */
 
 /* [ [spacer] [leadingAction] [leadingVisual] [content] ] */

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,17 @@ export const Selection: React.FC<React.PropsWithChildren<SelectionProps>> = ({se
     }
   }
 
+  if (selectionVariant === 'radio') {
+    return (
+      <VisualContainer className={className}>
+        {/* This is just a way to get the visuals from Radio, but it should be ignored in terms of accessibility */}
+        <div aria-hidden="true">
+          <Radio className={classes.SingleSelectRadio} value="unused" checked={selected} />
+        </div>
+      </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,7 +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}
-          data-variant={currentResponsiveVariant}
+          responsiveVariant={variant.narrow === 'fullscreen' ? 'fullscreen' : undefined}
           anchorSide={position?.anchorSide}
           className={className}
           preventOverflow={preventOverflow}

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,12 +157,14 @@
     visibility: hidden;
   }
 
-  &:where([data-variant='fullscreen']) {
-    top: 0;
-    left: 0;
-    width: 100vw;
-    height: 100vh;
-    margin: 0;
-    border-radius: unset;
+  &:where([data-responsive='fullscreen']) {
+    @media screen and (--viewportRange-narrow) {
+      top: 0;
+      left: 0;
+      width: 100vw;
+      height: 100vh;
+      margin: 0;
+      border-radius: unset;
+    }
   }
 }

packages/react/src/Overlay/Overlay.tsx

@@ -103,13 +103,15 @@ const StyledOverlay = toggleStyledComponent(
       max-width: calc(100vw - 2rem);
     }
 
-    &:where([data-variant='fullscreen']) {
-      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)) {
+        top: 0;
+        left: 0;
+        width: 100vw;
+        height: 100vh;
+        margin: 0;
+        border-radius: unset;
+      }
     }
 
     ${sx};
@@ -127,6 +129,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>
@@ -265,6 +268,7 @@ const Overlay = React.forwardRef<HTMLDivElement, internalOverlayProps>(
       role = 'none',
       visibility = 'visible',
       width = 'auto',
+      responsiveVariant,
       ...props
     },
     forwardedRef,
@@ -322,6 +326,7 @@ const Overlay = React.forwardRef<HTMLDivElement, internalOverlayProps>(
           right={right}
           height={height}
           visibility={visibility}
+          data-responsive={responsiveVariant}
           {...props}
         />
       </Portal>

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

@@ -857,3 +857,80 @@ export const WithOnCancel = () => {
     </FormControl>
   )
 }
+
+export const AsMultiSelectModal = () => {
+  const [intialSelection, setInitialSelection] = React.useState<ItemInput[]>(items.slice(1, 3))
+
+  const [selected, setSelected] = React.useState<ItemInput[]>(intialSelection)
+  const [filter, setFilter] = React.useState('')
+  const filteredItems = items.filter(
+    item =>
+      // design guidelines say to always show selected items in the list
+      selected.some(selectedItem => selectedItem.text === item.text) ||
+      // then filter the rest
+      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(() => {
+    if (!open) setInitialSelection(selected) // set initialSelection for next time
+  }, [open, selected])
+
+  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={selectedItemsSortedFirst}
+      selected={selected}
+      onSelectedChange={setSelected}
+      onCancel={() => setSelected(intialSelection)}
+      onFilterChange={setFilter}
+      width="medium"
+    />
+  )
+}
+
+export const AsSingleSelectModal = () => {
+  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}
+      onFilterChange={setFilter}
+      width="medium"
+    />
+  )
+}

packages/react/src/SelectPanel/SelectPanel.module.css

@@ -13,7 +13,7 @@
 .Header {
   display: flex;
   justify-content: space-between;
-  align-items: center;
+  align-items: flex-start;
   padding-top: var(--base-size-8);
   padding-right: var(--base-size-8);
   padding-left: var(--base-size-8);
@@ -124,15 +124,29 @@
   @media screen and (--viewportRange-narrow) {
     display: inline-grid;
   }
+
+  &:where([data-variant='modal'] &) {
+    display: inline-grid;
+  }
 }
 
 .ResponsiveFooter {
   display: none;
   padding: var(--base-size-16);
+  gap: var(--stack-gap-condensed);
+  justify-content: right;
 
   @media screen and (--viewportRange-narrow) {
     display: flex;
-    gap: var(--stack-gap-condensed);
-    justify-content: right;
   }
+
+  &:where([data-variant='modal'] &) {
+    display: flex;
+  }
+}
+
+.Backdrop {
+  position: absolute;
+  inset: 0;
+  background-color: var(--overlay-backdrop-bgColor);
 }