[Tabs] Re-implementation and client-side navigation

[marcialfps]

Feature/s

1. Re-implement the Tabs component without Material UI.
2. Support client-side navigation through React Router or similar.

Approaches

In order to have the above features we need to rethink our Tabs component. We have to take into account how other design systems have implemented this type of component. In the next sections I will explain what we need to change about our component to support the two features.

Individual Tab as child

In this case I have studied 7 design systems. Of them, only one (Gestalt) uses the tabs property as an array as we do in our component. Each element of the array can have the following properties:
{| href: string, id?: string, indicator?: "dot" | number, ref?: {| current: ?HTMLElement |}, text: React.Node, |}
As we can see, href is supported, but onChange property is also provided to allow other functionalities when user changes to another tab.

But what do the other 6 design systems have in common? They all use Tab and content as children of the Tabs component in a very similar way:

Atlassian

<div>
   <Tabs onChange={handleUpdate} selected={selected} id="controlled">
      <TabList>
         <Tab>Tab 1</Tab>
      </TabList>
      <TabPanel>
         <Panel>One</Panel>
      </TabPanel>
   </Tabs>
</div>

Base Web

<Tabs activeKey={activeKey}
   onChange={({ activeKey }) => {
      setActiveKey(activeKey);
      }}
   activateOnFocus
>
      <Tab title="First">Content 1</Tab>
</Tabs>

Headless UI

<Tab.Group>
   <Tab.List>
      <Tab>Tab 1</Tab>
   </Tab.List>
   <Tab.Panels>
      <Tab.Panel>Content 1</Tab.Panel>
   </Tab.Panels>
</Tab.Group>

We can conclude from this first section is that the use of children is standarized by many design systems.

Custom tab and client-side navigation

The feature explained above allows these design systems to support custom tabs. In some cases, such as Atlassian or Chakra, custom tabs can be used within TabList.

Chakra UI

function CustomTabs() {
  const CustomTab = React.forwardRef((props, ref) => {
    // ...

    return (
      <Button __css={styles.tab} {...tabProps}>
        // custom tab content
      </Button>
    )
  })

  return (
    <Tabs>
      <TabList>
        <CustomTab>One</CustomTab>
      </TabList>
      <TabPanels>
        <TabPanel>1</TabPanel>
      </TabPanels>
    </Tabs>
  )
}

Other cases, such as Headless and Material use a prop called as or component which can receive an HTML primitive type or a React component. This prop was also explained in #757 .

Gestalt, the design system that uses a similar approach with the tabs array says the following in the documentation:

If your app uses a tool such as react-router to navigate between pages, be sure to use onChange to navigate instead of getting a full page refresh with href.
But this functionality is exactly the same as what we have now.

So this new approach opens up a very similar discussion to the Link component and the way we support React Router or NextJS Link.

Other considerations

Base web uses renderAll which allows to render all the content of each tab. This functionality can be useful for SEO.