docs(progressbar,meter): migrate docs from static site to storybook #3186

marissahuysentruyt · 2024-09-30T21:28:04Z

Description

This continues the effort to migrate documentation from the CSS static docs site into Storybook, with a focus on progressbar and meter.

In each component's case, missing stories and corresponding documentation were added, along with any relevant S2 features from feat(progressbar): s2 migration #2659.
Test coverage was expanded for meter and progressbar.
progressbar also now has a showValueLabel control to better align with the ability to show that value label or not, according to guidance documentation.
Added the migration notes to the CHANGELOG

This PR has no CSS changes, so no changeset is needed.

Jira/Specs

CSS-937

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

Pull down the branch to run locally or use the deploy preview
Verify all stories and documentation from the static docs site are represented on the Storybook progress bar docs page
Verify the Chromatic testing grid for progress bar also captures all variants (including the S2 side label)
Verify all stories and documentation from the static docs site are represented on the Storybook meter docs page
Verify the Chromatic testing grid for meter covers all new variants (including the S2 side label)
The newly added documentation has been proofread and makes sense.

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-09-30T21:28:07Z

⚠️ No Changeset found

Latest commit: e6a7dc2

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-09-30T21:31:39Z

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

github-actions · 2024-09-30T21:32:54Z

File metrics

Summary

Total size: 4.31 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/progressbar/stories/progressbar.stories.js

castastrophe

A few updates requested to the testing suite - looks great!

components/progressbar/CHANGELOG.md

components/progressbar/stories/progressbar.stories.js

components/progressbar/stories/progressbar.test.js

components/progressbar/stories/template.js

components/progressbar/stories/progressbar.stories.js

rise-erpelding

Leaving a few small comments!

components/progressbar/stories/meter.stories.js

components/progressbar/stories/progressbar.stories.js

components/progressbar/stories/meter.stories.js

rise-erpelding · 2024-10-01T17:38:10Z

components/progressbar/stories/progressbar.stories.js

 	},
 };

+/**
+ * By default, progress bars are determinate and have a blue fill that shows the progress. This component should have a label at the start of the track that gives context about the operation being performed. In rare cases where context is sufficient and an accessibility expert has reviewed the design, the label could be undefined. These progress bars should still include an “aria-label” or “aria-labelledby” in HTML, depending on the context. The label is always placed above the track.


Some of this gets repeated in the "Without label" story, do you think it needs to be in both places?

mmmm probably not. I feel like this is the teacher in me, wanted to reiterate an important point about not using the value label without the label 😆

f383888

There's still a bit of repetition around L147:

but in rare cases where context is sufficient and an accessibility expert has reviewed the design, the label could be undefined.

rise-erpelding

Calling out a bit of repetition that's still on the progress bar Docs page, but otherwise good to go!

rise-erpelding · 2024-10-01T20:08:20Z

components/progressbar/stories/progressbar.stories.js

 	},
 };

+/**
+ * By default, progress bars are determinate and have a blue fill that shows the progress. This component should have a label at the start of the track that gives context about the operation being performed. In rare cases where context is sufficient and an accessibility expert has reviewed the design, the label could be undefined. These progress bars should still include an “aria-label” or “aria-labelledby” in HTML, depending on the context. The label is always placed above the track.


There's still a bit of repetition around L147:

but in rare cases where context is sufficient and an accessibility expert has reviewed the design, the label could be undefined.

marissahuysentruyt · 2024-10-01T21:51:32Z

Calling out a bit of repetition that's still on the progress bar Docs page, but otherwise good to go!

@rise-erpelding Should be taken care of now! 0bf91c5

- adds relevant S2 controls to template - expands test coverage to include without label and without value label - adds stories and documentation to docs page - adds additional migration guide context to CHANGELOG

- expands test coverage to include without label and without value label - adds stories and documentation to docs page - adds additional migration guide context to CHANGELOG

- removes some duplicative docs language for pgoress bar - adds correct punctuation to CHANGELOG - passes default value for customWidth in args for progress bar - uses passive voice in meter documentation - removes repetitive StaticWhiteDocs story in favor of previous StaticWhite story - removes Chromatic snapshot for WithoutLabel progress bar story

marissahuysentruyt changed the title ~~Marissahuysentruyt/css 937 progress bar docs to storybook~~ docs(progressbar,meter): migrate docs from static site to storybook Sep 30, 2024

marissahuysentruyt self-assigned this Oct 1, 2024

marissahuysentruyt force-pushed the marissahuysentruyt/css-937-progress-bar-docs-to-storybook branch from 0691c04 to 2de2250 Compare October 1, 2024 14:08

marissahuysentruyt added documentation Because documentation is important and shouldn't be broken size-1 XS ~1-6hrs; nearly trivial, a few hours, could do more than one in a single day. ready-for-review s1 run_vrt For use on PRs looking to kick off VRT labels Oct 1, 2024

castastrophe marked this pull request as ready for review October 1, 2024 14:16

marissahuysentruyt commented Oct 1, 2024

View reviewed changes

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

marissahuysentruyt commented Oct 1, 2024

View reviewed changes

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

marissahuysentruyt force-pushed the marissahuysentruyt/css-937-progress-bar-docs-to-storybook branch from 2de2250 to dc23de4 Compare October 1, 2024 14:25

marissahuysentruyt requested review from jawinn, castastrophe, pfulton, cdransf, rise-erpelding and aramos-adobe October 1, 2024 14:28

castastrophe force-pushed the marissahuysentruyt/css-937-progress-bar-docs-to-storybook branch from dc23de4 to e2796d5 Compare October 1, 2024 16:12

castastrophe requested changes Oct 1, 2024

View reviewed changes

rise-erpelding reviewed Oct 1, 2024

View reviewed changes

castastrophe approved these changes Oct 1, 2024

View reviewed changes

castastrophe force-pushed the marissahuysentruyt/css-937-progress-bar-docs-to-storybook branch from f383888 to b63e601 Compare October 1, 2024 18:52

rise-erpelding approved these changes Oct 1, 2024

View reviewed changes

pfulton 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 Oct 1, 2024

marissahuysentruyt force-pushed the marissahuysentruyt/css-937-progress-bar-docs-to-storybook branch from b63e601 to 0bf91c5 Compare October 1, 2024 21:50

marissahuysentruyt added 3 commits October 2, 2024 09:23

docs(progressbar): adds missing stories, tests, controls

e51e738

- adds relevant S2 controls to template - expands test coverage to include without label and without value label - adds stories and documentation to docs page - adds additional migration guide context to CHANGELOG

docs(meter): adds missing stories, tests, controls

6ddcdd8

- expands test coverage to include without label and without value label - adds stories and documentation to docs page - adds additional migration guide context to CHANGELOG

castastrophe force-pushed the marissahuysentruyt/css-937-progress-bar-docs-to-storybook branch from 0bf91c5 to e6a7dc2 Compare October 2, 2024 13:23

castastrophe enabled auto-merge (squash) October 2, 2024 13:23

castastrophe merged commit 6b60092 into main Oct 2, 2024
15 of 23 checks passed

castastrophe deleted the marissahuysentruyt/css-937-progress-bar-docs-to-storybook branch October 2, 2024 13:31

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

docs(progressbar,meter): migrate docs from static site to storybook #3186

docs(progressbar,meter): migrate docs from static site to storybook #3186

marissahuysentruyt commented Sep 30, 2024 •

edited

Loading

changeset-bot bot commented Sep 30, 2024 •

edited

Loading

github-actions bot commented Sep 30, 2024 •

edited

Loading

github-actions bot commented Sep 30, 2024 •

edited

Loading

castastrophe left a comment

rise-erpelding left a comment

rise-erpelding Oct 1, 2024

marissahuysentruyt Oct 1, 2024

rise-erpelding Oct 1, 2024

rise-erpelding left a comment

rise-erpelding Oct 1, 2024

marissahuysentruyt commented Oct 1, 2024

docs(progressbar,meter): migrate docs from static site to storybook #3186

docs(progressbar,meter): migrate docs from static site to storybook #3186

Conversation

marissahuysentruyt commented Sep 30, 2024 • edited Loading

Description

Jira/Specs

How and where has this been tested?

Validation steps

Regression testing

Screenshots

To-do list

changeset-bot bot commented Sep 30, 2024 • edited Loading

⚠️ No Changeset found

github-actions bot commented Sep 30, 2024 • edited Loading

github-actions bot commented Sep 30, 2024 • edited Loading

File metrics

Summary

castastrophe left a comment

Choose a reason for hiding this comment

rise-erpelding left a comment

Choose a reason for hiding this comment

rise-erpelding Oct 1, 2024

Choose a reason for hiding this comment

marissahuysentruyt Oct 1, 2024

Choose a reason for hiding this comment

rise-erpelding Oct 1, 2024

Choose a reason for hiding this comment

rise-erpelding left a comment

Choose a reason for hiding this comment

rise-erpelding Oct 1, 2024

Choose a reason for hiding this comment

marissahuysentruyt commented Oct 1, 2024

marissahuysentruyt commented Sep 30, 2024 •

edited

Loading

changeset-bot bot commented Sep 30, 2024 •

edited

Loading

github-actions bot commented Sep 30, 2024 •

edited

Loading

github-actions bot commented Sep 30, 2024 •

edited

Loading