refactor: upgrade storybook #93

emilyjablonski · 2024-10-29T03:12:51Z

Description

Upgrades Storybook to be able to support some of the documentation requests from SF.

This PR 1) Upgrades Storybook + documentation, and (2) introduces new shared types that are used across components instead of string unions (none of these are breaking changes, but having importable types has come up a few times as well).

Each code change unrelated to this has a comment on it. This includes two separate changes that are breaking, which is to rename the highlight variant of Button to warn, and the in-process variant of Tag to warn, to match the tokens and designs. (UPDATE: Now also includes renaming instances of accent to highlight!)

How Can This Be Tested/Reviewed?

The huge diff is mostly in the lock file.

Changes in mdx and stories files are for managing the upgrade, improving organization, and enabling code samples
Changes in Storybook configuration files are for managing the upgrade
Changes in .tsx files are for improving typing

Compare the old Storybook to the deploy preview here to see changes and ensure things are looking good! The Button and Tag stories will be the only ones w the naming adjustment to warn.

There are now

Code samples for every story
Links to Zeroheight

Checklist:

I have added QA notes to the issue with applicable URLs
I have performed a self-review of my own code
I have reviewed the changes in a desktop view
I have reviewed the changes in a mobile view
I have made corresponding changes to the documentation
My changes generate no new warnings
I have added tests that prove my fix is effective or that my feature works
I have exported any new components
My commit message(s) and PR title are polished in the conventional commit format, and any breaking changes are indicated in the message and are well-described

netlify · 2024-10-29T03:13:06Z

✅ Deploy Preview for storybook-ui-seeds ready!

Name	Link
🔨 Latest commit	`7c7add4`
🔍 Latest deploy log	https://app.netlify.com/sites/storybook-ui-seeds/deploys/67229a3601b7680008b3ca93
😎 Deploy Preview	https://deploy-preview-93--storybook-ui-seeds.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

emilyjablonski · 2024-10-29T03:14:44Z

src/actions/Button.scss

-  &[data-variant="highlight"] {
-    background-color: var(--seeds-color-highlight);
-    border-color: var(--seeds-color-highlight);
+  &[data-variant="warn"] {


Updated the naming here to warn - we don't have a highlight in the Figma tokens, and the colors are the same (confirmed with design)

emilyjablonski · 2024-10-29T03:16:19Z

src/global/tokens/colors.scss

@@ -153,7 +154,8 @@
  --seeds-bg-color-surface: var(--seeds-color-white);
  --seeds-bg-color-muted: var(--seeds-color-gray-100);
  --seeds-bg-color-disabled: var(--seeds-color-gray-450);
-  --seeds-bg-color-inverse: var(--seeds-colors-gray-800);
+  --seeds-bg-color-inverse: var(--seeds-color-gray-800);


Fixes a typo

emilyjablonski · 2024-10-29T03:48:47Z

src/global/tokens/colors.scss

@@ -1,39 +1,36 @@
 :root {


I just organized this file and moved strings around

emilyjablonski · 2024-10-29T03:49:50Z

src/text/Tag.scss

-  &[data-variant="in-process"] {
-    background-color: var(--seeds-color-highlight-light);
-    color: var(--seeds-color-highlight-darker);
+  &[data-variant="warn"] {


Updated the naming here to warn - we don't have an in-process in the Figma tokens, and the colors are the same (confirmed with design)

jaredcwhite · 2024-10-29T18:40:06Z

@emilyjablonski I've found a difference in the URLs between the old system and Storybook 8 for the documentation pages.

OLD URL: /iframe.html?viewMode=docs&id=layout-grid--grid-example&args=

NEW URL: /iframe.html?viewMode=docs&id=layout-grid--docs&globals=

This is only an issue with regards to the zeroheight docs embeds. We'd have to update all of them manually once this goes to prod. Or I wonder if there's a way to set up a redirect?

emilyjablonski · 2024-10-29T19:47:38Z

@jaredcwhite Good call out! I was anticipating a followup to manually update the embeds 🫡

jaredcwhite

Left some feedback for you. I'm glad we'll be on Storybook 8 now, looks really good!

index.ts

src/actions/Button.tsx

jaredcwhite · 2024-10-29T21:09:16Z

src/actions/__stories__/Button.docs.mdx

+<Meta of={stories} />
+
+<Title />
+<Subtitle>Button components are interactive elements that trigger an action when clicked.</Subtitle>


So…this looks really nice in the new Storybook theme, but it'll also show up in the Props embeds in zeroheight. I guess that's fine, but something to keep in mind so it's not too repetitive when viewing in zeroheight.

src/blocks/__stories__/Alert.stories.tsx

src/blocks/__stories__/Message.stories.tsx

src/forms/__stories_/CheckboxGroup.docs.mdx

src/global/tokens/colors.scss

emilyjablonski · 2024-10-30T20:43:05Z

Post-merge, I will 1) Post the breaking changes in our consumers channel and 2) Update the Zeroheight Storybook embeds!

jaredcwhite

📚

github-actions · 2024-11-04T17:53:13Z

🎉 This PR is included in version 1.18.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

refactor: upgrade storybook

0e081e4

emilyjablonski commented Oct 29, 2024

View reviewed changes

emilyjablonski added 3 commits October 28, 2024 21:18

fix: dependencies

47daf38

fix: dependencies

13ee066

fix: dependencies

4a2efe4

emilyjablonski added the wip label Oct 29, 2024

emilyjablonski added 3 commits October 28, 2024 21:41

fix: dependencies

52b4a4e

fix: dependencies

8407a25

fix: dependencies

719c0cf

emilyjablonski commented Oct 29, 2024

View reviewed changes

src/global/tokens/colors.scss

@@ -1,39 +1,36 @@

:root {

Copy link

Contributor Author

emilyjablonski Oct 29, 2024

Choose a reason for hiding this comment

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

I just organized this file and moved strings around

fix: dependencies

0730424

emilyjablonski commented Oct 29, 2024

View reviewed changes

emilyjablonski added 1 review needed and removed wip labels Oct 29, 2024

emilyjablonski marked this pull request as ready for review October 29, 2024 03:54

refactor: cleanup

1a32c16

jaredcwhite reviewed Oct 29, 2024

View reviewed changes

emilyjablonski added 2 commits October 30, 2024 14:37

fix: pr review

3611f46

fix: pr review

7c7add4

jaredcwhite approved these changes Oct 30, 2024

View reviewed changes

emilyjablonski merged commit 65c743e into main Nov 4, 2024
5 checks passed

github-actions bot added the released label Nov 4, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

refactor: upgrade storybook #93

refactor: upgrade storybook #93

emilyjablonski commented Oct 29, 2024 •

edited

Loading

netlify bot commented Oct 29, 2024 •

edited

Loading

emilyjablonski Oct 29, 2024 •

edited

Loading

emilyjablonski Oct 29, 2024 •

edited

Loading

emilyjablonski Oct 29, 2024

emilyjablonski Oct 29, 2024

jaredcwhite commented Oct 29, 2024

emilyjablonski commented Oct 29, 2024

jaredcwhite left a comment

jaredcwhite Oct 29, 2024

emilyjablonski commented Oct 30, 2024

jaredcwhite left a comment

github-actions bot commented Nov 4, 2024

refactor: upgrade storybook #93

refactor: upgrade storybook #93

Conversation

emilyjablonski commented Oct 29, 2024 • edited Loading

Description

How Can This Be Tested/Reviewed?

Checklist:

netlify bot commented Oct 29, 2024 • edited Loading

✅ Deploy Preview for storybook-ui-seeds ready!

emilyjablonski Oct 29, 2024 • edited Loading

Choose a reason for hiding this comment

emilyjablonski Oct 29, 2024 • edited Loading

Choose a reason for hiding this comment

emilyjablonski Oct 29, 2024

Choose a reason for hiding this comment

emilyjablonski Oct 29, 2024

Choose a reason for hiding this comment

jaredcwhite commented Oct 29, 2024

emilyjablonski commented Oct 29, 2024

jaredcwhite left a comment

Choose a reason for hiding this comment

jaredcwhite Oct 29, 2024

Choose a reason for hiding this comment

emilyjablonski commented Oct 30, 2024

jaredcwhite left a comment

Choose a reason for hiding this comment

github-actions bot commented Nov 4, 2024

emilyjablonski commented Oct 29, 2024 •

edited

Loading

netlify bot commented Oct 29, 2024 •

edited

Loading

emilyjablonski Oct 29, 2024 •

edited

Loading

emilyjablonski Oct 29, 2024 •

edited

Loading