chore(SelectPanel): put fullscreen functionality behind FF

.changeset/fuzzy-beans-push.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+chore(SelectPanel): put fullscreen functionality behind FF

e2e/components/SelectPanel.test.ts

@@ -109,10 +109,15 @@ test.describe('SelectPanel', () => {
     )
   })
 
-  test(`Default @vrt responsive width .modern-action-list--true`, async ({page}) => {
+  test(`Default @vrt responsive width .modern-action-list--true .fullscreen-on-narrow--true`, async ({page}) => {
     await visit(page, {
       id: 'components-selectpanel--default',
-      globals: {featureFlags: {primer_react_select_panel_with_modern_action_list: true}},
+      globals: {
+        featureFlags: {
+          primer_react_select_panel_with_modern_action_list: true,
+          primer_react_select_panel_fullscreen_on_narrow: true,
+        },
+      },
     })
 
     await page.setViewportSize({width: 767, height: 767})
@@ -125,7 +130,7 @@ test.describe('SelectPanel', () => {
     }
 
     expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot(
-      `SelectPanel-Default-responsive-width-light-modern-action-list--true.png`,
+      `SelectPanel-Default-responsive-width-light-modern-action-list--true-full-screen-on-narrow--true.png`,
     )
   })
 })

packages/react/src/FeatureFlags/DefaultFeatureFlags.ts

@@ -7,4 +7,5 @@ export const DefaultFeatureFlags = FeatureFlagScope.create({
   primer_react_select_panel_with_modern_action_list: false,
   primer_react_overlay_overflow: false,
   primer_react_segmented_control_tooltip: false,
+  primer_react_select_panel_fullscreen_on_narrow: false,
 })

packages/react/src/SelectPanel/SelectPanel.tsx

@@ -440,6 +440,7 @@ export function SelectPanel({
     }
   }
   const usingModernActionList = useFeatureFlag('primer_react_select_panel_with_modern_action_list')
+  const usingFullScreenOnNarrow = useFeatureFlag('primer_react_select_panel_fullscreen_on_narrow')
 
   const iconForNoticeVariant = {
     info: <InfoIcon size={16} />,
@@ -466,7 +467,7 @@ export function SelectPanel({
         height={height}
         width={width}
         anchorId={id}
-        variant={{regular: 'anchored', narrow: 'fullscreen'}}
+        variant={usingFullScreenOnNarrow ? {regular: 'anchored', narrow: 'fullscreen'} : undefined}
         pinPosition={!height}
       >
         <LiveRegionOutlet />
@@ -519,7 +520,7 @@ export function SelectPanel({
                 </Box>
               ) : null}
             </div>
-            {onCancel && (
+            {onCancel && usingFullScreenOnNarrow && (
               <IconButton
                 type="button"
                 variant="invisible"
@@ -579,7 +580,7 @@ export function SelectPanel({
             >
               {footer}
             </Box>
-          ) : isMultiSelectVariant(selected) ? (
+          ) : isMultiSelectVariant(selected) && usingFullScreenOnNarrow ? (
             /* Save and Cancel buttons are only useful for multiple selection, single selection instantly closes the panel */
             <div className={clsx(classes.Footer, classes.ResponsiveFooter)}>
               {/* we add a save and cancel button on narrow screens when SelectPanel is full-screen */}