fix(SelectPanel): selected items should appear at the top #5867

francinelucca · 2025-04-03T04:04:50Z

Closes https://github.com/github/primer/issues/2409

Adds logic to SelectPanel to automatically sort items, displaying the selected items first. The sorted list gets rearranged on:

Filter value is cleared
Items have changed
Panel is reopened

Also adds capabilities for custom sorting, providing a sorting key, sort by ascending or descending and opt-out of "selected on top" functionality.

by default, selected items will be displayed at the top when primer_react_select_panel_order_selected_at_top FF is on

Changelog

New

Added sorting logic to SelectPanel
sortKey, sortFn, sortDirection and orderSelectedFirst props in SelectPanel
New Jest tests for sorting
New stories for sorting
Added "sortKey" to all SelectPanel stories so that they're sorted alphabetically

Changed

Update VRT tests
Update Jest tests to account for new sorting logic
Update ItemProps interface to extend from HtmlElement

Removed

Custom sorting logic from SelectPanel stories as it is no longer needed

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

SelectPanel stories

Ensure to turn on modern_action_list FF, as well with primer_react_select_panel_fullscreen_on_narrow and primer_react_select_panel_order_selected_at_top FF

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-04-03T04:04:54Z

🦋 Changeset detected

Latest commit: ead6002

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

github-actions · 2025-04-03T04:05:21Z

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

francinelucca · 2025-04-03T04:06:19Z

packages/react/src/SelectPanel/SelectPanel.tsx

+        const itemASelected = selectedOnSort.some(item =>
+          Object.entries(item).every(([key, value]) => {
+            if (key === 'selected') {
+              return true
+            }
+            return itemA[key as keyof ItemProps] === value
+          }),
+        )


this seems expensive :(

Wanted to ask if it would be possible for the sort order to be maintained as a stateful value and compute it onClose or onOpen instead of having to run the sort every render?

It seemed like the logic that we have for this is something like:

When open, keep the ordering of items constant

When closing (or when re-opening), sort the items by:

selected items come first

sort selected items by group, if applicable

otherwise, sort by alphanumeric

otherwise, sort by alphanumeric

Does that track with what you're seeing?

francinelucca · 2025-04-03T04:07:51Z

packages/react/src/SelectPanel/SelectPanel.tsx

+        // Then order by text
+        if ((itemA.text ?? '') < (itemB.text ?? '')) {
+          return -1
+        } else if ((itemA.text ?? '') > (itemB.text ?? '')) {
+          return 1
+        }


I baked in alphabetically ordering through text but now that I'm looking at the issue it doesn't really look like a requirement 🤔
I can remove and do selection-at-top only if this is not wanted/needed 👀
CC: @emilybrick

Consumers could want to sub-sort based on something besides alphabetical order. For example: sort most frequently used labels to the top.

I think we should remove this default alphanumeric sort.

Feel free to steal the alphanumeric stuff from data table btw if it's helpful! We have some sort helpers over there

github-actions · 2025-04-03T04:08:24Z

size-limit report 📦

Path	Size
packages/react/dist/browser.esm.js	103.95 KB (+0.35% 🔺)
packages/react/dist/browser.umd.js	104.21 KB (+0.24% 🔺)

francinelucca · 2025-04-03T04:09:18Z

packages/react/src/SelectPanel/SelectPanel.tsx

+          },
+        } as ItemProps
+      })
+      .sort((itemA, itemB) => {


I'm coding this as the default behavior. Wondering if we should allow consumer to opt-out of this behavior or provide their custom sort function 👀
cc: @emilybrick

I feel strongly that we should let consumers opt-out by providing their own sort function. I think DataTable has a nice API for handling this: https://github.com/primer/react/blob/main/packages/react/src/DataTable/column.ts#L59

…nto fix/select-panel-ordering

francinelucca · 2025-04-03T06:37:52Z

...mponents/SelectPanel.test.ts-snapshots/SelectPanel-Above-Tall-Body-dark-colorblind-linux.png

visual updates are due to items being sorted now

…ordering

…nto fix/select-panel-ordering

This reverts commit 4d41982.

emilybrick

This looks good to me, selected items move to top/appear at top + in the same order as they appear in the button. WIth border removed. Thank you!

…nto fix/select-panel-ordering

primer-integration · 2025-04-11T19:50:02Z

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

joshblack

Left some comments around the effect stuff, feel free to ignore me if this is getting annoying 😅 lol

.changeset/itchy-bears-fry.md

packages/react/src/SelectPanel/SelectPanel.tsx

joshblack · 2025-04-11T20:47:44Z

packages/react/src/SelectPanel/SelectPanel.tsx

+  useEffect(() => {
+    if (open) {
+      resetSort()
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [open])


We could potentially handled this this like in: https://react.dev/learn/you-might-not-need-an-effect#adjusting-some-state-when-a-prop-changes to avoid having to use an effect here. Another idea is to call resetSort() when onClose() is called (or whatever appropriate prop it would be for when it open/closes)

joshblack · 2025-04-11T20:49:26Z

packages/react/src/SelectPanel/SelectPanel.tsx

@@ -385,8 +463,56 @@ export function SelectPanel({
        },
      } as ItemProps
    })
+
+    setItemsToRender(itemsToRender)


Could this and the effect below potentially move into just the render function instead of effects or are we experiencing some perf problems when that happens?

Yeah we can, I put it in a useEffect as a response to your comment here #5867 (comment), (also see #5867 (comment)) so we didn't have to sort on every render 👀

packages/react/src/SelectPanel/SelectPanel.tsx

joshblack · 2025-04-11T20:52:34Z

packages/react/src/SelectPanel/SelectPanel.tsx

+  sortKey?: keyof ItemInput
+  sortDirection?: 'asc' | 'desc'
+  sortFn?: (a: ItemInput, b: ItemInput) => number


Could you share more about baking these directly into select panel? Put another way, folks could just sort the array however they wanted to before but now they would need to hook into SelectPanel's API to do that.

This might be a preference for folks downstream or on the team, totally understand if so 👍 It wasn't immediately clear to me why we would do this and just wanted to ask.

my logic was we're already sorting in order to display selected at the top so I was thinking instead of doing (potentially) a double sort, one at consumer-side and one on our side, we could just do it all together, so that's where sortKey and sortDirection come in sortFn comes from @mperrotti suggestion that we should allow for custom sort functions.
I also thought providing these could offload work from the consumer and make it "easier", I could be wrong though 👀

Put another way, folks could just sort the array however they wanted to before but now they would need to hook into SelectPanel's API to do that

these are all opt-in, folks could totally still do their own sorting before hand and everything should work as expected.

All that being said, these three props can totally be removed and this PRs purpose will still be served.

primer-integration · 2025-04-14T15:13:22Z

🔴 golden-jobs completed with status failure.

Co-authored-by: Josh Black <[email protected]>

francinelucca · 2025-04-25T01:05:37Z

closing in favor of #5971

fix(SelectPanel): selected items should appear at the top

42ba67f

github-actions bot added the staff Author is a staff member label Apr 3, 2025

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 Apr 3, 2025

Create itchy-bears-fry.md

da3517b

francinelucca commented Apr 3, 2025

View reviewed changes

github-actions bot requested a deployment to storybook-preview-5867 April 3, 2025 04:09 Abandoned

francinelucca commented Apr 3, 2025

View reviewed changes

francinelucca added 2 commits April 3, 2025 00:14

lint fix

0a21cac

Merge branch 'fix/select-panel-ordering' of github.com:primer/react i…

650e880

…nto fix/select-panel-ordering

github-actions bot requested a deployment to storybook-preview-5867 April 3, 2025 04:17 Abandoned

test(SelectPanel): tweak tests

ce3a7fc

github-actions bot requested a deployment to storybook-preview-5867 April 3, 2025 04:22 Abandoned

francinelucca deployed to github-pages April 3, 2025 04:35 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-5867 April 3, 2025 04:36 Inactive

francinelucca added the update snapshots 🤖 Command that updates VRT snapshots on the pull request label Apr 3, 2025

test(vrt): update snapshots

f35b1de

github-actions bot removed the update snapshots 🤖 Command that updates VRT snapshots on the pull request label Apr 3, 2025

primer bot deployed to github-pages April 3, 2025 05:24 View deployment

github-actions bot temporarily deployed to storybook-preview-5867 April 3, 2025 05:24 Inactive

francinelucca commented Apr 3, 2025

View reviewed changes

Merge branch 'main' into fix/select-panel-ordering

18d320e

francinelucca deployed to github-pages April 4, 2025 02:58 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-5867 April 4, 2025 02:59 Inactive

francinelucca added 2 commits April 7, 2025 16:40

Merge branch 'main' of github.com:primer/react into fix/select-panel-…

dee79f8

…ordering

remove dependency

841fc64

github-actions bot requested a deployment to storybook-preview-5867 April 7, 2025 20:53 Abandoned

primer bot deployed to github-pages April 11, 2025 02:49 View deployment

github-actions bot temporarily deployed to storybook-preview-5867 April 11, 2025 02:49 Inactive

francinelucca added 3 commits April 10, 2025 22:54

add FF

c7857fa

Merge branch 'fix/select-panel-ordering' of github.com:primer/react i…

ea113cb

…nto fix/select-panel-ordering

Revert "test(vrt): update snapshots"

ad880d0

This reverts commit 4d41982.

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

lint fix

cae7934

github-actions bot requested a deployment to storybook-preview-5867 April 11, 2025 03:00 Abandoned

test(vrt): update snapshots

da7603c

github-actions bot removed the update snapshots 🤖 Command that updates VRT snapshots on the pull request label Apr 11, 2025

github-actions bot requested a deployment to storybook-preview-5867 April 11, 2025 03:11 Abandoned

primer bot deployed to github-pages April 11, 2025 03:24 View deployment

github-actions bot temporarily deployed to storybook-preview-5867 April 11, 2025 03:24 Inactive

emilybrick approved these changes Apr 11, 2025

View reviewed changes

francinelucca added 2 commits April 11, 2025 09:46

Empty

822034e

Merge branch 'fix/select-panel-ordering' of github.com:primer/react i…

02f1ca8

…nto fix/select-panel-ordering

francinelucca deployed to github-pages April 11, 2025 14:00 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-5867 April 11, 2025 14:00 Inactive

Merge branch 'main' into fix/select-panel-ordering

2f746c0

francinelucca deployed to github-pages April 11, 2025 19:58 — with GitHub Actions View deployment

github-actions bot deployed to storybook-preview-5867 April 11, 2025 19:58 View deployment

joshblack reviewed Apr 11, 2025

View reviewed changes

francinelucca and others added 3 commits April 17, 2025 13:16

Update .changeset/itchy-bears-fry.md

26126e9

Co-authored-by: Josh Black <[email protected]>

rename prop

21e4766

remove prevItems useEffect

ead6002

francinelucca closed this Apr 25, 2025

francinelucca deleted the fix/select-panel-ordering branch May 7, 2025 03:01

fix(SelectPanel): selected items should appear at the top #5867

fix(SelectPanel): selected items should appear at the top #5867

Uh oh!

Conversation

francinelucca commented Apr 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changelog

New

Changed

Removed

Rollout strategy

Testing & Reviewing

Merge checklist

Uh oh!

changeset-bot bot commented Apr 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

github-actions bot commented Apr 3, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Apr 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

size-limit report 📦

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

emilybrick left a comment

Choose a reason for hiding this comment

Uh oh!

primer-integration bot commented Apr 11, 2025

Uh oh!

joshblack left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

primer-integration bot commented Apr 14, 2025

Uh oh!

francinelucca commented Apr 25, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

francinelucca commented Apr 3, 2025 •

edited

Loading

changeset-bot bot commented Apr 3, 2025 •

edited

Loading

github-actions bot commented Apr 3, 2025 •

edited

Loading