docs(inlinealert,link,logicbutton,miller): docs migration from static site to storybook #2884

marissahuysentruyt · 2024-07-02T15:24:46Z

Description

This PR continues migrating documentation from the docs site into Storybook. The focus is on inlinealert, link, logicbutton and miller. All variants of the component should now be displayed on the Storybook Docs page. Additionally, Chromatic coverage was added to inlinealert, link, and logicbutton.

inlinealert: new stories and enhanced chromatic coverage
link: new stories and added chromatic coverage
logicbutton: enhanced chromatic coverage
miller: new story descriptions

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 inline alert docs page matches all content found on the docs site
Using the chromatic preview should display all variants of the inline alert in the default/neutral story.
The link docs page matches all content found on the docs site
Using the chromatic preview should display all variants of the link in the default story.
The logic button docs page matches all content found on the docs site
Using the chromatic preview should display all variants of the logic button.
The miller columns docs page matches all content found on the docs site
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-07-02T15:24:50Z

⚠️ No Changeset found

Latest commit: ca10df5

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-07-02T15:27:52Z

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

github-actions · 2024-07-02T15:28:04Z

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.

components/inlinealert/stories/inlinealert.stories.js

components/link/stories/link.stories.js

components/link/stories/template.js

rise-erpelding

Hi! This was all pretty straightforward and all the stories here look good! The only comments I made here were thoughts I had on how we could organize/display the content on the docs pages a little better and a link that might help for getting those static stories into Chromatic. Happy to hear your thoughts and take another look anytime!

components/inlinealert/stories/inlinealert.stories.js

components/link/stories/link.stories.js

components/inlinealert/stories/inlinealert.stories.js

components/link/stories/link.stories.js

components/link/stories/template.js

components/link/stories/link.stories.js

components/logicbutton/stories/logicbutton.stories.js

jawinn

I think Rise covered most of it! I just have one suggestion for Link, to reduce the amount of vertical space between all of the stories on its Docs page.

I also noticed that Miller columns shows an empty message for the ArgTypes doc block "Args table with interactive controls couldn't be auto-generated", because it has no controls. There doesn't appear to be a way to hide that in Storybook at the moment. There was a merged Storybook PR that closed the issue for the <Controls/> doc block, but I think another issue would need to be created with Storybook to also hide this for <ArgTypes/>. I think we can leave that for now, rather than creating a custom MDX template.

components/link/stories/link.stories.js

components/logicbutton/stories/logicbutton.stories.js

rise-erpelding

I think this one is good to go now! Thanks, @marissahuysentruyt!

components/logicbutton/stories/template.js

components/logicbutton/stories/logicbutton.stories.js

components/miller/stories/miller.stories.js

components/link/stories/link.stories.js

components/inlinealert/stories/inlinealert.stories.js

- moves migration notes about the previous subtle variant to the changelog - adds missing stories and documentation - adds a template for "filler text" to showcase links in context

castastrophe

Just one last update then I think this one is ready to go

castastrophe · 2024-08-23T18:47:14Z

components/inlinealert/stories/template.js

+				${when(headerText, () => 
+					headerText.charAt(0).toUpperCase() + headerText.slice(1)
+				)}


Suggested change

${when(headerText, () =>

headerText.charAt(0).toUpperCase() + headerText.slice(1)

)}

${headerText}

Since this is a string, we don't need a when wrapper and I'm not sure we should be altering the format of the string. Thanks for making this update!

Oh and a note to double check the *.test.js file too - it looks like it lost the modifiers in the header text.

Oh wait- did those need that ${variant.charAt(0).toUpperCase() + variant.slice(1)} in the test file instead of the template file? Is that what you mean as modifiers?

- adds headerText modifier for test cases - simplifies header text in template - adds "Neutral" to default header text arg

marissahuysentruyt force-pushed the marissahuysentruyt/css-759-docs-to-storybook-pt-9 branch from 37cda5f to e5b9eea Compare July 2, 2024 16:05

marissahuysentruyt added run_vrt For use on PRs looking to kick off VRT documentation Because documentation is important and shouldn't be broken storybook labels Jul 2, 2024

marissahuysentruyt marked this pull request as ready for review July 2, 2024 16:32

marissahuysentruyt removed the run_vrt For use on PRs looking to kick off VRT label Jul 2, 2024

marissahuysentruyt force-pushed the marissahuysentruyt/css-759-docs-to-storybook-pt-9 branch from e5b9eea to f7e87fd Compare July 2, 2024 18:53

marissahuysentruyt commented Jul 2, 2024

View reviewed changes

components/inlinealert/stories/inlinealert.stories.js Show resolved Hide resolved

components/link/stories/link.stories.js Show resolved Hide resolved

components/link/stories/template.js Outdated Show resolved Hide resolved

marissahuysentruyt requested review from castastrophe, jawinn, pfulton and rise-erpelding July 3, 2024 12:50

marissahuysentruyt added the ready-for-review label Jul 9, 2024

marissahuysentruyt force-pushed the marissahuysentruyt/css-759-docs-to-storybook-pt-9 branch 2 times, most recently from f870d04 to 66a0656 Compare July 15, 2024 18:09

rise-erpelding reviewed Jul 15, 2024

View reviewed changes

jawinn reviewed Jul 17, 2024

View reviewed changes

components/link/stories/link.stories.js Show resolved Hide resolved

marissahuysentruyt force-pushed the marissahuysentruyt/css-759-docs-to-storybook-pt-9 branch from 66a0656 to 93cad16 Compare July 18, 2024 17:12

rise-erpelding reviewed Jul 19, 2024

View reviewed changes

components/logicbutton/stories/logicbutton.stories.js Outdated Show resolved Hide resolved

marissahuysentruyt force-pushed the marissahuysentruyt/css-759-docs-to-storybook-pt-9 branch 2 times, most recently from f4a7871 to a40a449 Compare July 22, 2024 13:49

marissahuysentruyt requested review from jawinn and rise-erpelding July 22, 2024 14:18

rise-erpelding approved these changes Jul 22, 2024

View reviewed changes

marissahuysentruyt force-pushed the marissahuysentruyt/css-759-docs-to-storybook-pt-9 branch from a40a449 to 0893c29 Compare July 23, 2024 14:31

marissahuysentruyt added the run_vrt For use on PRs looking to kick off VRT label Jul 23, 2024

jawinn approved these changes Aug 2, 2024

View reviewed changes

castastrophe reviewed Aug 12, 2024

View reviewed changes

components/logicbutton/stories/template.js Outdated Show resolved Hide resolved

castastrophe reviewed Aug 12, 2024

View reviewed changes

components/logicbutton/stories/logicbutton.stories.js Outdated Show resolved Hide resolved

marissahuysentruyt force-pushed the marissahuysentruyt/css-759-docs-to-storybook-pt-9 branch from 0893c29 to 2f3e58a Compare August 21, 2024 16:43

marissahuysentruyt commented Aug 21, 2024

View reviewed changes

components/miller/stories/miller.stories.js Outdated Show resolved Hide resolved

castastrophe reviewed Aug 22, 2024

View reviewed changes

components/link/stories/link.stories.js Outdated Show resolved Hide resolved

marissahuysentruyt force-pushed the marissahuysentruyt/css-759-docs-to-storybook-pt-9 branch 3 times, most recently from 0fabca3 to 0128946 Compare August 23, 2024 17:53

castastrophe suggested changes Aug 23, 2024

View reviewed changes

components/link/stories/link.stories.js Outdated Show resolved Hide resolved

components/inlinealert/stories/inlinealert.stories.js Outdated Show resolved Hide resolved

marissahuysentruyt added 7 commits August 23, 2024 14:41

docs(inlinealert): adds missing stories

10dfb12

docs(miller): adds variant descriptions

a4515a1

docs(logicbutton): adds description and the OR variant to disabled story

5886edc

docs(link): adds missing stories, migrates changelog

38cf2f0

- moves migration notes about the previous subtle variant to the changelog - adds missing stories and documentation - adds a template for "filler text" to showcase links in context

chore(link): add defaultValue of primary to arg table

aa08e3b

chore(miller): add FileSelectable to the sidenav

c4bbaa1

docs(inlinealert): remove variant name from headerText in template

411c456

marissahuysentruyt force-pushed the marissahuysentruyt/css-759-docs-to-storybook-pt-9 branch from 80bd1b3 to 411c456 Compare August 23, 2024 18:41

castastrophe suggested changes Aug 23, 2024

View reviewed changes

marissahuysentruyt added 3 commits August 23, 2024 15:04

chore(inlinealert): edits from PR comments

53b6002

- adds headerText modifier for test cases - simplifies header text in template - adds "Neutral" to default header text arg

chore(link): fix case of default value to match options array

90c117b

chore(inlinealert): fix placement of hyphen in test cases

ca10df5

castastrophe approved these changes Aug 23, 2024

View reviewed changes

pfulton approved these changes Aug 23, 2024

View reviewed changes

pfulton merged commit 1c04192 into main Aug 23, 2024

pfulton deleted the marissahuysentruyt/css-759-docs-to-storybook-pt-9 branch August 23, 2024 19:57

docs(inlinealert,link,logicbutton,miller): docs migration from static site to storybook #2884

docs(inlinealert,link,logicbutton,miller): docs migration from static site to storybook #2884

Uh oh!

Conversation

marissahuysentruyt commented Jul 2, 2024 • edited 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

Screenshots

To-do list

Uh oh!

changeset-bot bot commented Jul 2, 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 Jul 2, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Jul 2, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

File metrics

Summary

Uh oh!

Uh oh!

Uh oh!

Uh oh!

rise-erpelding left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

jawinn left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

rise-erpelding left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

castastrophe left a comment

Choose a reason for hiding this comment

Uh oh!

castastrophe Aug 23, 2024

Choose a reason for hiding this comment

Uh oh!

castastrophe Aug 23, 2024

Choose a reason for hiding this comment

Uh oh!

marissahuysentruyt Aug 23, 2024

Choose a reason for hiding this comment

Uh oh!

marissahuysentruyt Aug 23, 2024

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

marissahuysentruyt commented Jul 2, 2024 •

edited

Loading

changeset-bot bot commented Jul 2, 2024 •

edited

Loading

github-actions bot commented Jul 2, 2024 •

edited

Loading

github-actions bot commented Jul 2, 2024 •

edited

Loading

jawinn left a comment •

edited

Loading