Implement the secondaryAction prop and deprecate footer #5939
Conversation
🦋 Changeset detectedLatest commit: 3aa8790 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
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
bot
added
the
integration-tests: recommended
|
👋 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! |
There was a problem hiding this comment.
Pull Request Overview
This PR implements the secondaryAction prop in the SelectPanel component while deprecating the legacy footer prop. Key changes include:
- Adding a new secondaryAction prop to allow alternative control rendering in the footer area.
- Deprecating the footer prop and updating its documentation.
- Updating stories across the SelectPanel component to reflect the change and showcase new prop combinations.
Reviewed Changes
Copilot reviewed 3 out of 4 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
| packages/react/src/SelectPanel/SelectPanel.tsx | Introduces secondaryAction and adjusts footer rendering logic, including a label change from "Save" to "Apply". |
| packages/react/src/SelectPanel/SelectPanel.features.stories.tsx | Renames and revises the story to use secondaryAction, and removes the custom sorting logic for selected items. |
| packages/react/src/SelectPanel/SelectPanel.dev.stories.tsx | Updates demo variations and adds new controls for secondaryAction, with a fallback for unsupported modal cases. |
Files not reviewed (1)
- packages/react/src/SelectPanel/SelectPanel.module.css: Language not supported
Comments suppressed due to low confidence (2)
packages/react/src/SelectPanel/SelectPanel.tsx:621
- The button label was changed from 'Save' to 'Apply'. Please confirm that this change is intentional and consistent with the rest of the application.
Apply
packages/react/src/SelectPanel/SelectPanel.features.stories.tsx:263
- The sorting logic for selected items has been removed in favor of using the filteredItems order. Please verify that this change in behavior is intended.
export const WithSecondaryAction = () => {
| {variant === 'anchored' ? ( | ||
| <Component secondaryAction={secondaryActionElement} variant={variant} /> | ||
| ) : ( | ||
| 'Not supported' |
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
size-limit report 📦
|
There was a problem hiding this comment.
Mostly LGTM!
Some change requests/questions/suggestions
Loving the new dev story ❤️ !
[ ] Let's confirm this link color:
for reference, this is what it looks like in deprecated SelectPanel
[ ] These "apply" buttons shouldn't be here (all FFs on)
[ ] cancel/apply buttons shouldn't be here
[ ] Let's get the CIs to green and make sure to run integration checks against dotcom 🙏
|
@emilybrick @francinelucca rewrote the logic and re-recorded the videos, it is now ready for review |
|
👋 Hi from github/github! Your integration PR is ready: https://github.com/github/github/pull/374518 |
|
🟢 golden-jobs completed with status |
github-actions
bot
added
integration-tests: passing
Co-authored-by: francinelucca <[email protected]> Co-authored-by: hectahertz <[email protected]>
Closes https://github.com/github/primer/issues/4111
Changelog
New
Adds the
secondaryActionprop to theSelectPanelcomponent.Improves the dev story so that all the prop combinations and variants are easy to test.
Changed
Deprecates the
footerprop. Changes the existingfooterstory to use the newsecondaryActionprop.Also renamed the 'Save' button to 'Apply' to be consistent with the Figma file.
Wide screen variants:
Screen.Recording.2025-04-19.at.17.02.13.mov
Narrow screen variants:
Screen.Recording.2025-04-19.at.17.03.44.mov
Removed
Rollout strategy
Testing & Reviewing
Merge checklist