SelectPanel2: Add modal variant

.changeset/long-pumas-shout.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+experimental/SelectPanel: Add `modal` variant

src/drafts/SelectPanel2/SelectPanel.tsx

@@ -45,6 +45,7 @@ const SelectPanelContext = React.createContext<{
 export type SelectPanelProps = {
   title: string
   description?: string
+  variant?: 'anchored' | 'modal'
   selectionVariant?: ActionListProps['selectionVariant'] | 'instant'
   id?: string
 
@@ -66,6 +67,7 @@ export type SelectPanelProps = {
 const Panel: React.FC<SelectPanelProps> = ({
   title,
   description,
+  variant = 'anchored',
   selectionVariant = 'multiple',
   id,
 
@@ -154,7 +156,11 @@ const Panel: React.FC<SelectPanelProps> = ({
   else dialogRef.current?.close()
 
   // dialog handles Esc automatically, so we have to sync internal state
-  React.useEffect(() => dialogRef.current?.addEventListener('close', onInternalClose))
+  React.useEffect(() => {
+    const dialog = dialogRef.current
+    dialog?.addEventListener('close', onInternalClose)
+    return () => dialog?.removeEventListener('close', onInternalClose)
+  })
 
   // React doesn't support autoFocus for dialog: https://github.com/facebook/react/issues/23301
   // tl;dr: react takes over autofocus instead of letting the browser handle it,
@@ -199,12 +205,12 @@ const Panel: React.FC<SelectPanelProps> = ({
         width={width}
         height={height}
         sx={{
-          ...position,
           // reset dialog default styles
           border: 'none',
           padding: 0,
-          margin: 0,
-          '::backdrop': {background: 'transparent'},
+
+          ...(variant === 'anchored' ? {margin: 0, top: position?.top, left: position?.left} : {}),
+          '::backdrop': {backgroundColor: variant === 'anchored' ? 'transparent' : 'primer.canvas.backdrop'},
 
           '& [data-selectpanel-primary-actions]': {
             animation: footerAnimationEnabled ? 'selectpanel-gelatine 350ms linear' : 'none',

src/drafts/SelectPanel2/stories/SelectPanel.examples.stories.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import {SelectPanel} from '../SelectPanel'
-import {ActionList, ActionMenu, Avatar, Box, Button, Flash} from '../../../index'
-import {ArrowRightIcon, AlertIcon, EyeIcon, GitBranchIcon, TriangleDownIcon, GearIcon} from '@primer/octicons-react'
+import {ActionList, ActionMenu, Avatar, Box, Button} from '../../../index'
+import {ArrowRightIcon, EyeIcon, GitBranchIcon, TriangleDownIcon, GearIcon} from '@primer/octicons-react'
 import data from './mock-data'
 
 export default {
@@ -370,56 +370,27 @@ export const OpenFromMenu = () => {
   /* Open state */
   const [menuOpen, setMenuOpen] = React.useState(false)
   const [selectPanelOpen, setSelectPanelOpen] = React.useState(false)
-  const buttonRef = React.useRef<HTMLButtonElement>(null)
 
   /* Selection */
   const [selectedSetting, setSelectedSetting] = React.useState<string>('All activity')
-  const [selectedEvents, setSelectedEvents] = React.useState<string[]>([])
+  const initialCustomEvents: string[] = []
+  const [selectedCustomEvents, setSelectedCustomEvents] = React.useState<string[]>(initialCustomEvents)
 
   const onEventSelect = (event: string) => {
-    if (!selectedEvents.includes(event)) setSelectedEvents([...selectedEvents, event])
-    else setSelectedEvents(selectedEvents.filter(name => name !== event))
-  }
-
-  const onSelectPanelSubmit = () => {
-    setSelectedSetting('Custom')
+    if (!selectedCustomEvents.includes(event)) setSelectedCustomEvents([...selectedCustomEvents, event])
+    else setSelectedCustomEvents(selectedCustomEvents.filter(name => name !== event))
   }
 
   const itemsToShow = ['Issues', 'Pull requests', 'Releases', 'Discussions', 'Security alerts']
 
   return (
     <>
-      <h1>Open from ActionMenu</h1>
-      <Flash variant="danger">
-        <AlertIcon />
-        This implementation will most likely change.{' '}
-        <a href="https://github.com/github/primer/discussions/2614#discussioncomment-6879407">
-          See decision log for more details.
-        </a>
-      </Flash>
-      <p>
-        To open SelectPanel from a menu, you would need to use an external anchor and pass `anchorRef` to `SelectPanel`.
-        You would also need to control the `open` state for both ActionMenu and SelectPanel.
-        <br />
-        <br />
-        Important: Pass the same `anchorRef` to both ActionMenu and SelectPanel
-      </p>
-
-      <Button
-        ref={buttonRef}
-        leadingVisual={EyeIcon}
-        trailingAction={TriangleDownIcon}
-        aria-haspopup
-        aria-expanded={menuOpen || selectPanelOpen ? true : undefined}
-        onClick={() => {
-          if (menuOpen) setMenuOpen(false)
-          else if (selectPanelOpen) setSelectPanelOpen(false)
-          else setMenuOpen(true)
-        }}
-      >
-        {selectedSetting === 'Ignore' ? 'Watch' : 'Unwatch'}
-      </Button>
-      <ActionMenu anchorRef={buttonRef} open={menuOpen} onOpenChange={value => setMenuOpen(value)}>
+      <h1>Open in modal from ActionMenu</h1>
+
+      <ActionMenu open={menuOpen} onOpenChange={value => setMenuOpen(value)}>
+        <ActionMenu.Button leadingVisual={EyeIcon}>
+          {selectedSetting === 'Ignore' ? 'Watch' : 'Unwatch'}
+        </ActionMenu.Button>
         <ActionMenu.Overlay width="medium">
           <ActionList selectionVariant="single">
             <ActionList.Item
@@ -444,7 +415,13 @@ export const OpenFromMenu = () => {
               Ignore
               <ActionList.Description variant="block">Never be notified.</ActionList.Description>
             </ActionList.Item>
-            <ActionList.Item selected={selectedSetting === 'Custom'} onSelect={() => setSelectPanelOpen(true)}>
+            <ActionList.Item
+              selected={selectedSetting === 'Custom'}
+              onSelect={() => {
+                setMenuOpen(false)
+                setSelectPanelOpen(true)
+              }}
+            >
               Custom
               <ActionList.TrailingVisual>
                 <ArrowRightIcon />
@@ -456,24 +433,29 @@ export const OpenFromMenu = () => {
           </ActionList>
         </ActionMenu.Overlay>
       </ActionMenu>
-
       <SelectPanel
+        variant="modal"
         title="Custom"
         open={selectPanelOpen}
-        anchorRef={buttonRef}
+        height="medium"
         onSubmit={() => {
+          setSelectedSetting('Custom')
           setSelectPanelOpen(false)
-          onSelectPanelSubmit()
+          setMenuOpen(false)
         }}
         onCancel={() => {
+          setSelectedCustomEvents(initialCustomEvents)
           setSelectPanelOpen(false)
           setMenuOpen(true)
         }}
-        height="medium"
       >
         <ActionList>
           {itemsToShow.map(item => (
-            <ActionList.Item key={item} onSelect={() => onEventSelect(item)} selected={selectedEvents.includes(item)}>
+            <ActionList.Item
+              key={item}
+              onSelect={() => onEventSelect(item)}
+              selected={selectedCustomEvents.includes(item)}
+            >
               {item}
             </ActionList.Item>
           ))}

src/drafts/SelectPanel2/stories/SelectPanel.features.stories.tsx

@@ -384,3 +384,56 @@ export const ExternalAnchor = () => {
     </>
   )
 }
+
+export const AsModal = () => {
+  const initialSelectedLabels = data.issue.labelIds // mock initial state: has selected labels
+  const [selectedLabelIds, setSelectedLabelIds] = React.useState<string[]>(initialSelectedLabels)
+
+  /* Selection */
+  const onLabelSelect = (labelId: string) => {
+    if (!selectedLabelIds.includes(labelId)) setSelectedLabelIds([...selectedLabelIds, labelId])
+    else setSelectedLabelIds(selectedLabelIds.filter(id => id !== labelId))
+  }
+
+  const onSubmit = () => {
+    data.issue.labelIds = selectedLabelIds // pretending to persist changes
+
+    // eslint-disable-next-line no-console
+    console.log('form submitted')
+  }
+
+  const sortingFn = (itemA: {id: string}, itemB: {id: string}) => {
+    const initialSelectedIds = data.issue.labelIds
+    if (initialSelectedIds.includes(itemA.id) && initialSelectedIds.includes(itemB.id)) return 1
+    else if (initialSelectedIds.includes(itemA.id)) return -1
+    else if (initialSelectedIds.includes(itemB.id)) return 1
+    else return 1
+  }
+
+  const itemsToShow = data.labels.sort(sortingFn)
+
+  return (
+    <>
+      <h1>SelectPanel as Modal</h1>
+
+      <SelectPanel variant="modal" title="Select labels" onSubmit={onSubmit}>
+        <SelectPanel.Button>Assign label</SelectPanel.Button>
+
+        <ActionList>
+          {itemsToShow.map(label => (
+            <ActionList.Item
+              key={label.id}
+              onSelect={() => onLabelSelect(label.id)}
+              selected={selectedLabelIds.includes(label.id)}
+            >
+              <ActionList.LeadingVisual>{getCircle(label.color)}</ActionList.LeadingVisual>
+              {label.name}
+              <ActionList.Description variant="block">{label.description}</ActionList.Description>
+            </ActionList.Item>
+          ))}
+        </ActionList>
+        <SelectPanel.Footer />
+      </SelectPanel>
+    </>
+  )
+}