Toolbar UX for different modes (fullscreen, singleStory)

[domyen]

This is a master list of Toolbar UX bugfixes and enhancements. It's a combination of tiny, interrelated issues that make sense to develop and QA together.

Use tooltip instead of title attribute for icon helper text

Use the TooltipNote in place of title attribute so that the title appears faster when hovering over icons. This wasn't a big problem when Storybook had fewer icons. But now that addons can add icons and we have a lot of icons ourselves it makes sense to use our own tooltips for this.

Change behavior of link icon

The link icon should copy the URL to clipboard (we have a Clipboard component in the design system)

iirc, this used to add extra query params to allow you to link to the specific Storybook state that you were currently viewing. That functionality has been built into Storybook thanks to @ghengeveld. Instead it should be used to copy the permalink to the specific component story in Storybook (wherever its hosted). This should work for embedded Storybooks as well.

Nice to have: When clicking on the Link icon show a tooltip with options to 1. copy url and 2. get an embed url.

Remove fullscreen mode from UX (keep singleStory)

Currently, fullscreen mode adds an extra layer of complexity that we keep getting bug reports for whenever we make changes to the UI. Fullscreen mode is just a shortcut for hiding sidebar && hiding addons. It saves you one click when you'd have to do two. The idea behind it is to help developers focus on building the UI without the extra Storybook chrome.

But the use case for fullscreen mode and "open canvas in new tab" mode is similar when in development. In many ways, opening the canvas iframe is superior because it eliminates the Storybook DOM entirely.

The other use case for a fullscreen-like mode is when you embed a story via singleStory=true query param. We offer this UX for Storybooks that are embedded. singleStory hides the sidebar permanently and allows the addon panel to be toggle-able. We should preserve this behavior as is.

Add button to toggle addon panel when it's hidden

It's hard to discover how to view the addon panel once it's hidden. Add a button when the addon panel is hidden that reveals it again.

• Display this icon in the toolbar and swap which one is shown depending on orientation.
  • 
  • 

Change icon that toggles the sidebar

Thanks to @apapadopoulou we now have an icon to reveal the sidebar when it is closed. Update this icon to the new panel show and hide icons.

• Old
• New

Related: #15553, #13799 (comment)

[apapadopoulou]

Hello, is anyone working on this?

[domyen]

Not yet! Stoked if you take it on @apapadopoulou

[apapadopoulou]

Hello! So far I have implemented the last two fixes and I am working with the other three, in order to make a final PR that contains all of the modifications related to this issue. As for the fullscreen fix, should we just remove the fullscreen button from the toolbar or modify the existing functionality?

[domyen]

Thanks for the update @apapadopoulou!

re:fullscreen functionality: I think we should remove the button and the existing functionality so we don't end up with tech debt.

cc @shilman are we using Storybook's fullscreen behavior in ways that are non-obvious to the end user? As far as I know it's offered only as a UX convenience. We want to remove it; the rationale about why is in the comment above.

[shilman]

We’re cleaning house! Storybook has changed a lot since this issue was created and we don’t know if it’s still valid. Please open a new issue referencing this one if:

• this is still a problem in SB 7.x
• you can provide a consistent reproduction in 7.x (at https://storybook.new/ or per repro docs).