Tab API Issues

[GiantRobots]

Code sandbox illustrating both routing techniques
https://codesandbox.io/s/zomg-tabs-u126j?file=/src/index.tsx

Reference picture for the design we're implementing.

So we were working with tabs and a requirement for our product had tabs activate routes which seems like a pretty common pattern for a lot of applications. Part of the reason for our design is that it shows the user that we have a persistent search experience across the tabs (ie. date, subuser, and eventually MSP, and comparison date will be searchable and persistent across views.) To achieve this UX we used the paste tabs and ran into some difficulties.

useTabState Implementation

Cons

When using useTabState we have to partially re-implement a routing solution. You can see the 3 useEffects to accomplish this.

1. The first use effect runs on component mount to make sure we select the correct tab when a tab has a matching path.
2. The second useEffect makes sure that when the tab changes we update the history/url
3. The third useEffect ensures that browser forward/back functionality correctly selects

The routing behavior is very custom logic and implementation was not straightforward it took me 2~ hours to implement this and get it working compared to the routing method which took around 30min and to me is a "more correct" solution when it comes to navigation (middle click works, can right click tabs etc.)

Pros

I really don't like this implementation so I'm having a hard time filling this one out. I guess the nice thing is that since it's essentially off the shelf Reakit we don't have to do too much to get some accessibility and functionality by wrapping the implementation.

Router Implementation

Most of the issues with this approach are related to resolving some compatibility issues between the tabs and the link.

Cons

1. The link adds height and makes the bottom border not line up with the tab group.
2. Any type of click selects the other tabs left, middle, right click. So you can right click or middle click a tab (which will open the link in a new tab and is awesome) but it will "select" the wrong tab making the url and the tabs out of sync.
3. Using the link as a subComponent of the tab instead of wrapping it to avoid the height issue mentioned before messes with the text styles and the "link" is only activated when you click directly on it instead of anywhere in the tab.
4. The keyboard interaction is different than the tab version. This allows you to press tab and space/enter to active a link. Depending on your point of view this could be better or worse than the tab version (vs left right once you've selected a tab group)

Screen.Recording.2021-03-03.at.2.29.27.PM.mov

Pros

This is my preferred approach it was easier to implement and get correct while using composable components instead of custom logic. Other than compatibility issues I was able to achieve desired behavior without writing a custom effects/state handling/etc. and I was able to do it quickly. History and navigation worked correctly basically automagically.

Potential Solutions

At the end of the day we really just need the presentational components to be exposed so we can extend our own tab based functionality. If we had presentational components we could trivially wrap them in routers/links and create our interface in a composable manner without custom logic.

[chrischalstrom]

+1 on this - I agree with Alex that a great solution would be to provide a presentational version of the tab components that does not try to take over state management. We found this pattern generally to work quite well for us @ SendGrid with our ui-components repo.

I see there is a useTabState exported here that could be useful for helping with this. Perhaps it would be possible to include a hook that can do state management in a simple way so that the consumers of this component have the option to create their own state management (as in the use of having route-driven tabs), or just use the "batteries included" version that comes for free with an exported hook.

[alfredlucero]

Agreed 100%! When I tried to useTabState it was a bit tough for me to figure out how to exactly use it and I had to pore through some docs with Reakit to eventually come to a similar version to Alex's useTabState solution. I wished there was a base stateless/presentational version of the tabs so we can manage our own state. I see the use case of the original version with state baked in to handle most static content use cases but yeah would love to have components we can plug in together and apply our own logic/state to and not tied specifically to a lib like reakit.

Other than the state portion, we had some issues with styles when integrating Links underneath a Tab and had to resort to not using TabPanels to make sure our components rendered only when we wanted them to when routes changed.

[TheSisb]

Hi all,

This is a really good question. I forked the Codesandbox and added a third option: https://codesandbox.io/s/zomg-tabs-forked-wjyid?file=/src/TabsWithProgrammaticRouter.tsx

Currently there's a warning about onClick prop on Tab components, which is an oversight also reported here: #1250. We plan to fix this soon.

Let me know if my third option works for you all!

[TheSisb]

Just merged the onClick TS fix: #1260

[ghostling]

Can this example be added to the docs? https://paste.twilio.design/components/tabs/#anatomy

It also references

The Tabs component allows a user to flip through multiple views within the same page.

which kind of contradicts this kind of usage for sub-pages? Maybe I'm reading too much into that 😅

[SiTaggart]

So there is a problem generally which I didn't necessarily want to raise at the time.

Tabs should not be used as sub page navigation.

I didn't raise it at the time as we don't have the alternative available right now, but we will be building a dedicated sub page navigation bar for this very purpose.

It might look identical to the tabs visually (it likely shouldn't), but the underlying semantics are very different and that's the main problem.

Tabs switch content, navigation takes you to a page with a url route change.

[ghostling]

Thanks for the context! I'm assuming that's further on the roadmap, so we'll just continue to use Tabs until that's available?

[SiTaggart]

Yup, for now it's a good enough solution to keep using tabs, just not the "right" solution long term.