Skip to content

docs: add storybook migrated badge #3690

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Conversation

marissahuysentruyt
Copy link
Collaborator

@marissahuysentruyt marissahuysentruyt commented May 2, 2025

Description

This work adds the "migrated" status to S2 migrated components. A new indigo badge should appear on component pages for a S2-migrated components. 🥳 This will be really nice to have once spectrum-two has merged into our main branch, especially if not all components have been migrated!

Jira/Specs

CSS-1192
CSS-604 (epic for S2 Migration)

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.
  • Check that the status: { type: "migrated" } parameter has been added to each S2 migrated component, according to the list in the S2 Migration epic. All components have an associated ticket, EXCEPT FOR:
    • The progress bar ticket looks like it's missing from the epic, but it was migrated here: feat(progressbar): s2 migration #2659 👍
    • The status light ticket looks like it's missing from the epic, but it was migrated here: feat(statuslight): s2 migration #2818 👍
    • The switch ticket looks like it's missing from the epic, but it was migrated here: feat(switch): s2 migration #2651 👍
    • The dial component is marked as migrated, but I believe this is a "one-off" component. There are no designs. 👍
    • The field group component is marked as migrated, probably because that component is just collections of checkboxes and collections of radios (both of which have been migrated). 👍
    • The form component is marked as migrated for a similar reason. All nested components in the form, aside from number field (which is in-progress), have been migrated. 👍
    • Pagination is marked as migrated for a similar reason. All nested components have been migrated. 👍
  • Visit a few of the migrated components' docs pages, for instance, dialog, picker, avatar, text area, illustrated message. Each migrated component should now have an indigo badge marking it as "migrated."
Screenshot 2025-05-05 at 12 34 23 PM
  • With the project running locally, pick a non-migrated component (like side nav or table). In the parameters object in the component's CSF, add:
status: {
  type: "migrated",
}
  • Back in your browser, verify the newly added status renders. Just make sure not to commit this change 😉

Regression testing

Validate:

  1. The documentation pages for at least two other components are still loading, including:
  • The pages render correctly, are accessible, and are responsive.
  1. 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. ✨

Copy link

changeset-bot bot commented May 2, 2025

⚠️ No Changeset found

Latest commit: b033f69

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

Copy link
Contributor

@github-actions github-actions bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Remaining comments which cannot be posted as a review comment to avoid GitHub Rate Limit

eslint

⚠️ [eslint] <indent> reported by reviewdog 🐶
Expected indentation of 1 tab but found 2 spaces.


⚠️ [eslint] <indent> reported by reviewdog 🐶
Expected indentation of 2 tabs but found 4 spaces.


⚠️ [eslint] <indent> reported by reviewdog 🐶
Expected indentation of 1 tab but found 2 spaces.


⚠️ [eslint] <indent> reported by reviewdog 🐶
Expected indentation of 1 tab but found 2 spaces.


⚠️ [eslint] <indent> reported by reviewdog 🐶
Expected indentation of 2 tabs but found 4 spaces.


⚠️ [eslint] <indent> reported by reviewdog 🐶
Expected indentation of 1 tab but found 2 spaces.


⚠️ [eslint] <indent> reported by reviewdog 🐶
Expected indentation of 1 tab but found 2 spaces.


⚠️ [eslint] <indent> reported by reviewdog 🐶
Expected indentation of 2 tabs but found 4 spaces.


⚠️ [eslint] <indent> reported by reviewdog 🐶
Expected indentation of 1 tab but found 2 spaces.


⚠️ [eslint] <indent> reported by reviewdog 🐶
Expected indentation of 1 tab but found 2 spaces.


⚠️ [eslint] <indent> reported by reviewdog 🐶
Expected indentation of 2 tabs but found 4 spaces.


⚠️ [eslint] <indent> reported by reviewdog 🐶
Expected indentation of 1 tab but found 2 spaces.


⚠️ [eslint] <indent> reported by reviewdog 🐶
Expected indentation of 1 tab but found 2 spaces.


⚠️ [eslint] <indent> reported by reviewdog 🐶
Expected indentation of 2 tabs but found 4 spaces.


⚠️ [eslint] <indent> reported by reviewdog 🐶
Expected indentation of 1 tab but found 2 spaces.


⚠️ [eslint] <indent> reported by reviewdog 🐶
Expected indentation of 1 tab but found 2 spaces.


⚠️ [eslint] <indent> reported by reviewdog 🐶
Expected indentation of 2 tabs but found 4 spaces.


⚠️ [eslint] <indent> reported by reviewdog 🐶
Expected indentation of 1 tab but found 2 spaces.


⚠️ [eslint] <indent> reported by reviewdog 🐶
Expected indentation of 1 tab but found 2 spaces.


⚠️ [eslint] <indent> reported by reviewdog 🐶
Expected indentation of 2 tabs but found 4 spaces.


⚠️ [eslint] <indent> reported by reviewdog 🐶
Expected indentation of 1 tab but found 2 spaces.


⚠️ [eslint] <indent> reported by reviewdog 🐶
Expected indentation of 1 tab but found 2 spaces.


⚠️ [eslint] <indent> reported by reviewdog 🐶
Expected indentation of 2 tabs but found 4 spaces.


⚠️ [eslint] <indent> reported by reviewdog 🐶
Expected indentation of 1 tab but found 2 spaces.


⚠️ [eslint] <indent> reported by reviewdog 🐶
Expected indentation of 1 tab but found 2 spaces.


⚠️ [eslint] <indent> reported by reviewdog 🐶
Expected indentation of 2 tabs but found 4 spaces.


⚠️ [eslint] <indent> reported by reviewdog 🐶
Expected indentation of 1 tab but found 2 spaces.


⚠️ [eslint] <indent> reported by reviewdog 🐶
Expected indentation of 1 tab but found 2 spaces.


⚠️ [eslint] <indent> reported by reviewdog 🐶
Expected indentation of 2 tabs but found 4 spaces.


⚠️ [eslint] <indent> reported by reviewdog 🐶
Expected indentation of 1 tab but found 2 spaces.


⚠️ [eslint] <indent> reported by reviewdog 🐶
Expected indentation of 1 tab but found 2 spaces.


⚠️ [eslint] <indent> reported by reviewdog 🐶
Expected indentation of 2 tabs but found 4 spaces.


⚠️ [eslint] <indent> reported by reviewdog 🐶
Expected indentation of 1 tab but found 2 spaces.


⚠️ [eslint] <indent> reported by reviewdog 🐶
Expected indentation of 1 tab but found 2 spaces.


⚠️ [eslint] <indent> reported by reviewdog 🐶
Expected indentation of 2 tabs but found 4 spaces.


⚠️ [eslint] <indent> reported by reviewdog 🐶
Expected indentation of 1 tab but found 2 spaces.


⚠️ [eslint] <indent> reported by reviewdog 🐶
Expected indentation of 1 tab but found 2 spaces.


⚠️ [eslint] <indent> reported by reviewdog 🐶
Expected indentation of 2 tabs but found 4 spaces.


⚠️ [eslint] <indent> reported by reviewdog 🐶
Expected indentation of 1 tab but found 2 spaces.


⚠️ [eslint] <indent> reported by reviewdog 🐶
Expected indentation of 1 tab but found 2 spaces.


⚠️ [eslint] <indent> reported by reviewdog 🐶
Expected indentation of 2 tabs but found 4 spaces.


⚠️ [eslint] <indent> reported by reviewdog 🐶
Expected indentation of 1 tab but found 2 spaces.


⚠️ [eslint] <indent> reported by reviewdog 🐶
Expected indentation of 1 tab but found 2 spaces.


⚠️ [eslint] <indent> reported by reviewdog 🐶
Expected indentation of 2 tabs but found 4 spaces.


⚠️ [eslint] <indent> reported by reviewdog 🐶
Expected indentation of 1 tab but found 2 spaces.


⚠️ [eslint] <indent> reported by reviewdog 🐶
Expected indentation of 1 tab but found 2 spaces.


⚠️ [eslint] <indent> reported by reviewdog 🐶
Expected indentation of 2 tabs but found 4 spaces.


⚠️ [eslint] <indent> reported by reviewdog 🐶
Expected indentation of 1 tab but found 2 spaces.


⚠️ [eslint] <indent> reported by reviewdog 🐶
Expected indentation of 1 tab but found 2 spaces.


⚠️ [eslint] <indent> reported by reviewdog 🐶
Expected indentation of 2 tabs but found 4 spaces.


⚠️ [eslint] <indent> reported by reviewdog 🐶
Expected indentation of 1 tab but found 2 spaces.


⚠️ [eslint] <indent> reported by reviewdog 🐶
Expected indentation of 1 tab but found 2 spaces.


⚠️ [eslint] <indent> reported by reviewdog 🐶
Expected indentation of 2 tabs but found 4 spaces.


⚠️ [eslint] <indent> reported by reviewdog 🐶
Expected indentation of 1 tab but found 2 spaces.


⚠️ [eslint] <indent> reported by reviewdog 🐶
Expected indentation of 1 tab but found 2 spaces.


⚠️ [eslint] <indent> reported by reviewdog 🐶
Expected indentation of 2 tabs but found 4 spaces.


⚠️ [eslint] <indent> reported by reviewdog 🐶
Expected indentation of 1 tab but found 2 spaces.


⚠️ [eslint] <indent> reported by reviewdog 🐶
Expected indentation of 1 tab but found 2 spaces.


⚠️ [eslint] <indent> reported by reviewdog 🐶
Expected indentation of 2 tabs but found 4 spaces.


⚠️ [eslint] <indent> reported by reviewdog 🐶
Expected indentation of 1 tab but found 2 spaces.


⚠️ [eslint] <indent> reported by reviewdog 🐶
Expected indentation of 1 tab but found 2 spaces.


⚠️ [eslint] <indent> reported by reviewdog 🐶
Expected indentation of 2 tabs but found 4 spaces.


⚠️ [eslint] <indent> reported by reviewdog 🐶
Expected indentation of 1 tab but found 2 spaces.


⚠️ [eslint] <indent> reported by reviewdog 🐶
Expected indentation of 1 tab but found 2 spaces.


⚠️ [eslint] <indent> reported by reviewdog 🐶
Expected indentation of 2 tabs but found 4 spaces.


⚠️ [eslint] <indent> reported by reviewdog 🐶
Expected indentation of 1 tab but found 2 spaces.


⚠️ [eslint] <indent> reported by reviewdog 🐶
Expected indentation of 1 tab but found 2 spaces.


⚠️ [eslint] <indent> reported by reviewdog 🐶
Expected indentation of 2 tabs but found 4 spaces.


⚠️ [eslint] <indent> reported by reviewdog 🐶
Expected indentation of 1 tab but found 2 spaces.


⚠️ [eslint] <indent> reported by reviewdog 🐶
Expected indentation of 1 tab but found 2 spaces.


⚠️ [eslint] <indent> reported by reviewdog 🐶
Expected indentation of 2 tabs but found 4 spaces.


⚠️ [eslint] <indent> reported by reviewdog 🐶
Expected indentation of 1 tab but found 2 spaces.


⚠️ [eslint] <indent> reported by reviewdog 🐶
Expected indentation of 1 tab but found 2 spaces.


⚠️ [eslint] <indent> reported by reviewdog 🐶
Expected indentation of 2 tabs but found 4 spaces.


⚠️ [eslint] <indent> reported by reviewdog 🐶
Expected indentation of 1 tab but found 2 spaces.


⚠️ [eslint] <indent> reported by reviewdog 🐶
Expected indentation of 1 tab but found 2 spaces.


⚠️ [eslint] <indent> reported by reviewdog 🐶
Expected indentation of 2 tabs but found 4 spaces.


⚠️ [eslint] <indent> reported by reviewdog 🐶
Expected indentation of 1 tab but found 2 spaces.


⚠️ [eslint] <indent> reported by reviewdog 🐶
Expected indentation of 1 tab but found 2 spaces.


⚠️ [eslint] <indent> reported by reviewdog 🐶
Expected indentation of 2 tabs but found 4 spaces.


⚠️ [eslint] <indent> reported by reviewdog 🐶
Expected indentation of 1 tab but found 2 spaces.


⚠️ [eslint] <indent> reported by reviewdog 🐶
Expected indentation of 1 tab but found 2 spaces.


⚠️ [eslint] <indent> reported by reviewdog 🐶
Expected indentation of 2 tabs but found 4 spaces.


⚠️ [eslint] <indent> reported by reviewdog 🐶
Expected indentation of 1 tab but found 2 spaces.


⚠️ [eslint] <indent> reported by reviewdog 🐶
Expected indentation of 1 tab but found 2 spaces.


⚠️ [eslint] <indent> reported by reviewdog 🐶
Expected indentation of 2 tabs but found 4 spaces.


⚠️ [eslint] <indent> reported by reviewdog 🐶
Expected indentation of 1 tab but found 2 spaces.


⚠️ [eslint] <indent> reported by reviewdog 🐶
Expected indentation of 1 tab but found 2 spaces.


⚠️ [eslint] <indent> reported by reviewdog 🐶
Expected indentation of 2 tabs but found 4 spaces.


⚠️ [eslint] <indent> reported by reviewdog 🐶
Expected indentation of 1 tab but found 2 spaces.


⚠️ [eslint] <indent> reported by reviewdog 🐶
Expected indentation of 1 tab but found 2 spaces.


⚠️ [eslint] <indent> reported by reviewdog 🐶
Expected indentation of 2 tabs but found 4 spaces.


⚠️ [eslint] <indent> reported by reviewdog 🐶
Expected indentation of 1 tab but found 2 spaces.


⚠️ [eslint] <indent> reported by reviewdog 🐶
Expected indentation of 1 tab but found 2 spaces.


⚠️ [eslint] <indent> reported by reviewdog 🐶
Expected indentation of 2 tabs but found 4 spaces.


⚠️ [eslint] <indent> reported by reviewdog 🐶
Expected indentation of 1 tab but found 2 spaces.


⚠️ [eslint] <indent> reported by reviewdog 🐶
Expected indentation of 1 tab but found 2 spaces.


⚠️ [eslint] <indent> reported by reviewdog 🐶
Expected indentation of 2 tabs but found 4 spaces.


⚠️ [eslint] <indent> reported by reviewdog 🐶
Expected indentation of 1 tab but found 2 spaces.


⚠️ [eslint] <indent> reported by reviewdog 🐶
Expected indentation of 1 tab but found 2 spaces.


⚠️ [eslint] <indent> reported by reviewdog 🐶
Expected indentation of 2 tabs but found 4 spaces.


⚠️ [eslint] <indent> reported by reviewdog 🐶
Expected indentation of 1 tab but found 2 spaces.


⚠️ [eslint] <indent> reported by reviewdog 🐶
Expected indentation of 1 tab but found 2 spaces.


⚠️ [eslint] <indent> reported by reviewdog 🐶
Expected indentation of 2 tabs but found 4 spaces.


⚠️ [eslint] <indent> reported by reviewdog 🐶
Expected indentation of 1 tab but found 2 spaces.


⚠️ [eslint] <indent> reported by reviewdog 🐶
Expected indentation of 1 tab but found 2 spaces.


⚠️ [eslint] <indent> reported by reviewdog 🐶
Expected indentation of 2 tabs but found 4 spaces.


⚠️ [eslint] <indent> reported by reviewdog 🐶
Expected indentation of 1 tab but found 2 spaces.

Copy link
Contributor

github-actions bot commented May 2, 2025

File metrics

Summary

Total size: 1.38 MB*

🎉 No changes detected in any packages

* Size is the sum of all main files for packages in the library.
* An ASCII character in UTF-8 is 8 bits or 1 byte.

Copy link
Contributor

github-actions bot commented May 2, 2025

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

@marissahuysentruyt marissahuysentruyt force-pushed the marissahuysentruyt/css-1192-add-storybook-migrated-badge branch 2 times, most recently from 6117bc3 to cfd5ecd Compare May 2, 2025 21:09
@@ -85,6 +85,11 @@ export const parameters = {
color: "#fff",
description: "Should not be used and will not receive updates.",
},
migrated: {
background: "rgb(84, 36, 219)",
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I have the rgb for indigo-1100 in light mode. We could forseeably use tokens for the background & font color, but I saw we didn't do that with the deprecated status, so I elected not to do that for migrated.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah I think I tried once and there was a type-check in place for the tool so it throws an error.

Comment on lines 8 to +10
CoachMarkMediaOptionsTemplate,
CoachmarkMenuStatesTemplate,
Template,
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

My linter keeps correcting these.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah yes, alphabetical sorting is in our linting system I think.

@@ -1,6 +1,6 @@
import { Sizes } from "@spectrum-css/preview/decorators";
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Another linting pick up, I guess?

Copy link
Collaborator

@castastrophe castastrophe left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

YAY I'm so excited for this update! I can re-review when it's ready. 💃

@@ -85,6 +85,11 @@ export const parameters = {
color: "#fff",
description: "Should not be used and will not receive updates.",
},
migrated: {
background: "rgb(84, 36, 219)",
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah I think I tried once and there was a type-check in place for the tool so it throws an error.

Comment on lines 8 to +10
CoachMarkMediaOptionsTemplate,
CoachmarkMenuStatesTemplate,
Template,
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah yes, alphabetical sorting is in our linting system I think.

@marissahuysentruyt marissahuysentruyt force-pushed the marissahuysentruyt/css-1192-add-storybook-migrated-badge branch from cfd5ecd to 5e7c3a6 Compare May 5, 2025 16:17
@marissahuysentruyt marissahuysentruyt self-assigned this May 5, 2025
@marissahuysentruyt marissahuysentruyt added size-2 S ~6-18hrs; not hard or time consuming, one or two work days to complete. S2 Spectrum 2 documentation Because documentation is important and shouldn't be broken labels May 5, 2025
@marissahuysentruyt marissahuysentruyt force-pushed the marissahuysentruyt/css-1192-add-storybook-migrated-badge branch from 5e7c3a6 to ca23f1d Compare May 5, 2025 16:42
@marissahuysentruyt marissahuysentruyt marked this pull request as ready for review May 5, 2025 16:42
Adds the migrated status to components that have been migrated fully to
S2. A migrated badge to the storybook toolbar should now appear for
those components.
@castastrophe castastrophe force-pushed the marissahuysentruyt/css-1192-add-storybook-migrated-badge branch from ca23f1d to b033f69 Compare May 5, 2025 20:08
@castastrophe castastrophe enabled auto-merge (squash) May 5, 2025 20:09
@castastrophe castastrophe merged commit bf8150c into spectrum-two May 5, 2025
17 of 24 checks passed
@castastrophe castastrophe deleted the marissahuysentruyt/css-1192-add-storybook-migrated-badge branch May 5, 2025 20:15
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
documentation Because documentation is important and shouldn't be broken ready-for-review S2 Spectrum 2 size-2 S ~6-18hrs; not hard or time consuming, one or two work days to complete.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants