fix(ui): rebuild tabs with radix primitives

[kyranjamie]

Try out this version of Leather — Extension build, Test report

Ref #4309

Improves tabs according to design spec.. Replaces themes for primitives. Taking approach of re-exporting same primitives attached with Panda styles.

Also update a loads of outdated packages.

[pete-watters]

I was confused by the name and placement of this at first. Maybe we can move it to ui/components/tabs ?

As per discussion here this would be a valid case of having another story under Tabs for RouteTabs

Then under the Tabs section we would have

• Tabs (generic tabs)
• RoutableTabs (routable tabs)

[kyranjamie]

Yeah wasn't sure what to do here and wonder if we should remove this entirely. This tabs component does a few things extra that the radix component doesn't:

• Accepts an activeTab prop
• Has an onClick handler
• Sets a data-testid

I'd probably err on the side of this completely, and composing the tabs directly from the styled tabs in each case.

[kyranjamie]

Will try this because as it stands reckon RouteTabs is an abstraction too far. The gist of Radix is composing the components, and describing things as JSX, not creating some abstraction like the Tab interface

[kyranjamie]

@pete-watters @fbwoolf see my second commit merged into a single commit, but see how I removed the old tabs component entirely. Hope you agree this is a big improvement. IMO this is the way we should try and use the radix primitives. The old tabs component created some wrapper around it which makes it clunky, less composable, and masks the Radix api for our own more restrictive one. Here, I've removed it and I compose the tabs the way Radix intended. This means the API of our tabs is identical to Radix.

Our tabs are now Radix tabs + Leather styles and nothing more.

[pete-watters]

This is a great improvement, thanks for re-working it. It's much cleaner and a good pattern for us to use for our other components 🙇

[pete-watters]

Nice work, LGTM just added some minor suggestions