6.1 beta Search and sidebar behavior

[domyen]

RFCs for edge cases

1. Update empty state for search: show a “no results” message. Currently we show no results and no messages which makes the UI appear broken.
   

2. No recently opened: When there are no recently opened items continue showing the treeview. Currently we show nothing so it looks like the treeview completely disappeared. You can reproduce this state by clearing recently opened.

3. When you click on the expand all button, keyboard navigation no longer behaves as I'd expect. Every time I press enter the focus returns to the expand all button no matter what I focus on using my keyboard. Video here

4. Keyboard navigation skips items when a folder is expanded and collapsed. Video here. When expanding and collapsing using the right and left arrow keys I expect the focus to start at the very beginning of the list not in the middle.

5. Keyboard navigation focus doesn't transfer to the "folder" items. Video here

[ghengeveld]

1. Update empty state for search: show a “no results” message. Currently we show no results and no messages which makes the UI appear broken.

I added a "No components found" message:

2. No recently opened: When there are no recently opened items continue showing the treeview. Currently we show nothing so it looks like the treeview completely disappeared. You can reproduce this state by clearing recently opened.

Instead of showing the treeview, I made sure that the history will always show at least one item. After all, you will always have a component selected, so technically that one should always be at the top of the list.

3. When you click on the expand all button, keyboard navigation no longer behaves as I'd expect. Every time I press enter the focus returns to the expand all button no matter what I focus on using my keyboard. Video here

Fixed this by removing focus from the expand-all button when using the arrow keys to navigate the tree.

4. Keyboard navigation skips items when a folder is expanded and collapsed. Video here. When expanding and collapsing using the right and left arrow keys I expect the focus to start at the very beginning of the list not in the middle.

This was a bug and is fixed now.

5. Keyboard navigation focus doesn't transfer to the "folder" items. Video here

Fixed. Now when you click a node to expand/collapse it, it will get highlighted as well.

[shilman]

ZOMG!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.1.0-beta.4 containing PR #13027 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb upgrade --prerelease

Closing this issue. Please re-open if you think there's still more to do.