Skip to content

Commit bd4fb02

Browse files
frankieyanclaude
frankieyan
and
claude
committed
fix(docs): render correct story per Canvas in Storybook 10
Co-Authored-By: Claude <noreply@anthropic.com>
1 parent 499e7c0 commit bd4fb02

15 files changed

Lines changed: 87 additions & 231 deletions

File tree

‎src/badge/badge.mdx‎

Lines changed: 5 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Meta, Story, Canvas, Controls, Description } from '@storybook/addon-docs/blocks'
1+
import { Meta, Canvas, Controls, Description } from '@storybook/addon-docs/blocks'
22
import * as BadgeStories from './badge.stories'
33

44
import { Box } from '../box'
@@ -19,21 +19,15 @@ A badge used to bring attention to a particular UI element or functionality.
1919

2020
The use of variants does not provide extra semantic meaning and is strictly visual. Ensure your content provides the necessary context for users by using the `aria-label` prop if needed.
2121

22-
<Canvas>
23-
<Story of={BadgeStories.Playground} />
24-
</Canvas>
22+
<Canvas of={BadgeStories.Playground} />
2523

2624
## Examples
2725

28-
<Canvas>
29-
<Story of={BadgeStories.MainDemo} />
30-
</Canvas>
26+
<Canvas of={BadgeStories.MainDemo} />
3127

3228
## Inside other elements
3329

34-
<Canvas>
35-
<Story of={BadgeStories.InsideOtherElements} />
36-
</Canvas>
30+
<Canvas of={BadgeStories.InsideOtherElements} />
3731

3832
## Props
3933

@@ -70,6 +64,4 @@ Even though Reactist does not yet owns the concept of dark mode, and leaves it f
7064
up, here's a demo on how easily you can prepare badges for dark mode by setting CSS custom
7165
properties.
7266

73-
<Canvas>
74-
<Story of={BadgeStories.DarkMode} />
75-
</Canvas>
67+
<Canvas of={BadgeStories.DarkMode} />

‎src/banner/banner.mdx‎

Lines changed: 8 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Meta, Story, Canvas, Controls, Description } from '@storybook/addon-docs/blocks'
1+
import { Meta, Canvas, Controls, Description } from '@storybook/addon-docs/blocks'
22
import { Box } from '../box'
33
import { Text } from '../text'
44
import { Stack } from '../stack'
@@ -15,55 +15,43 @@ import * as BannerStories from './banner.stories'
1515

1616
A simple banner component meant to be used to _inform_ the user of promotional content, disclaimers, warnings, as well as success and error states.
1717

18-
<Canvas>
19-
<Story of={BannerStories.Playground} />
20-
</Canvas>
18+
<Canvas of={BannerStories.Playground} />
2119

2220
## Examples
2321

2422
### Icons
2523

2624
Banners can feature different icons or no icon at all. When the type is neutral, a custom icon can be provided; otherwise, preset icons corresponding to the respective type will be used.
2725

28-
<Canvas>
29-
<Story of={BannerStories.IconVariants} />
30-
</Canvas>
26+
<Canvas of={BannerStories.IconVariants} />
3127

3228
### Actions
3329

3430
Banners can have an optional dismiss action, or a primary or tertiary CTA, but never both. Additionally, banners can have an optional inline links near the description.
3531

3632
These actions can be combined, such as a primary CTA with a dismiss option, or a primary CTA with a dismiss option and an inline link.
3733

38-
<Canvas>
39-
<Story of={BannerStories.Actions} />
40-
</Canvas>
34+
<Canvas of={BannerStories.Actions} />
4135

4236
### Copy
4337

4438
Banners have two content options: a regular text that can span over multiple lines, or a bold header and a description with a secondary text color.
4539

46-
<Canvas>
47-
<Story of={BannerStories.Copy} />
48-
</Canvas>
40+
<Canvas of={BannerStories.Copy} />
4941

5042
### Image
5143

5244
Banners can include images placed at the top, separated from the copy by a divider. The banner adapts to the image, ensuring it fills the full width and height of the banner.
5345

5446
Image banners do not feature icons but can include body text or a combination of a header and description. They also support optional inline links and a dismiss action.
5547

56-
<Canvas>
57-
<Story of={BannerStories.Image} />
58-
</Canvas>
48+
<Canvas of={BannerStories.Image} />
5949

6050
### Content
6151

6252
Banners can include extra content.
6353

64-
<Canvas>
65-
<Story of={BannerStories.Content} />
66-
</Canvas>
54+
<Canvas of={BannerStories.Content} />
6755

6856
## Props
6957

@@ -95,6 +83,4 @@ Even though Reactist does not yet owns the concept of dark mode, and leaves it f
9583
up, here's a demo on how easily you can prepare banners for dark mode by setting CSS custom
9684
properties.
9785

98-
<Canvas>
99-
<Story of={BannerStories.DarkMode} />
100-
</Canvas>
86+
<Canvas of={BannerStories.DarkMode} />

‎src/button/button.mdx‎

Lines changed: 8 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { useEffect, useState } from 'react'
2-
import { Meta, Story, Canvas, Controls, Description } from '@storybook/addon-docs/blocks'
2+
import { Meta, Canvas, Controls, Description } from '@storybook/addon-docs/blocks'
33
import { Box } from '../box'
44
import { Inline } from '../inline'
55
import { Stack } from '../stack'
@@ -18,9 +18,7 @@ import * as ButtonStories from './button.stories'
1818

1919
## Main demo
2020

21-
<Canvas>
22-
<Story of={ButtonStories.MainDemo} />
23-
</Canvas>
21+
<Canvas of={ButtonStories.MainDemo} />
2422

2523
## With label and icon
2624

@@ -30,18 +28,14 @@ this purpose.
3028
Nothing prevents you from passing both a `startIcon` and an `endIcon` at the same time. However,
3129
this is discouraged, and not guaranteed to be supported in the future.
3230

33-
<Canvas>
34-
<Story of={ButtonStories.WithLabelAndIcon} />
35-
</Canvas>
31+
<Canvas of={ButtonStories.WithLabelAndIcon} />
3632

3733
## With different size
3834

3935
Buttons have a default `normal` size, but they can also be larger or smaller. Use the `size` prop
4036
for this purpose.
4137

42-
<Canvas>
43-
<Story of={ButtonStories.WithDifferentSize} />
44-
</Canvas>
38+
<Canvas of={ButtonStories.WithDifferentSize} />
4539

4640
## Customized colors
4741

@@ -66,32 +60,24 @@ styles for buttons.
6660

6761
And here's how that look like:
6862

69-
<Canvas>
70-
<Story of={ButtonStories.CustomizedColors} />
71-
</Canvas>
63+
<Canvas of={ButtonStories.CustomizedColors} />
7264

7365
## Full-width
7466

7567
Buttons can be set to take the full width of their container by using the `width` prop.
7668

77-
<Canvas>
78-
<Story of={ButtonStories.FullWidth} />
79-
</Canvas>
69+
<Canvas of={ButtonStories.FullWidth} />
8070

8171
## Playground
8272

83-
<Canvas>
84-
<Story of={ButtonStories.Playground} />
85-
</Canvas>
73+
<Canvas of={ButtonStories.Playground} />
8674

8775
## Dark mode
8876

8977
Even though Reactist does not yet owns the concept of dark mode, and leaves it for apps to set it
9078
up, here's a demo on how easily you can set it up by manipulating color variables only.
9179

92-
<Canvas>
93-
<Story of={ButtonStories.DarkMode} />
94-
</Canvas>
80+
<Canvas of={ButtonStories.DarkMode} />
9581

9682
## Colors
9783

‎src/button/icon-button.mdx‎

Lines changed: 6 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { useEffect, useState } from 'react'
2-
import { Meta, Story, Canvas, Controls, Description } from '@storybook/addon-docs/blocks'
2+
import { Meta, Canvas, Controls, Description } from '@storybook/addon-docs/blocks'
33
import { Box } from '../box'
44
import { Inline } from '../inline'
55
import { Stack } from '../stack'
@@ -18,18 +18,14 @@ import * as IconButtonStories from './icon-button.stories'
1818

1919
## Main demo
2020

21-
<Canvas>
22-
<Story of={IconButtonStories.MainDemo} />
23-
</Canvas>
21+
<Canvas of={IconButtonStories.MainDemo} />
2422

2523
### With different size
2624

2725
Buttons have a default `normal` size, but they can also be larger or smaller. Use the `size` prop
2826
for this purpose.
2927

30-
<Canvas>
31-
<Story of={IconButtonStories.WithDifferentSize} />
32-
</Canvas>
28+
<Canvas of={IconButtonStories.WithDifferentSize} />
3329

3430
### Customized colors
3531

@@ -54,24 +50,18 @@ styles for buttons.
5450

5551
And here's how that look like:
5652

57-
<Canvas>
58-
<Story of={IconButtonStories.CustomizedColors} />
59-
</Canvas>
53+
<Canvas of={IconButtonStories.CustomizedColors} />
6054

6155
### Playground
6256

63-
<Canvas>
64-
<Story of={IconButtonStories.Playground} />
65-
</Canvas>
57+
<Canvas of={IconButtonStories.Playground} />
6658

6759
### Dark mode
6860

6961
Even though Reactist does not yet owns the concept of dark mode, and leaves it for apps to set it
7062
up, here's a demo on how easily you can set it up by manipulating color variables only.
7163

72-
<Canvas>
73-
<Story of={IconButtonStories.DarkMode} />
74-
</Canvas>
64+
<Canvas of={IconButtonStories.DarkMode} />
7565

7666
## Style customization
7767

‎src/checkbox-field/checkbox-field.mdx‎

Lines changed: 7 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { useEffect, useState } from 'react'
2-
import { Meta, Story, Canvas, Controls, Description } from '@storybook/addon-docs/blocks'
2+
import { Meta, Canvas, Controls, Description } from '@storybook/addon-docs/blocks'
33
import * as CheckboxFieldStories from './checkbox-field.stories'
44

55
import { CheckboxField } from '.'
@@ -12,9 +12,7 @@ import { Text } from '../text'
1212

1313
A checkbox field with a built-in label element.
1414

15-
<Canvas>
16-
<Story of={CheckboxFieldStories.BasicExample} />
17-
</Canvas>
15+
<Canvas of={CheckboxFieldStories.BasicExample} />
1816

1917
---
2018

@@ -30,25 +28,19 @@ A checkbox field with an icon and a string. The icon is rendered to the left of
3028

3129
#### Image as Icon
3230

33-
<Canvas>
34-
<Story of={CheckboxFieldStories.ImageAsIcon} />
35-
</Canvas>
31+
<Canvas of={CheckboxFieldStories.ImageAsIcon} />
3632

3733
#### React element as Icon
3834

3935
In this example we are passing an SVG image as icon.
4036

41-
<Canvas>
42-
<Story of={CheckboxFieldStories.ReactElementAsIcon} />
43-
</Canvas>
37+
<Canvas of={CheckboxFieldStories.ReactElementAsIcon} />
4438

4539
### ReactNode as Label
4640

4741
A checkbox field with a `ReactNode` as label.
4842

49-
<Canvas>
50-
<Story of={CheckboxFieldStories.ReactNodeAsLabel} />
51-
</Canvas>
43+
<Canvas of={CheckboxFieldStories.ReactNodeAsLabel} />
5244

5345
<CheckboxField
5446
label={
@@ -60,12 +52,8 @@ A checkbox field with a `ReactNode` as label.
6052

6153
### Indeterminate Example
6254

63-
<Canvas>
64-
<Story of={CheckboxFieldStories.IndeterminateExample} />
65-
</Canvas>
55+
<Canvas of={CheckboxFieldStories.IndeterminateExample} />
6656

6757
## Accessibility
6858

69-
<Canvas>
70-
<Story of={CheckboxFieldStories.AccessibilityExamples} />
71-
</Canvas>
59+
<Canvas of={CheckboxFieldStories.AccessibilityExamples} />

‎src/loading/loading.mdx‎

Lines changed: 5 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Meta, Story, Canvas, Controls, Description } from '@storybook/addon-docs/blocks'
1+
import { Meta, Canvas, Controls, Description } from '@storybook/addon-docs/blocks'
22
import { Box } from '../box'
33
import { Text } from '../text'
44
import { Stack } from '../stack'
@@ -11,9 +11,7 @@ import * as LoadingStories from './loading.stories'
1111

1212
A loading indicator that comes in three sizes.
1313

14-
<Canvas>
15-
<Story of={LoadingStories.AllSizes} />
16-
</Canvas>
14+
<Canvas of={LoadingStories.AllSizes} />
1715

1816
---
1917

@@ -28,20 +26,14 @@ A loading indicator that comes in three sizes.
2826
The loading indicator adopts the current brand background color defined in the `--reactist-spinner-tint`
2927
CSS variable.
3028

31-
<Canvas withToolbar>
32-
<Story of={LoadingStories.CustomizeColor} />
33-
</Canvas>
29+
<Canvas withToolbar of={LoadingStories.CustomizeColor} />
3430

3531
## Accessibility
3632

37-
<Canvas>
38-
<Story of={LoadingStories.AccessibilityAttributes} />
39-
</Canvas>
33+
<Canvas of={LoadingStories.AccessibilityAttributes} />
4034

4135
#### Usage Considerations
4236

4337
If the `Loading` component is describing the loading progress of a particular region of a page, you should use the `aria-describedby` attribute to point to the status, and set the `aria-busy` attribute to `true` on the region until it is finished loading.
4438

45-
<Canvas>
46-
<Story of={LoadingStories.AccessibilityConsiderations} />
47-
</Canvas>
39+
<Canvas of={LoadingStories.AccessibilityConsiderations} />

‎src/notice/notice.mdx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Meta, Story, Canvas, Controls, Description } from '@storybook/addon-docs/blocks'
1+
import { Meta, Canvas, Controls, Description } from '@storybook/addon-docs/blocks'
22
import { Text } from '../text'
33
import { Stack } from '../stack'
44
import { Notice } from './notice'
@@ -10,9 +10,7 @@ import * as NoticeStories from './notice.stories'
1010

1111
A simple Notice component.
1212

13-
<Canvas>
14-
<Story of={NoticeStories.Playground} />
15-
</Canvas>
13+
<Canvas of={NoticeStories.Playground} />
1614

1715
---
1816

‎src/password-field/password-field.mdx‎

Lines changed: 4 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Meta, Story, Canvas, Controls, Description } from '@storybook/addon-docs/blocks'
1+
import { Meta, Canvas, Controls, Description } from '@storybook/addon-docs/blocks'
22
import * as PasswordFieldStories from './password-field.stories'
33

44
import { Stack } from '../stack'
@@ -13,9 +13,7 @@ import { selectWithNone } from '../utils/storybook-helper'
1313

1414
A component used to accept password input from the user.
1515

16-
<Canvas>
17-
<Story of={PasswordFieldStories.InteractiveProps} />
18-
</Canvas>
16+
<Canvas of={PasswordFieldStories.InteractiveProps} />
1917

2018
<Controls of={PasswordFieldStories.InteractiveProps} />
2119

@@ -30,10 +28,6 @@ Note that these variables are shared with other components such as `Textfield`,
3028
--reactist-inputs-alert
3129
```
3230

33-
<Canvas withToolbar>
34-
<Story of={PasswordFieldStories.MessageTone} />
35-
</Canvas>
31+
<Canvas withToolbar of={PasswordFieldStories.MessageTone} />
3632

37-
<Canvas withToolbar>
38-
<Story of={PasswordFieldStories.WithoutLabel} />
39-
</Canvas>
33+
<Canvas withToolbar of={PasswordFieldStories.WithoutLabel} />

0 commit comments

Comments
 (0)