feat(SelectPanel): display selected items at the top under FF #5971

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

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
New Jest tests for sorting

Changed

Updated snapshots

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

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-25T01:05:06Z

🦋 Changeset detected

Latest commit: 4948a5a

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-25T01:05:32Z

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

Copilot

Pull Request Overview

This PR introduces functionality to automatically sort options in the SelectPanel so that selected items are displayed first when a feature flag is enabled. It adds a new prop (showSelectedOptionsFirst), implements sorting logic within the component’s memoized items rendering, and updates tests and stories to remove obsolete custom sorting.

Reviewed Changes

Copilot reviewed 6 out of 7 changed files in this pull request and generated 2 comments.

File	Description
packages/react/src/SelectPanel/SelectPanel.tsx	Adds a new prop and state to control sorting, implements new sorting logic for selected items, and updates lifecycle handling with resetSort.
packages/react/src/SelectPanel/SelectPanel.test.tsx	Introduces new Jest tests to verify the behavior of selected items being rendered on top under different flag conditions.
packages/react/src/SelectPanel/SelectPanel.stories.tsx, SelectPanel.features.stories.tsx, SelectPanel.examples.stories.tsx	Removes deprecated custom sorting logic from stories to use the built-in sorting in the component.
packages/react/src/FeatureFlags/DefaultFeatureFlags.ts	Enables the new feature flag (primer_react_select_panel_order_selected_at_top) by default.

Files not reviewed (1)

packages/react/src/SelectPanel/SelectPanel.docs.json: Language not supported

Copilot · 2025-04-25T01:05:55Z

packages/react/src/SelectPanel/SelectPanel.tsx

+            }),
+          )
+
+          // order selected items first


[nitpick] The inline comment for itemB's selection check references 'itemA' instead of 'itemB'; please update the comment to clarify that the check is for itemB.

Copilot · 2025-04-25T01:05:56Z

packages/react/src/SelectPanel/SelectPanel.tsx

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


Consider adding a secondary sort criteria (for example, by a stable property like the item's original index or text) when both items are equally selected/unselected to ensure a deterministic order.

francinelucca · 2025-04-25T01:07:36Z

packages/react/src/FeatureFlags/DefaultFeatureFlags.ts

  primer_react_overlay_overflow: false,
  primer_react_segmented_control_tooltip: false,
  primer_react_select_panel_fullscreen_on_narrow: false,
+  primer_react_select_panel_order_selected_at_top: true,


any issues with having a FF on by default? 🤔

Nope! Should be okay 👍

github-actions · 2025-04-25T01:08:20Z

size-limit report 📦

Path	Size
packages/react/dist/browser.esm.js	98.89 KB (+0.13% 🔺)
packages/react/dist/browser.umd.js	99.19 KB (+0.16% 🔺)

primer-integration · 2025-04-25T01:12:58Z

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

github-actions · 2025-05-06T15:51:40Z

👋 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 · 2025-05-06T15:52:43Z

👋 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 · 2025-05-06T20:15:23Z

👋 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 · 2025-05-06T20:26:28Z

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

feat(SelectPanel): display selected items at the top under FF

e576ea4

Copilot AI review requested due to automatic review settings April 25, 2025 01:05

francinelucca requested a review from a team as a code owner April 25, 2025 01:05

francinelucca requested a review from joshblack April 25, 2025 01:05

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

Create shy-falcons-shout.md

d245993

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 25, 2025

francinelucca mentioned this pull request Apr 25, 2025

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

Closed

13 tasks

Copilot AI reviewed Apr 25, 2025

View reviewed changes

francinelucca commented Apr 25, 2025

View reviewed changes

github-actions bot requested a deployment to storybook-preview-5971 April 25, 2025 01:08 Abandoned

francinelucca added the status: review needed label Apr 25, 2025

francinelucca requested a review from hectahertz April 25, 2025 01:10

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

francinelucca deployed to github-pages April 25, 2025 01:22 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-5971 April 25, 2025 01:23 Inactive

test(vrt): update snapshots

a321bb2

primer bot requested a review from a team as a code owner April 25, 2025 01:28

primer bot requested a review from tbenning April 25, 2025 01:28

Delete results.json

73629bd

github-actions bot requested a deployment to storybook-preview-5971 April 25, 2025 01:34 Abandoned

Merge branch 'main' into feat/auto-select-panel-ordering

b3202c9

github-actions bot requested a deployment to storybook-preview-5971 April 25, 2025 01:45 Abandoned

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 6, 2025

Update SelectPanel.features.stories.tsx

52f92fb

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 6, 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 May 6, 2025

github-actions bot requested a deployment to storybook-preview-5971 May 6, 2025 15:55 Abandoned

francinelucca deployed to github-pages May 6, 2025 16:10 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-5971 May 6, 2025 16:10 Inactive

Merge branch 'main' into feat/auto-select-panel-ordering

0896da7

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

github-actions bot 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 May 6, 2025

test(vrt): update snapshots

4948a5a

github-actions bot removed update snapshots 🤖 Command that updates VRT snapshots on the pull request integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm labels May 6, 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 May 6, 2025

github-actions bot temporarily deployed to storybook-preview-5971 May 6, 2025 20:29 Inactive

primer bot deployed to github-pages May 6, 2025 20:44 View deployment

github-actions bot deployed to storybook-preview-5971 May 6, 2025 20:45 View deployment

francinelucca added this pull request to the merge queue May 6, 2025

github-merge-queue bot removed this pull request from the merge queue due to failed status checks May 6, 2025

francinelucca added this pull request to the merge queue May 6, 2025

Merged via the queue into main with commit 56248f7 May 7, 2025
45 checks passed

francinelucca deleted the feat/auto-select-panel-ordering branch May 7, 2025 00:01

primer bot mentioned this pull request May 7, 2025

Release tracking (37.23.0) #6011

Merged

hectahertz pushed a commit that referenced this pull request May 20, 2025

feat(SelectPanel): display selected items at the top under FF (#5971)

1fad940

feat(SelectPanel): display selected items at the top under FF #5971

feat(SelectPanel): display selected items at the top under FF #5971

Uh oh!

Conversation

francinelucca commented Apr 25, 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 25, 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 25, 2025

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Copilot AI Apr 25, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 25, 2025

Choose a reason for hiding this comment

Uh oh!

francinelucca Apr 25, 2025

Choose a reason for hiding this comment

Uh oh!

joshblack Apr 25, 2025

Choose a reason for hiding this comment

Uh oh!

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

Uh oh!

size-limit report 📦

Uh oh!

primer-integration bot commented Apr 25, 2025

Uh oh!

github-actions bot commented May 6, 2025

Uh oh!

github-actions bot commented May 6, 2025

Uh oh!

github-actions bot commented May 6, 2025

Uh oh!

github-actions bot commented May 6, 2025

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

francinelucca commented Apr 25, 2025 •

edited

Loading

changeset-bot bot commented Apr 25, 2025 •

edited

Loading

github-actions bot commented Apr 25, 2025 •

edited

Loading