diff --git a/.changeset/mighty-lizards-lick.md b/.changeset/mighty-lizards-lick.md new file mode 100644 index 00000000000..d9549d88eb0 --- /dev/null +++ b/.changeset/mighty-lizards-lick.md @@ -0,0 +1,5 @@ +--- +"@primer/react": major +--- + +Update FilteredActionList and FilteredActionListLoaders components to no longer support sx diff --git a/packages/react/src/FilteredActionList/FilteredActionList.module.css b/packages/react/src/FilteredActionList/FilteredActionList.module.css index cdae6e5824d..c09649da9a2 100644 --- a/packages/react/src/FilteredActionList/FilteredActionList.module.css +++ b/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); diff --git a/packages/react/src/FilteredActionList/FilteredActionList.tsx b/packages/react/src/FilteredActionList/FilteredActionList.tsx index dcddc3ad6fe..224915371c0 100644 --- a/packages/react/src/FilteredActionList/FilteredActionList.tsx +++ b/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>, - ListPropsBase, - SxProp { +export interface FilteredActionListProps extends Partial>, 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 ( - +
{getBodyContent()}
-
+ ) } diff --git a/packages/react/src/FilteredActionList/FilteredActionListLoaders.module.css b/packages/react/src/FilteredActionList/FilteredActionListLoaders.module.css index c4c8757fff0..603d07a0c66 100644 --- a/packages/react/src/FilteredActionList/FilteredActionListLoaders.module.css +++ b/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; +} diff --git a/packages/react/src/FilteredActionList/FilteredActionListLoaders.tsx b/packages/react/src/FilteredActionList/FilteredActionListLoaders.tsx index 05e6007819c..bbd4d134a59 100644 --- a/packages/react/src/FilteredActionList/FilteredActionListLoaders.tsx +++ b/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 ( - +
- +
) } function LoadingSkeleton({rows = 10, ...props}: {rows: number}): JSX.Element { return ( - +
{Array.from({length: rows}, (_, i) => ( @@ -61,6 +60,6 @@ function LoadingSkeleton({rows = 10, ...props}: {rows: number}): JSX.Element { ))} - +
) }