`Tabs`: Implement developer-friendly api

After some discussion in our core team meeting yesterday, we decided we’d like to change the Tabs component api.

Problems

• painful to coordinate indexes between Tab+TabPanel combinations when tabs are dynamic
• can’t customize component tree because props are passed directly rather than shared via context (see #3045)

Solution

We’d like to restructure the implementation and api of the Tabs component to resolve those problems.

• Tabs is indexed by string ids
  • Tab relates to TabPanel via panelId prop
  • TabPanel relates to Tabs via id prop
• Tabs data is shared via descendant context instead of passed props

const App = () => {
  return (
    <Tabs defaultTab="a">
		<TabList>
			{/* can be nested! */}
			<div>
				<Tab panelId="a">A</Tab>
			</div>
			<Tab panelId="b">B</Tab>
			<Tab panelId="c">C</Tab>
		</TabList>
		<TabPanels>
			{/* can be nested! */}
			<div>
				<TabPanel id="a">A panel!</TabPanel>
			</div>
			<TabPanel id="b">B panel!</TabPanel>
			<TabPanel id="c">C panel!</TabPanel>
		</TabPanels>
	</Tabs>
  )
}

[aboveyunhai]

@with-heart glad that you bring it up.

I also want to ask if it’s possible to bring the original “wrong” implementation of onChange back as a option. onChange only fires when index changes. I tired to use onClick to replace onChange due to some functionalities, but onClick does not contain the index by default, and I found it’s hard to get the current active index via doucment.getElementby...(), Also, the fundamental part: onChange listen to tabIndex but onClick is limited by clicking behavior.

onTabChange( (index) => {
  if(index === tabIndex) return;
})
//this is equivalent to current onChange();

or make function onChange(index, default=true) // when set to false means it will be fired even click the same tab

So it allows user to retrig some custom functions even when click the same tabs. It can be extremely handy when there are multiple tabs with it’s own dynamic content, and you only want to refetch data when click the same tabs again as a shortcut behavior.

[kodell]

This would be a huge help, dynamic tabs are a mess especially when trying to map to routes. That is:

1. I want to set defaultIndex on mount based on the requested route.
2. I want my URL route to update when I switch tabs.

A new defaultPanel prop would take care of (1).

Updating the signature of onChange to be (index: number, panelId: string | undefined) => void would take care of (2) and remain backwards compatible.