docs(statuslight): docs to storybook migration #3152

marissahuysentruyt · 2024-09-23T18:58:02Z

Description

This PR continues migrating documentation from the static docs site to Storybook, with a focus on the status light component. When possible, documentation and/or stories were brought over from the S2 status light migration.

Added the migration notes to the CHANGELOG
Added component description and some control descriptions
Added documentation around variant usage
Added sizing, semantic and non-semantic stories to showcase all variants of status light

Jira/Specs

CSS-939

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

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 info from the static docs site is represented on the storybook docs page
Visit the default status light story and view the testing grid
Ensure all status light variants are represented in the testing grid.

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-23T18:58:05Z

⚠️ No Changeset found

Latest commit: acb656f

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-23T19:03:10Z

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.

github-actions · 2024-09-23T19:03:13Z

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

marissahuysentruyt · 2024-09-25T15:00:18Z

components/statuslight/stories/statuslight.stories.js

+export const Disabled = Template.bind({});
+Disabled.args = {
+	isDisabled: true,
+};
+Disabled.tags = ["!dev"];
+Disabled.parameters = {
+	chromatic: { disabledSnapshot: true },
+};


We specifically removed the disabled styles and the disabled variant from the docs page in #1495. There's also no disabled status lights in S2. The only reason I added this is because the guidelines page references a disabled status light state. Perhaps that's out of date?

I have a separate commit for the disabled story and testing for easy removal. If we decide to keep the disabled stuff, I have a draft PR here: #3153 to add the disabled styles back into our CSS.

rise-erpelding

This is great! I added a couple of my non-blocking thoughts/questions below and we'll need to follow up one way or the other with Disabled, but clearly you've done the work on that and will apply whichever version is needed! ⭐

rise-erpelding · 2024-09-26T20:27:06Z

components/statuslight/stories/statuslight.stories.js

+ * Status lights should always include a label with text that clearly communicates the kind of status being shown. Color alone is not enough to communicate the status. Do not change the text color to match the dot.
+ * 
+ * When the text is too long for the horizontal space available, it wraps to form another line.
+ */


May I ask what your reasoning was for not showing the text wrapping to form another line? I think I made the opposite choice in some work I just did for switch, but I'm on the fence on whether I think that's the best way or whether we specifically need to demonstrate text wrapping.

I notice we're testing status light wrapping in the testing preview, which is definitely good, but I'm not sure that necessarily means we need to show it on the Docs page 🤔

I feel like I had a similar conversation with Cassondra about this when I moved the documentation over for another component, but now I'm not sure where that conversation is. In-line alert is like this, where the truncation/wrapping option is only in the test view, and I know I migrated those docs. Maybe that's what I was thinking of? Badge is like this too I see, but then checkbox and radio show wrapping on their docs pages.

I figure at least a call out is good on the docs page. And then people can also test with a long label themselves? I know that's not a very convincing reason/answer!

rise-erpelding · 2024-09-26T20:39:57Z

components/statuslight/stories/template.js

+	direction: "column",
+	content: html`${[
+		"accent",
+		"neutral",


I had never noticed before (or maybe I forgot) that the neutral variant is italicized. Clearly that's an intentional design decision, but it's nowhere in the guidelines. Have you ever picked up any historical knowledge about that? I'd love to see some sort of explanation on the Docs page, although I definitely don't think it's a requirement here.

I don't have much historical knowledge as to why it was italics, but I do know that, for S2, the italicization is no longer supported.

Note: The neutral variant of the status light label uses default-font-style rather than italics as in S1.

castastrophe added the s1 label Sep 24, 2024

marissahuysentruyt force-pushed the marissahuysentruyt/css-939-status-light-docs branch from bafef35 to 599c210 Compare September 25, 2024 14:52

marissahuysentruyt commented Sep 25, 2024

View reviewed changes

marissahuysentruyt marked this pull request as ready for review September 25, 2024 15:04

marissahuysentruyt mentioned this pull request Sep 25, 2024

fix(statuslight): add disabled styles #3153

Draft

9 tasks

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

marissahuysentruyt added 2 commits September 26, 2024 09:52

docs(statuslight): adds missing stories to docs page and CHANGELOG

e5db4f1

docs(statuslight): adds isDisabled controls, test case and story

acb656f

marissahuysentruyt force-pushed the marissahuysentruyt/css-939-status-light-docs branch from 599c210 to acb656f Compare September 26, 2024 13:55

marissahuysentruyt requested review from pfulton, cdransf, jawinn, castastrophe, rise-erpelding and aramos-adobe September 26, 2024 13:57

rise-erpelding approved these changes Sep 27, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

docs(statuslight): docs to storybook migration #3152

docs(statuslight): docs to storybook migration #3152

marissahuysentruyt commented Sep 23, 2024 •

edited

Loading

changeset-bot bot commented Sep 23, 2024 •

edited

Loading

github-actions bot commented Sep 23, 2024 •

edited

Loading

github-actions bot commented Sep 23, 2024 •

edited

Loading

marissahuysentruyt Sep 25, 2024 •

edited

Loading

rise-erpelding left a comment

rise-erpelding Sep 26, 2024

marissahuysentruyt Sep 30, 2024

rise-erpelding Sep 26, 2024

marissahuysentruyt Sep 30, 2024

docs(statuslight): docs to storybook migration #3152

Are you sure you want to change the base?

docs(statuslight): docs to storybook migration #3152

Conversation

marissahuysentruyt commented Sep 23, 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 23, 2024 • edited Loading

⚠️ No Changeset found

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

File metrics

Summary

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

marissahuysentruyt Sep 25, 2024 • edited Loading

Choose a reason for hiding this comment

rise-erpelding left a comment

Choose a reason for hiding this comment

rise-erpelding Sep 26, 2024

Choose a reason for hiding this comment

marissahuysentruyt Sep 30, 2024

Choose a reason for hiding this comment

rise-erpelding Sep 26, 2024

Choose a reason for hiding this comment

marissahuysentruyt Sep 30, 2024

Choose a reason for hiding this comment

marissahuysentruyt commented Sep 23, 2024 •

edited

Loading

changeset-bot bot commented Sep 23, 2024 •

edited

Loading

github-actions bot commented Sep 23, 2024 •

edited

Loading

github-actions bot commented Sep 23, 2024 •

edited

Loading

marissahuysentruyt Sep 25, 2024 •

edited

Loading