Rename fullScreenOnNarrow prop to fullScreenOptOut with inverted logic

Co-authored-by: francinelucca <40550942+francinelucca@users.noreply.github.com>

Author: Copilot

packages/react/src/SelectPanel/SelectPanel.docs.json

@@ -183,6 +183,12 @@
       "type": "boolean",
       "description": "Whether to display the selected items at the top of the list",
       "default": "true"
+    },
+    {
+      "name": "fullScreenOptOut",
+      "type": "boolean",
+      "description": "Whether to opt out of fullscreen behavior on narrow viewports. When `true`, the panel will maintain its anchored position regardless of viewport size. When `false`, the panel will go fullscreen on narrow viewports (if feature flag is enabled).",
+      "defaultValue": "undefined (uses feature flag default)"
     }
   ],
   "subcomponents": []

packages/react/src/SelectPanel/SelectPanel.test.tsx

@@ -1067,7 +1067,7 @@ for (const useModernActionList of [false, true]) {
         })
       })
 
-      describe('fullScreenOnNarrow prop', () => {
+      describe('fullScreenOptOut prop', () => {
         const renderSelectPanelWithFlags = (flags: Record<string, boolean>, props: Record<string, unknown> = {}) => {
           return render(
             <FeatureFlags flags={flags}>
@@ -1078,45 +1078,45 @@ for (const useModernActionList of [false, true]) {
           )
         }
 
-        it('should respect fullScreenOnNarrow=false even when feature flag is enabled', async () => {
+        it('should opt out of fullscreen when fullScreenOptOut=true even when feature flag is enabled', async () => {
           const user = userEvent.setup()
 
           renderSelectPanelWithFlags(
             {
               primer_react_select_panel_with_modern_action_list: useModernActionList,
               primer_react_select_panel_fullscreen_on_narrow: true,
             },
-            {fullScreenOnNarrow: false},
+            {fullScreenOptOut: true},
           )
 
           await user.click(screen.getByText('Select items'))
 
-          // When fullScreenOnNarrow=false, the overlay should not use responsive fullscreen variant
+          // When fullScreenOptOut=true, the overlay should not use responsive fullscreen variant
           const dialog = screen.getByRole('dialog')
           expect(dialog).toBeInTheDocument()
           // The key test is that the AnchoredOverlay's variant prop should be undefined
-          // when fullScreenOnNarrow is false, regardless of feature flag
+          // when fullScreenOptOut is true, regardless of feature flag
         })
 
-        it('should use fullscreen behavior when fullScreenOnNarrow=true and feature flag is enabled', async () => {
+        it('should use fullscreen behavior when fullScreenOptOut=false and feature flag is enabled', async () => {
           const user = userEvent.setup()
 
           renderSelectPanelWithFlags(
             {
               primer_react_select_panel_with_modern_action_list: useModernActionList,
               primer_react_select_panel_fullscreen_on_narrow: true,
             },
-            {fullScreenOnNarrow: true},
+            {fullScreenOptOut: false},
           )
 
           await user.click(screen.getByText('Select items'))
 
-          // When both feature flag and prop are true, should enable fullscreen behavior
+          // When feature flag is true and fullScreenOptOut is false, should enable fullscreen behavior
           const dialog = screen.getByRole('dialog')
           expect(dialog).toBeInTheDocument()
         })
 
-        it('should default to feature flag value when fullScreenOnNarrow is undefined', async () => {
+        it('should default to feature flag value when fullScreenOptOut is undefined', async () => {
           const user = userEvent.setup()
 
           // Test with feature flag disabled

packages/react/src/SelectPanel/SelectPanel.tsx

@@ -102,11 +102,12 @@ interface SelectPanelBaseProps {
   footer?: string | React.ReactElement
   showSelectedOptionsFirst?: boolean
   /**
-   * Whether the SelectPanel should go fullscreen on narrow viewports.
-   * When `false`, the panel will maintain its anchored position regardless of viewport size.
-   * @default true when the primer_react_select_panel_fullscreen_on_narrow feature flag is enabled
+   * Whether to opt out of fullscreen behavior on narrow viewports.
+   * When `true`, the panel will maintain its anchored position regardless of viewport size.
+   * When `false`, the panel will go fullscreen on narrow viewports (if feature flag is enabled).
+   * @default undefined (uses feature flag default)
    */
-  fullScreenOnNarrow?: boolean
+  fullScreenOptOut?: boolean
 }
 
 // onCancel is optional with variant=anchored, but required with variant=modal
@@ -178,7 +179,7 @@ function Panel({
   variant = 'anchored',
   secondaryAction,
   showSelectedOptionsFirst = true,
-  fullScreenOnNarrow,
+  fullScreenOptOut,
   ...listProps
 }: SelectPanelProps): JSX.Element {
   const titleId = useId()
@@ -200,7 +201,7 @@ function Panel({
 
   const usingModernActionList = useFeatureFlag('primer_react_select_panel_with_modern_action_list')
   const featureFlagFullScreenOnNarrow = useFeatureFlag('primer_react_select_panel_fullscreen_on_narrow')
-  const usingFullScreenOnNarrow = fullScreenOnNarrow ?? featureFlagFullScreenOnNarrow
+  const usingFullScreenOnNarrow = fullScreenOptOut !== undefined ? !fullScreenOptOut : featureFlagFullScreenOnNarrow
   const shouldOrderSelectedFirst =
     useFeatureFlag('primer_react_select_panel_order_selected_at_top') && showSelectedOptionsFirst