From 605b016343f80f2e4915897f9d6218f5e2562ea8 Mon Sep 17 00:00:00 2001 From: jonniebigodes Date: Thu, 15 Oct 2020 00:08:19 +0100 Subject: [PATCH 1/3] initial changes for issue 10856 --- docs/workflows/stories-for-multiple-components.md | 11 ++++++++++- docs/writing-stories/args.md | 2 +- 2 files changed, 11 insertions(+), 2 deletions(-) diff --git a/docs/workflows/stories-for-multiple-components.md b/docs/workflows/stories-for-multiple-components.md index 3a4e5af7704a..b0f131d1bb2a 100644 --- a/docs/workflows/stories-for-multiple-components.md +++ b/docs/workflows/stories-for-multiple-components.md @@ -61,9 +61,18 @@ One way we improve that situation is by pulling the rendered subcomponent out in Now that `children` is an arg, we can potentially reuse it in another story. +However there are some caveats when using this approach that you should be aware of. + +The `children` `args` as any other arg needs to be JSON serializable. This means that you should: + +- avoid using empty values. +- avoid using components that include third party libraries such as `emotion`. + +As they could lead into errors with your Storybook. +
-As things stand (we hope to improve this soon) you cannot edit children in a control yet. +We're currently working on improving the overall experience for the children arg and allow you to edit children arg in a control and allow you to use other types of components in the near future. But for now you need to factor in this caveat when you're implementing your stories.
diff --git a/docs/writing-stories/args.md b/docs/writing-stories/args.md index 2c238867c22f..8949a295728e 100644 --- a/docs/writing-stories/args.md +++ b/docs/writing-stories/args.md @@ -10,7 +10,7 @@ Learn how and why to write stories in [the introduction](./introduction.md#using ## Args object -The args object can be defined at the story and component level (see below). It is an object with string keys, where values can have any type that is allowed to be passed into a component in your framework. +The args object can be defined at the story and component level (see below). It is an JSON serializable object, composed of string keys with matching valid value types that can be passed into a component for your framework. ## Story args From 1abe61644ef948f4043cd867c6f8f026a5a2e8ef Mon Sep 17 00:00:00 2001 From: jonniebigodes Date: Fri, 4 Jun 2021 16:56:17 +0100 Subject: [PATCH 2/3] tweaks the stories for multiple components --- docs/workflows/stories-for-multiple-components.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/workflows/stories-for-multiple-components.md b/docs/workflows/stories-for-multiple-components.md index b0f131d1bb2a..c99fc64d738c 100644 --- a/docs/workflows/stories-for-multiple-components.md +++ b/docs/workflows/stories-for-multiple-components.md @@ -61,12 +61,12 @@ One way we improve that situation is by pulling the rendered subcomponent out in Now that `children` is an arg, we can potentially reuse it in another story. -However there are some caveats when using this approach that you should be aware of. +However, there are some caveats when using this approach that you should be aware of. -The `children` `args` as any other arg needs to be JSON serializable. This means that you should: +The `children` `args` as any other arg needs to be JSON serializable. It means that you should: -- avoid using empty values. -- avoid using components that include third party libraries such as `emotion`. +- Avoid using empty values +- Use caution with components that include third party libraries As they could lead into errors with your Storybook. From 5efc85b2dc4ad57d2d2be5f599b5ff4183ca7eaf Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Sat, 5 Jun 2021 11:06:48 +0800 Subject: [PATCH 3/3] Update docs/writing-stories/args.md --- docs/writing-stories/args.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/writing-stories/args.md b/docs/writing-stories/args.md index 8949a295728e..6e8b19bd3c69 100644 --- a/docs/writing-stories/args.md +++ b/docs/writing-stories/args.md @@ -10,7 +10,7 @@ Learn how and why to write stories in [the introduction](./introduction.md#using ## Args object -The args object can be defined at the story and component level (see below). It is an JSON serializable object, composed of string keys with matching valid value types that can be passed into a component for your framework. +The args object can be defined at the story and component level (see below). It is a JSON serializable object, composed of string keys with matching valid value types that can be passed into a component for your framework. ## Story args