SelectPanel: Add variant=modal

e2e/components/SelectPanel.test.ts

@@ -32,6 +32,14 @@ const scenarios = matrix({
       id: 'components-selectpanel-examples--height-initial-with-underflowing-items-after-fetch',
       name: 'Height Initial with Underflowing Items After Fetch',
     },
+    {
+      id: 'components-selectpanel-features--modal-variant',
+      name: 'Modal variant',
+    },
+    {
+      id: 'components-selectpanel-features--modal-variant',
+      name: 'Modal variant with secondary action',
+    },
   ],
 })
 

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

@@ -68,6 +68,12 @@
       "defaultValue": "",
       "description": "See [TextInput props](/react/TextInput#props)."
     },
+    {
+      "name": "variant",
+      "type": "'anchored' | 'modal'",
+      "defaultValue": "anchored",
+      "description": "Anchored to the button or centered on the screen. Modal variant also adds Save and Cancel buttons."
+    },
     {
       "name": "footer",
       "type": "string | React.ReactElement",

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

@@ -369,3 +369,66 @@ export const WithGroups = () => {
     />
   )
 }
+
+export const ModalVariant = () => {
+  const [selected, setSelected] = React.useState<ItemInput[]>([items[0], items[1]])
+  const [filter, setFilter] = React.useState('')
+  const filteredItems = items.filter(item => item.text.toLowerCase().startsWith(filter.toLowerCase()))
+  const [open, setOpen] = useState(false)
+  const buttonRef = useRef<HTMLButtonElement>(null)
+
+  return (
+    <>
+      <h1>Multi Select Panel as Modal</h1>
+      <SelectPanel
+        variant="modal"
+        renderAnchor={({children, 'aria-labelledby': ariaLabelledBy, ...anchorProps}) => (
+          <Button aria-labelledby={` ${ariaLabelledBy}`} {...anchorProps}>
+            {children ?? 'Select Labels'}
+          </Button>
+        )}
+        anchorRef={buttonRef}
+        placeholderText="Filter Labels"
+        open={open}
+        onOpenChange={setOpen}
+        items={filteredItems}
+        selected={selected}
+        onSelectedChange={setSelected}
+        onFilterChange={setFilter}
+      />
+    </>
+  )
+}
+
+export const ModalVariantWithSecondaryAction = () => {
+  const [selected, setSelected] = React.useState<ItemInput[]>([items[0], items[1]])
+  const [filter, setFilter] = React.useState('')
+  const filteredItems = items.filter(item => item.text.toLowerCase().startsWith(filter.toLowerCase()))
+  const [open, setOpen] = useState(false)
+  const buttonRef = useRef<HTMLButtonElement>(null)
+
+  return (
+    <>
+      <h1>Multi Select Panel as Modal with secondary action</h1>
+      <SelectPanel
+        variant="modal"
+        // backward compatible API choice
+        // TODO: improve this API, rename it to a single secondaryAction or secondaryFooterSlotSomething
+        footer={<Button size="small">Edit labels</Button>}
+        renderAnchor={({children, 'aria-labelledby': ariaLabelledBy, ...anchorProps}) => (
+          <Button aria-labelledby={` ${ariaLabelledBy}`} {...anchorProps}>
+            {children ?? 'Select Labels'}
+          </Button>
+        )}
+        anchorRef={buttonRef}
+        placeholderText="Filter Labels"
+        open={open}
+        onOpenChange={setOpen}
+        items={filteredItems}
+        selected={selected}
+        onSelectedChange={setSelected}
+        onFilterChange={setFilter}
+      />
+    </>
+  )
+}

packages/react/src/SelectPanel/SelectPanel.tsx

@@ -29,23 +29,25 @@ interface SelectPanelMultiSelection {
   onSelectedChange: (selected: ItemInput[]) => void
 }
 
+type OpenGestures = 'anchor-click' | 'anchor-key-press'
+type CloseGestures = 'click-outside' | 'escape' | 'selection' | 'save-click' | 'cancel-click'
+
 interface SelectPanelBaseProps {
   // TODO: Make `title` required in the next major version
   title?: string | React.ReactElement
   subtitle?: string | React.ReactElement
-  onOpenChange: (
-    open: boolean,
-    gesture: 'anchor-click' | 'anchor-key-press' | 'click-outside' | 'escape' | 'selection',
-  ) => void
+  onOpenChange: (open: boolean, gesture: OpenGestures | CloseGestures) => void
   placeholder?: string
   // TODO: Make `inputLabel` required in next major version
   inputLabel?: string
   overlayProps?: Partial<OverlayProps>
   footer?: string | React.ReactElement
+  // TODO: do we need keep the old variants for backward-compat? there isn't any usage in dotcom
+  variant?: 'anchored' | 'modal' | FilteredActionListProps['variant']
 }
 
 export type SelectPanelProps = SelectPanelBaseProps &
-  Omit<FilteredActionListProps, 'selectionVariant'> &
+  Omit<FilteredActionListProps, 'selectionVariant' | 'variant'> &
   Pick<AnchoredOverlayProps, 'open'> &
   AnchoredOverlayWrapperAnchorProps &
   (SelectPanelSingleSelection | SelectPanelMultiSelection)
@@ -90,7 +92,8 @@ export function SelectPanel({
   items,
   footer,
   textInputProps,
-  overlayProps,
+  variant = 'anchored',
+  overlayProps = variant === 'modal' ? {maxWidth: 'medium', height: 'fit-content', maxHeight: 'large'} : undefined,
   sx,
   ...listProps
 }: SelectPanelProps): JSX.Element {
@@ -111,12 +114,16 @@ export function SelectPanel({
     [onOpenChange],
   )
   const onClose = useCallback(
-    (gesture: Parameters<Exclude<AnchoredOverlayProps['onClose'], undefined>>[0] | 'selection') => {
+    (gesture: Parameters<Exclude<AnchoredOverlayProps['onClose'], undefined>>[0] | CloseGestures) => {
       onOpenChange(false, gesture)
     },
     [onOpenChange],
   )
 
+  const onCancel = () => {
+    // TODO
+  }
+
   const renderMenuAnchor = useMemo(() => {
     if (renderAnchor === null) {
       return null
@@ -256,8 +263,19 @@ export function SelectPanel({
           /* this is required so that clicking the button while the panel is open does not re-open the panel */
           [anchorRef]
         }
-        {...position}
+        data-variant={variant}
         {...overlayProps}
+        {...(variant === 'anchored' ? position : {})}
+        sx={{
+          '&[data-variant="anchored"]': {
+            margin: 0,
+          },
+          '&[data-variant="modal"]': {
+            position: 'fixed',
+            inset: 0,
+            margin: 'auto',
+          },
+        }}
       >
         <LiveRegionOutlet />
         {usingModernActionList ? null : (
@@ -300,20 +318,56 @@ export function SelectPanel({
             // than the Overlay (which would break scrolling the items)
             sx={{...sx, height: 'inherit', maxHeight: 'inherit'}}
           />
-          {footer && (
+          {footer || variant === 'modal' ? (
             <Box
               sx={{
                 display: 'flex',
                 borderTop: '1px solid',
                 borderColor: 'border.default',
-                padding: 2,
+                padding: variant === 'modal' ? 3 : 2,
+                justifyContent: footer ? 'space-between' : 'end',
+                alignItems: 'center',
+                flexShrink: 0,
+                minHeight: '44px',
+                '> button': {
+                  // make button full width if there's just one
+                  width: variant === 'modal' ? 'auto' : '100%',
+                },
               }}
             >
               {footer}
+              {variant === 'modal' ? (
+                <Box sx={{display: 'flex', gap: 2}}>
+                  <Button
+                    type="button"
+                    size="small"
+                    onClick={() => {
+                      onCancel()
+                      onClose('cancel-click')
+                    }}
+                  >
+                    Cancel
+                  </Button>
+                  {/* TODO: loading state for save? */}
+                  <Button type="submit" size="small" variant="primary" onClick={() => onClose('save-click')}>
+                    Save
+                  </Button>
+                </Box>
+              ) : null}
             </Box>
-          )}
+          ) : null}
         </Box>
       </Overlay>
+      {variant === 'modal' && (
+        <Box
+          data-backdrop
+          sx={{
+            backgroundColor: 'primer.canvas.backdrop',
+            position: 'fixed',
+            inset: 0,
+          }}
+        />
+      )}
     </LiveRegion>
   )
 }