![]() ![]() It helps design systems creators stress test component inputs (props) by adjusting the argument's values. You can supply multiple values to a component prop through arguments (or args for short) and adjust them through the UI. It allows you to interact with component inputs (props) dynamically in the Storybook UI. ![]() ultimately showing up in Storybook's addon panel.įresh installs of Storybook include the Controls addon already configured out of the box. When the user clicks a button, it will trigger the `action()`, Update your src/shared/global.js file to the following: We can add them easily with the Styled Components global style tag. Our design system requires some global styles (a CSS reset) to be applied to the document to render our components correctly. ![]() ![]() Now your Storybook should look like this (notice that the font styles are a little off, for instance, see the "Avatar: Initials" story): Add global styles But we won't be needing them for our design system, so it's safe to delete the stories directory. If you want, take some time and explore them. Install and run Storybook with the following commands: # Installs StorybookĮvery time you install Storybook into an application, it will add some examples inside the stories folder.
0 Comments
Leave a Reply. |