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);
 }