[PageActions] Add ReactNode as an accepted primaryAction prop value for customizability #5946
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
/snapshot-release |
size-limit report 📦
|
|
/snapit |
|
🤌 ✨ Thanks @alex-page! Your snapshots have been shipped. Test the snapshots by updating your yarn add @shopify/polaris-icons@0.0.0-snapshot-release-20220525204914yarn add @shopify/polaris@0.0.0-snapshot-release-20220525204914yarn add @shopify/polaris-tokens@0.0.0-snapshot-release-20220525204914yarn add @shopify/stylelint-polaris@0.0.0-snapshot-release-20220525204914 |
rmleg
force-pushed
the
rmleg/page-actions-primary-action-react-node
branch
from
b0c675f
to
b06e3c5
Compare
|
/snapit |
1 similar comment
|
/snapit |
|
@rmleg there is still an issue with the permissions. Sorry about that. We will get that ironed out. |
|
🤌 ✨ Thanks @alex-page! Your snapshots have been shipped. Test the snapshots by updating your yarn add @shopify/polaris-icons@0.0.0-snapshot-release-20220525211817yarn add @shopify/polaris@0.0.0-snapshot-release-20220525211817yarn add @shopify/polaris-tokens@0.0.0-snapshot-release-20220525211817yarn add @shopify/stylelint-polaris@0.0.0-snapshot-release-20220525211817 |
|
/snapit |
|
🫰✨ Thanks @rmleg! Your snapshots have been published to npm. Test the snapshots by updating your yarn add @shopify/polaris-icons@0.0.0-snapshot-release-20220525220051yarn add @shopify/polaris@0.0.0-snapshot-release-20220525220051yarn add @shopify/polaris-tokens@0.0.0-snapshot-release-20220525220051yarn add @shopify/stylelint-polaris@0.0.0-snapshot-release-20220525220051 |
|
/snapit |
|
🫰✨ Thanks @rmleg! Your snapshots have been published to npm. Test the snapshots by updating your yarn add @shopify/polaris-icons@0.0.0-snapshot-release-20220526145039yarn add @shopify/polaris@0.0.0-snapshot-release-20220526145039yarn add @shopify/polaris-tokens@0.0.0-snapshot-release-20220526145039yarn add @shopify/stylelint-polaris@0.0.0-snapshot-release-20220526145039 |
rmleg
changed the title
rmleg
requested review from
chloerice,
stefanlegg,
akhayoon,
laurkim and
alex-page
chloerice
approved these changes
May 26, 2022
polaris-react/src/components/PageActions/tests/PageActions.test.tsx
Outdated
Show resolved
Hide resolved
added 5 commits
May 26, 2022 20:57
rmleg
force-pushed
the
rmleg/page-actions-primary-action-react-node
branch
from
93650f9
to
62c3fb6
Compare
Merged
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
WHY are these changes introduced?
This PR is related to recent changes to support passing a
React.ReactNodeto thesecondaryActionsprop of thePageActionscomponent (and much of this PR's description is plagiarized from that one; thank you @stefanlegg!).Currently
primaryActiononPageActionsonly allows for passing props asDisableableAction & LoadableAction. This doesn't allow for flexibility and results in accessibility issues in some cases.In cases where the primary action opens a modal, we are unable to move focus back to the button that opened it after the modal is closed. With this change to accept
React.ReactNodewe are better able to support keyboard users through passing an entire modal as the primary action to leverage modal's built-in focus management, or through passing a custom button with a ref to receive the focus.This is also consistent with current behavior of the
Pagecomponent, which can accept aReact.ReactNodeas itsprimaryActionprop.WHAT is this pull request doing?
This PR maintains the existing
primaryActionprop, while adding the option to pass aReact.ReactNodeinstead for customizability.I've also added a new example to the README for this component, highlighting this new supported prop type by passing in a custom button to
primaryAction.My new example in storybook
My new example on the style guide site
Tophatted in web
The disabled button to the right has been passed in as a
React.ReactNode.How to 🎩
Use the Polaris snapshot release with polaris-styleguide (
yarn add @shopify/polaris@0.0.0-snapshot-release-20220525220051) to verify that the new example displays in the documentation.In storybook, verify that the
PageActions/Page actions with custom primary actionstory displays a custom primary action, in this case a "Save" button with a drop-down option to "save as draft".🎩 checklist
README.mdwith documentation changes