Storybook: Possibility to add toolbar to all stories

[lipeavelar]

Is your feature request related to a problem? Please describe.
Based on #9593, it is not possible, by default, to use toolbar in all stories, so the solution is to customize the story page to show it in all stories, but to do this, we need to understand the framework and write a way to customize the wait to print stories for the page.

Describe the solution you'd like
I think it would be easier to only add a prop on Stories component, something like withToolbar from DocsStory, that put a toolbar on all stories.

Are you able to assist bring the feature to reality?
Yes, I can code the solution, since it is only to add a prop on Stories component, I think it is a pretty straightfoward and simple issue.

[lipeavelar]

@shilman Can I do anything to help in this issue?

[shilman]

@lipeavelar yes, i'd love to work with you on this. i think there are a couple ways to go here, both which might make the code better.

1. we can add withToolbars to the Stories doc block and the user can override the DocsPage. this is consistent with the current design and i'd be comfortable with that change.

2. we can make the docs parameters align with the props of the doc blocks. something like:

export const Basic = () => ....
Basic.story = {
  parameters: {
    docs: {
       preview: {  withToolbars: true }
    }
  }
}

this change would ideally correspond to all core doc blocks, preview, source, props, etc. so it's a sweeping change and probably out of scope for 6.0

[lipeavelar]

@shilman The first solution seems the ideal to me, since we already have a pattern title and includePrimary as props, I think that adding withToolbars and set its default value to false would respect customizing pattern we already have. Then, should we go with the first one?

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[jbadan]

@lipeavelar I've found a relatively straightforward workaround for the meantime - you can use your own custom DocsPage, injecting this where the Stories block would traditionally go:

const context = useContext(DocsContext);

    // do not display disabled stories (dev only)
 const stories = context.storyStore?.getStoriesForKind(context.kind)?.filter((s) => !s.parameters?.docs?.disable)
....
{stories.map((story) => story && <DocsStory
            key={story.id}
            {...story}
            expanded
            withToolbar />)}

reference: https://github.com/SAP/fundamental-react/blob/c8a756fbb1546d67fb82128a682746f918daf564/.storybook/custom/components/DocsPage.js

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[stale[bot]]

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!