studio/cunningham
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

📝(react) upgrade stories for Storybook 8

Browse Source 
The old way of using Canvas is deprecated, we need to migrate all the
stories to the new standard.
This commit is contained in:
Nathan Vasse
2024-03-14 17:17:30 +01:00
committed by NathanVss
parent 1f80674717
commit c63aff4861
13 changed files with 175 additions and 490 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
packages/react/src/components/Button/index.mdx
View File

@@ -23,19 +23,13 @@ You can use icons within the button by passing the icon name as a prop.
> Use the attribute `iconPosition` to position the icon on the left or right side of the button. The default is `left`.
<Canvas sourceState="shown">
<Story id="components-button--icon-left"/>
</Canvas>
<Canvas sourceState="shown" of={Stories.IconLeft}/>
<Canvas sourceState="shown">
<Story id="components-button--icon-right"/>
</Canvas>
<Canvas sourceState="shown" of={Stories.IconRight}/>
You can also use button with only an icon.
<Canvas sourceState="shown">
<Story id="components-button--icon-only"/>
</Canvas>
<Canvas sourceState="shown" of={Stories.IconOnly}/>
## Disabled
@@ -43,34 +37,22 @@ The button can be disabled. The disabled button will render the same no matter w
> Keep in the mind that a disabled button will never call `onClick` if it is provided.
<Canvas sourceState="shown">
<Story id="components-button--disabled"/>
</Canvas>
<Canvas sourceState="shown" of={Stories.Disabled}/>
## Full width
The button can be set to full width. You can use the `fullWidth` prop to do so.
<Canvas sourceState="shown">
<Story id="components-button--full-width"/>
</Canvas>
<Canvas sourceState="shown">
<Story id="components-button--full-width-with-icon"/>
</Canvas>
<Canvas sourceState="shown" of={Stories.FullWidth}/>
<Canvas sourceState="shown" of={Stories.FullWidthWithIcon}/>
## Size
You can adjust the size of the button by using the `size` prop. Default value is `medium`.
<Canvas sourceState="shown">
<Story id="components-button--primary"/>
</Canvas>
<Canvas sourceState="shown">
<Story id="components-button--small"/>
</Canvas>
<Canvas sourceState="shown">
<Story id="components-button--nano"/>
</Canvas>
<Canvas sourceState="shown" of={Stories.Primary}/>
<Canvas sourceState="shown" of={Stories.Small}/>
<Canvas sourceState="shown" of={Stories.Nano}/>
## Props
@@ -78,8 +60,6 @@ You can use all the props of the native html `<button>` element props plus the f
<ArgTypes of={Button} />
## Design tokens
Here a the custom design tokens defined by the button.