SelectPanel: Implement empty state #5142

broccolinisoup · 2024-10-17T04:57:24Z

Closes https://github.com/github/primer/issues/3922, https://github.com/github/primer/issues/4104

Implementing empty state for SelectPanel. Default message and the ability to customise them when there is no item to show either in the first load or when filtering (Under primer_react_select_panel_with_modern_action_list FF).

Changelog

New

SelectPanel.Message child component
When there is no item to show after the initial load, we now show a message. There is a default message and ability to customise it.

<SelectPanel .....>
  <SelectPanel.Message variant="empty" title={`No label found`}>
    Start creating some labels
  </SelectPanel.Message>
</SelectPanel>

When there is no item to show after user filters the result, we now show a message. There is a default message and ability to customise it.

<SelectPanel .....>
  <SelectPanel.Message variant="noResults" title={`No language found for `}>
    Adjust your search term to find other languages
  </SelectPanel.Message>
</SelectPanel>

No initial Item

Screenshot of the select panel that doesn't have any items to show. There is a message says You haven't created any projects yet. Start your first project to organise your issues.

No filtered Item demo

Video description:

Rewatch.Screen.Recording.-.2024-10-24.at.1.55.52.PM.mp4

Changed

SelectPanel accepts children now

Removed

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

This and This are a good stories to test the behaviour. Please note primer_react_select_panel_with_modern_action_list FF must be on

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)

This reverts commit f93eb9b.

…to select-panel-empty-state

changeset-bot · 2024-10-17T04:57:27Z

🦋 Changeset detected

Latest commit: d3d6875

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 · 2024-10-17T04:57:54Z

👋 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-17T05:00:28Z

size-limit report 📦

Path	Size
packages/react/dist/browser.esm.js	105.78 KB (-0.01% 🔽)
packages/react/dist/browser.umd.js	106.17 KB (+0.04% 🔺)

…_states

…is behaviour

hectahertz · 2025-03-25T15:26:30Z

packages/react/src/SelectPanel/SelectPanel.tsx

            textInputProps={extendedTextInputProps}
            loading={loading || isLoading}
            loadingType={loadingType()}
+            // hack because the deprecated ActionList does not support this prop


Ohhhh nice way to bridge this!

…y-state

github-actions · 2025-03-25T21:26:07Z

👋 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-03-25T21:38: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!

…to select-panel-empty-state

github-actions · 2025-03-25T22:01:45Z

👋 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-03-25T22:04:20Z

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

This reverts commit 769a048.

arisacoba · 2025-08-01T09:41:01Z

.changeset/new-mangos-fold.md

broccolinisoup added 4 commits October 14, 2024 18:33

initial commit

14dbae0

Revert "Revert "Select panel loading states (#4929)" (#5136)"

245a841

This reverts commit f93eb9b.

Merge branch 'revert-5136-revert-4929-select_panel_loading_states' in…

2bf2821

…to select-panel-empty-state

Both internally and externally managed logic

654de86

github-actions bot added the staff Author is a staff member label Oct 17, 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 17, 2024

broccolinisoup temporarily deployed to github-pages October 17, 2024 04:59 — with GitHub Actions Inactive

github-actions bot temporarily deployed to storybook-preview-5142 October 17, 2024 04:59 Inactive

broccolinisoup changed the title ~~select panel empty state~~ SelectPanel: Implement empty state Oct 17, 2024

Merge branch 'main' into revert-5136-revert-4929-select_panel_loading…

af26d78

…_states

broccolinisoup changed the base branch from main to revert-5136-revert-4929-select_panel_loading_states October 21, 2024 00:31

broccolinisoup and others added 8 commits October 21, 2024 12:46

do not display error if it is on empty state - I am not sure about th…

e2336ea

…is behaviour

Use published primer/behaviors

49c7005

Merge upstream

3f33d6e

Merge upstream again

d80d5f1

Revert snapshot change to TextInput

2bed50b

Huh ok never mind

121718b

Use role in test

1906413

return variants based on priority order

97d367d

broccolinisoup temporarily deployed to github-pages October 22, 2024 03:05 — with GitHub Actions Inactive

github-actions bot temporarily deployed to storybook-preview-5142 October 22, 2024 03:05 Inactive

add default messages

b0a2d0e

broccolinisoup temporarily deployed to github-pages October 22, 2024 03:26 — with GitHub Actions Inactive

github-actions bot temporarily deployed to storybook-preview-5142 October 22, 2024 03:26 Inactive

delete eslint cache

f0b8e3c

broccolinisoup temporarily deployed to github-pages October 22, 2024 06:37 — with GitHub Actions Inactive

github-actions bot temporarily deployed to storybook-preview-5142 October 22, 2024 06:37 Inactive

hectahertz approved these changes Mar 25, 2025

View reviewed changes

hectahertz reviewed Mar 25, 2025

View reviewed changes

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

80743d6

…y-state

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

test(vrt): update snapshots

238ecd1

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

github-actions bot temporarily deployed to storybook-preview-5142 March 25, 2025 21:39 Inactive

primer bot deployed to github-pages March 25, 2025 21:53 View deployment

github-actions bot temporarily deployed to storybook-preview-5142 March 25, 2025 21:53 Inactive

francinelucca added 2 commits March 25, 2025 18:01

fix(SelectPanel): remove liveregion

07a4fab

Merge branch 'select-panel-empty-state' of github.com:primer/react in…

70e4b30

…to select-panel-empty-state

remove unused var

d3d6875

github-actions bot requested a deployment to storybook-preview-5142 March 25, 2025 22:07 Abandoned

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

github-actions bot deployed to storybook-preview-5142 March 25, 2025 22:23 View deployment

francinelucca added this pull request to the merge queue Mar 25, 2025

Merged via the queue into main with commit 769a048 Mar 25, 2025
44 checks passed

francinelucca deleted the select-panel-empty-state branch March 25, 2025 23:26

primer bot mentioned this pull request Mar 25, 2025

Release tracking (37.17.0) #5802

Merged

TylerJDev added a commit that referenced this pull request Mar 26, 2025

Revert "SelectPanel: Implement empty state (#5142)"

40ba77d

This reverts commit 769a048.

TylerJDev mentioned this pull request Mar 26, 2025

Revert "SelectPanel: Implement empty state " #5824

Closed

francinelucca added a commit that referenced this pull request Mar 26, 2025

Revert "SelectPanel: Implement empty state (#5142)"

42090ee

This reverts commit 769a048.

This was referenced Mar 26, 2025

Chore/revert select panel active descendant changes #5825

Merged

Feat/select panel empty state #5826

Merged

arisacoba reviewed Aug 1, 2025

View reviewed changes

.changeset/new-mangos-fold.md

Copy link

Member

arisacoba Aug 1, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

test

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

SelectPanel: Implement empty state #5142

SelectPanel: Implement empty state #5142

Uh oh!

broccolinisoup commented Oct 17, 2024 •

edited by francinelucca

Loading

Uh oh!

changeset-bot bot commented Oct 17, 2024 •

edited

Loading

Uh oh!

github-actions bot commented Oct 17, 2024

Uh oh!

github-actions bot commented Oct 17, 2024 •

edited

Loading

Uh oh!

hectahertz Mar 25, 2025

Uh oh!

francinelucca Mar 25, 2025

Uh oh!

github-actions bot commented Mar 25, 2025

Uh oh!

github-actions bot commented Mar 25, 2025

Uh oh!

github-actions bot commented Mar 25, 2025

Uh oh!

github-actions bot commented Mar 25, 2025

Uh oh!

Uh oh!

arisacoba Aug 1, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

10 participants

SelectPanel: Implement empty state #5142

SelectPanel: Implement empty state #5142

Uh oh!

Conversation

broccolinisoup commented Oct 17, 2024 • edited by francinelucca Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changelog

New

No initial Item

No filtered Item demo

Changed

Removed

Rollout strategy

Testing & Reviewing

Merge checklist

Uh oh!

changeset-bot bot commented Oct 17, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

github-actions bot commented Oct 17, 2024

Uh oh!

github-actions bot commented Oct 17, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

size-limit report 📦

Uh oh!

hectahertz Mar 25, 2025

Choose a reason for hiding this comment

Uh oh!

francinelucca Mar 25, 2025

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Mar 25, 2025

Uh oh!

github-actions bot commented Mar 25, 2025

Uh oh!

github-actions bot commented Mar 25, 2025

Uh oh!

github-actions bot commented Mar 25, 2025

Uh oh!

Uh oh!

arisacoba Aug 1, 2025

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

10 participants

broccolinisoup commented Oct 17, 2024 •

edited by francinelucca

Loading

changeset-bot bot commented Oct 17, 2024 •

edited

Loading

github-actions bot commented Oct 17, 2024 •

edited

Loading