docs(dial,dialog,divider,dropindicator): Migrate docs to storybook pt7 #2833

marissahuysentruyt · 2024-06-10T20:30:16Z

Description

This PR continues migrating documentation from the static docs site into Storybook. The focus is on dial, dialog (standard dialog), divider and dropindicator. All variants of the components should now be displayed on the Storybook Docs page.

dial: ~~new MDX docs page~~ new stories
dialog: !!new MDX docs page~~ new stories and controls (plus an additional note regarding alert dialog)
divider: ~~new MDX docs page~~ new stories
dropindicator: ~~new MDX docs page~~

This PR doesn't need a changeset since it's docs-only.

How and where has this been tested?

Please tag yourself on the tests you've marked complete to confirm the tests have been run by someone other than the author.

Validation steps

The dial storybook docs include all necessary info when compared to the corresponding docs site page
The dialog storybook docs include all necessary info when compared to the corresponding docs site page
The divider button storybook docs include all necessary info when compared to the corresponding docs site page
The drop indicator storybook docs include all necessary info when compared to the corresponding docs site page
Ensure the Chromatic testing view for each component captures all new variants.

Regression testing

Validate:

The documentation pages for at least two other components are still loading, including:

The pages render correctly, are accessible, and are responsive.

If components have been modified, VRTs have been run on this branch:

VRTs have been run and looked at.
Any VRT changes have been accepted (by reviewer and/or PR author), or there are no changes.

Screenshots

To-do list

I have read the contribution guidelines.
I have updated relevant storybook stories and templates.
I have tested these changes in Windows High Contrast mode.
If my change impacts other components, I have tested to make sure they don't break.
If my change impacts documentation, I have updated the documentation accordingly.
✨ This pull request is ready to merge. ✨

changeset-bot · 2024-06-10T20:30:20Z

⚠️ No Changeset found

Latest commit: 4146e5e

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

github-actions · 2024-06-10T20:33:11Z

File metrics

Summary

Total size: 4.63 MB^*

🎉 No changes detected in any packages

* Size determined by adding together the size of the main file for all packages in the library.
* Results are not gzipped or minified.
* An ASCII character in UTF-8 is 8 bits or 1 byte.

github-actions · 2024-06-10T20:33:49Z

🚀 Deployed on https://pr-2833--spectrum-css.netlify.app

components/dial/stories/dial.stories.js

components/dialog/stories/dialog.stories.js

components/divider/stories/divider.stories.js

components/dial/stories/dial.stories.js

components/dialog/stories/dialog.stories.js

components/dialog/stories/dialog.mdx

components/dialog/stories/dialog.stories.js

aramos-adobe

Migration is there and looks great in the preview link 🎉 Everything looks on point!

Just a few comments:

Dialog Docs renders perfectly in the preview link, but has an error in localhost on my end. The preview.js templates doesn't render.
The dragging on Dial feels different on the Storybook than the OG docs version

Screen.Recording.2024-08-22.at.10.33.50.PM.mov

Screen.Recording.2024-08-22.at.10.34.51.PM.mov

Screen.Recording.2024-08-22.at.10.35.35.PM.mov

- adds static color stories, a sizing story and vertical story - removes customStyles arg from default args because they were overwriting other styles that are dependent on the orientation (i.e. vertical) - refactors chromatic coverage to reflect removal of custom styles in default template

- adds all sizing stories, with hero, no divider, fullscreen/fullscreen- takeover, scorlling example stories - refactors template to accommodate buttons when the dialog is dismissible (no buttons based on guidance/documentation), vs. non- dismissible - adds test coverage example for new stories - fixes sizing template issues in Variants() for showModal: false - renames heading for dialog arg to dialogHeading (to avoid variable naming conflicts between the component and Sizing function used within Variants())

revert arg name "dialogHeading" back to "heading." It's a known issue that the Variant() function is mixing the dialog's heading arg with the Sizing() heading arg. That refactoring and fix will be done in a new branch.

instead of deleting the isFocused type just to replace it with an identical isFocusVisible type & control, this extends isFocused definition to allow the isFocusVisible variable name

VRT diffs were found for Menu and Picker, so tracing them back, were caused by an incorrect inline-size property of 100% (as opposed to the corrected "auto")

To work better with React's hot module reloader, this should only call a template once and toggle the inputs based on settings.

- use the presence of the hero image url as a boolean, instead of an actual hasHeroImage boolean - removes layout !== default since it doesn't do anything anyways - use .every() array method for layout class modifiers

- use the presence of the hero image url as a boolean, instead of actual hasHeroImage boolean

this naming matches the other Sizing story, as well as indicates it is going through the Sizes() function.

- enforces orientation for divider test cases - creates new minDimensionValues arg to use as visualization. Because the inline and block sizes of the divider are dependant on content (which doesn't exist on this component), this new arg sets example values for min-inline-size and min-block-size. Any other customStyles passed to the component should still render as before, and we are relying on the CSS now instead of the styleMap in the default template. - refactors the min-inline-size/min-block-size in styleMap to use new minDimensionValues arg - adds extra documentation - corrects the default size of divider to small

marissahuysentruyt force-pushed the marissahuysentruyt/css-759-docs-to-storybook-pt7 branch 2 times, most recently from 31c9260 to 297b64e Compare June 11, 2024 17:15