Remove sx from the SelectPanel component (#6716)

Author: liuliu-dev

.changeset/lemon-jokes-camp.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': major
+---
+
+Remove sx prop support from the SelectPanel component.

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);
+}

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<TextInputProps> = 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 ? (