feat(react): update Tabs API and delete next/Tab

[abbeyhrt]

Closes #10086
Closes #9988
REF #8487

Updates the API for Tabs from

  <Tabs>
    <Tab id="tab-1" label="Tab label 1">
      <p>Content for first tab</p>
    </Tab>
    <Tab id="tab-2" label="Tab label 2">
      <p>Content for second tab</p>
    </Tab>
    <Tab id="tab-3" clabel="Tab label 3">
      <p>Content for third tab</p>
    </Tab>
    <Tab label={<div>Custom Label</div>}>
      <p>Content for fourth tab</p>
    </Tab>
  </Tabs>

to

  <Tabs>
    <TabList aria-label="List of tabs">
      <Tab>Tab Label 1</Tab>
      <Tab disabled>Tab Label 2</Tab>
      <Tab>Tab Label 3</Tab>
      <Tab>Tab Label 4 with a very long long label</Tab>
    </TabList>
    <TabPanels>
      <TabPanel><p>Content for first tab</p></TabPanel>
      <TabPanel><p>Content for second tab</p></TabPanel>
      <TabPanel><p>Content for third tab</p></TabPanel>
      <TabPanel><p>Content for fourth tab</p></TabPanel>
    </TabPanels>
  </Tabs>

This PR however does not implement horizontal scrolling. It felt like it was getting way too big and I thought that could be added after this is merged in.

Changelog

New

• Tabs API
• unstable_TabPanel
• unstable_TabPanels
• unstable_TabList

Changed

• Tabs, the component itself is now a context provider and does not contain the bulk of the logic, that is now in TabList
• styles to accommodate the new composition

Removed

• next/Tab Tab will now be kept in context in Tabs.js instead of in its own directory

Testing / Reviewing

Pull down the PR and check to see how the component looks in the V11 storybook. Check to make sure that whatever functionality was available in Tabs or Tab (outside of scrolling) is still available in the new structure. There are some prop name changes but the same functionality should still exist.

[netlify]

✔️ Deploy Preview for carbon-react-next ready!

🔨 Explore the source changes: 28fc7e6

🔍 Inspect the deploy log: https://app.netlify.com/sites/carbon-react-next/deploys/61afd177bcd7ac00098c635c

😎 Browse the preview: https://deploy-preview-10225--carbon-react-next.netlify.app

[netlify]

✔️ Deploy Preview for carbon-components-react ready!

🔨 Explore the source changes: 28fc7e6

🔍 Inspect the deploy log: https://app.netlify.com/sites/carbon-components-react/deploys/61afd177ecf5060007f0dc32

😎 Browse the preview: https://deploy-preview-10225--carbon-components-react.netlify.app

[netlify]

✔️ Deploy Preview for carbon-elements ready!

🔨 Explore the source changes: 28fc7e6

🔍 Inspect the deploy log: https://app.netlify.com/sites/carbon-elements/deploys/61afd177211dfd0008c872cc

😎 Browse the preview: https://deploy-preview-10225--carbon-elements.netlify.app

[joshblack]

I think you just need to update snapshots for our package entry points and you'll be good to go 👍

[tay1orjones]

This PR however does not implement horizontal scrolling. It felt like it was getting way too big and I thought that could be added after this is merged in.

@abbeyhrt Totally fair 👍 I made an issue for it, #10249

[tay1orjones]

This is awesome! One minor bit, but otherwise good to go 👍