docs(swatch,swatchgroup,table,tabs): docs migrations to storybook #2925

marissahuysentruyt · 2024-07-23T18:35:13Z

Description

This PR continues migrating documentation from the static docs site into Storybook. The focus is on swatch, swatchgroup, table and tabs. All variants of the components should now be displayed on the Storybook Docs page. All components have autodocs and/or !dev stories now. Migration notes for tables and tabs have been added to the corresponding changelogs.

Jira

No MDX pages were added for any components.

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 swatch storybook docs include all necessary info when compared to the corresponding docs site page
Verify all variants have been covered and render when using the Chromatic testing preview
The swatch group storybook docs include all necessary info when compared to the corresponding docs site page.
Verify all variants have been covered and render when using the Chromatic testing preview
The table storybook docs include all necessary info when compared to the corresponding docs site page
Verify all variants have been covered and render when using the Chromatic testing preview
The tabs storybook docs include all necessary info when compared to the corresponding docs site page
Verify all variants have been covered and render when using the Chromatic testing preview

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-23T18:35:16Z

⚠️ No Changeset found

Latest commit: 33fb0fb

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-23T18:38:24Z

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

github-actions · 2024-07-23T18:38:30Z

File metrics

Summary

Total size: 4.11 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.

marissahuysentruyt · 2024-08-28T13:57:47Z

components/swatchgroup/stories/swatchgroup.stories.js

+		swatchColor: { table: { disable: true } },
+		isRectangle: { table: { disable: true } },
+		imageUrl: { table: { disable: true } },
+		isMixedValue: { table: { disable: true } },
+		gradient: { table: { disable: true } },


These were all in the controls for swatch group (since we're spreading the Swatch args, and I had to add a bunch to swatch), but I didn't think they were necessary. Let me know if I should keep them in the controls table.

components/table/stories/table.stories.js

marissahuysentruyt · 2024-08-28T14:26:11Z

components/table/stories/template.js

+				class=${classMap({
+					[`${rootClass}-cell`]: true,
+					[`${rootClass}-checkboxCell`]: true,
+				})}


Maybe I didn't need to do this, but it felt out of place. There aren't very many instances where I remembered us just flat out doing the class names without the classMap().

I love this! It's a great addition.

castastrophe

A few suggestions and ideas but seriously loving these updates.

components/swatch/stories/swatch.stories.js

components/swatchgroup/stories/template.js

components/table/stories/table.test.js

castastrophe · 2024-09-13T18:51:10Z

components/table/stories/template.js

+				class=${classMap({
+					[`${rootClass}-cell`]: true,
+					[`${rootClass}-checkboxCell`]: true,
+				})}


I love this! It's a great addition.

components/tabs/CHANGELOG.md

components/tabs/stories/tabs.stories.js

castastrophe · 2024-09-13T18:55:25Z

components/tabs/stories/tabs.stories.js

+Disabled.args = {
+	content: [
+		{
+			id: "tab-1",


Do we want to let the template.js set a default id for tabs?

Let me know if this is what you're thinking. I haven't used getRandomId yet, but I looked at some examples. There should be an id now on the tabs component, as well as each tab item. bcfe278

Love it! Added bonus, now there's no risk of a duplicate ID error during testing. 🥳

components/tabs/stories/template.js

- missing stories are added - additional template to support new stories - expands chromatic test cases

- adds missing stories to docs page - expands Chromatic test cases - adds documentation for border classes, density and corner rounding

- adds missing variants to docs page - expands Chromatic test coverage - enhances coverage to support new variants

- migration guide notes are moved to CHANGELOG - adds missing stories to docs page - enhances template to support new variants - expands Chromatic test coverage

- renames withBorder arg to borderStyle since it isn't a boolean arg for swatch/swatchgroup - refactors template and test files to reflect arg name changes - removes unnecessary comments - removes unnecessary literals in Container() functions - corrects withColumnDividers arg name to hasColumnDividers in default table args - corrects sentence case in table control args - extend swatch.argtypes and fix containerWidth - fix sizing docs description - uses "Density - Compact" and "Density - Spacious" as story names so that both stories will be next to each other on the docs page. - calls out the default, regular density for the default table in the story description

docs(tabs): use passive voice in docs descriptions

- adds descriptions in the control table for isMixedValue, rounding, and imageUrl - adds a better description for gradient control - changes gradient control from color to text to make it clearer that a user can input their own gradient examples. - change from isRectangle boolean, to shape inline-radio control - add description for rectangle control - update template.js & test file as needed for refactored rectangle - add nothing/empty story docs description - add opacity examples to swatch stories

chore(swatchgroup): remove shape control from control table

- fix sentence case in control table - because certain variants cannot be created from the default story, this adds stories to sidebar them back to the navigation for users to view and further edit via the controls - adds description of the quiet multi-select, that has emphasized styles by default, and how to remove those emphasized styles to clarify quiet emphasized multi-select story

- in most stories, swatchgroup now uses colors that now meet contrast in both our light and dark mode to properly show the "default" of having no border on the swatches in the swatchgroup - for the light border story, a new set of colors that don't meet color contrast for light mode are implemented - the rounding template was updated to use a selection of the new colors that meet contrast - updated light border swatch colors for the light border test case

- adds documentation around making sure the default border is applied in cases where a swatch is empty/undefined - updates the no-color test case to apply the default border - removes non-existent swatch arguments isGradient and isImage - fix rectangle story name to shape

- fixes case of defaultValues swatch/swatchgroup - uses shorthand for borderStyles in swatch and converts in template now - simplifies isDisabled, isSelected assignments in swatchgroup template - removes unnecessary destructuring in tabs

marissahuysentruyt mentioned this pull request Jul 29, 2024

fix(swatch): prepares swatch for new stories #2933

Closed

9 tasks

marissahuysentruyt force-pushed the marissahuysentruyt/css-793-docs-to-storybook-pt2 branch 2 times, most recently from 597c65b to 6b6d58a Compare July 30, 2024 14:14

marissahuysentruyt mentioned this pull request Jul 30, 2024

feat(swatch): add support for lightBorder #2954

Merged

15 tasks

marissahuysentruyt added wip This is a work in progress, don't judge. and removed wip This is a work in progress, don't judge. labels Aug 5, 2024

marissahuysentruyt force-pushed the marissahuysentruyt/css-793-docs-to-storybook-pt2 branch from f7ce386 to 8633c48 Compare August 7, 2024 19:35

marissahuysentruyt added size-2 S ~6-18hrs; not hard or time consuming, one or two work days to complete. run_vrt For use on PRs looking to kick off VRT storybook and removed run_vrt For use on PRs looking to kick off VRT labels Aug 8, 2024

marissahuysentruyt force-pushed the marissahuysentruyt/css-793-docs-to-storybook-pt2 branch from 8633c48 to c6f7deb Compare August 9, 2024 20:50

marissahuysentruyt marked this pull request as ready for review August 9, 2024 20:51

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

marissahuysentruyt requested review from jawinn, castastrophe, rise-erpelding and pfulton August 12, 2024 14:26

marissahuysentruyt added the ready-for-review label Aug 12, 2024

marissahuysentruyt added wip This is a work in progress, don't judge. and removed ready-for-review labels Aug 23, 2024

marissahuysentruyt force-pushed the marissahuysentruyt/css-793-docs-to-storybook-pt2 branch from d3506b0 to e195f17 Compare August 27, 2024 18:45

marissahuysentruyt added ready-for-review and removed wip This is a work in progress, don't judge. labels Aug 28, 2024

marissahuysentruyt commented Aug 28, 2024

View reviewed changes

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

marissahuysentruyt commented Aug 28, 2024

View reviewed changes

marissahuysentruyt force-pushed the marissahuysentruyt/css-793-docs-to-storybook-pt2 branch 2 times, most recently from ed03400 to 503f232 Compare September 13, 2024 16:11

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

jawinn approved these changes Sep 13, 2024

View reviewed changes

marissahuysentruyt force-pushed the marissahuysentruyt/css-793-docs-to-storybook-pt2 branch 2 times, most recently from 1ac2606 to c7b5a86 Compare September 13, 2024 17:30

castastrophe approved these changes Sep 13, 2024

View reviewed changes

marissahuysentruyt force-pushed the marissahuysentruyt/css-793-docs-to-storybook-pt2 branch 2 times, most recently from c8ea445 to b5f7826 Compare September 16, 2024 13:01

marissahuysentruyt requested a review from castastrophe September 17, 2024 12:59

castastrophe approved these changes Sep 18, 2024

View reviewed changes

marissahuysentruyt added 15 commits September 18, 2024 08:02

docs(swatch): adds missing variants, expands test coverage

de242a1

- missing stories are added - additional template to support new stories - expands chromatic test cases

docs(swatchgroup): adds missing variants, test coverage

2e39538

- adds missing stories to docs page - expands Chromatic test cases - adds documentation for border classes, density and corner rounding

docs(tabs): adds stories and test cases

1b4239b

- adds missing variants to docs page - expands Chromatic test coverage - enhances coverage to support new variants

docs(table): adds stories and test cases

80aa6f6

- migration guide notes are moved to CHANGELOG - adds missing stories to docs page - enhances template to support new variants - expands Chromatic test coverage

chore(tabs): add backticks to token reference in docs

0e74505

docs(tabs): use passive voice in docs descriptions

docs(swatchgroup): add rounding none to roundinggroup

81b24b5

chore(swatchgroup): remove shape control from control table

docs(tabs): update wording on docs page

0eb3e52

docs(swatch,swatchgroup,tabs): pr fixes

003070c

- fixes case of defaultValues swatch/swatchgroup - uses shorthand for borderStyles in swatch and converts in template now - simplifies isDisabled, isSelected assignments in swatchgroup template - removes unnecessary destructuring in tabs

chore(tabs): use getRandomId to generate ids for tabs/tabitems

514792a

chore(table): fix sentence case in table cells

33fb0fb

castastrophe force-pushed the marissahuysentruyt/css-793-docs-to-storybook-pt2 branch from b5f7826 to 33fb0fb Compare September 18, 2024 12:02

castastrophe merged commit 0061fba into main Sep 18, 2024
14 checks passed

castastrophe deleted the marissahuysentruyt/css-793-docs-to-storybook-pt2 branch September 18, 2024 12:13

rise-erpelding mentioned this pull request Dec 19, 2024

feat(colorslider): S2 migration #3424

Merged

9 tasks

docs(swatch,swatchgroup,table,tabs): docs migrations to storybook #2925

docs(swatch,swatchgroup,table,tabs): docs migrations to storybook #2925

Uh oh!

Conversation

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

Uh oh!

Uh oh!

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

Uh oh!

File metrics

Summary

Uh oh!

marissahuysentruyt Aug 28, 2024

Choose a reason for hiding this comment

Uh oh!

Uh oh!

marissahuysentruyt Aug 28, 2024

Choose a reason for hiding this comment

Uh oh!

castastrophe Sep 13, 2024

Choose a reason for hiding this comment

Uh oh!

castastrophe left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

castastrophe Sep 13, 2024

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

castastrophe Sep 13, 2024

Choose a reason for hiding this comment

Uh oh!

marissahuysentruyt Sep 13, 2024

Choose a reason for hiding this comment

Uh oh!

castastrophe Sep 18, 2024

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

marissahuysentruyt commented Jul 23, 2024 •

edited

Loading

changeset-bot bot commented Jul 23, 2024 •

edited

Loading

github-actions bot commented Jul 23, 2024 •

edited

Loading

github-actions bot commented Jul 23, 2024 •

edited

Loading