Migrate ModalDialog to Storybook #1574
Merged
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
🦋 Changeset detectedLatest commit: 8b987bc The changes in this PR will be included in the next version bump. This PR includes changesets to release 0 packagesWhen changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types 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 |
GeraldRequired Reviewers
Don't want to be involved in this pull request? Comment |
✅ Deploy Preview for wonder-blocks ready!
To edit notification comments on pull requests, go to your Netlify site settings. |
|
Size Change: 0 B Total Size: 74.2 kB ℹ️ View Unchanged
|
Codecov Report
@@ Coverage Diff @@
## main #1574 +/- ##
=======================================
Coverage 97.14% 97.14%
=======================================
Files 205 205
Lines 4521 4521
Branches 1351 1351
=======================================
Hits 4392 4392
Misses 129 129 Continue to review full report at Codecov.
|
jandrade
approved these changes
Aug 26, 2022
| export const Default: StoryComponentType = (args) => ( | ||
| <View style={styles.previewSizer}> | ||
| <View style={styles.modalPositioner}> | ||
| <ModalDialog {...args}> |
There was a problem hiding this comment.
suggestion: What do you think about adding aria-labelledby referencing to a title within the ModalPanel contents?
That could be a good way to show the a11y case presented in the component description and we could show engineers how to use custom Dialogs while preserving accessibility.
| return ( | ||
| <View style={styles.previewSizer}> | ||
| <View style={styles.modalPositioner}> | ||
| <ModalDialog |
There was a problem hiding this comment.
Same comment related to aria-describedby here.
jandrade
approved these changes
Aug 26, 2022
jandrade
added a commit
that referenced
this pull request
Aug 16, 2023
jandrade
added a commit
that referenced
this pull request
Sep 18, 2023
…ent (#1574) (#1986) ## Summary: - Adds an overview section to the theming docs. - Adds guidelines for adding theming support to a component. - Modifies the sorting order of the storybook stories to put the overview sections at the top. Issue: WB-1573 ## Test plan: Verify that the new page is clear and documents how to add themes to a given component: https://5e1bf4b385e3fb0020b7073c-jsshumrrxg.chromatic.com/?path=/docs/theming-guides-adding-a-theme--docs Author: jandrade Reviewers: #wonder-blocks, nishasy Required Reviewers: Approved By: Checks: ✅ codecov/project, ✅ Test (ubuntu-latest, 16.x, 2/2), ✅ Check build sizes (ubuntu-latest, 16.x), ✅ Lint (ubuntu-latest, 16.x), ✅ Test (ubuntu-latest, 16.x, 1/2), ✅ gerald, ⏭ Publish npm snapshot, ✅ gerald, ✅ Prime node_modules cache for primary configuration (ubuntu-latest, 16.x), ✅ Test (ubuntu-latest, 16.x, 2/2), ✅ Test (ubuntu-latest, 16.x, 1/2), ✅ Lint (ubuntu-latest, 16.x), ✅ Check build sizes (ubuntu-latest, 16.x), ⏭ Publish npm snapshot, ✅ Prime node_modules cache for primary configuration (ubuntu-latest, 16.x), ✅ gerald, ⏭ dependabot, ✅ Chromatic - Build on review PR (push) / chromatic (ubuntu-latest, 16.x), ⏭ Chromatic - Skip on dependabot PRs (push) Pull Request URL: #1986
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.
Summary:
Using Styleguidist as a foundation, migrate the documentation for
ModalDialog to Storybook.
Styleguidist does not have specific examples for each building
block under modal, but I decided to start adding them all with their own
examples (as opposed to using subcomponents), particularly so that
users can experiment with the control panel. This one was a little
tricky since ModalDialog does not have a visual element.
Storybook publish:
https://5e1bf4b385e3fb0020b7073c-sbvqecqsiq.chromatic.com/?path=/docs/modal-building-blocks-modaldialog--default
Issue: https://khanacademy.atlassian.net/browse/WB-1141
Test plan: