Skip to content

Add disableFullscreenOnNarrow prop to SelectPanel for opt-out of fullscreen behavior #6138

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 16 commits into from
Jun 2, 2025

Conversation

Copilot
Copy link
Contributor

@Copilot Copilot AI commented May 29, 2025

This PR adds a new disableFullscreenOnNarrow?: boolean prop to the SelectPanel component that allows users to opt out of the fullscreen behavior on narrow viewports.

Changes

  • Added disableFullscreenOnNarrow prop: New optional boolean prop in SelectPanelBaseProps interface
  • Prop override logic: When explicitly set, the prop takes precedence over the primer_react_select_panel_fullscreen_on_narrow feature flag

Behavior

// Opt out of fullscreen behavior regardless of feature flag
<SelectPanel disableFullscreenOnNarrow ={true} ... />

// Explicitly enable fullscreen behavior (when feature flag is enabled)
<SelectPanel disableFullscreenOnNarrow ={false} ... />

// Use feature flag default (existing behavior)
<SelectPanel ... />
  • disableFullscreenOnNarrow ={true}: Panel maintains anchored position on narrow viewports
  • disableFullscreenOnNarrow ={false}: Panel goes fullscreen on narrow viewports (if feature flag enabled)
  • fullScreenOptOut={undefined}: Follows the primer_react_select_panel_fullscreen_on_narrow feature flag

Testing

Added comprehensive tests covering all three scenarios:

  • Prop set to false overrides enabled feature flag
  • Prop set to true with enabled feature flag
  • Prop undefined uses feature flag default

All existing tests continue to pass, ensuring no breaking changes.

Fixes #6137.


💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

Copy link

changeset-bot bot commented May 29, 2025

🦋 Changeset detected

Latest commit: 879b907

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@primer/react Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

Copy link
Contributor

github-actions bot commented May 29, 2025

size-limit report 📦

Path Size
packages/react/dist/browser.esm.js 94.46 KB (-0.06% 🔽)
packages/react/dist/browser.umd.js 94.64 KB (+0.12% 🔺)

@Copilot Copilot AI changed the title [WIP] SelectPanel - FullScreenOnNarrow opt out Add fullScreenOnNarrow prop to SelectPanel for opt-out of fullscreen behavior May 29, 2025
@Copilot Copilot AI requested a review from francinelucca May 29, 2025 16:46
Copilot finished work on behalf of francinelucca May 29, 2025 16:46
@github-actions github-actions bot temporarily deployed to storybook-preview-6138 May 29, 2025 16:48 Inactive
@francinelucca
Copy link
Member

@copilot:

  • rename new prop to fullScreenOptOut, where if the prop is true the selectpanel will not go full screen on narrow
  • document the new prop in selectpanel.docs.json

@github-actions github-actions bot added the integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm label May 29, 2025
Copy link
Contributor

👋 Hi, this pull request contains changes to the source code that github/github depends on. If you are GitHub staff, we recommend testing these changes with github/github using the integration workflow. Thanks!

Copy link
Contributor Author

Copilot AI commented May 29, 2025

@copilot:

  • rename new prop to fullScreenOptOut, where if the prop is true the selectpanel will not go full screen on narrow
  • document the new prop in selectpanel.docs.json

Done! I've renamed the prop to fullScreenOptOut with inverted logic as requested:

  • When fullScreenOptOut={true}, the SelectPanel will NOT go fullscreen on narrow viewports
  • When fullScreenOptOut={false}, it will go fullscreen (if feature flag is enabled)
  • When undefined, it uses the feature flag default

I've also documented the new prop in selectpanel.docs.json. All tests have been updated and are passing. (54ff2a3)

Copilot finished work on behalf of francinelucca May 29, 2025 19:28
@github-actions github-actions bot requested a deployment to storybook-preview-6138 May 29, 2025 19:32 Abandoned
Copilot finished work on behalf of francinelucca May 29, 2025 19:38
@github-actions github-actions bot temporarily deployed to storybook-preview-6138 May 29, 2025 19:46 Inactive
@francinelucca
Copy link
Member

@copilot update the PR title and description to the new prop name

Copy link
Contributor Author

Copilot AI commented May 29, 2025

@copilot update the PR title and description to the new prop name

Updated the changeset title to reflect the new fullScreenOptOut prop name. (08137c9)

Copilot finished work on behalf of francinelucca May 29, 2025 20:13
@github-actions github-actions bot removed the integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm label May 30, 2025
Copy link
Contributor

👋 Hi, there are new commits since the last successful integration test. We recommend running the integration workflow once more, unless you are sure the new changes do not affect github/github. Thanks!

@github-actions github-actions bot added the integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm label May 30, 2025
@github-actions github-actions bot requested a deployment to storybook-preview-6138 May 30, 2025 17:00 Abandoned
Copy link
Member

@joshblack joshblack left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this should be patch -> minor since we're adding functionality based on: https://github.com/primer/react/blob/main/contributor-docs/versioning.md#:~:text=Props-,A%20prop%20is%20added,-minor

@github-actions github-actions bot removed the integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm label May 30, 2025
@francinelucca francinelucca requested a review from joshblack May 30, 2025 17:03
@github-actions github-actions bot added the integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm label May 30, 2025
Copy link
Contributor

👋 Hi, there are new commits since the last successful integration test. We recommend running the integration workflow once more, unless you are sure the new changes do not affect github/github. Thanks!

1 similar comment
Copy link
Contributor

👋 Hi, there are new commits since the last successful integration test. We recommend running the integration workflow once more, unless you are sure the new changes do not affect github/github. Thanks!

@github-actions github-actions bot requested a deployment to storybook-preview-6138 May 30, 2025 17:06 Abandoned
Copy link
Contributor Author

Copilot AI commented May 30, 2025

I think this should be patch -> minor since we're adding functionality based on: https://github.com/primer/react/blob/main/contributor-docs/versioning.md#:~:text=Props-,A%20prop%20is%20added,-minor

The changeset version has been updated from patch to minor per versioning guidelines for adding new props. The PR now uses the appropriate bump level.

@copilot remove fullScreenOptOut in favor of disableFullscreenOnNarrow

The fullScreenOptOut prop has been completely removed in favor of disableFullscreenOnNarrow as requested. Only the disableFullscreenOnNarrow prop remains in the component.

Copilot finished work on behalf of joshblack May 30, 2025 17:08
@github-actions github-actions bot removed the integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm label May 30, 2025
Copy link
Contributor

👋 Hi, there are new commits since the last successful integration test. We recommend running the integration workflow once more, unless you are sure the new changes do not affect github/github. Thanks!

@github-actions github-actions bot added the integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm label May 30, 2025
@github-actions github-actions bot requested a deployment to storybook-preview-6138 May 30, 2025 17:12 Abandoned
@francinelucca francinelucca added this pull request to the merge queue Jun 2, 2025
Merged via the queue into main with commit 3325ad6 Jun 2, 2025
35 checks passed
@francinelucca francinelucca deleted the copilot/fix-6137 branch June 2, 2025 11:17
@primer primer bot mentioned this pull request Jun 2, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
integration-tests: passing Changes in this PR do NOT cause breaking changes in gh/gh integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm
Projects
None yet
Development

Successfully merging this pull request may close these issues.

SelectPanel - FullScreenOnNarrow opt out
3 participants