documentation: Clarify description of args - Add example of args controlling more than props

[saschwarz]

Issue:

There were a number of questions in the vue discord channel inquiring how to control non-props aspects of components in stories (i.e. slots). I tried to update the args text to be more encompassing and make it clear that all dynamic changes to a template go through the single args object.

What I did

• Updated args intro
• Added section/example for adding slots via an arg

How to test

• Is this testable with Jest or Chromatic screenshots?
  No
• Does this need a new example in the kitchen sink apps?
  No
• Does this need an update to the documentation?
  It is one 😄

If your answer is yes to any of these, please make sure to include it in your PR.

[domyen]

Can we make the prose more framework agnostic? This text gets displayed to all frameworks (only the code samples change).

Also, how would this work in React?

[saschwarz]

I realize that, but I don't know enough about React to know how you'd use args other than as props. And that was the problem that I was trying to address: frameworks that have concepts like slots that don't exist in React (AFAIK).

The original text was very props-centric and lead to my (and others) questions about slots in discord.

[phated]

Couldn't React be done like this?

const Template = (args, { argTypes }) => (
     <page {...args}>
       {args.footer}
     </page>
);

 export const CustomFooter = Template.bind({});
 CustomFooter.args = {
   footer: <a href="https://storybook.js.org/">Built with Storybook</a>,
 };

A little sloppy, but I think that is the equivalent "args as a child" concept. How can we frame those both in this?

[saschwarz]

If there isn't a snippet for every framework, what do I do? Do I copy the React version to the common and all the other supported frameworks?

[shilman]

Arg values have to be telejson serializable @phated so that example won't work. Hopefully we can mitigate that limitation with #13888

[saschwarz]

Would this (simpler) example be valid for React? Do the examples have to do exactly the same thing for all frameworks?

const Template = (args, { argTypes }) => (
     <page {...args}>
       <footer>{args.footer}</footer
     </page>
);

 export const CustomFooter = Template.bind({});
 CustomFooter.args = {
   footer: 'Built with Storybook',
 };

[domyen]

The examples have to do approximately the same thing.

The code will necessarily be different but the technique should be similar. The code snippet for each framework can be as verbose as we need to accomplish the technique.

[saschwarz]

@domyen If there isn't a snippet for every framework, what do I do?

1. Do I copy the React version to the common?
2. Copy React version to all the other supported frameworks?

[domyen]

@saschwarz Add snippets for Vue and React 🙏

All the other frameworks will automatically be shown React until someone contributes the code sample. There's a call to action to do this built into the snippet component already.

[jonniebigodes]

@saschwarz i'll take a look a this tomorrow (tuesday) first thing and i'll work with you on how to properly setup the snippets accordingly. Do you mind waiting a little bit?

Stay safe

[saschwarz]

@jonniebigodes Sorry I didn't see your comment until after I pushed up my changes. The snippet changes appropriately when I change to/from Vue/React/others. Please let me know any other things I need to do.

[jonniebigodes]

@saschwarz thank you very much for the time and effort you put into this. Glad that you managed to solve the way the snippets are shown in the documentation. I left some items that require a bit of attention, more specifically to file naming and this should be good to go. Let me know once you've addressed the comments and we'll get this across

[saschwarz]

@jonniebigodes Thank you for your patience in reviewing this PR. I merged the latest next, resolved the PR issues, and tested it. It seems OK. 😄

[jonniebigodes]

@saschwarz on the contrary. I should be the one to thank you for your patience for not addressing the pull request changes when i told you, but i got pulled into other items that required my attention. During the weekend i'm going to take another look and if nothing stands out, we'll be good to go and i'll gladly merge this.

Do you mind waiting a little bit while i wrap up what i currently have on my hands?

It goes without saying, thank you for the time and effort you put into this and help clarify the documentation.

[jonniebigodes]

Sorry for not addressing this earlier i was caught up on other tasks. Looks good to me. Self merging. Once again thank you for the time and effort you put into this pull request and addressing feedback so promptly.

Stay safe