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

[marissahuysentruyt]

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. All components have docs-only stories now.

• dial: new MDX docs page
• dialog: new MDX docs page (plus an additional note regarding alert dialog)
• divider: new MDX docs page
• 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

• [x] The dial storybook docs include all necessary info when compared to the corresponding docs site page
• [x] The dialog storybook docs include all necessary info when compared to the corresponding docs site page
• [x] The divider button storybook docs include all necessary info when compared to the corresponding docs site page
• [x] The drop indicator storybook docs include all necessary info when compared to the corresponding docs site page

Regression testing

Validate:

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

• [ ] The pages render correctly, are accessible, and are responsive.

2. 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

• [x] I have read the contribution guidelines.
• [x] I have updated relevant storybook stories and templates.
• [x] 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[bot]]

⚠️ No Changeset found

Latest commit: 4146e5ebbe61352b687a9da3993b454cbf510703

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[bot]]

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[bot]]

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

[marissahuysentruyt]

@rise-erpelding thanks for these!

I can't figure out how to reorder the stories on the component level and I'm not entirely convinced it's possible.

I couldn't either, unless I add an MDX file. The MDX isn't really needed, except to reorganize them, since I could get the documentation onto the page without it.

The "Dialog - Small" format is how they have it on the docs site now I think. I initially didn't use that format since a few of the other components weren't like that, but I agree that it sort of bothers me that the sizing variants are scattered on the page. Here's the change: https://github.com/adobe/spectrum-css/pull/2833/commits/5daca40a70768913cf65abcf79153c63c029f742

I didn't change the storyName for "Default" yet since it would also change the story name in the sidebar.

I wish there was a default image in there already. Could we throw a default image in there as well as giving the option to upload an image

I meant to do that, great catch!! How's this? https://github.com/adobe/spectrum-css/pull/2833/commits/81cef32a0b0e3f6f81cb140363b972097e04f89a

• The fullscreen variants of Dialog had buttons that look like they're supposed to allow you to close the dialog, I'm wondering if you have thoughts on whether these should be preserved in the Storybook version? It would be nice for these variants in particular to be able to have some way to close it, either through a button group or a close button.

The fullscreen variants are a little funky. They're pretty broken on the docs site now. I had adding buttons earlier, but after reviewing it with Josh (here, here and here), we decided separating out any button work might be best, since we both think there's more going on.

This Docs Site usage note on Dialog is no longer needed, right? I didn't see anything wrapped in .spectrum-Dialog-wrapper and nothing looked blurry, but want to confirm that wasn't overlooked.

I purposely didn't include it for the same reasons. The -wrapper I think may have gotten moved onto the spectrum-Modal component instead. That's also where .is-open is being applied.

[marissahuysentruyt]

@rise-erpelding -

The only other thing is that Divider had a static black and static white variant and I wasn't sure if there was a reason we were leaving those out.

I sort of approached the Divider static white/black stories like the clear button, where its "overbackground" story moved to vrt-only, even though I guess technically it's a static white story. @castastrophe do you have a preference on where the static white/black stories go? Should they all be moved to vrt-only?

[marissahuysentruyt]

One last suggestion I have is to show the horizontal drop indicator on the docs page as well as the vertical. Previously they were both shown on the docs site.

I just noticed that too- I had it called DropIndicatorGroup before, and when I pulled over the variants template, which was also called DropIndicatorGroup, I never renamed that story/template.