SelectPanel: Add variant=modal #5198

siddharthkp · 2024-10-31T15:26:55Z

Built on top of (reverted) SelectPanel: Prepare for non-anchored variants #5230
Closes https://github.com/github/primer/issues/4106

Couple of followup improvements (not blockers for this PR):

add better API for secondary action slot
add loading state for Save button

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)

github-actions · 2024-10-31T15:27:28Z

👋 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 · 2024-10-31T15:30:09Z

size-limit report 📦

Path	Size
packages/react/dist/browser.esm.js	98.8 KB (+0.25% 🔺)
packages/react/dist/browser.umd.js	99.1 KB (+0.11% 🔺)

changeset-bot · 2024-10-31T15:32:13Z

⚠️ No Changeset found

Latest commit: fdc0bd4

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

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

siddharthkp · 2024-10-31T15:35:27Z

packages/react/src/SelectPanel/SelectPanel.features.stories.tsx

+        onCancel={() => setSelected(initialItems)}
+        // backward compatible API choice
+        // TODO: improve this API, rename it to a single secondaryAction or secondaryFooterSlotSomething
+        footer={<Button size="small">Edit labels</Button>}


non blocking improvement 1/2: While footer is backward compatible, it's not obvious what it means. What we want here is a "secondary action".

Looking at usage (3 instances), we have

Button

LinkButton

custom FooterActions component that has a spinner or an error message! (these cases are filling in for missing features and we should be able to simplify them with error messages and loading states)

siddharthkp · 2024-10-31T15:35:48Z

packages/react/src/SelectPanel/SelectPanel.tsx

+                      >
+                        Cancel
+                      </Button>
+                      {/* TODO: loading state for save? */}


non blocking improvement 2/2: Once we have loading states, add one for "saving"

broccolinisoup

Thanks for working on this super quickly 🔥 Let a few questions. curious to hear your thoughts

broccolinisoup · 2024-10-31T22:33:20Z

packages/react/src/SelectPanel/SelectPanel.tsx

@@ -31,23 +31,40 @@ interface SelectPanelMultiSelection {
  onSelectedChange: (selected: ItemInput[]) => void
 }

+type OpenGestures = 'anchor-click' | 'anchor-key-press'


broccolinisoup · 2024-11-01T06:21:53Z

packages/react/src/SelectPanel/SelectPanel.features.stories.tsx

+      <h1>Multi Select Panel as Modal</h1>
+      <SelectPanel
+        variant="modal"
+        onCancel={() => setSelected(initialItems)}


I wonder if it is doable/makes sense to handle the cancel in the component? 🤔 We can tae a call back in case there is anything else needs to be done after the cancel. Curious to hear what you think

I would like that a lot. A combination of onSubmit and onCancel so that developers don't have to take care of transient state

buuuuut that doesn't match what we have right now. onSelectedChange is fired immediately when an item is selected and the developer are expected to keep track of selected items and pass them back to SelectPanel 🤷

I'd like to explore an API that abstracts the transient state but that is likely going to be a breaking change, so probably as a bonus task right at the end of the project

buuuuut that doesn't match what we have right now. onSelectedChange is fired immediately when an item is selected and the developer are expected to keep track of selected items and pass them back to SelectPanel 🤷

Yeah, I see! We don't have much control over the selected items, and it would probably violate the pattern if we try managing the state of the "selected" just for cancel

I'd like to explore an API that abstracts the transient state but that is likely going to be a breaking change, so probably as a bonus task right at the end of the project

That would be interesting to explore! Yeah, no worries at all.

broccolinisoup · 2024-11-01T06:41:45Z

packages/react/src/SelectPanel/SelectPanel.tsx

+  | {
+      // do we need keep the old variants for backward-compat?
+      // there isn't any usage in dotcom
+      variant: 'anchored' | FilteredActionListProps['variant']


do we need keep the old variants for backward-compat? there isn't any usage in dotcom

I think we should. Although I am not sure if should merge the old variants and the new ones since they seem different variants to me. The new one is more of a type (modal, anchored) and the other (full and inset ) feels related to the stylings of the panel.

One idea might be (For the sake of keeping things uncomplicated) we can merge them and immediately deprecated the old variants?

Curious to hear your thoughts

Although I am not sure if should merge the old variants and the new ones since they seem different variants to me

That's very true.

I personally would like to get rid of the old ones because it's a design changing option that has leaked out of deprecated ActionList all the way to SelectPanel. I don't think we want folks to use the full width with SelectPanel.

One idea might be (For the sake of keeping things uncomplicated) we can merge them and immediately deprecated the old variants?

I like that

Luckily, there is no usage in dotcom and only 5 instances in internal status page, so it feels like we can deprecate/remove them for modern ActionList in SelectPanel

primer-integration · 2024-11-07T15:33:24Z

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

primer-integration · 2024-11-07T15:48:46Z

🔴 golden-jobs completed with status failure.

...Panel.test.ts-snapshots/SelectPanel-External-Anchor-light-modern-action-list--true-linux.png

siddharthkp · 2024-11-08T13:00:31Z

...apshots/components/SelectPanel.test.ts-snapshots/SelectPanel-External-Anchor-light-linux.png

I think the hover color is different?? It's really hard to tell

broccolinisoup and others added 13 commits October 21, 2024 10:21

WIP - full variant

f7c39ea

wip

f31034f

full variant style fix

87b84ee

Merge branch 'main' into select-panel-full-variant

36f029e

Merge branch 'main' into select-panel-full-variant

ef13937

implement anchor for full variant and close button

3816a96

Merge branch 'main' into select-panel-full-variant

e72d333

Refactor selectpanel to use styledoverlay instead of anchored overlay

2e5a623

Merge branch 'main' into select-panel-full-variant

987f189

wip

bc9a6c9

default modal size + add backdrop

d165dae

add footer and onCancel fn

667fb54

add example of modal and secondary action, leave notes

ca5f714

siddharthkp self-assigned this Oct 31, 2024

github-actions bot added the staff Author is a staff member label Oct 31, 2024

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 Oct 31, 2024

siddharthkp temporarily deployed to github-pages October 31, 2024 15:28 — with GitHub Actions Inactive

github-actions bot temporarily deployed to storybook-preview-5198 October 31, 2024 15:29 Inactive

siddharthkp changed the base branch from main to select-panel-full-variant October 31, 2024 15:29

add docs.json entries

f8d47e9

siddharthkp commented Oct 31, 2024

View reviewed changes

siddharthkp requested a review from broccolinisoup October 31, 2024 15:40

broccolinisoup reviewed Nov 1, 2024

View reviewed changes

siddharthkp added 3 commits November 5, 2024 12:34

use Overlay instead of AnchoredOverlay

53ff7ba

Create fluffy-days-brake.md

859019e

the tiniest chnage

e427df0

github-actions bot temporarily deployed to storybook-preview-5198 November 7, 2024 12:15 Inactive

siddharthkp added the update snapshots label Nov 7, 2024

test(vrt): update snapshots

5db37aa

github-actions bot removed the update snapshots label Nov 7, 2024

primer bot temporarily deployed to github-pages November 7, 2024 15:40 Inactive

github-actions bot temporarily deployed to storybook-preview-5198 November 7, 2024 15:40 Inactive

github-actions bot 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 Nov 7, 2024

siddharthkp commented Nov 7, 2024

View reviewed changes

...Panel.test.ts-snapshots/SelectPanel-External-Anchor-light-modern-action-list--true-linux.png Outdated Show resolved Hide resolved

trying to center

2c92a4f

siddharthkp temporarily deployed to github-pages November 7, 2024 17:15 — with GitHub Actions Inactive

github-actions bot temporarily deployed to storybook-preview-5198 November 7, 2024 17:15 Inactive

siddharthkp added 2 commits November 7, 2024 18:17

centering works now

7c178bd

add modal stories to e2e

43aaf3f

siddharthkp added the update snapshots label Nov 7, 2024

siddharthkp temporarily deployed to github-pages November 7, 2024 17:21 — with GitHub Actions Inactive

github-actions bot temporarily deployed to storybook-preview-5198 November 7, 2024 17:21 Inactive

test(vrt): update snapshots

2a14113

github-actions bot removed the update snapshots label Nov 7, 2024

primer bot temporarily deployed to github-pages November 7, 2024 17:29 Inactive

github-actions bot temporarily deployed to storybook-preview-5198 November 7, 2024 17:29 Inactive

Base automatically changed from selectpanel-use-anchored-position to main November 8, 2024 08:45

siddharthkp commented Nov 8, 2024

View reviewed changes

Merge branch 'main' into selectpanel-modal-variant-2

fdc0bd4

siddharthkp added the update snapshots label Nov 8, 2024

siddharthkp deployed to github-pages November 8, 2024 16:35 — with GitHub Actions View deployment

github-actions bot deployed to storybook-preview-5198 November 8, 2024 16:37 View deployment

github-actions bot removed the update snapshots label Nov 8, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

SelectPanel: Add variant=modal #5198

SelectPanel: Add variant=modal #5198

siddharthkp commented Oct 31, 2024 •

edited

Loading

github-actions bot commented Oct 31, 2024

github-actions bot commented Oct 31, 2024 •

edited

Loading

changeset-bot bot commented Oct 31, 2024 •

edited

Loading

siddharthkp Oct 31, 2024 •

edited

Loading

siddharthkp Oct 31, 2024 •

edited

Loading

broccolinisoup left a comment

broccolinisoup Oct 31, 2024

broccolinisoup Nov 1, 2024

siddharthkp Nov 1, 2024 •

edited

Loading

broccolinisoup Nov 4, 2024 •

edited

Loading

broccolinisoup Nov 1, 2024

siddharthkp Nov 1, 2024 •

edited

Loading

primer-integration bot commented Nov 7, 2024

primer-integration bot commented Nov 7, 2024

siddharthkp Nov 8, 2024

SelectPanel: Add variant=modal #5198

Are you sure you want to change the base?

SelectPanel: Add variant=modal #5198

Conversation

siddharthkp commented Oct 31, 2024 • edited Loading

Rollout strategy

Testing & Reviewing

Merge checklist

github-actions bot commented Oct 31, 2024

github-actions bot commented Oct 31, 2024 • edited Loading

size-limit report 📦

changeset-bot bot commented Oct 31, 2024 • edited Loading

⚠️ No Changeset found

siddharthkp Oct 31, 2024 • edited Loading

Choose a reason for hiding this comment

siddharthkp Oct 31, 2024 • edited Loading

Choose a reason for hiding this comment

broccolinisoup left a comment

Choose a reason for hiding this comment

broccolinisoup Oct 31, 2024

Choose a reason for hiding this comment

broccolinisoup Nov 1, 2024

Choose a reason for hiding this comment

siddharthkp Nov 1, 2024 • edited Loading

Choose a reason for hiding this comment

broccolinisoup Nov 4, 2024 • edited Loading

Choose a reason for hiding this comment

broccolinisoup Nov 1, 2024

Choose a reason for hiding this comment

siddharthkp Nov 1, 2024 • edited Loading

Choose a reason for hiding this comment

primer-integration bot commented Nov 7, 2024

primer-integration bot commented Nov 7, 2024

siddharthkp Nov 8, 2024

Choose a reason for hiding this comment

siddharthkp commented Oct 31, 2024 •

edited

Loading

github-actions bot commented Oct 31, 2024 •

edited

Loading

changeset-bot bot commented Oct 31, 2024 •

edited

Loading

siddharthkp Oct 31, 2024 •

edited

Loading

siddharthkp Oct 31, 2024 •

edited

Loading

siddharthkp Nov 1, 2024 •

edited

Loading

broccolinisoup Nov 4, 2024 •

edited

Loading

siddharthkp Nov 1, 2024 •

edited

Loading