feat(SelectPanel): Convert SelectPanel to CSS modules behind feature flag (#5324)

* feat(SelectPanel): Convert SelectPanel to CSS modules behind feature flag

* format css

Author: hussam-i-am

.changeset/cyan-buses-visit.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": minor
+---
+
+Convert SelectPanel to CSS modules behind feature flag

packages/react/src/SelectPanel/SelectPanel.module.css

@@ -0,0 +1,33 @@
+.Wrapper {
+  display: flex;
+  height: inherit;
+  max-height: inherit;
+  flex-direction: column;
+}
+
+.Content {
+  padding-top: var(--base-size-8);
+  padding-right: var(--base-size-16);
+  padding-left: var(--base-size-16);
+}
+
+.Title {
+  font-size: var(--text-body-size-medium);
+}
+
+.Subtitle {
+  font-size: var(--text-body-size-small);
+  color: var(--fgColor-muted);
+}
+
+.Footer {
+  display: flex;
+  padding: var(--base-size-8);
+  border-color: var(--borderColor-default);
+  border-top: var(--borderWidth-thin) solid;
+}
+
+.FilteredActionList {
+  height: inherit;
+  max-height: inherit;
+}

packages/react/src/SelectPanel/SelectPanel.tsx

@@ -19,6 +19,9 @@ import {useProvidedStateOrCreate} from '../hooks/useProvidedStateOrCreate'
 import {LiveRegion, LiveRegionOutlet, Message} from '../internal/components/LiveRegion'
 import {useFeatureFlag} from '../FeatureFlags'
 
+import classes from './SelectPanel.module.css'
+import {clsx} from 'clsx'
+
 interface SelectPanelSingleSelection {
   selected: ItemInput | undefined
   onSelectedChange: (selected: ItemInput | undefined) => void
@@ -112,6 +115,9 @@ export function SelectPanel({
     [externalOnFilterChange, setInternalFilterValue],
   )
 
+  const CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_team'
+  const enabled = useFeatureFlag(CSS_MODULES_FEATURE_FLAG)
+
   const anchorRef = useProvidedRefOrCreate(externalAnchorRef)
   const onOpen: AnchoredOverlayProps['onOpen'] = useCallback(
     (gesture: Parameters<Exclude<AnchoredOverlayProps['onOpen'], undefined>>[0]) => onOpenChange(true, gesture),
@@ -220,13 +226,25 @@ export function SelectPanel({
             }
           />
         )}
-        <Box sx={{display: 'flex', flexDirection: 'column', height: 'inherit', maxHeight: 'inherit'}}>
-          <Box sx={{pt: 2, px: 3}}>
-            <Heading as="h1" id={titleId} sx={{fontSize: 1}}>
+        <Box
+          sx={enabled ? undefined : {display: 'flex', flexDirection: 'column', height: 'inherit', maxHeight: 'inherit'}}
+          className={enabled ? classes.Wrapper : undefined}
+        >
+          <Box sx={enabled ? undefined : {pt: 2, px: 3}} className={enabled ? classes.Content : undefined}>
+            <Heading
+              as="h1"
+              id={titleId}
+              sx={enabled ? undefined : {fontSize: 1}}
+              className={enabled ? classes.Title : undefined}
+            >
               {title}
             </Heading>
             {subtitle ? (
-              <Box id={subtitleId} sx={{fontSize: 0, color: 'fg.muted'}}>
+              <Box
+                id={subtitleId}
+                sx={enabled ? undefined : {fontSize: 0, color: 'fg.muted'}}
+                className={enabled ? classes.Subtitle : undefined}
+              >
                 {subtitle}
               </Box>
             ) : null}
@@ -247,17 +265,22 @@ 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={{...sx, height: 'inherit', maxHeight: 'inherit'}}
-            className={className}
+            sx={enabled ? sx : {...sx, height: 'inherit', maxHeight: 'inherit'}}
+            className={enabled ? clsx(className, classes.FilteredActionList) : className}
           />
           {footer && (
             <Box
-              sx={{
-                display: 'flex',
-                borderTop: '1px solid',
-                borderColor: 'border.default',
-                padding: 2,
-              }}
+              sx={
+                enabled
+                  ? undefined
+                  : {
+                      display: 'flex',
+                      borderTop: '1px solid',
+                      borderColor: 'border.default',
+                      padding: 2,
+                    }
+              }
+              className={enabled ? classes.Footer : undefined}
             >
               {footer}
             </Box>