feat(SelectPanel): Remove sxProp

.changeset/long-swans-boil.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": major
+---
+
+Remove sxProp from SelectPanel

e2e/components/SelectPanel.test.ts

@@ -37,14 +37,6 @@ const scenarios = matrix({
       id: 'components-selectpanel-dev--with-css',
       name: 'With Css',
     },
-    {
-      id: 'components-selectpanel-dev--with-sx',
-      name: 'With Sx',
-    },
-    {
-      id: 'components-selectpanel-dev--with-sx-and-css',
-      name: 'With Sx and Css',
-    },
   ],
 })
 

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

@@ -114,108 +114,3 @@ export const WithCss = () => {
     </FeatureFlags>
   )
 }
-
-export const WithSx = () => {
-  const [selected, setSelected] = useState<ItemInput[]>(items.slice(1, 3))
-  const [filter, setFilter] = 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)
-
-  return (
-    <FeatureFlags
-      flags={{
-        primer_react_css_modules_team: true,
-        primer_react_css_modules_staff: true,
-        primer_react_css_modules_ga: true,
-      }}
-    >
-      <FormControl>
-        <FormControl.Label>Labels</FormControl.Label>
-        <SelectPanel
-          title="Select labels"
-          placeholder="Select labels" // button text when no items are selected
-          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}
-          onFilterChange={setFilter}
-          sx={{fontFamily: 'Times New Roman'}}
-        />
-      </FormControl>
-    </FeatureFlags>
-  )
-}
-
-export const WithSxAndCSS = () => {
-  const [selected, setSelected] = useState<ItemInput[]>(items.slice(1, 3))
-  const [filter, setFilter] = 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)
-
-  return (
-    <FeatureFlags
-      flags={{
-        primer_react_css_modules_team: true,
-        primer_react_css_modules_staff: true,
-        primer_react_css_modules_ga: true,
-      }}
-    >
-      <FormControl>
-        <FormControl.Label>Labels</FormControl.Label>
-        <SelectPanel
-          title="Select labels"
-          placeholder="Select labels" // button text when no items are selected
-          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}
-          onFilterChange={setFilter}
-          sx={{fontFamily: 'Times New Roman'}}
-          className="testCustomClassnameMono"
-        />
-      </FormControl>
-    </FeatureFlags>
-  )
-}

packages/react/src/SelectPanel/SelectPanel.tsx

@@ -49,7 +49,7 @@ interface SelectPanelBaseProps {
 }
 
 export type SelectPanelProps = SelectPanelBaseProps &
-  Omit<FilteredActionListProps, 'selectionVariant'> &
+  Omit<FilteredActionListProps, 'selectionVariant' | 'sx'> &
   Pick<AnchoredOverlayProps, 'open'> &
   AnchoredOverlayWrapperAnchorProps &
   (SelectPanelSingleSelection | SelectPanelMultiSelection)
@@ -100,7 +100,6 @@ export function SelectPanel({
   footer,
   textInputProps,
   overlayProps,
-  sx,
   className,
   ...listProps
 }: SelectPanelProps): JSX.Element {
@@ -265,7 +264,7 @@ export function SelectPanel({
             inputRef={inputRef}
             // inheriting height and maxHeight ensures that the FilteredActionList is never taller
             // than the Overlay (which would break scrolling the items)
-            sx={enabled ? sx : {...sx, height: 'inherit', maxHeight: 'inherit'}}
+            sx={enabled ? undefined : {height: 'inherit', maxHeight: 'inherit'}}
             className={enabled ? clsx(className, classes.FilteredActionList) : className}
           />
           {footer && (