docs(storybook): Theming support for stories

canonical / react-components

A set of components based on Vanilla Framework

https://canonical.github.io/react-components

103 stars 58 forks source link

docs(storybook): Theming support for stories #1151

Closed mcslayer closed 3 weeks ago

mcslayer commented 4 weeks ago

Done

Hide default background select
Add global theme select Light/Dark/Paper for strorybook
Add HOC decorator for all stories
Add special hack for docs background

QA

Storybook

To see rendered examples of all react-components, run:

yarn start

QA in your project

from react-components run:

yarn build
npm pack

Install the resulting tarball in your project with:

yarn add <path-to-tarball>

QA steps

Steps for QA.

Percy steps

List any expected visual change in Percy, or write something like "No visual changes expected" if none is expected.

Fixes

Fixes: # .

webteam-app commented 4 weeks ago

mcslayer is not a collaborator of the repo

bartaz commented 4 weeks ago

Demo: https://react-components-1151.demos.haus/

bartaz commented 4 weeks ago

This is awesome addition @mcslayer!

We have a requirement for all PRs to be up to date with main branch, so please rebase now that your Vanilla update is merged, thx!

bartaz commented 4 weeks ago

Is there some kind of storybook documentation or recommendation that you followed when adding the theme switcher?

mcslayer commented 4 weeks ago

There is no ready-made special documentation for this. The code is based on personal experience of using storybook in projects.

mcslayer commented 4 weeks ago

Also, instead of "Theme" we can write the name of the active theme and It looks even better. So I can add it if you approve.

bartaz commented 4 weeks ago

Also, instead of "Theme" we can write the name of the active theme and It looks even better. So I can add it if you approve.

Nice! If possible, I think it would be better for it to say both Theme: Paper Just to make sure people understand what they are changing (As "paper" itself may be not self explanatory).

(sorry, I updated you comment by mistake instead of replying 🤦 )

mcslayer commented 4 weeks ago

I made the order in the commits and made 1 commit with a force push.

Regarding the title: everything is primitive there. You can use the abstract "Theme", or take the title from the options. So I changed the titles everywhere in the list to Theme: Light, Theme: Dark,Theme: Paper

mcslayer commented 3 weeks ago

If you apply this global control, I'm preparing something else :)

ezgif-7-2bdfc4dc2e

github-actions[bot] commented 3 weeks ago

:tada: This PR is included in version 1.7.1 :tada:

The release is available on:

Your semantic-release bot :package::rocket: