docs(accordion,actionbar,actionmenu,alertdialog): site docs to storybook by mdt2 · Pull Request #2770 · adobe/spectrum-css

mdt2 · 2024-05-20T18:25:35Z

Description

This migrates the documentation from the deprecated docs site over to Storybook, including showing the variants on the Storybook Docs page.

Accordion - got a new MDX page and some MDX-only stories
Actionbar - got a new MDX page and one MDX-only story
Actionmenu - doesn't require it's own MDX page since the DocumentationTemplate already covers the only variant, so just got an update to the description to include some additional details from the docs site.
Alertdialog - got a new MDX page and one MDX-only story. Also got a small update to the template.js so that I could pass a custom height for the scroll story example

Also includes an addition to the storybook/manager.js to hide stories from the sidebar that have the tag is-hidden-story.

This PR shouldn'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 Accordion storybook docs include all necessary info when compared to the docs site (@rise-erpelding)
The Actionbar storybook docs include all necessary info when compared to the docs site
The Actionmenu storybook docs include all necessary info when compared to the docs site
The Alertdialog storybook docs include all necessary info when compared to the docs site

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.

To-do list

I have read the contribution guidelines.
I have updated relevant storybook stories and templates.
If my change impacts documentation, I have updated the documentation accordingly.
✨ This pull request is ready to merge. ✨

changeset-bot · 2024-05-20T18:25:39Z

⚠️ No Changeset found

Latest commit: 3d53441

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-05-20T18:28:26Z

File metrics

Summary

Total size: 4.64 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-05-20T18:28:39Z

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

rise-erpelding

This is a really strong start for this card! The variants are displayed like they are on the docs site and I didn't notice any information that was lost. I had a few questions only:

For Action Menu - is there a way to expand the size of the canvas? It would be nice to see all of the menu if this is an option (doing a quick search there was a fullscreen parameter, I don't know if that would work?), but it's also ok as is.

For Action Bar--I didn't check it off in the validation, I noticed that the docs site displayed 3 "subvariants" (if they can be called that)--just label, label with icon, and just icon:

This doesn't seem to work in Storybook (or maybe it does, I only took a really quick look), and I'm not sure if it was a deliberate decision that was made at some point historically or whether that was unintentional. It might be out of scope if it's something that needs to be addressed, and that's ok too, but I wanted to bring it up here.

I also noticed that in Josh's work on Button and Alert Banner that he removed the controls, what are your thoughts on this? I think the argument could be made either way. 🙂

mdt2 · 2024-05-21T14:20:28Z

@rise-erpelding thanks for your feedback!

Actionmenu - great catch, I used parameters to update this and you should see the whole component now. I continued using the Default story without an MDX page because the parameters don't seem to affect the Default story page itself.
Actionbar - another great catch. After some investigation, I found that this is because actiongroup, which is a child of actionbar, doesn't have label setup on the Storybook side. Since we're saving actiongroup for later because of the S2 migration, I put a note in the docs migration card to include this expansion of actionbar when actiongroup gets updated to include label:

rise-erpelding

Checked it out locally since the build is not building, but I can see those changes to Action Menu! Nice work!

castastrophe · 2024-05-22T16:01:01Z

+	docs: {
+		story: {
+			inline: false,
+			iframeHeight: 250,


Oh interesting! Great job catching this fix. Is this a best practice we should document for any component using a popover or that uses a certain type of positioning?

This is the first time we've used it, but I do think it will be necessary to use on the Docs page of any component that uses absolute positioning. It helps us ensure that the whole component can show in the preview frame for Docs.

Action menu doesn't require it's own MDX page since the DocumentationTemplate already covers the only variant. This is just an update to the description to include some additional details.

castastrophe · 2024-05-22T17:58:26Z

+
+## Controls
+
+<Controls />


Since these controls aren't working on any of the canvas', let's use the <ArgTypes of={AccordionStories} /> instead so that's a static representation of the API.

https://storybook.js.org/docs/api/doc-block-argtypes

mdt2 requested review from castastrophe, jawinn, pfulton and rise-erpelding May 20, 2024 18:42

mdt2 added the run_vrt For use on PRs looking to kick off VRT label May 20, 2024

mdt2 force-pushed the mdt2/css-759-docs-to-storybook-pt1 branch from a8ee1ab to 5e5197c Compare May 20, 2024 19:00

rise-erpelding reviewed May 21, 2024

View reviewed changes

mdt2 force-pushed the mdt2/css-759-docs-to-storybook-pt1 branch from b0ffa93 to 421b2c5 Compare May 21, 2024 14:17

mdt2 added skip_vrt Add to a PR to skip running VRT (but still pass the action) and removed run_vrt For use on PRs looking to kick off VRT labels May 21, 2024

mdt2 requested a review from rise-erpelding May 21, 2024 14:32

rise-erpelding approved these changes May 21, 2024

View reviewed changes

mdt2 added the ready-to-merge label May 21, 2024

castastrophe approved these changes May 22, 2024

View reviewed changes

castastrophe force-pushed the mdt2/css-759-docs-to-storybook-pt1 branch from 421b2c5 to 9cc00a1 Compare May 22, 2024 16:02

mdt2 force-pushed the mdt2/css-759-docs-to-storybook-pt1 branch from 9cc00a1 to 45556d7 Compare May 22, 2024 17:02

castastrophe approved these changes May 22, 2024

View reviewed changes

Melissa Thompson added 7 commits May 22, 2024 13:54

docs(accordion): docs site details now in storybook

aabce32

docs(actionbar): docs site details now in storybook

881adda

docs: hide docs stories from sidebar, chromatic

12ae12c

docs(actionmenu): docs site details now in storybook

faf581f

Action menu doesn't require it's own MDX page since the DocumentationTemplate already covers the only variant. This is just an update to the description to include some additional details.

docs(alertdialog): docs site details now in storybook

ae3b38a

fix(actionmenu): preview size shows popover

1551782

docs: docs-only tag, document tag and chromatic parameter

fa4a884

castastrophe force-pushed the mdt2/css-759-docs-to-storybook-pt1 branch from 45556d7 to fa4a884 Compare May 22, 2024 17:54

castastrophe reviewed May 22, 2024

View reviewed changes

castastrophe removed the ready-to-merge label May 22, 2024

docs: show argtypes instead of controls on docs page

3d53441

castastrophe merged commit 1d19c7a into main May 22, 2024

castastrophe deleted the mdt2/css-759-docs-to-storybook-pt1 branch May 22, 2024 18:17

mdt2 mentioned this pull request May 22, 2024

feat(alertbanner): migrate to spectrum 2 #2652

Merged

14 tasks

marissahuysentruyt mentioned this pull request Nov 20, 2024

chore(accordion,actionbar,asset): remove mdx files #3407

Merged

13 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

docs(accordion,actionbar,actionmenu,alertdialog): site docs to storybook#2770

docs(accordion,actionbar,actionmenu,alertdialog): site docs to storybook#2770
castastrophe merged 8 commits into
mainfrom
mdt2/css-759-docs-to-storybook-pt1

mdt2 commented May 20, 2024 •

edited by rise-erpelding

Loading

Uh oh!

changeset-bot Bot commented May 20, 2024 •

edited

Loading

Uh oh!

github-actions Bot commented May 20, 2024 •

edited

Loading

Uh oh!

github-actions Bot commented May 20, 2024 •

edited

Loading

Uh oh!

rise-erpelding left a comment

Uh oh!

mdt2 commented May 21, 2024 •

edited

Loading

Uh oh!

rise-erpelding left a comment

Uh oh!

Uh oh!

Uh oh!

castastrophe May 22, 2024

Uh oh!

mdt2 May 22, 2024

Uh oh!

Uh oh!

castastrophe May 22, 2024

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants


		## Controls

		<Controls />

Conversation

mdt2 commented May 20, 2024 • edited by rise-erpelding Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

How and where has this been tested?

Validation steps

Regression testing

To-do list

Uh oh!

changeset-bot Bot commented May 20, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

⚠️ No Changeset found

Uh oh!

github-actions Bot commented May 20, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

File metrics

Summary

Uh oh!

github-actions Bot commented May 20, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

rise-erpelding left a comment

Choose a reason for hiding this comment

Uh oh!

mdt2 commented May 21, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

rise-erpelding left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

castastrophe May 22, 2024

Choose a reason for hiding this comment

Uh oh!

mdt2 May 22, 2024

Choose a reason for hiding this comment

Uh oh!

Uh oh!

castastrophe May 22, 2024

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

mdt2 commented May 20, 2024 •

edited by rise-erpelding

Loading

changeset-bot Bot commented May 20, 2024 •

edited

Loading

github-actions Bot commented May 20, 2024 •

edited

Loading

github-actions Bot commented May 20, 2024 •

edited

Loading

mdt2 commented May 21, 2024 •

edited

Loading