diff --git a/.changeset/lemon-jokes-camp.md b/.changeset/lemon-jokes-camp.md new file mode 100644 index 00000000000..d44b500b069 --- /dev/null +++ b/.changeset/lemon-jokes-camp.md @@ -0,0 +1,5 @@ +--- +'@primer/react': major +--- + +Remove sx prop support from the SelectPanel component. diff --git a/packages/react/src/SelectPanel/SelectPanel.module.css b/packages/react/src/SelectPanel/SelectPanel.module.css index c1174442f80..4a46aae1204 100644 --- a/packages/react/src/SelectPanel/SelectPanel.module.css +++ b/packages/react/src/SelectPanel/SelectPanel.module.css @@ -99,6 +99,8 @@ } .FilteredActionList { + /* inheriting height and maxHeight ensures that the FilteredActionList is never taller + than the Overlay (which would break scrolling the items) */ height: inherit; max-height: inherit; } @@ -238,3 +240,7 @@ inset: 0; background-color: var(--overlay-backdrop-bgColor); } + +.TextInput { + margin: var(--base-size-8); +} diff --git a/packages/react/src/SelectPanel/SelectPanel.tsx b/packages/react/src/SelectPanel/SelectPanel.tsx index 0e17c5c5958..455f67c6a5b 100644 --- a/packages/react/src/SelectPanel/SelectPanel.tsx +++ b/packages/react/src/SelectPanel/SelectPanel.tsx @@ -178,7 +178,6 @@ function Panel({ footer, textInputProps, overlayProps, - sx, loading, initialLoadingType = 'spinner', className, @@ -656,7 +655,7 @@ function Panel({ const extendedTextInputProps: Partial = useMemo(() => { return { - sx: {m: 2}, + className: classes.TextInput, contrast: true, leadingVisual: SearchIcon, 'aria-label': inputLabel, @@ -861,9 +860,6 @@ function Panel({ : EMPTY_MESSAGE.description || EMPTY_MESSAGE.description, }} fullScreenOnNarrow={usingFullScreenOnNarrow} - // inheriting height and maxHeight ensures that the FilteredActionList is never taller - // than the Overlay (which would break scrolling the items) - sx={sx} className={clsx(className, classes.FilteredActionList)} /> {footer ? (