UI: Add collapse roots to sidebar navigation

[tooppaaa]

Issue: Roots should be collapsible

What I did

Add capacity to collapse roots (default and runtime)

How to test

• Storybook
  

[tooppaaa]

@ghengeveld @domyen Could you please review this one ? :)

[domyen]

Thanks this is awesome!

QA below:

• When the root is collapsed, I expect the "expand all" button to open the root as well
  
• Roots should be selectable via the keyboard (try it on this story)
• The vertical spacing should be the same https://www.chromatic.com/test?appId=5a375b97f4b14f0020b0cda3&id=6008a2eabdb9db00213b8a8d
• We use the roots in a few different places so I suspect you'll have to add a prop to achieve this without breaking other stuff. For example, the search results use the roots below.
  

I can jump in to help with the CSS alignment when this is resolved.

[tooppaaa]

@domyen @ghengeveld, updated !

[tooppaaa]

@domyen @ghengeveld, Any news ? I can't remember where I left this.

[domyen]

Haven't had a chance to look at it yet! It's on my todo list 🙏

[ghengeveld]

@tooppaaa I'm going to get this over the line for you ASAP.

[ghengeveld]

I did a bunch of work on this:

• I fixed and cleaned up the styling so the root labels appear exactly as they did before.
• I made the triangle icon appear only on hover for expanded roots to keep a clean aesthetic, and aligned it correctly.
• The expand/collapse all icon now appears only when the root node is expanded, so that you have a minimalistic look when it's collapsed and because its behavior is a little weird on collapsed roots. That also means we don't need special handling on this button when the root is collapsed or expanded.
• I renamed some options/properties for conciseness. Specifically the global config option is now collapsedRoots instead of defaultRootsCollapsed.
• Roots can no longer be highlighted with the keyboard (up/down), because that would be inconsistent with the expand/collapse all button which also cannot be highlighted like that. Instead they can be focused using the Tab key and toggled using Space or Enter.

Screenshot.2021-02-25.at.17.06.31.mov

[domyen]

Thanks for getting this over the line @ghengeveld!

I made the triangle icon appear only on hover for expanded roots to keep a clean aesthetic, and aligned it correctly.

Can we show the triangle all the time? That way it is more obvious and thus easier to use.

[shilman]

awesome @tooppaaa @ghengeveld 💯