docs(statuslight): docs to storybook migration by marissahuysentruyt · Pull Request #3152 · adobe/spectrum-css

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: d3cf45e

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

+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

+ * 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!

That sounds reasonable to me. We can always add it in later if we want to incorporate an example to the docs.

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

+	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

Nice additions and updates.

castastrophe · 2024-10-01T16:00:27Z

+ * 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.
+ */


That sounds reasonable to me. We can always add it in later if we want to incorporate an example to the docs.

castastrophe · 2024-10-01T16:03:22Z

+}, context);
+Sizing.tags = ["!dev"];
+Sizing.parameters = {
+	chromatic: { disabledSnapshot: true },


Suggested change

chromatic: { disabledSnapshot: true },

chromatic: { disableSnapshot: true },

Oh I noticed these snapshots were being added! Can you update this and then I'll re-approve?

gah! Good catch, thank you! d3cf45e

I left you a message in Slack about this, but what are your thoughts on me just dropping the disabled status light commit for now?

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

Closed

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 force-pushed the marissahuysentruyt/css-939-status-light-docs branch from 599c210 to acb656f Compare September 26, 2024 13:55

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

rise-erpelding approved these changes Sep 27, 2024

View reviewed changes

castastrophe force-pushed the marissahuysentruyt/css-939-status-light-docs branch 2 times, most recently from cf70e87 to 531b993 Compare October 1, 2024 15:59

castastrophe approved these changes Oct 1, 2024

View reviewed changes

castastrophe suggested changes Oct 1, 2024

View reviewed changes

marissahuysentruyt added 2 commits October 1, 2024 12:12

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

51cd851

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

b31dceb

castastrophe force-pushed the marissahuysentruyt/css-939-status-light-docs branch from 531b993 to b31dceb Compare October 1, 2024 16:12

chore: remove snapshots from chromatic

d3cf45e

castastrophe approved these changes Oct 1, 2024

View reviewed changes

castastrophe merged commit 2d2738f into main Oct 1, 2024

castastrophe deleted the marissahuysentruyt/css-939-status-light-docs branch October 1, 2024 18:48

	chromatic: { disabledSnapshot: true },
	chromatic: { disableSnapshot: true },

Conversation

marissahuysentruyt commented Sep 23, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Jira/Specs

How and where has this been tested?

Validation steps

Regression testing

Screenshots

To-do list

Uh oh!

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

Uh oh!

Uh oh!

marissahuysentruyt Sep 25, 2024 • 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!

rise-erpelding left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

castastrophe left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

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