From b18d0216abc962d4ab02c4485e34c05668ba5acd Mon Sep 17 00:00:00 2001
From: Hussam Ghazzi <hussam-i-am@github.com>
Date: Thu, 21 Nov 2024 22:28:47 +0000
Subject: [PATCH 1/2] feat(SelectPanel): Convert SelectPanel to CSS modules
 behind feature flag

---
 .changeset/cyan-buses-visit.md                |  5 ++
 .../src/SelectPanel/SelectPanel.module.css    | 33 +++++++++++++
 .../react/src/SelectPanel/SelectPanel.tsx     | 47 ++++++++++++++-----
 3 files changed, 73 insertions(+), 12 deletions(-)
 create mode 100644 .changeset/cyan-buses-visit.md
 create mode 100644 packages/react/src/SelectPanel/SelectPanel.module.css

diff --git a/.changeset/cyan-buses-visit.md b/.changeset/cyan-buses-visit.md
new file mode 100644
index 00000000000..53c017704c1
--- /dev/null
+++ b/.changeset/cyan-buses-visit.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": minor
+---
+
+Convert SelectPanel to CSS modules behind feature flag
diff --git a/packages/react/src/SelectPanel/SelectPanel.module.css b/packages/react/src/SelectPanel/SelectPanel.module.css
new file mode 100644
index 00000000000..88d6a2efe96
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/packages/react/src/SelectPanel/SelectPanel.tsx b/packages/react/src/SelectPanel/SelectPanel.tsx
index 095615d6372..39d41d26094 100644
--- a/packages/react/src/SelectPanel/SelectPanel.tsx
+++ b/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>

From 6dd6368b37db99e1615c61a3ab6e0ff8e5301335 Mon Sep 17 00:00:00 2001
From: Hussam Ghazzi <hussam-i-am@github.com>
Date: Thu, 21 Nov 2024 22:31:00 +0000
Subject: [PATCH 2/2] format css

---
 packages/react/src/SelectPanel/SelectPanel.module.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react/src/SelectPanel/SelectPanel.module.css b/packages/react/src/SelectPanel/SelectPanel.module.css
index 88d6a2efe96..753e6519e2c 100644
--- a/packages/react/src/SelectPanel/SelectPanel.module.css
+++ b/packages/react/src/SelectPanel/SelectPanel.module.css
@@ -28,6 +28,6 @@
 }
 
 .FilteredActionList {
-  height: inherit; 
+  height: inherit;
   max-height: inherit;
-}
\ No newline at end of file
+}