Adds new component TabPanels (#4241)

* Early prototype of TabPanels

* Linting

* selected property is optional

* Stop if complaining about types for aria-selected

* Fix initial select

* Adds tests for TabPanels

* Move npm dep to packages/react

* version semver format change

* Add styling to match as close as I can to PVC version

* Fix Playground

* Linting

* Delete TabWrapper and move styling to tablist

* Add more docs

* Format

* Changeset

* Add to the docs nav

* Adds e2e tests

* More scaffolding stuff

* Fix error with docs reference

* Update @github/tab-container-element so we can use it with SSR

* Use type imports for type imports

* More type imports

* Fix TabPanels tests

* test(vrt): update snapshots

* Update test snapshot

* Use the new shadowdom version of tab-container-element

* Adds styles to tab-container

* Remove test which is no longer required

* Add margin to panels to match react

* Upgrade tab-container-element to v4.1.0

* Update TabPanels to use better styling

* Update docs to include events

* Linting

* Fix type error

* Fix tests

* test(vrt): update snapshots

* Ignore axe test that fails because of shadow dom

* Fix roll-up error

* Move to drafts (and consequently experimental)

* aria-labelledby option (required) on tab panels and id on tabs

* Linting

* Hide panels before JS kicks in

* Minimise content flash when JS is slow

* Demonstrate limitation with 11+ tabs

* Linting again

* Add required props to tests etc

* npm run format

* test(vrt): update snapshots

* test(vrt): update snapshots

* Add suppressHydrationWarning to elements on TabPanels

* Update snapshot for update semver test

* Add required props to docs example

* Cherry-pick the change from my other PR

* Delete dialog snapshots

* Fix format

* Upgrade tab-container-element to 4.1.2

* Update tab-container-element to v4.1.3

* Removes the need for specifying ids on children and makes them autogenerate

* Linting

* Move to draft directory

* Fix docs build

* Fix TabPanels in docs page

* Coplete move to drafts area

* Change API to use selectedTab on the parent and store it in state

* Use new createComponent function

* Add new selectedTabIndex prop support

* Add selectedTabIndex prop to docs

* Linting

* Update docs

* Fix formatting

* Fix e2e test after move to draft

* Simplify styled call on TabContainerElement

* Fix types for linting

* test(vrt): update snapshots

* Shouldn't need to skip aria test now

* Remove unused commented code

* Fix typing on custom-elements

* Type change to fix linting

* Change type to SxProp

* Use latest tab-container-element

* Use onChange(d) aliases in docs

* Automatically generate the parent id if it's not defined

* Add aria requirements to TabPanels

* Linting etc

* Use defaultTabIndex which doesn't set the focus

* Linting

* Use the role instead of the type

* child.props.type didn't work

* We don't want the consumer to override the id or aria-labelledby

* Updgrade tab-container-element to v4.5.0

* Better types for label/labelledby

* Linting

* test(vrt): update snapshots

* Workaround infinite type issue

---------

Co-authored-by: owenniblock <owenniblock@users.noreply.github.com>
Co-authored-by: Keith Cirkel <keithamus@users.noreply.github.com>

.changeset/eight-olives-play.md

@@ -0,0 +1,7 @@
+---
+'@primer/react': minor
+---
+
+Adds new alpha component: TabPanels to match Primer View Components.
+
+TabPanels should be used when semantic tabs are required and the tablist is not a navigation element.

docs/content/drafts/TabPanels.mdx

@@ -0,0 +1,33 @@
+---
+componentId: tab_panels
+title: TabPanels
+status: Draft
+source: https://github.com/primer/react/blob/main/src/TabPanels
+---
+
+import data from '../../../packages/react/src/drafts/TabPanels/TabPanels.docs.json'
+
+```js
+import {TabPanels} from '@primer/react/drafts'
+```
+
+**Attention:** Make sure to properly label your `TabPanels` with an `aria-label` to provide context about the subject of your `TabPanels`.
+
+`TabPanels.Tab` elements are wired up to their `TabPanels.Panel` elements based on the index order that they exist in the document.
+
+## Examples
+
+```jsx live drafts
+<TabPanels aria-label="Select a tab" id="tab-panels" selectedTabIndex={0}>
+  <TabPanels.Tab>Tab 1</TabPanels.Tab>
+  <TabPanels.Tab>Tab 2</TabPanels.Tab>
+  <TabPanels.Tab>Tab 3</TabPanels.Tab>
+  <TabPanels.Panel>Panel 1</TabPanels.Panel>
+  <TabPanels.Panel>Panel 2</TabPanels.Panel>
+  <TabPanels.Panel>Panel 3</TabPanels.Panel>
+</TabPanels>
+```
+
+## Props
+
+<ComponentProps data={data} />

docs/src/@primer/gatsby-theme-doctocat/nav.yml

@@ -172,6 +172,8 @@
       url: /drafts/PageHeader
     - title: SelectPanel v2
       url: /drafts/SelectPanel
+    - title: TabPanels
+      url: /drafts/TabPanels
 - title: Deprecated
   children:
     - title: ActionList (legacy)

e2e/components/TabPanels.test.ts

@@ -0,0 +1,33 @@
+import {test, expect} from '@playwright/test'
+import {visit} from '../test-helpers/storybook'
+import {themes} from '../test-helpers/themes'
+
+test.describe('TabPanels', () => {
+  test.describe('Default', () => {
+    for (const theme of themes) {
+      test.describe(theme, () => {
+        test('default @vrt', async ({page}) => {
+          await visit(page, {
+            id: 'drafts-components-tabpanels--default',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+
+          // Default state
+          expect(await page.screenshot()).toMatchSnapshot(`TabPanels.Default.${theme}.png`)
+        })
+
+        test('axe @aat', async ({page}) => {
+          await visit(page, {
+            id: 'drafts-components-tabpanels--default',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+          await expect(page).toHaveNoViolations()
+        })
+      })
+    }
+  })
+})