SelectPanel: Make panel full screen on narrow screens with Save and optional Cancel button by siddharthkp · Pull Request #5761 · primer/react

siddharthkp · 2025-03-11T16:03:11Z

Note

Companion PR in gh/gh is merged: https://github.com/github/github/pull/367564 to keep main green

Closeshttps://github.com/github/primer/issues/4109
Implements Save button on narrow screens which calls onClose('click-outside') to simulate wide screen behavior
Accept onCancel prop that renders a Cancel button on narrow which calls onClose('escape')

narrow-selectpanel.mov

With onCancel prop:

selectpanel-cancel.mov

Rollout strategy

Patch release
Minor release
Major release; if selected, include a written rollout or migration plan
None; if selected, include a brief description as to why

Testing & Reviewing

Merge checklist

Added/updated tests
Added/updated documentation
Added/updated previews (Storybook)
Changes are SSR compatible
Tested in Chrome
Tested in Firefox
Tested in Safari
Tested in Edge
(GitHub staff only) Integration tests pass at github/github (Learn more about how to run integration tests)

changeset-bot · 2025-03-11T16:03:15Z

🦋 Changeset detected

Latest commit: 12fb61b

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	Patch

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

github-actions · 2025-03-11T16:03:47Z

👋 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!

github-actions · 2025-03-11T16:06:45Z

size-limit report 📦

Path	Size
packages/react/dist/browser.esm.js	106.09 KB (+0.18% 🔺)
packages/react/dist/browser.umd.js	106.48 KB (+0.32% 🔺)

…e-save-button

langermank

VRT 👍

francinelucca

Looking great! Have a few comments, suggestions.
Also can we make sure to merge https://github.com/github/github/pull/367564 before this as to not break main? 🙏

francinelucca · 2025-03-18T02:28:42Z

+ {
+ "name": "onCancel",
+ "type": "() => void",
+ "description": "(Narrow screens) Callback when the user hits cancel or close",


do we expect this to be used in modal as well? If so maybe we need to correct this verbiage

We do, but we don't have that yet. Can update once we have modal.
It's going to be a strange description: Narrow screens or variant=modal 😅

francinelucca · 2025-03-18T02:31:32Z

+ sx={
+ enabled
+ ? undefined
+ : {
+ // .responsiveFooter
+ display: ['flex', 'flex', 'none', 'none'],
+ gap: 'var(--stack-gap-condensed)',
+ justifyContent: 'right',
+ padding: 3,
+ // .Footer
+ borderTop: 'var(--borderWidth-thin) solid',
+ borderTopColor: 'var(--borderColor-default)',
+ }
+ }
+ className={enabled ? clsx(classes.Footer, classes.ResponsiveFooter) : undefined}


if this is net new code can we code it with (only) css modules from the get-go? 🙏

Oh we get to that now? I thought we can't yet because it's still behind a feature flag that we'd want the ability to roll back?

Should be able to go all in with CSS for new features. The only precaution with having the flag fall back to styled components is that the new styles don't match the old ones. In this case there is nothing to compare the new styles to

siddharthkp · 2025-03-18T15:31:11Z

Also can we make sure to merge https://github.com/github/github/pull/367564 before this as to not break main? 🙏

Absolutely. Idk why I thought we can merge them in any order, I'm rusty from my break 😅

github-actions · 2025-03-18T20:24:48Z

👋 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!

francinelucca

✨ yayy, looks great!
smaaaaall nit: if we could add onCancel to our singleSelect story so that the close button shows I think that'd be great. Just realized there's no way to close the panel without changes 🙏

github-actions · 2025-03-19T11:03:03Z

👋 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!

primer-integration · 2025-03-19T11:34:29Z

👋 Hi from github/github! Your integration PR is ready: https://github.com/github/github/pull/367822

primer-integration · 2025-03-19T11:56:56Z

🟢 golden-jobs completed with status success.

siddharthkpand others added 10 commits March 11, 2025 15:03

Add responsive variant to AnchoredOverlay
435dde4

add styles without css modules enabled
e6f46aa

add vrt test for narrow screen
26e4a18

mock MatchMedia for SelectPanel tests
90141bb

mock MatchMedia for AnchoredOverlay tests
d7ceb31

mock MatchMedia for components that use AnchoredOverlay
09612ec

update tests that use anchoredOverlay
4b4b0b3

test(vrt): update snapshots
351d70d

Add a save button footer for full screen select panel
64dcc35

don't use it in SelectPanel yet
80e0ea1

github-actionsBot added the staff Author is a staff member label Mar 11, 2025

siddharthkp changed the base branch from main to responsive-anchored-overlayMarch 11, 2025 16:03

github-actionsBot added the integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm label Mar 11, 2025

siddharthkp changed the title ~~SelectPanel: Make panel full screen on narrow screens~~SelectPanel: Make panel full screen on narrow screens with Save buttonMar 11, 2025

add changeset
83a600b

siddharthkp self-assigned this Mar 11, 2025

siddharthkp requested a review from francinelucca March 11, 2025 16:07

siddharthkp mentioned this pull request Mar 11, 2025
AnchoredOverlay: Add responsive variant prop #5759
Merged
13 tasks

github-actionsBot requested a deployment to storybook-preview-5761 March 11, 2025 16:08 Abandoned

siddharthkp added the update snapshots 🤖 Command that updates VRT snapshots on the pull request label Mar 11, 2025

test(vrt): update snapshots
5725f88

github-actionsBot removed the update snapshots 🤖 Command that updates VRT snapshots on the pull request label Mar 11, 2025

test(vrt): update snapshots
7ed663f

github-actionsBottemporarily deployed to storybook-preview-5761 March 11, 2025 16:22 Inactive

github-actionsBot added integration-tests: failing Changes in this PR cause breaking changes in gh/gh and removed integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm labels Mar 11, 2025

Merge branch 'responsive-anchored-overlay' into selectpanel-responsiv…
3ec96f0
…e-save-button

langermank approved these changes Mar 17, 2025
View reviewed changes

francinelucca requested changes Mar 18, 2025
View reviewed changes

francinelucca requested a review from emilybrick March 18, 2025 02:42

francinelucca mentioned this pull request Mar 18, 2025
Add Notice to SelectPanel #5790
Merged
13 tasks

siddharthkp added 2 commits March 18, 2025 20:53

don't show automatic footer actions for single selection
5f81715

fix story for onCancel
71eaed9

github-actionsBot added the integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm label Mar 18, 2025

This comment was marked as outdated.
Sign in to view

we don't need sx fallback anymore!
f19bfb2

github-actionsBot added integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm and removed integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm labels Mar 18, 2025

This comment was marked as outdated.
Sign in to view

github-actionsBottemporarily deployed to storybook-preview-5761 March 18, 2025 20:22 Inactive

update dependencies
d9536e7

github-actionsBot added integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm and removed integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm labels Mar 18, 2025

siddharthkp requested a review from francinelucca March 18, 2025 20:25

fix padding
a717c83

This comment was marked as resolved.
Sign in to view

francinelucca approved these changes Mar 19, 2025
View reviewed changes

siddharthkp added 2 commits March 19, 2025 12:02

add onCancel to single selection story
f91b71e

Merge branch 'main' into selectpanel-responsive-save-button
12fb61b

This comment was marked as duplicate.
Sign in to view

primerBot mentioned this pull request Mar 20, 2025
Release tracking (37.17.0) #5802
Merged

siddharthkp mentioned this pull request Mar 28, 2025
SelectPanel: Add variant=modal #5817
Closed
13 tasks

Uh oh!

Conversation

siddharthkp commented Mar 11, 2025• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Rollout strategy

Testing & Reviewing

Merge checklist

Uh oh!

changeset-botBot commented Mar 11, 2025• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

github-actionsBot commented Mar 11, 2025

Uh oh!

github-actionsBot commented Mar 11, 2025• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

size-limit report 📦

Uh oh!

langermank left a comment

Choose a reason for hiding this comment

Uh oh!

francinelucca left a comment

Choose a reason for hiding this comment

Uh oh!

francineluccaMar 18, 2025

Choose a reason for hiding this comment

Uh oh!

siddharthkpMar 18, 2025

Choose a reason for hiding this comment

Uh oh!

francineluccaMar 18, 2025• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

siddharthkpMar 18, 2025

Choose a reason for hiding this comment

Uh oh!

jonrohanMar 18, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

siddharthkp commented Mar 18, 2025

Uh oh!

This comment was marked as outdated.

This comment was marked as outdated.

github-actionsBot commented Mar 18, 2025

Uh oh!

This comment was marked as resolved.

francinelucca left a comment

Choose a reason for hiding this comment

Uh oh!

github-actionsBot commented Mar 19, 2025

Uh oh!

This comment was marked as duplicate.

primer-integrationBot commented Mar 19, 2025

Uh oh!

primer-integrationBot commented Mar 19, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

siddharthkp commented Mar 11, 2025•
edited
Loading

changeset-botBot commented Mar 11, 2025•
edited
Loading

github-actionsBot commented Mar 11, 2025•
edited
Loading

francineluccaMar 18, 2025•
edited
Loading