Chore: (design systems rework) #343
Conversation
|
|
||
|  | ||
|  | ||
|
|
||
| For each component and story that changed, copy the URL from the browser address bar and paste it wherever your team manages tasks (GitHub, Asana, Jira, etc) to help teammates quickly review the relevant stories. |
There was a problem hiding this comment.
@domyen / @jonniebigodes do we think we should talk about Chromatic's UI review feature at this point, if only because otherwise people may be confused about the fact that we are describing a workflow here that is different to that, and thus we will confuse them?
Maybe at this point we should just add an aside:
Chromatic also offers a complete UI Review workflow built into the product as part of its paid offering. The technique of copying Storybook links into a GitHub PR works at a smaller scale (and with any service that hosts your Storybook, not just Chromatic), but as your use increases you may consider that services as it automates the process.
|
|
||
| First, go to [chromatic.com](https://chromatic.com) and sign up with your GitHub account. | ||
| In the <a href="https://www.learnstorybook.com/design-systems-for-developers/react/en/review/#publish-storybook">previous chapter</a> we learned how to publish Storybook using [Chromatic](https://www.chromatic.com/). We added a bold red border around each `Button` component and then requested feedback from teammates. |
There was a problem hiding this comment.
| In the <a href="https://www.learnstorybook.com/design-systems-for-developers/react/en/review/#publish-storybook">previous chapter</a> we learned how to publish Storybook using [Chromatic](https://www.chromatic.com/). We added a bold red border around each `Button` component and then requested feedback from teammates. | |
| In the <a href="review/#publish-storybook">previous chapter</a> we learned how to publish Storybook using [Chromatic](https://www.chromatic.com/). We added a bold red border around each `Button` component and then requested feedback from teammates. |
I think we should use relative links?
There was a problem hiding this comment.
@jonniebigodes mentioned they didn't work quite right in Gatsby for some reason. I can confirm that I get a routing error when I use the relative link.
There was a problem hiding this comment.
I'm pretty sure we can make some kind of link that doesn't include a domain work
There was a problem hiding this comment.
@tmeasday the reason we went with including the full url for this two situations was due to the fact that Gatsby+ Markdown does not "like" that. When you add a link in markdown relative to another page with a heading with will bubble up to the top of the page. I've tested it and it will always default to the top of the page.
We could go about this in two ways:
- Add the gatsby-remark-autolink-headers plugin to the site and we have a way use the links/navigation better.
- Manually update both
gatsby-ssrandgatsby-browserlike it's used in the plugin to include the navigation.
Me personally i'm more inclined to the first one. As at some point it could be extremely beneficial to include a TOC per chapter and proper heading linking, which will be extremely more beneficial for the translations.
A initial approach was put together here, per @domyen feedback i thought it over and it would be better to address this properly somewhere in the near future
There was a problem hiding this comment.
i've created a issue (#347) for tracking the usage of links in headings here. We can revisit it once we have a little more breathing room.
Sounds good?
| @@ -338,7 +398,7 @@ addDecorator(story => ( | |||
|
|
|||
| You’ll now be able to browse the design system components and docs while developing the example app. Showcasing the design system during feature development increases the likelihood that developers will reuse existing components instead of wasting time inventing their own. | |||
|
|
|||
| Alternatively, you can browse your design system’s Storybook online if you deployed it to a web host earlier (see chapter 4). | |||
| Alternatively, you can browse your design system’s Storybook online if you deployed it to <a href="https://www.learnstorybook.com/design-systems-for-developers/react/en/review/#publish-storybook">Chromatic </a> earlier (see chapter 4). | |||
Co-authored-by: Tom Coleman <tom@thesnail.org>
Co-authored-by: Tom Coleman <tom@thesnail.org>
This pr will address the required changes to the design systems tutorial.
As this is a work in progress, for the time being this will be in draft mode as it will be constantly being updated, once it's ready it will be moved from draft so that it can be fined tuned and merged.