Remove support for sx from FilteredActionList component (#6876)

Author: llastflowers

.changeset/mighty-lizards-lick.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": major
+---
+
+Update FilteredActionList and FilteredActionListLoaders components to no longer support sx

packages/react/src/FilteredActionList/FilteredActionList.module.css

@@ -11,6 +11,10 @@
   flex-grow: 1;
 }
 
+.ActionList {
+  flex-grow: 1;
+}
+
 .ActionListItem:focus {
   background: var(--control-transparent-bgColor-selected);
 

packages/react/src/FilteredActionList/FilteredActionList.tsx

@@ -15,7 +15,6 @@ import {useProvidedRefOrCreate} from '../hooks/useProvidedRefOrCreate'
 import {useProvidedStateOrCreate} from '../hooks/useProvidedStateOrCreate'
 import useScrollFlash from '../hooks/useScrollFlash'
 import {VisuallyHidden} from '../VisuallyHidden'
-import type {SxProp} from '../sx'
 import type {FilteredActionListLoadingType} from './FilteredActionListLoaders'
 import {FilteredActionListLoadingTypes, FilteredActionListBodyLoader} from './FilteredActionListLoaders'
 import classes from './FilteredActionList.module.css'
@@ -26,14 +25,10 @@ import {isValidElementType} from 'react-is'
 import {useAnnouncements} from './useAnnouncements'
 import {clsx} from 'clsx'
 import {useFeatureFlag} from '../FeatureFlags'
-import {BoxWithFallback} from '../internal/components/BoxWithFallback'
 
 const menuScrollMargins: ScrollIntoViewOptions = {startMargin: 0, endMargin: 8}
 
-export interface FilteredActionListProps
-  extends Partial<Omit<GroupedListProps, keyof ListPropsBase>>,
-    ListPropsBase,
-    SxProp {
+export interface FilteredActionListProps extends Partial<Omit<GroupedListProps, keyof ListPropsBase>>, ListPropsBase {
   loading?: boolean
   loadingType?: FilteredActionListLoadingType
   placeholderText?: string
@@ -70,7 +65,6 @@ export function FilteredActionList({
   items,
   textInputProps,
   inputRef: providedInputRef,
-  sx,
   groupMetadata,
   showItemDividers,
   message,
@@ -284,7 +278,7 @@ export function FilteredActionList({
         {...listProps}
         role="listbox"
         id={listId}
-        sx={{flexGrow: 1}}
+        className={classes.ActionList}
       >
         {groupMetadata?.length
           ? groupMetadata.map((group, index) => {
@@ -349,12 +343,7 @@ export function FilteredActionList({
   }
 
   return (
-    <BoxWithFallback
-      ref={inputAndListContainerRef}
-      sx={sx}
-      className={clsx(className, classes.Root)}
-      data-testid="filtered-action-list"
-    >
+    <div ref={inputAndListContainerRef} className={clsx(className, classes.Root)} data-testid="filtered-action-list">
       <StyledHeader>
         <TextInput
           ref={inputRef}
@@ -396,7 +385,7 @@ export function FilteredActionList({
       <div ref={scrollContainerRef} className={classes.Container}>
         {getBodyContent()}
       </div>
-    </BoxWithFallback>
+    </div>
   )
 }
 

packages/react/src/FilteredActionList/FilteredActionListLoaders.module.css

@@ -2,3 +2,18 @@
   /* stylelint-disable-next-line primer/borders */
   border-radius: 4px;
 }
+
+.LoadingSpinner {
+  padding: var(--base-size-16);
+  flex-grow: 1;
+  align-content: center;
+  text-align: center;
+  height: 100%;
+}
+
+.LoadingSkeletonContainer {
+  padding: var(--base-size-8);
+  display: flex;
+  flex-grow: 1;
+  flex-direction: column;
+}

packages/react/src/FilteredActionList/FilteredActionListLoaders.tsx

@@ -1,4 +1,3 @@
-import Box from '../Box'
 import Spinner from '../Spinner'
 import {Stack} from '../Stack/Stack'
 import {SkeletonBox} from '../Skeleton/SkeletonBox'
@@ -44,15 +43,15 @@ export function FilteredActionListBodyLoader({
 
 function LoadingSpinner({...props}): JSX.Element {
   return (
-    <Box p={3} flexGrow={1} sx={{alignContent: 'center', textAlign: 'center', height: '100%'}}>
+    <div className={classes.LoadingSpinner}>
       <Spinner {...props} />
-    </Box>
+    </div>
   )
 }
 
 function LoadingSkeleton({rows = 10, ...props}: {rows: number}): JSX.Element {
   return (
-    <Box p={2} display="flex" flexGrow={1} flexDirection="column">
+    <div className={classes.LoadingSkeletonContainer}>
       <Stack direction="vertical" justify="center" gap="condensed" {...props}>
         {Array.from({length: rows}, (_, i) => (
           <Stack key={i} direction="horizontal" gap="condensed" align="center">
@@ -61,6 +60,6 @@ function LoadingSkeleton({rows = 10, ...props}: {rows: number}): JSX.Element {
           </Stack>
         ))}
       </Stack>
-    </Box>
+    </div>
   )
 }