Revert "SelectPanel: Make panel full screen on narrow screens with Save and optional Cancel button (#5761)"

This reverts commit 94bc6e4.

Author: TylerJDev

.changeset/responsive-selectpanel.md

@@ -127,12 +127,6 @@
       "description": "Callback when the search input changes",
       "defaultValue": ""
     },
-    {
-      "name": "onCancel",
-      "type": "() => void",
-      "description": "(Narrow screens) Callback when the user hits cancel or close",
-      "defaultValue": ""
-    },
     {
       "name": "overlayProps",
       "type": "Partial<OverlayProps>",

.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Default-responsive-width-light-modern-action-list--true-linux.png

@@ -177,7 +177,6 @@ export const SingleSelect = () => {
         selected={selected}
         onSelectedChange={setSelected}
         onFilterChange={setFilter}
-        onCancel={() => setOpen(false)}
         width="medium"
       />
     </FormControl>
@@ -653,54 +652,3 @@ export const AsyncFetch: StoryObj<SelectPanelProps> = {
     },
   },
 }
-
-export const WithOnCancel = () => {
-  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 (
-    <FormControl>
-      <FormControl.Label>Labels</FormControl.Label>
-      <SelectPanel
-        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"
-      />
-    </FormControl>
-  )
-}

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

@@ -5,22 +5,17 @@
   flex-direction: column;
 }
 
-.Header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
+.Content {
   padding-top: var(--base-size-8);
-  padding-right: var(--base-size-8);
-  padding-left: var(--base-size-8);
+  padding-right: var(--base-size-16);
+  padding-left: var(--base-size-16);
 }
 
 .Title {
-  margin-left: var(--base-size-8);
   font-size: var(--text-body-size-medium);
 }
 
 .Subtitle {
-  margin-left: var(--base-size-8);
   font-size: var(--text-body-size-small);
   color: var(--fgColor-muted);
 }
@@ -73,22 +68,3 @@
   height: inherit;
   max-height: inherit;
 }
-
-.ResponsiveCloseButton {
-  display: none;
-
-  @media screen and (--viewportRange-narrow) {
-    display: inline-grid;
-  }
-}
-
-.ResponsiveFooter {
-  display: none;
-  padding: var(--base-size-16);
-
-  @media screen and (--viewportRange-narrow) {
-    display: flex;
-    gap: var(--stack-gap-condensed);
-    justify-content: right;
-  }
-}

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

@@ -1,4 +1,4 @@
-import {AlertIcon, InfoIcon, SearchIcon, StopIcon, TriangleDownIcon, XIcon} from '@primer/octicons-react'
+import {AlertIcon, InfoIcon, SearchIcon, StopIcon, TriangleDownIcon} from '@primer/octicons-react'
 import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react'
 import type {AnchoredOverlayProps} from '../AnchoredOverlay'
 import {AnchoredOverlay} from '../AnchoredOverlay'
@@ -11,7 +11,7 @@ import type {OverlayProps} from '../Overlay'
 import type {TextInputProps} from '../TextInput'
 import type {ItemProps, ItemInput} from './types'
 
-import {Button, IconButton} from '../Button'
+import {Button} from '../Button'
 import {useProvidedRefOrCreate} from '../hooks'
 import type {FocusZoneHookSettings} from '../hooks/useFocusZone'
 import {useId} from '../hooks/useId'
@@ -22,6 +22,7 @@ import type {FilteredActionListLoadingType} from '../FilteredActionList/Filtered
 import {FilteredActionListLoadingTypes} from '../FilteredActionList/FilteredActionListLoaders'
 import {useFeatureFlag} from '../FeatureFlags'
 import {announce} from '@primer/live-region-element'
+
 import classes from './SelectPanel.module.css'
 import {clsx} from 'clsx'
 
@@ -131,7 +132,6 @@ interface SelectPanelBaseProps {
     text: string | React.ReactElement
     variant: 'info' | 'warning' | 'error'
   }
-  onCancel?: () => void
 }
 
 export type SelectPanelProps = SelectPanelBaseProps &
@@ -194,7 +194,6 @@ export function SelectPanel({
   width,
   id,
   notice,
-  onCancel,
   ...listProps
 }: SelectPanelProps): JSX.Element {
   const titleId = useId()
@@ -358,7 +357,7 @@ export function SelectPanel({
     [onOpenChange],
   )
   const onClose = useCallback(
-    (gesture: Parameters<Exclude<AnchoredOverlayProps['onClose'], undefined>>[0] | 'selection' | 'escape') => {
+    (gesture: Parameters<Exclude<AnchoredOverlayProps['onClose'], undefined>>[0] | 'selection') => {
       onOpenChange(false, gesture)
     },
     [onOpenChange],
@@ -466,7 +465,6 @@ export function SelectPanel({
         height={height}
         width={width}
         anchorId={id}
-        variant={{regular: 'anchored', narrow: 'fullscreen'}}
         pinPosition={!height}
       >
         <LiveRegionOutlet />
@@ -485,54 +483,24 @@ export function SelectPanel({
           sx={enabled ? undefined : {display: 'flex', flexDirection: 'column', height: 'inherit', maxHeight: 'inherit'}}
           className={enabled ? classes.Wrapper : undefined}
         >
-          <Box
-            sx={
-              enabled
-                ? undefined
-                : {
-                    display: 'flex',
-                    justifyContent: 'space-between',
-                    alignItems: 'center',
-                    paddingTop: 2,
-                    paddingRight: 2,
-                    paddingLeft: 2,
-                  }
-            }
-            className={enabled ? classes.Header : undefined}
-          >
-            <div>
-              <Heading
-                as="h1"
-                id={titleId}
-                sx={enabled ? undefined : {fontSize: 1, marginLeft: 2}}
-                className={enabled ? classes.Title : undefined}
+          <Box sx={enabled ? undefined : {pt: 2, px: 3}} className={enabled ? classes.Content : undefined}>
+            <Heading
+              as="h1"
+              id={titleId}
+              sx={enabled ? undefined : {fontSize: 1}}
+              className={enabled ? classes.Title : undefined}
+            >
+              {title}
+            </Heading>
+            {subtitle ? (
+              <Box
+                id={subtitleId}
+                sx={enabled ? undefined : {fontSize: 0, color: 'fg.muted'}}
+                className={enabled ? classes.Subtitle : undefined}
               >
-                {title}
-              </Heading>
-              {subtitle ? (
-                <Box
-                  id={subtitleId}
-                  sx={enabled ? undefined : {marginLeft: 2, fontSize: 0, color: 'fg.muted'}}
-                  className={enabled ? classes.Subtitle : undefined}
-                >
-                  {subtitle}
-                </Box>
-              ) : null}
-            </div>
-            {onCancel && (
-              <IconButton
-                type="button"
-                variant="invisible"
-                icon={XIcon}
-                aria-label="Cancel and close"
-                sx={enabled ? undefined : {display: ['inline-grid', 'inline-grid', 'none', 'none']}}
-                className={enabled ? classes.ResponsiveCloseButton : undefined}
-                onClick={() => {
-                  onCancel()
-                  onClose('escape')
-                }}
-              />
-            )}
+                {subtitle}
+              </Box>
+            ) : null}
           </Box>
           {notice && (
             <div aria-live="polite" data-variant={notice.variant} className={classes.Notice}>
@@ -563,7 +531,7 @@ export function SelectPanel({
             className={enabled ? clsx(className, classes.FilteredActionList) : className}
             announcementsEnabled={false}
           />
-          {footer ? (
+          {footer && (
             <Box
               sx={
                 enabled
@@ -579,31 +547,7 @@ export function SelectPanel({
             >
               {footer}
             </Box>
-          ) : isMultiSelectVariant(selected) ? (
-            /* Save and Cancel buttons are only useful for multiple selection, single selection instantly closes the panel */
-            <div className={clsx(classes.Footer, classes.ResponsiveFooter)}>
-              {/* we add a save and cancel button on narrow screens when SelectPanel is full-screen */}
-              {onCancel && (
-                <Button
-                  size="medium"
-                  onClick={() => {
-                    onCancel()
-                    onClose('escape')
-                  }}
-                >
-                  Cancel
-                </Button>
-              )}
-              <Button
-                variant="primary"
-                size="medium"
-                block={onCancel ? false : true}
-                onClick={() => onClose('click-outside')}
-              >
-                Save
-              </Button>
-            </div>
-          ) : null}
+          )}
         </Box>
       </AnchoredOverlay>
     </LiveRegion>