SelectPanel: Update SelectPanel to use modern ActionList by broccolinisoup · Pull Request #4794 · primer/react

broccolinisoup · 2024-07-30T04:51:42Z

Note

New feature flag introduced: primer_react_select_panel_with_modern_action_list

What's changed

Closeshttps://github.com/github/primer/issues/3671
Implements parts of https://github.com/github/primer/issues/3183

This is a pretty scary PR to roll out as it is replacing ActionList used internally in SelectPanel, that is why we are putting everything behind a feature flag (see FilteredActionList "entry file").

There should be no change without the feature flag enabled
Jest tests added for both states of the feature flag
VRT snapshots added for both states of the feature flag
Some accessibility remediations that were made to ActionList and not deprecated/ActionList do cause certain tests to fail in dotcom CI. I have a PR for dotcom updating tests that works with both states of the feature flag (can be merged independently)

Rollout strategy

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

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)

Integration tests:

✅ Run integration tests with flag off
✅ Run integration tests with flag on
- Debug why empty item from memex is not rendering
Update tests in dotcom https://github.com/github/github/pull/339699 (can be merged independently)

changeset-bot · 2024-07-30T04:51:46Z

🦋 Changeset detected

Latest commit: 0b57206

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 · 2024-07-30T05:17:44Z

size-limit report 📦

Path	Size
packages/react/dist/browser.esm.js	96.86 KB (+0.46% 🔺)
packages/react/dist/browser.umd.js	97.18 KB (+0.55% 🔺)

camertron

Awesome, nice work! As far as groups go, it looks like both the beta and deprecated versions of ActionList support them. Maybe we could create a sub-component called MappedActionListGroup? Then we could do something like:

functionMappedActionListGroup({ items, header }: GroupProps){return(<ActionList.Group><ActionList.GroupHeadingvariant={header.variant}>{header.title}</ActionList.GroupHeading>{items.map((item)=><MappedActionListitem={item}>)}</ActionList.Group>)}

camertron · 2024-08-01T16:55:33Z

+ text,
+ variant,
+ disabled,
+ trailingVisual: TrailingVisual,


I'm not sure if this is a common pattern, but I personally find it a bit confusing to use TitleCase for these renamed variables. Can we avoid renaming them, or name them something else, eg. originalTrailingVisual?

👋
the TitleCase is so that we can render them as a component in JSX
prop accepted as leadingVisual, rendered in the body as <LeadingVisual/>, it would have been nicer if the prop was already TitleCased to signal that it accepts a component (and not a string, for example), but probably not the correct time to change that here

primer-integration · 2024-08-28T14:24:57Z

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

Update: These tests are passing

siddharthkp · 2024-08-28T14:53:47Z

Next steps:

✅ Run integration tests with flag off
✅ Run integration tests with flag on
- Debug why empty item from memex is not rendering
https://github.com/github/github/pull/339699
Need to remove unrelated visual changes

…to select-panel-action-list

siddharthkp · 2024-08-30T15:56:49Z

Next steps:

Get PR review
(non blocker) Need to debug unrelated visual changes (this PR introduces the tiniest change in contrast that doesn't matter in the long run, but would be nice to pin down)

joshblack

LGTM! Just had a question

joshblack · 2024-09-06T16:46:12Z

+ if (activeDescendantRef.current && scrollContainerRef.current) {
+ scrollIntoView(activeDescendantRef.current, scrollContainerRef.current, {...menuScrollMargins, behavior: 'auto'})
+ }
+ }, [items])


Is items a memoized value or is a plain value typically?

They are memoized in SelectPanel before passing to FilteredActionList. Tell me more?

joshblack · 2024-09-06T16:48:10Z

Also wanted to leave a question, would it be possible for this to go in the next release batch? (I think it would be rc.5)

Would help out a ton on my end, the release is starting to get big 😅

siddharthkp · 2024-09-09T10:07:59Z

Also wanted to leave a question, would it be possible for this to go in the next release batch? (I think it would be rc.5)

Absolutely! I can wait :)

Update: rc.4 was merged yesterday, can merge this now 🎉

broccolinisoup · 2024-09-12T20:46:21Z

So happy to see this is merged!! Thanks @siddharthkp 🥹 💖

super wip
9cee0a4

github-actionsBot added the staff Author is a staff member label Jul 30, 2024

broccolinisoup changed the title ~~super wip~~Ignore - super wip selectpanelJul 30, 2024

just use the actionlist component and revert the type updates
c7aa5de

broccolinisoup commented Jul 30, 2024
View reviewed changes

Comment threadpackages/react/src/FilteredActionList/FilteredActionList.tsx Outdated

Update packages/react/src/FilteredActionList/FilteredActionList.tsx
40a0c45

broccolinisoup temporarily deployed to github-pages July 30, 2024 05:18 — with GitHub Actions Inactive

github-actionsBottemporarily deployed to storybook-preview-4794 July 30, 2024 05:18 Inactive

Some more progress
344f6ce

broccolinisoup temporarily deployed to github-pages July 31, 2024 02:20 — with GitHub Actions Inactive

github-actionsBottemporarily deployed to storybook-preview-4794 July 31, 2024 02:21 Inactive

revert the type changes and cast it :/
fa5f5a6

broccolinisoup temporarily deployed to github-pages July 31, 2024 04:09 — with GitHub Actions Inactive

github-actionsBottemporarily deployed to storybook-preview-4794 July 31, 2024 04:09 Inactive

clean
3cd9ecc

broccolinisoup temporarily deployed to github-pages July 31, 2024 05:35 — with GitHub Actions Inactive

github-actionsBottemporarily deployed to storybook-preview-4794 July 31, 2024 05:35 Inactive

broccolinisoup added the skip changeset This change does not need a changelog label Jul 31, 2024

broccolinisoup changed the title ~~Ignore - super wip selectpanel~~SelectPanel: Update SelectPanel to use modern ActionListAug 1, 2024

camertron reviewed Aug 1, 2024
View reviewed changes

broccolinisoup added 6 commits August 2, 2024 13:11

wip
0003e59

wip wip
713b5ad

add stories
6fc7f2b

fix linting
a246981

add tests for groups
e209f47

Merge branch 'main' into select-panel-action-list
26cddc1

broccolinisoup temporarily deployed to github-pages August 8, 2024 07:09 — with GitHub Actions Inactive

github-actionsBottemporarily deployed to storybook-preview-4794 August 8, 2024 07:10 Inactive

siddharthkp temporarily deployed to github-pages August 27, 2024 15:24 — with GitHub Actions Inactive

siddharthkpand others added 3 commits August 28, 2024 13:55

test(vrt): update snapshots
185eb17

add feature flag to e2e matrix
318aa99

test(vrt): update snapshots
e9c523c

siddharthkp added 5 commits August 28, 2024 21:06

backward compat: allow groupMetadata to be empty array
efd1216

Merge branch 'select-panel-action-list' of github.com:primer/react in…
cd9a931
…to select-panel-action-list

Merge branch 'main' into select-panel-action-list
619ff96

sigh newline
e3fe7b8

Create sour-cooks-dress.md
ebac341

siddharthkpand others added 4 commits August 30, 2024 18:22

Merge branch 'main' into select-panel-action-list
0513474

copy SelectPanel snapshots from main
2afa236

remove unrelated changes in this PR
0f38bf4

test(vrt): update snapshots
f72aa55

This was referenced Sep 3, 2024
(waiting) Select Panel: Add home and end keys for keyboard navigation #4903
Closed
Select Panel: Functional adjustments #4906
Merged

siddharthkpand others added 2 commits September 5, 2024 12:19

set active styles for both active-descendant types
6e9d706

test(vrt): update snapshots
0b57206

siddharthkp mentioned this pull request Sep 5, 2024
Select Panel: Add built-in "No matches" item #4920
Closed
13 tasks

joshblack approved these changes Sep 6, 2024
View reviewed changes

siddharthkp mentioned this pull request Sep 9, 2024
WIP: Select panel announcements #4927
Closed

camertron mentioned this pull request Sep 9, 2024
Select panel loading states #4929
Merged
12 tasks

primerBot mentioned this pull request Sep 10, 2024
Release tracking (rc.5) #4942
Merged

primerBot mentioned this pull request Oct 18, 2024
Release tracking (37.0.0) #5143
Merged

siddharthkp mentioned this pull request Aug 27, 2025
Exploration: Make SelectPanel item.id required #6663
Closed
16 tasks

Uh oh!

Conversation

broccolinisoup commented Jul 30, 2024• edited by siddharthkp Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What's changed

Rollout strategy

Merge checklist

Uh oh!

changeset-botBot commented Jul 30, 2024• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

Uh oh!

github-actionsBot commented Jul 30, 2024• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

size-limit report 📦

Uh oh!

camertron left a comment

Choose a reason for hiding this comment

Uh oh!

camertronAug 1, 2024

Choose a reason for hiding this comment

Uh oh!

siddharthkpAug 30, 2024

Choose a reason for hiding this comment

Uh oh!

Uh oh!

primer-integrationBot commented Aug 28, 2024• edited by siddharthkp Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

siddharthkp commented Aug 28, 2024• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

siddharthkp commented Aug 30, 2024• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

joshblack left a comment

Choose a reason for hiding this comment

Uh oh!

joshblackSep 6, 2024

Choose a reason for hiding this comment

Uh oh!

siddharthkpSep 9, 2024

Choose a reason for hiding this comment

Uh oh!

joshblack commented Sep 6, 2024

Uh oh!

siddharthkp commented Sep 9, 2024• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

broccolinisoup commented Sep 12, 2024

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

broccolinisoup commented Jul 30, 2024•
edited by siddharthkp
Loading

changeset-botBot commented Jul 30, 2024•
edited
Loading

github-actionsBot commented Jul 30, 2024•
edited
Loading

primer-integrationBot commented Aug 28, 2024•
edited by siddharthkp
Loading

siddharthkp commented Aug 28, 2024•
edited
Loading

siddharthkp commented Aug 30, 2024•
edited
Loading

siddharthkp commented Sep 9, 2024•
edited
Loading