-
-
Notifications
You must be signed in to change notification settings - Fork 9.4k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Addon-docs: support interactions with existing addons #6700
Comments
Automention: Hey @elevatebart @JeroenReumkens, you've been tagged! Can you give a hand here? |
Just set up Docs today. Wonderful work that you have done there! I would love if the old "Canvas" Tab would disappear and the new "Docs" Tab would be the one and only. Then the Tabbar could be removed and would declutter the UI. However, then it would need to be possible to integrate all the other addons (Knobs etc.) in the "Docs" Tab. Since it wouldn't be possible anymore to open a single story via the left hand-side navigation, browsing between stories of one component should scroll you up and down in the "Docs" Tab to the related story. Hope my input helps here. Thanks again for all your hard work! |
Thanks @rwieruch! 🙏 You can get part of the behavior you're looking for by running Supporting all the addons is a longer-term project though. So until we figure that out, it's an either/or situation. 😺 |
Agreed. From what I've seen, there are isn't good agreement on how to structural an addon at first place, and potentially multi-framework support will makes the situation more challenging... |
I wonder how people handle knobs + docs addons. Specifically I'm wondering what folks do about the fact that all the "knobbed" component properties show up in the "show code" part of addon-docs. Presumably, doc-readers aren't interested in the knob functions ( |
@techieshark There's a wonderful proof of concept from @JeroenReumkens that adds knobs to the prop table in docs mode. I'm not sure how it would relate to Storybook's existing knobs setup. :( |
@shilman that would be amazing - that's pretty much how I use knobs right now (one story for all the knobs, then specific stories to doc particular use cases). @JeroenReumkens I'd be keen to check that out. |
This would be really helpful for using addons like https://github.com/ticketmaster/storybook-styled-components for swapping library S-C/Emotion themes (not global Storybook theme). |
Canvas and Docs both deserve their space and both have their own use cases. I wouldn't generally try to mangle them together. Docs: Before Docs, I used the first Story to give an overview, explain a little bit about the component. The following stories give examples and show specific situations. The last story has interactions (knobs) to tweak the component in various ways. Docs now combines these views in a very nice and clean way (but without any addons). Canvas: There are plenty of addons that work in canvas mode on a deeper, sometimes technical, level. I wouldn't want them to appear in Docs mode. 🤔 Just an idea ...I still find it a little confusing, to switch between Docs/Canvas in the tab bar. It is not very obvious to new readers. I had to explain it to a good number of people. On top, selecting a story in the navigation does not always have an effect (story already scrolled into view, etc.) Maybe the navigation could work this way:
This would enable:
I'm really missing Contexts in Docs mode. At least with React, it should be possible to set a context and have it applied to each story panel (Themes, i18n, ...) 🤷♂️ I'm not sure if any of this makes sense. These are just my experiences and thoughts. |
@fabiradi great feedback. still chewing on this -- i think it's going to take some time to resolve |
Knobs and Actions could be added on a per story basis, so on the docs page you have a "Controls" and "Actions" button the bottom left (similar to the code button on the bottom right). Triggering this buttons unfolds a small section where the user can use Knobs and Actions as they would in the past (similar again to how the code snippet folds out) |
Nice @sanchez 😂 |
Looking for the same question |
I was thinking exactly the same. There are two alternatives imho.
|
I have yet to see a solution for this. It honestly makes copy code USELESS. Can someone please answer this question? |
@bolora You can explicitly set the code that goes in the show code panel by using I'm not sure what the code would look like for the CSF or storiesOf formats however this is what it would look like for the newer MDX stories format: <Preview mdxSource={`
<div class="form-group">
<label for="input-1" class="sr-only">...</label>
<input id="input-1" type="text" class="form-control" placeholder="...">
</div>
`}>
<Story name="Text Input" height="100px">
{`
<div class="form-group">
<label for="input-1" class="sr-only">Label text</label>
<input id="input-1" type="text" class="form-control" placeholder="placeholder text">
</div>
`}
</Story>
</Preview> |
Sincerely hope this is still being worked on - the --docs option is kinda useless without support for other addons! I think for the knobs/actions case, what @sanchez suggested is perfect, just make them per-story! Also the same can be said for viewports, just let me declare a default viewport using the normal parameters prop and have the inline story render in that viewport. This would make --docs my default option! For now i have to add "click the canvas tab above" for all my mobile stories. |
@jack-bliss if it's useless to you, don't use it |
@fabiradi finally getting back to this issue. addon-contexts is being replaced by addon-toolbars, which is docs-compatible. please take a look and let me know what you think: https://github.com/storybookjs/storybook/tree/next/addons/toolbars |
I can see that this is being worked on, which is great :) Just wanted to confirm if it is possible yet to show a story inside a particular viewport when in the Docs view ? for example, I have set the default viewports for some of my stories, but that disappears when i switch to the docs page. In this particular case, i don't really need the viewport button in the docs page, i just need a way/workaround to show the story in a particular viewport when rendered inside the docs page |
@gaurav5430 not currently. we've been making progress though and I think we can probably get it into 6.1 |
@shilman that would be great :) Meanwhile, do you think there is a convenient workaround to achieve this? just thinking out loud, i can possibly render the story inside an iframe and set the size of the iframe to whatever viewport i want, so that it displays as expected in the docs page (but then i would have to forego using the actual viewports addon and default viewport on the canvas view as well) |
This is awesome, thanks for sharing @josephfusco, I could not find it in the documentation. |
I also have the same use case. Right now <h2>Tablet</h2>
<iframe width="700" height="500" src="/iframe.html?id=story-id&viewMode=story"></iframe>
<h2>Mobile</h2>
<iframe width="400" height="500" src="/iframe.html?id=story-id&viewMode=story"></iframe> As you can see you can specify any width and height in iframe. To get the iframe url, go to the story panel and click share button (right after fullscreen button) on top right which will open it in a new tab. Copy URL from there and make it relative. |
If you wrap it into
|
Is this topic still open for discussion? I maintain an addon that does not depend on the currently visible stori(es) at all, but only interacts with global state (to switch themes). Other addons like the official "Actions" addon might be easily extendable to support a list of stories rather than a single story. It would be cool to add support for such usecases eventually. |
From @trevoreyre :
It's tricky because all the addons assume that there is only one story currently visible, and in docs there are potentially many. We have a proposal for "knobs v2" to address this for knobs, but nothing planned to address it in general. How we deal with it generally is open for discussion!
The text was updated successfully, but these errors were encountered: