Tab UI Improvements

[valentinpalkovic]

Resolves #20829
Resolves #19989

See: https://www.notion.so/chromatic-ui/Storybook-7-0-UI-update-421d43aa8f9248b29c9dbfa3fdb25dd3#4e86aa0af1af46bab881bae4828a8fd7

What I did

I have improved the Addons Tabs by removing the horizontal scrolling. I have introduced an "Addons" Tooltip instead.

Constraints:

I also wanted to take care of smooth tab navigation for accessibility reasons. And although react-popper-tooltip supports focus triggers, it does not trigger the tooltip on tab focus. Additionally, it is not that easy to continue tabbing into the tooltip. To make that work, we would have to change the tooltip's DOM order a bit and add some tabIndex properties to the items. I tried a lot but failed to integrate tabbing across the tooltip boundary properly. Will invest some time at a later point to properly handle tabbing.

Tabbing into the Tooltip is also blocked by: mohsinulhaq/react-popper-tooltip#147

How to test

Checklist

• Make sure your changes are tested (stories and/or unit, integration, or end-to-end tests)
• Make sure to add/update documentation regarding your changes
• If you are deprecating/removing a feature, make sure to update
  MIGRATION.MD

Maintainers

• If this PR should be tested against many or all sandboxes,
  make sure to add the ci:merged or ci:daily GH label to it.
• Make sure this PR contains one of the labels below.

["cleanup", "BREAKING CHANGE", "feature request", "bug", "documentation", "maintenance", "dependencies", "other"]

[socket-security]

Socket Security Pull Request Report

👍 No new dependency issues detected in pull request

Pull request report summary

Issue	Status
Install scripts	✅ 0 issues
Native code	✅ 0 issues
Bin script confusion	✅ 0 issues
Bin script shell injection	✅ 0 issues
Shell access	✅ 0 issues
Uses eval	✅ 0 issues
Unresolved require	✅ 0 issues
Invalid package.json	✅ 0 issues
HTTP dependency	✅ 0 issues
Git dependency	✅ 0 issues
GitHub dependency	✅ 0 issues
New author	✅ 0 issues
Potential typo squat	✅ 0 issues
Known Malware	✅ 0 issues
Telemetry	✅ 0 issues
Protestware/Troll package	✅ 0 issues
AI detected malware	✅ 0 issues

Bot Commands

To ignore an alert, reply with a comment starting with @SocketSecurity ignore followed by a space separated list of package-name@version specifiers. e.g. @SocketSecurity ignore foo@1.0.0 bar@2.4.2

Powered by socket.dev

[yannbf]

This is awesome 👌

I got a few questions, probably design related, so @MichaelArestad your input would be lovely:

1. Is it intended that the buttons to change orientation of the panel or close it are gone in that mode?
   before:

after:

2. just an observation: I think it's a little confusing at first to know which addon I have selected because the title is now "Addons" and I have to hover to see what is selected, but I think it's just something to get used to. Probably biggest source of confusion is the fact that the empty state of addon actions is just a white screen, so you don't know what is actually selected:

[yannbf]

I detected an issue regarding keyboard navigation, best described in a video format:
https://user-images.githubusercontent.com/1671563/215084077-518603f0-f0a6-4ef4-b4a3-8a727a5108be.mov

I hope this resource is helpful!

[valentinpalkovic]

This is awesome 👌

I got a few questions, probably design related, so @MichaelArestad your input would be lovely:

1. Is it intended that the buttons to change orientation of the panel or close it are gone in that mode?
   before:

after:

2. just an observation: I think it's a little confusing at first to know which addon I have selected because the title is now "Addons" and I have to hover to see what is selected, but I think it's just something to get used to. Probably biggest source of confusion is the fact that the empty state of addon actions is just a white screen, so you don't know what is actually selected:

The buttons should only be gone on mobile phones (<599px). That was also the case before. Or should they stay now always visible?

[valentinpalkovic]

I detected an issue regarding keyboard navigation, best described in a video format: https://user-images.githubusercontent.com/1671563/215084077-518603f0-f0a6-4ef4-b4a3-8a727a5108be.mov

I hope this resource is helpful!

Have you seen my PR description? I will revisit that issue later

[yannbf]

The buttons should only be gone on mobile phones (<599px). That was also the case before. Or should they stay now always visible?

My bad, I was checking an older build which had the wrong behavior! I was checking desktop with the addon panel positioned on the right.

The latest build does work, though it pushes the right buttons a little further because of a margin-left:

Have you seen my PR description? I will revisit that issue later

Alright, sounds good! Just keep in mind that apart from the issue of navigating through the tooltip, there's the other where if you tab until the orientation change button, the layout breaks

[MichaelArestad]

1. Is it intended that the buttons to change orientation of the panel or close it are gone in that mode?

@yannbf Ah! The orientation and close button should always be visible on desktop views. Eventually, when we update our mobile designs, they will also always be visible, but that is not necessary with the current design.

I think it's a little confusing at first to know which addon I have selected because the title is now "Addons"

I agree. Perhaps other options like showing a proper heading could be explored. I have an idea for this, but it might impact the designs of the content of the addon panels. We definitely need a better empty state for Actions.

[yannbf]

The changes look pretty good, I am just curious about the breaking changes in @storybook/components and the potential effects of that. I'm not the right person to talk about them unfortunately, but I'm sure others could tell whether the changes are fine or not

[yannbf]

Awesome work @valentinpalkovic !