From cb25b8b417eb6e3cf60ca2539c91be1401b7c53b Mon Sep 17 00:00:00 2001 From: Owen Niblock Date: Fri, 9 Feb 2024 12:31:29 +0000 Subject: [PATCH 01/94] Early prototype of TabPanels --- package-lock.json | 7 +- package.json | 3 + .../TabPanels/TabPanels.features.stories.tsx | 14 ++++ .../react/src/TabPanels/TabPanels.stories.tsx | 32 ++++++++ packages/react/src/TabPanels/TabPanels.tsx | 78 +++++++++++++++++++ packages/react/src/TabPanels/index.ts | 1 + 6 files changed, 133 insertions(+), 2 deletions(-) create mode 100644 packages/react/src/TabPanels/TabPanels.features.stories.tsx create mode 100644 packages/react/src/TabPanels/TabPanels.stories.tsx create mode 100644 packages/react/src/TabPanels/TabPanels.tsx create mode 100644 packages/react/src/TabPanels/index.ts diff --git a/package-lock.json b/package-lock.json index 942ad6c72c2..6753c4c9992 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,6 +11,9 @@ "docs", "examples/*" ], + "dependencies": { + "@github/tab-container-element": "3.3.0" + }, "devDependencies": { "@babel/eslint-parser": "7.23.3", "@changesets/changelog-github": "0.4.8", @@ -770,6 +773,7 @@ "version": "19.8.0", "resolved": "https://registry.npmjs.org/@primer/octicons-react/-/octicons-react-19.8.0.tgz", "integrity": "sha512-2Z+D7xTloFTLQVRUEbg0pQpe6aTL9RR+8RqBhjkrF+BFuVdM1ENOyjywaGEO7DIkPU5Zxlv0gxSlD85LQxL+sw==", + "extraneous": true, "engines": { "node": ">=8" }, @@ -4966,8 +4970,7 @@ "node_modules/@github/tab-container-element": { "version": "3.3.0", "resolved": "https://registry.npmjs.org/@github/tab-container-element/-/tab-container-element-3.3.0.tgz", - "integrity": "sha512-vHlN/GXgaJFJhh4oUYRh1pc4RAqduKlQOrEjVgSxR4JhLXsQcZ/hKWfCsRZAuZbSPzUGEYvggdieamS4FRSe4g==", - "dev": true + "integrity": "sha512-vHlN/GXgaJFJhh4oUYRh1pc4RAqduKlQOrEjVgSxR4JhLXsQcZ/hKWfCsRZAuZbSPzUGEYvggdieamS4FRSe4g==" }, "node_modules/@graphql-tools/batch-execute": { "version": "7.1.2", diff --git a/package.json b/package.json index 7071241e245..c63288c36f5 100644 --- a/package.json +++ b/package.json @@ -95,5 +95,8 @@ ], "lint-staged": { "**/*.{js,ts,tsx,md,mdx}": "npm run lint" + }, + "dependencies": { + "@github/tab-container-element": "3.3.0" } } diff --git a/packages/react/src/TabPanels/TabPanels.features.stories.tsx b/packages/react/src/TabPanels/TabPanels.features.stories.tsx new file mode 100644 index 00000000000..1e886be1bcc --- /dev/null +++ b/packages/react/src/TabPanels/TabPanels.features.stories.tsx @@ -0,0 +1,14 @@ +import React from 'react' +import {Meta} from '@storybook/react' +import TabPanels from './TabPanels' +import {ComponentProps} from '../utils/types' + +export default { + title: 'Components/TabPanels/Features', + component: TabPanels, +} as Meta> + +export const Selected = () => ( + + +) diff --git a/packages/react/src/TabPanels/TabPanels.stories.tsx b/packages/react/src/TabPanels/TabPanels.stories.tsx new file mode 100644 index 00000000000..60401c57ac0 --- /dev/null +++ b/packages/react/src/TabPanels/TabPanels.stories.tsx @@ -0,0 +1,32 @@ +import React from 'react' +import {Meta, Story} from '@storybook/react' +import TabPanels from './TabPanels' +import {ComponentProps} from '../utils/types' + +export default { + title: 'Components/TabPanels', + component: TabPanels, +} as Meta> + +export const Playground: Story> = args => ( + + +) + +Playground.args = { + 'aria-label': 'Navigation', +} +Playground.argTypes = { + 'aria-label': { + type: 'string', + }, +} + +export const Default = () => ( + + One + Two + One + Two + +) diff --git a/packages/react/src/TabPanels/TabPanels.tsx b/packages/react/src/TabPanels/TabPanels.tsx new file mode 100644 index 00000000000..b74b05ba289 --- /dev/null +++ b/packages/react/src/TabPanels/TabPanels.tsx @@ -0,0 +1,78 @@ +import React from 'react' +import styled from 'styled-components' +import {TabContainerElement} from '@github/tab-container-element' +import { createComponent } from '@lit-labs/react' +import type {ComponentProps} from '../utils/types' +import sx, { SxProp } from '../sx' + +const TabContainer = styled(createComponent(React, 'tab-container', TabContainerElement))(sx) + + +export type TabPanelsProps = { + children: React.ReactNode +} & SxProp + +function TabPanels({children}: TabPanelsProps) { + const childrenArray = React.Children.toArray(children) + let selectedTabIndex = -1 + let tabIndex = -1 + + childrenArray.some((child) => { + if (React.isValidElement(child) && child.type == Tab) { + tabIndex += 1; + if (child.selected) { + selectedTabIndex = tabIndex + return true + } + } + }) + selectedTabIndex = Math.max(selectedTabIndex, 0) + tabIndex = -1; + let panelIndex = -1; + + const tabs: Tab = [] + const panels: Panel = [] + childrenArray.forEach((child) => { + if (React.isValidElement(child) && child.type == Tab) { + tabIndex++ + tabs.push(React.cloneElement(child, {selected: tabIndex === selectedTabIndex})) + } + if (React.isValidElement(child) && child.type == Panel) { + panelIndex++ + panels.push(React.cloneElement(child, {selected: panelIndex === selectedTabIndex})) + } + }) + + if (tabIndex !== panelIndex) { + throw new Error('TabPanels must have equal Panels and Tabs') + } + + return +
{tabs}
+ {panels} + +} + +export type TabPanelsTabProps = { + children: React.ReactNode + selected: bool +} & SxProp + +function Tab({children, selected}: TabPanelsTabProps) { + return +} + +Tab.displayName = 'TabPanels.Tab' + +export type TabPanelsPanelProps = { + children: React.ReactNode + selected: bool +} & SxProp + +function Panel({children, selected}: TabPanelsPanelProps) { + return +} + +Panel.displayName = 'TabPanels.Panel' + +export default Object.assign(TabPanels, {Panel, Tab}); diff --git a/packages/react/src/TabPanels/index.ts b/packages/react/src/TabPanels/index.ts new file mode 100644 index 00000000000..18c6ba0e73b --- /dev/null +++ b/packages/react/src/TabPanels/index.ts @@ -0,0 +1 @@ +export {default} from './TabPanels' \ No newline at end of file From 3b2c84d370e3bf161e4bab6a4a8ef117139e3344 Mon Sep 17 00:00:00 2001 From: Owen Niblock Date: Fri, 9 Feb 2024 12:39:25 +0000 Subject: [PATCH 02/94] Linting --- .../TabPanels/TabPanels.features.stories.tsx | 5 +- .../react/src/TabPanels/TabPanels.stories.tsx | 5 +- packages/react/src/TabPanels/TabPanels.tsx | 52 +++++++++++-------- packages/react/src/TabPanels/index.ts | 2 +- 4 files changed, 33 insertions(+), 31 deletions(-) diff --git a/packages/react/src/TabPanels/TabPanels.features.stories.tsx b/packages/react/src/TabPanels/TabPanels.features.stories.tsx index 1e886be1bcc..d98ec96e8d2 100644 --- a/packages/react/src/TabPanels/TabPanels.features.stories.tsx +++ b/packages/react/src/TabPanels/TabPanels.features.stories.tsx @@ -8,7 +8,4 @@ export default { component: TabPanels, } as Meta> -export const Selected = () => ( - - -) +export const Selected = () => diff --git a/packages/react/src/TabPanels/TabPanels.stories.tsx b/packages/react/src/TabPanels/TabPanels.stories.tsx index 60401c57ac0..e5eab37f515 100644 --- a/packages/react/src/TabPanels/TabPanels.stories.tsx +++ b/packages/react/src/TabPanels/TabPanels.stories.tsx @@ -8,10 +8,7 @@ export default { component: TabPanels, } as Meta> -export const Playground: Story> = args => ( - - -) +export const Playground: Story> = args => Playground.args = { 'aria-label': 'Navigation', diff --git a/packages/react/src/TabPanels/TabPanels.tsx b/packages/react/src/TabPanels/TabPanels.tsx index b74b05ba289..fa399ff1741 100644 --- a/packages/react/src/TabPanels/TabPanels.tsx +++ b/packages/react/src/TabPanels/TabPanels.tsx @@ -1,13 +1,11 @@ import React from 'react' import styled from 'styled-components' import {TabContainerElement} from '@github/tab-container-element' -import { createComponent } from '@lit-labs/react' -import type {ComponentProps} from '../utils/types' -import sx, { SxProp } from '../sx' +import {createComponent} from '@lit-labs/react' +import sx, {SxProp} from '../sx' const TabContainer = styled(createComponent(React, 'tab-container', TabContainerElement))(sx) - export type TabPanelsProps = { children: React.ReactNode } & SxProp @@ -17,9 +15,9 @@ function TabPanels({children}: TabPanelsProps) { let selectedTabIndex = -1 let tabIndex = -1 - childrenArray.some((child) => { - if (React.isValidElement(child) && child.type == Tab) { - tabIndex += 1; + childrenArray.some(child => { + if (React.isValidElement(child) && child.type === Tab) { + tabIndex += 1 if (child.selected) { selectedTabIndex = tabIndex return true @@ -27,30 +25,32 @@ function TabPanels({children}: TabPanelsProps) { } }) selectedTabIndex = Math.max(selectedTabIndex, 0) - tabIndex = -1; - let panelIndex = -1; + tabIndex = -1 + let panelIndex = -1 const tabs: Tab = [] const panels: Panel = [] - childrenArray.forEach((child) => { - if (React.isValidElement(child) && child.type == Tab) { - tabIndex++ + for (const child of childrenArray) { + if (React.isValidElement(child) && child.type === Tab) { + tabIndex += 1 tabs.push(React.cloneElement(child, {selected: tabIndex === selectedTabIndex})) } - if (React.isValidElement(child) && child.type == Panel) { - panelIndex++ + if (React.isValidElement(child) && child.type === Panel) { + panelIndex += 1 panels.push(React.cloneElement(child, {selected: panelIndex === selectedTabIndex})) } - }) + } if (tabIndex !== panelIndex) { throw new Error('TabPanels must have equal Panels and Tabs') } - return -
{tabs}
- {panels} - + return ( + +
{tabs}
+ {panels} + + ) } export type TabPanelsTabProps = { @@ -59,7 +59,11 @@ export type TabPanelsTabProps = { } & SxProp function Tab({children, selected}: TabPanelsTabProps) { - return + return ( + + ) } Tab.displayName = 'TabPanels.Tab' @@ -70,9 +74,13 @@ export type TabPanelsPanelProps = { } & SxProp function Panel({children, selected}: TabPanelsPanelProps) { - return + return ( + + ) } Panel.displayName = 'TabPanels.Panel' -export default Object.assign(TabPanels, {Panel, Tab}); +export default Object.assign(TabPanels, {Panel, Tab}) diff --git a/packages/react/src/TabPanels/index.ts b/packages/react/src/TabPanels/index.ts index 18c6ba0e73b..5758ea565a9 100644 --- a/packages/react/src/TabPanels/index.ts +++ b/packages/react/src/TabPanels/index.ts @@ -1 +1 @@ -export {default} from './TabPanels' \ No newline at end of file +export {default} from './TabPanels' From c1f13d8ead0e1b2e5fc83c2675741688eb037bca Mon Sep 17 00:00:00 2001 From: Owen Niblock Date: Fri, 9 Feb 2024 12:47:28 +0000 Subject: [PATCH 03/94] selected property is optional --- packages/react/src/TabPanels/TabPanels.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react/src/TabPanels/TabPanels.tsx b/packages/react/src/TabPanels/TabPanels.tsx index fa399ff1741..7fb6ea9659b 100644 --- a/packages/react/src/TabPanels/TabPanels.tsx +++ b/packages/react/src/TabPanels/TabPanels.tsx @@ -55,7 +55,7 @@ function TabPanels({children}: TabPanelsProps) { export type TabPanelsTabProps = { children: React.ReactNode - selected: bool + selected?: boolean } & SxProp function Tab({children, selected}: TabPanelsTabProps) { @@ -70,7 +70,7 @@ Tab.displayName = 'TabPanels.Tab' export type TabPanelsPanelProps = { children: React.ReactNode - selected: bool + selected?: boolean } & SxProp function Panel({children, selected}: TabPanelsPanelProps) { From da58554a16b2106d935aa76ab8169a8960346248 Mon Sep 17 00:00:00 2001 From: Owen Niblock Date: Fri, 9 Feb 2024 13:02:26 +0000 Subject: [PATCH 04/94] Stop if complaining about types for aria-selected --- packages/react/src/TabPanels/TabPanels.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/src/TabPanels/TabPanels.tsx b/packages/react/src/TabPanels/TabPanels.tsx index 7fb6ea9659b..8f1329235b5 100644 --- a/packages/react/src/TabPanels/TabPanels.tsx +++ b/packages/react/src/TabPanels/TabPanels.tsx @@ -60,7 +60,7 @@ export type TabPanelsTabProps = { function Tab({children, selected}: TabPanelsTabProps) { return ( - ) From f768e676f660ebea07292004924d9c5876e548af Mon Sep 17 00:00:00 2001 From: Owen Niblock Date: Fri, 9 Feb 2024 13:21:13 +0000 Subject: [PATCH 05/94] Fix initial select --- .../TabPanels/TabPanels.features.stories.tsx | 9 +++++++- packages/react/src/TabPanels/TabPanels.tsx | 23 +++++++++++-------- 2 files changed, 22 insertions(+), 10 deletions(-) diff --git a/packages/react/src/TabPanels/TabPanels.features.stories.tsx b/packages/react/src/TabPanels/TabPanels.features.stories.tsx index d98ec96e8d2..e80a092518d 100644 --- a/packages/react/src/TabPanels/TabPanels.features.stories.tsx +++ b/packages/react/src/TabPanels/TabPanels.features.stories.tsx @@ -8,4 +8,11 @@ export default { component: TabPanels, } as Meta> -export const Selected = () => +export const Selected = () => ( + One + Two + Three + One + Two + Three + ) diff --git a/packages/react/src/TabPanels/TabPanels.tsx b/packages/react/src/TabPanels/TabPanels.tsx index 8f1329235b5..28e7c69d427 100644 --- a/packages/react/src/TabPanels/TabPanels.tsx +++ b/packages/react/src/TabPanels/TabPanels.tsx @@ -15,27 +15,32 @@ function TabPanels({children}: TabPanelsProps) { let selectedTabIndex = -1 let tabIndex = -1 - childrenArray.some(child => { - if (React.isValidElement(child) && child.type === Tab) { + for (const child of childrenArray) { + if (React.isValidElement(child) && child.type === Tab) { tabIndex += 1 - if (child.selected) { + if (child.props.selected === true) { selectedTabIndex = tabIndex - return true + break } } - }) + } + + if (tabIndex === -1) { + throw new Error('TabPanels must have at least one Tab') + } + selectedTabIndex = Math.max(selectedTabIndex, 0) tabIndex = -1 let panelIndex = -1 - const tabs: Tab = [] - const panels: Panel = [] + const tabs: JSX.Element[] = [] + const panels: JSX.Element[] = [] for (const child of childrenArray) { - if (React.isValidElement(child) && child.type === Tab) { + if (React.isValidElement(child) && child.type === Tab) { tabIndex += 1 tabs.push(React.cloneElement(child, {selected: tabIndex === selectedTabIndex})) } - if (React.isValidElement(child) && child.type === Panel) { + if (React.isValidElement(child) && child.type === Panel) { panelIndex += 1 panels.push(React.cloneElement(child, {selected: panelIndex === selectedTabIndex})) } From 7ac6b9790b641b925b5c0c1a894a849c367da391 Mon Sep 17 00:00:00 2001 From: Owen Niblock Date: Fri, 9 Feb 2024 13:41:38 +0000 Subject: [PATCH 06/94] Adds tests for TabPanels --- .../TabPanels/__tests__/TabPanels.test.tsx | 92 +++++++++++++++++++ 1 file changed, 92 insertions(+) create mode 100644 packages/react/src/TabPanels/__tests__/TabPanels.test.tsx diff --git a/packages/react/src/TabPanels/__tests__/TabPanels.test.tsx b/packages/react/src/TabPanels/__tests__/TabPanels.test.tsx new file mode 100644 index 00000000000..7f4c49ad543 --- /dev/null +++ b/packages/react/src/TabPanels/__tests__/TabPanels.test.tsx @@ -0,0 +1,92 @@ +import React from 'react' +import { render, screen } from '@testing-library/react' +import TabPanels from '../TabPanels' + +describe('TabPanels', () => { + //Reset mocks after each test + afterEach(() => { + jest.restoreAllMocks() + }) + + it('renders children correctly', () => { + render( + + Tab 1 + Tab 2 + Panel 1 + Panel 2 + + ) + + expect(screen.getByText('Tab 1')).toBeInTheDocument() + expect(screen.getByText('Tab 2')).toBeInTheDocument() + expect(screen.getByText('Panel 1')).toBeInTheDocument() + expect(screen.getByText('Panel 2')).toBeInTheDocument() + }) + + it('applies aria-selected to selected tab', () => { + render( + + Tab 1 + Tab 2 + Panel 1 + Panel 2 + + ) + + expect(screen.getByText('Tab 1')).toHaveAttribute('aria-selected', 'false') + expect(screen.getByText('Tab 2')).toHaveAttribute('aria-selected', 'true') + }) + + it('throws an error if there are no tabs', () => { + jest.spyOn(console, 'error').mockImplementation() + expect(() => { + render( + + Panel 1 + + ) + }).toThrowError('TabPanels must have at least one Tab') + }) + + it('throws an error if there are unequal tabs and panels', () => { + jest.spyOn(console, 'error').mockImplementation() + expect(() => { + render( + + Tab 1 + Panel 1 + Panel 2 + + ) + }).toThrowError('TabPanels must have equal Panels and Tabs') + }) + + it ('Adds aria-selected to the first tab by default', () => { + render( + + Tab 1 + Tab 2 + Panel 1 + Panel 2 + + ) + + expect(screen.getByText('Tab 1')).toHaveAttribute('aria-selected', 'true') + expect(screen.getByText('Tab 2')).toHaveAttribute('aria-selected', 'false') + }) + + it ('Adds hidden attribute to the second panel by default', () => { + render( + + Tab 1 + Tab 2 + Panel 1 + Panel 2 + + ) + + expect(screen.getByText('Panel 1')).not.toHaveAttribute('hidden') + expect(screen.getByText('Panel 2')).toHaveAttribute('hidden') + }) +}) From cc88b59e652d136967b8733bf98d719cd444b2e6 Mon Sep 17 00:00:00 2001 From: Owen Niblock Date: Fri, 9 Feb 2024 13:45:09 +0000 Subject: [PATCH 07/94] Move npm dep to packages/react --- package-lock.json | 4 +--- package.json | 3 --- packages/react/package.json | 1 + 3 files changed, 2 insertions(+), 6 deletions(-) diff --git a/package-lock.json b/package-lock.json index 6753c4c9992..34f93708510 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,9 +11,6 @@ "docs", "examples/*" ], - "dependencies": { - "@github/tab-container-element": "3.3.0" - }, "devDependencies": { "@babel/eslint-parser": "7.23.3", "@changesets/changelog-github": "0.4.8", @@ -61913,6 +61910,7 @@ "@github/markdown-toolbar-element": "^2.1.0", "@github/paste-markdown": "^1.4.0", "@github/relative-time-element": "^4.1.2", + "@github/tab-container-element": "3.3.0", "@lit-labs/react": "^1.1.1", "@oddbird/popover-polyfill": "^0.3.1", "@primer/behaviors": "^1.5.1", diff --git a/package.json b/package.json index c63288c36f5..7071241e245 100644 --- a/package.json +++ b/package.json @@ -95,8 +95,5 @@ ], "lint-staged": { "**/*.{js,ts,tsx,md,mdx}": "npm run lint" - }, - "dependencies": { - "@github/tab-container-element": "3.3.0" } } diff --git a/packages/react/package.json b/packages/react/package.json index 2c9777fff0e..6a6597df169 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -83,6 +83,7 @@ "@github/markdown-toolbar-element": "^2.1.0", "@github/paste-markdown": "^1.4.0", "@github/relative-time-element": "^4.1.2", + "@github/tab-container-element": "3.3.0", "@lit-labs/react": "^1.1.1", "@oddbird/popover-polyfill": "^0.3.1", "@primer/behaviors": "^1.5.1", From 5a87c32e587677d2a4f08226871b681b869a3fc1 Mon Sep 17 00:00:00 2001 From: Owen Niblock Date: Fri, 9 Feb 2024 13:46:37 +0000 Subject: [PATCH 08/94] version semver format change --- packages/react/package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react/package.json b/packages/react/package.json index 6a6597df169..d7b57172065 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -83,7 +83,7 @@ "@github/markdown-toolbar-element": "^2.1.0", "@github/paste-markdown": "^1.4.0", "@github/relative-time-element": "^4.1.2", - "@github/tab-container-element": "3.3.0", + "@github/tab-container-element": "^3.3.0", "@lit-labs/react": "^1.1.1", "@oddbird/popover-polyfill": "^0.3.1", "@primer/behaviors": "^1.5.1", @@ -238,4 +238,4 @@ "optional": true } } -} +} \ No newline at end of file From 46e6e4f74ebe93a0ebe0ce20b780edb830aecf6b Mon Sep 17 00:00:00 2001 From: Owen Niblock Date: Tue, 13 Feb 2024 11:18:17 +0000 Subject: [PATCH 09/94] Add styling to match as close as I can to PVC version --- .../react/src/TabPanels/TabPanels.stories.tsx | 10 +-- packages/react/src/TabPanels/TabPanels.tsx | 69 ++++++++++++++++--- 2 files changed, 66 insertions(+), 13 deletions(-) diff --git a/packages/react/src/TabPanels/TabPanels.stories.tsx b/packages/react/src/TabPanels/TabPanels.stories.tsx index e5eab37f515..94b16650e70 100644 --- a/packages/react/src/TabPanels/TabPanels.stories.tsx +++ b/packages/react/src/TabPanels/TabPanels.stories.tsx @@ -21,9 +21,11 @@ Playground.argTypes = { export const Default = () => ( - One - Two - One - Two + Tab 1 + Tab 2 + Tab 3 + Panel 1 + Panel 2 + Panel 3 ) diff --git a/packages/react/src/TabPanels/TabPanels.tsx b/packages/react/src/TabPanels/TabPanels.tsx index 28e7c69d427..cab16dd6091 100644 --- a/packages/react/src/TabPanels/TabPanels.tsx +++ b/packages/react/src/TabPanels/TabPanels.tsx @@ -1,11 +1,29 @@ +import {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic' +import clsx from 'clsx' import React from 'react' import styled from 'styled-components' +import {get} from '../constants' import {TabContainerElement} from '@github/tab-container-element' import {createComponent} from '@lit-labs/react' import sx, {SxProp} from '../sx' +import getGlobalFocusStyles from '../internal/utils/getGlobalFocusStyles' + +const TAB_CLASS = 'TabPanel-tab' +const SELECTED_CLASS = 'selected' const TabContainer = styled(createComponent(React, 'tab-container', TabContainerElement))(sx) +const TabList = styled.div` + display: flex; + margin-bottom: -1px; + overflow: auto; +` + +const TabListWrapper = styled.div` + margin-top: 0; + border-bottom: 1px solid ${get('colors.border.default')}; +` + export type TabPanelsProps = { children: React.ReactNode } & SxProp @@ -52,24 +70,57 @@ function TabPanels({children}: TabPanelsProps) { return ( -
{tabs}
+ + {tabs} + {panels} ) } -export type TabPanelsTabProps = { +export type TabPanelsTabProps = React.DetailedHTMLProps, HTMLButtonElement> & { children: React.ReactNode selected?: boolean } & SxProp -function Tab({children, selected}: TabPanelsTabProps) { - return ( - - ) -} +const Tab = styled.button.attrs(props => ({ + className: clsx(TAB_CLASS, props.className), + role: 'tab', + 'aria-selected': !!props.selected, +}))` + padding: 8px 16px; + font-size: ${get('fontSizes.1')}; + line-height: 23px; + color: ${get('colors.fg.muted')}; + text-decoration: none; + background-color: transparent; + border: 1px solid transparent; + border-bottom: 0; + cursor: pointer; + + ${getGlobalFocusStyles('-6px')}; + + &:hover, + &:focus { + color: ${get('colors.fg.default')}; + text-decoration: none; + } + + &:hover { + transition-duration: 0.1s; + transition-property: color; + } + + &[aria-selected=true] { + color: ${get('colors.fg.default')}; + border-color: ${get('colors.border.default')}; + border-top-right-radius: ${get('radii.2')}; + border-top-left-radius: ${get('radii.2')}; + background-color: ${get('colors.canvas.default')}; + } + + ${sx}; +` as PolymorphicForwardRefComponent<'button', TabPanelsTabProps> Tab.displayName = 'TabPanels.Tab' From ab82ac186a79882cdb5d940e864dd76654f99881 Mon Sep 17 00:00:00 2001 From: Owen Niblock Date: Tue, 13 Feb 2024 11:34:49 +0000 Subject: [PATCH 10/94] Fix Playground --- .../react/src/TabPanels/TabPanels.stories.tsx | 15 ++++++++++++--- packages/react/src/TabPanels/TabPanels.tsx | 9 ++++----- 2 files changed, 16 insertions(+), 8 deletions(-) diff --git a/packages/react/src/TabPanels/TabPanels.stories.tsx b/packages/react/src/TabPanels/TabPanels.stories.tsx index 94b16650e70..c8e5dae67ad 100644 --- a/packages/react/src/TabPanels/TabPanels.stories.tsx +++ b/packages/react/src/TabPanels/TabPanels.stories.tsx @@ -8,10 +8,19 @@ export default { component: TabPanels, } as Meta> -export const Playground: Story> = args => +export const Playground: Story> = args => ( + + Tab 1 + Tab 2 + Tab 3 + Panel 1 + Panel 2 + Panel 3 + +) Playground.args = { - 'aria-label': 'Navigation', + 'aria-label': 'Select a tab', } Playground.argTypes = { 'aria-label': { @@ -20,7 +29,7 @@ Playground.argTypes = { } export const Default = () => ( - + Tab 1 Tab 2 Tab 3 diff --git a/packages/react/src/TabPanels/TabPanels.tsx b/packages/react/src/TabPanels/TabPanels.tsx index cab16dd6091..ed94954c2f6 100644 --- a/packages/react/src/TabPanels/TabPanels.tsx +++ b/packages/react/src/TabPanels/TabPanels.tsx @@ -6,6 +6,7 @@ import {get} from '../constants' import {TabContainerElement} from '@github/tab-container-element' import {createComponent} from '@lit-labs/react' import sx, {SxProp} from '../sx' +import {ComponentProps} from '../utils/types' import getGlobalFocusStyles from '../internal/utils/getGlobalFocusStyles' const TAB_CLASS = 'TabPanel-tab' @@ -24,11 +25,9 @@ const TabListWrapper = styled.div` border-bottom: 1px solid ${get('colors.border.default')}; ` -export type TabPanelsProps = { - children: React.ReactNode -} & SxProp +export type TabPanelsProps = ComponentProps -function TabPanels({children}: TabPanelsProps) { +function TabPanels({children, 'aria-label': ariaLabel}: TabPanelsProps) { const childrenArray = React.Children.toArray(children) let selectedTabIndex = -1 let tabIndex = -1 @@ -71,7 +70,7 @@ function TabPanels({children}: TabPanelsProps) { return ( - {tabs} + {tabs} {panels} From c7f308ae002533bb84d6f1a396615aae69217995 Mon Sep 17 00:00:00 2001 From: Owen Niblock Date: Tue, 13 Feb 2024 11:39:53 +0000 Subject: [PATCH 11/94] Linting --- .../TabPanels/TabPanels.features.stories.tsx | 6 +++-- packages/react/src/TabPanels/TabPanels.tsx | 9 ++++---- .../TabPanels/__tests__/TabPanels.test.tsx | 22 +++++++++---------- 3 files changed, 20 insertions(+), 17 deletions(-) diff --git a/packages/react/src/TabPanels/TabPanels.features.stories.tsx b/packages/react/src/TabPanels/TabPanels.features.stories.tsx index e80a092518d..3ac00e97df3 100644 --- a/packages/react/src/TabPanels/TabPanels.features.stories.tsx +++ b/packages/react/src/TabPanels/TabPanels.features.stories.tsx @@ -8,11 +8,13 @@ export default { component: TabPanels, } as Meta> -export const Selected = () => ( +export const Selected = () => ( + One Two Three One Two Three - ) + +) diff --git a/packages/react/src/TabPanels/TabPanels.tsx b/packages/react/src/TabPanels/TabPanels.tsx index ed94954c2f6..aafb7010c3c 100644 --- a/packages/react/src/TabPanels/TabPanels.tsx +++ b/packages/react/src/TabPanels/TabPanels.tsx @@ -10,7 +10,6 @@ import {ComponentProps} from '../utils/types' import getGlobalFocusStyles from '../internal/utils/getGlobalFocusStyles' const TAB_CLASS = 'TabPanel-tab' -const SELECTED_CLASS = 'selected' const TabContainer = styled(createComponent(React, 'tab-container', TabContainerElement))(sx) @@ -70,7 +69,9 @@ function TabPanels({children, 'aria-label': ariaLabel}: TabPanelsProps) { return ( - {tabs} + + {tabs} + {panels} @@ -101,7 +102,7 @@ const Tab = styled.button.attrs(props => ({ &:hover, &:focus { - color: ${get('colors.fg.default')}; + color: ${get('colors.fg.default')}; text-decoration: none; } @@ -110,7 +111,7 @@ const Tab = styled.button.attrs(props => ({ transition-property: color; } - &[aria-selected=true] { + &[aria-selected='true'] { color: ${get('colors.fg.default')}; border-color: ${get('colors.border.default')}; border-top-right-radius: ${get('radii.2')}; diff --git a/packages/react/src/TabPanels/__tests__/TabPanels.test.tsx b/packages/react/src/TabPanels/__tests__/TabPanels.test.tsx index 7f4c49ad543..1a74e56a2e2 100644 --- a/packages/react/src/TabPanels/__tests__/TabPanels.test.tsx +++ b/packages/react/src/TabPanels/__tests__/TabPanels.test.tsx @@ -1,5 +1,5 @@ import React from 'react' -import { render, screen } from '@testing-library/react' +import {render, screen} from '@testing-library/react' import TabPanels from '../TabPanels' describe('TabPanels', () => { @@ -15,7 +15,7 @@ describe('TabPanels', () => { Tab 2 Panel 1 Panel 2 - + , ) expect(screen.getByText('Tab 1')).toBeInTheDocument() @@ -31,7 +31,7 @@ describe('TabPanels', () => { Tab 2 Panel 1 Panel 2 - + , ) expect(screen.getByText('Tab 1')).toHaveAttribute('aria-selected', 'false') @@ -44,9 +44,9 @@ describe('TabPanels', () => { render( Panel 1 - + , ) - }).toThrowError('TabPanels must have at least one Tab') + }).toThrow('TabPanels must have at least one Tab') }) it('throws an error if there are unequal tabs and panels', () => { @@ -57,33 +57,33 @@ describe('TabPanels', () => { Tab 1 Panel 1 Panel 2 - + , ) - }).toThrowError('TabPanels must have equal Panels and Tabs') + }).toThrow('TabPanels must have equal Panels and Tabs') }) - it ('Adds aria-selected to the first tab by default', () => { + it('Adds aria-selected to the first tab by default', () => { render( Tab 1 Tab 2 Panel 1 Panel 2 - + , ) expect(screen.getByText('Tab 1')).toHaveAttribute('aria-selected', 'true') expect(screen.getByText('Tab 2')).toHaveAttribute('aria-selected', 'false') }) - it ('Adds hidden attribute to the second panel by default', () => { + it('Adds hidden attribute to the second panel by default', () => { render( Tab 1 Tab 2 Panel 1 Panel 2 - + , ) expect(screen.getByText('Panel 1')).not.toHaveAttribute('hidden') From 6c9d3e2bd95ca5702ad3d768a0bf428caa3c8c7f Mon Sep 17 00:00:00 2001 From: Owen Niblock Date: Tue, 13 Feb 2024 17:09:48 +0000 Subject: [PATCH 12/94] Delete TabWrapper and move styling to tablist --- docs/content/TabPanels.mdx | 30 ++++++++++++++++++++++ packages/react/src/TabPanels/TabPanels.tsx | 13 +++------- 2 files changed, 34 insertions(+), 9 deletions(-) create mode 100644 docs/content/TabPanels.mdx diff --git a/docs/content/TabPanels.mdx b/docs/content/TabPanels.mdx new file mode 100644 index 00000000000..89624105063 --- /dev/null +++ b/docs/content/TabPanels.mdx @@ -0,0 +1,30 @@ +--- +componentId: tab_panels +title: TabPanels +status: Alpha +source: https://github.com/primer/react/blob/main/src/TabPanels +--- + +import data from '../../packages/react/src/TabPanels/TabPanels.docs.json' +import DeprecationBanner from '../components/DeprecationBanner' + + + +**Attention:** Make sure to properly label your `TabPanels` with an `aria-label` to provide context about the subject of your `TabPanels`. + +## Examples + +```jsx live + + Tab 1 + Tab 2 + Tab 3 + Panel 1 + Panel 2 + Panel 3 + +``` + +## Props + + diff --git a/packages/react/src/TabPanels/TabPanels.tsx b/packages/react/src/TabPanels/TabPanels.tsx index aafb7010c3c..bb378f932cf 100644 --- a/packages/react/src/TabPanels/TabPanels.tsx +++ b/packages/react/src/TabPanels/TabPanels.tsx @@ -16,10 +16,6 @@ const TabContainer = styled(createComponent(React, 'tab-container', TabContainer const TabList = styled.div` display: flex; margin-bottom: -1px; - overflow: auto; -` - -const TabListWrapper = styled.div` margin-top: 0; border-bottom: 1px solid ${get('colors.border.default')}; ` @@ -68,11 +64,9 @@ function TabPanels({children, 'aria-label': ariaLabel}: TabPanelsProps) { return ( - - - {tabs} - - + + {tabs} + {panels} ) @@ -96,6 +90,7 @@ const Tab = styled.button.attrs(props => ({ background-color: transparent; border: 1px solid transparent; border-bottom: 0; + margin-bottom: -1px; cursor: pointer; ${getGlobalFocusStyles('-6px')}; From 7d4c43c1eebede92511c315c7e957506a4341aa4 Mon Sep 17 00:00:00 2001 From: Owen Niblock Date: Tue, 13 Feb 2024 17:23:03 +0000 Subject: [PATCH 13/94] Add more docs --- .../react/src/TabPanels/TabPanels.docs.json | 51 +++++++++++++++++++ packages/react/src/TabPanels/TabPanels.tsx | 1 - 2 files changed, 51 insertions(+), 1 deletion(-) create mode 100644 packages/react/src/TabPanels/TabPanels.docs.json diff --git a/packages/react/src/TabPanels/TabPanels.docs.json b/packages/react/src/TabPanels/TabPanels.docs.json new file mode 100644 index 00000000000..4993366cc3f --- /dev/null +++ b/packages/react/src/TabPanels/TabPanels.docs.json @@ -0,0 +1,51 @@ +{ + "id": "tab_panels", + "name": "TabPanels", + "status": "alpha", + "a11yReviewed": false, + "stories": [], + "props": [ + { + "name": "aria-label", + "type": "string", + "description": "Used to set the `aria-label` on the `role=\"tablist\"` element." + }, + { + "name": "sx", + "type": "SystemStyleObject" + } + ], + "subcomponents": [ + { + "name": "TabPanels.Tab", + "props": [ + { + "name": "selected", + "type": "boolean" + }, + { + "name": "sx", + "type": "SystemStyleObject" + } + ] + }, + { + "name": "TabPanels.Panel", + "props": [ + { + "name": "children", + "type": "React.ReactNode", + "description": "The content of the panel." + }, + { + "name": "selected", + "type": "boolean" + }, + { + "name": "sx", + "type": "SystemStyleObject" + } + ] + } + ] +} \ No newline at end of file diff --git a/packages/react/src/TabPanels/TabPanels.tsx b/packages/react/src/TabPanels/TabPanels.tsx index bb378f932cf..1ddf2a48bae 100644 --- a/packages/react/src/TabPanels/TabPanels.tsx +++ b/packages/react/src/TabPanels/TabPanels.tsx @@ -73,7 +73,6 @@ function TabPanels({children, 'aria-label': ariaLabel}: TabPanelsProps) { } export type TabPanelsTabProps = React.DetailedHTMLProps, HTMLButtonElement> & { - children: React.ReactNode selected?: boolean } & SxProp From ff9ff72733bc1fc2f0c357cda7efde425dc4bfd8 Mon Sep 17 00:00:00 2001 From: Owen Niblock Date: Tue, 13 Feb 2024 17:27:27 +0000 Subject: [PATCH 14/94] Format --- docs/content/TabPanels.mdx | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/docs/content/TabPanels.mdx b/docs/content/TabPanels.mdx index 89624105063..02e66b8a791 100644 --- a/docs/content/TabPanels.mdx +++ b/docs/content/TabPanels.mdx @@ -15,14 +15,14 @@ import DeprecationBanner from '../components/DeprecationBanner' ## Examples ```jsx live - - Tab 1 - Tab 2 - Tab 3 - Panel 1 - Panel 2 - Panel 3 - + + Tab 1 + Tab 2 + Tab 3 + Panel 1 + Panel 2 + Panel 3 + ``` ## Props From 2a91ed1a2ca40bd4897480f31076f51ba7ca2896 Mon Sep 17 00:00:00 2001 From: Owen Niblock Date: Tue, 13 Feb 2024 17:31:52 +0000 Subject: [PATCH 15/94] Changeset --- .changeset/eight-olives-play.md | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 .changeset/eight-olives-play.md diff --git a/.changeset/eight-olives-play.md b/.changeset/eight-olives-play.md new file mode 100644 index 00000000000..9d0db6efedc --- /dev/null +++ b/.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. From c949c97868b9511732f8a551b48264ba5a65924d Mon Sep 17 00:00:00 2001 From: Owen Niblock Date: Tue, 13 Feb 2024 17:35:54 +0000 Subject: [PATCH 16/94] Add to the docs nav --- docs/src/@primer/gatsby-theme-doctocat/nav.yml | 2 ++ 1 file changed, 2 insertions(+) diff --git a/docs/src/@primer/gatsby-theme-doctocat/nav.yml b/docs/src/@primer/gatsby-theme-doctocat/nav.yml index 019c727566f..af87914afa1 100644 --- a/docs/src/@primer/gatsby-theme-doctocat/nav.yml +++ b/docs/src/@primer/gatsby-theme-doctocat/nav.yml @@ -132,6 +132,8 @@ url: /ToggleSwitch - title: TabNav url: /TabNav + - title: TabPanels + url: /TabPanels - title: Textarea url: /Textarea - title: Text From 841b7de4283133139f193f5ce63442174358ddfd Mon Sep 17 00:00:00 2001 From: Owen Niblock Date: Tue, 13 Feb 2024 17:41:56 +0000 Subject: [PATCH 17/94] Adds e2e tests --- e2e/components/Dialog v1.test.ts | 33 ++++++++++++++++++++++++++++++++ e2e/components/TabPages.test.ts | 33 ++++++++++++++++++++++++++++++++ script/generate-e2e-tests.js | 11 +++++++++++ 3 files changed, 77 insertions(+) create mode 100644 e2e/components/Dialog v1.test.ts create mode 100644 e2e/components/TabPages.test.ts diff --git a/e2e/components/Dialog v1.test.ts b/e2e/components/Dialog v1.test.ts new file mode 100644 index 00000000000..cec3ee51ab1 --- /dev/null +++ b/e2e/components/Dialog v1.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('Dialog v1', () => { + test.describe('Default', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-dialogv1--default', + globals: { + colorScheme: theme, + }, + }) + + // Default state + expect(await page.screenshot()).toMatchSnapshot(`Dialog v1.Default.${theme}.png`) + }) + + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-dialogv1--default', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations() + }) + }) + } + }) +}) diff --git a/e2e/components/TabPages.test.ts b/e2e/components/TabPages.test.ts new file mode 100644 index 00000000000..65c665be111 --- /dev/null +++ b/e2e/components/TabPages.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('TabPages', () => { + test.describe('Default', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-tabpages--default', + globals: { + colorScheme: theme, + }, + }) + + // Default state + expect(await page.screenshot()).toMatchSnapshot(`TabPages.Default.${theme}.png`) + }) + + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-tabpages--default', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations() + }) + }) + } + }) +}) diff --git a/script/generate-e2e-tests.js b/script/generate-e2e-tests.js index 4f7ee9f35ea..6fb5c88c271 100644 --- a/script/generate-e2e-tests.js +++ b/script/generate-e2e-tests.js @@ -1358,6 +1358,17 @@ const components = new Map([ ], }, ], + [ + 'TabPages', + { + stories: [ + { + id: 'components-tabpages--default', + name: 'Default', + }, + ], + }, + ], [ 'Timeline', { From 6b768216a99df719506b607d33c912346da87edf Mon Sep 17 00:00:00 2001 From: Owen Niblock Date: Tue, 13 Feb 2024 17:55:25 +0000 Subject: [PATCH 18/94] More scaffolding stuff --- packages/react/src/TabPanels/index.ts | 1 + packages/react/src/index.ts | 2 ++ 2 files changed, 3 insertions(+) diff --git a/packages/react/src/TabPanels/index.ts b/packages/react/src/TabPanels/index.ts index 5758ea565a9..483de0e2b8f 100644 --- a/packages/react/src/TabPanels/index.ts +++ b/packages/react/src/TabPanels/index.ts @@ -1 +1,2 @@ export {default} from './TabPanels' +export type {TabPanelsProps, TabPanelsTabProps, TabPanelsPanelProps} from './TabPanels' diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts index 16c9d5c7e86..cebfea7b6b5 100644 --- a/packages/react/src/index.ts +++ b/packages/react/src/index.ts @@ -151,6 +151,8 @@ export type {SubNavProps, SubNavLinkProps, SubNavLinksProps} from './SubNav' export {default as ToggleSwitch} from './ToggleSwitch' export {default as TabNav} from './TabNav' export type {TabNavProps, TabNavLinkProps} from './TabNav' +export {default as TabPages} from './TabPanels' +export type {TabPanelsProps, TabPanelsTabProps, TabPanelsPanelProps} from './TabPanels' export {default as TextInput} from './TextInput' export type {TextInputProps} from './TextInput' export {default as TextInputWithTokens} from './TextInputWithTokens' From ce214689edcd1bf0e52eb40e5dcb7ba39114d20f Mon Sep 17 00:00:00 2001 From: Owen Niblock Date: Thu, 15 Feb 2024 13:01:43 +0000 Subject: [PATCH 19/94] Fix error with docs reference --- packages/react/src/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts index cebfea7b6b5..5dd739a37a2 100644 --- a/packages/react/src/index.ts +++ b/packages/react/src/index.ts @@ -151,7 +151,7 @@ export type {SubNavProps, SubNavLinkProps, SubNavLinksProps} from './SubNav' export {default as ToggleSwitch} from './ToggleSwitch' export {default as TabNav} from './TabNav' export type {TabNavProps, TabNavLinkProps} from './TabNav' -export {default as TabPages} from './TabPanels' +export {default as TabPanels} from './TabPanels' export type {TabPanelsProps, TabPanelsTabProps, TabPanelsPanelProps} from './TabPanels' export {default as TextInput} from './TextInput' export type {TextInputProps} from './TextInput' From f3efcb71fe2a54ef6644afc115e230f2415f96f6 Mon Sep 17 00:00:00 2001 From: Owen Niblock Date: Thu, 15 Feb 2024 14:54:06 +0000 Subject: [PATCH 20/94] Update @github/tab-container-element so we can use it with SSR --- package-lock.json | 8 ++++---- packages/react/package.json | 2 +- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package-lock.json b/package-lock.json index 34f93708510..6571547bdbd 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4965,9 +4965,9 @@ "integrity": "sha512-+tFjX9//HRS1HnBa5cNgfEtE52arwiutYg1TOF+Trk40SPxst9Q8Rtc3BKD6aKsvfbtub68vfhipgchGjj9o7g==" }, "node_modules/@github/tab-container-element": { - "version": "3.3.0", - "resolved": "https://registry.npmjs.org/@github/tab-container-element/-/tab-container-element-3.3.0.tgz", - "integrity": "sha512-vHlN/GXgaJFJhh4oUYRh1pc4RAqduKlQOrEjVgSxR4JhLXsQcZ/hKWfCsRZAuZbSPzUGEYvggdieamS4FRSe4g==" + "version": "3.4.0", + "resolved": "https://registry.npmjs.org/@github/tab-container-element/-/tab-container-element-3.4.0.tgz", + "integrity": "sha512-Yx70pO8A0p7Stnm9knKkUNX8i4bjuwDYZarRkM8JH0Z+ffhpe++oNAPbzGI9GEcGugRHvKuSC6p4YOdoHtTniQ==" }, "node_modules/@graphql-tools/batch-execute": { "version": "7.1.2", @@ -61910,7 +61910,7 @@ "@github/markdown-toolbar-element": "^2.1.0", "@github/paste-markdown": "^1.4.0", "@github/relative-time-element": "^4.1.2", - "@github/tab-container-element": "3.3.0", + "@github/tab-container-element": "^3.4.0", "@lit-labs/react": "^1.1.1", "@oddbird/popover-polyfill": "^0.3.1", "@primer/behaviors": "^1.5.1", diff --git a/packages/react/package.json b/packages/react/package.json index d7b57172065..4ca2c9f8b3c 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -83,7 +83,7 @@ "@github/markdown-toolbar-element": "^2.1.0", "@github/paste-markdown": "^1.4.0", "@github/relative-time-element": "^4.1.2", - "@github/tab-container-element": "^3.3.0", + "@github/tab-container-element": "^3.4.0", "@lit-labs/react": "^1.1.1", "@oddbird/popover-polyfill": "^0.3.1", "@primer/behaviors": "^1.5.1", From c11dcea6fead4c0440efe11a627ee13829beb87a Mon Sep 17 00:00:00 2001 From: Owen Niblock Date: Thu, 15 Feb 2024 15:00:14 +0000 Subject: [PATCH 21/94] Use type imports for type imports --- packages/react/src/TabPanels/TabPanels.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/react/src/TabPanels/TabPanels.tsx b/packages/react/src/TabPanels/TabPanels.tsx index 1ddf2a48bae..c646275fe7b 100644 --- a/packages/react/src/TabPanels/TabPanels.tsx +++ b/packages/react/src/TabPanels/TabPanels.tsx @@ -1,12 +1,12 @@ -import {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic' +import {type ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic' import clsx from 'clsx' import React from 'react' import styled from 'styled-components' import {get} from '../constants' import {TabContainerElement} from '@github/tab-container-element' import {createComponent} from '@lit-labs/react' -import sx, {SxProp} from '../sx' -import {ComponentProps} from '../utils/types' +import sx, {type SxProp} from '../sx' +import {type ComponentProps} from '../utils/types' import getGlobalFocusStyles from '../internal/utils/getGlobalFocusStyles' const TAB_CLASS = 'TabPanel-tab' From 5d5d21b23dd64481bc109462cc09383ca07617e4 Mon Sep 17 00:00:00 2001 From: Owen Niblock Date: Thu, 15 Feb 2024 15:24:41 +0000 Subject: [PATCH 22/94] More type imports --- packages/react/src/TabPanels/TabPanels.features.stories.tsx | 4 ++-- packages/react/src/TabPanels/TabPanels.stories.tsx | 4 ++-- packages/react/src/TabPanels/TabPanels.tsx | 4 ++-- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/react/src/TabPanels/TabPanels.features.stories.tsx b/packages/react/src/TabPanels/TabPanels.features.stories.tsx index 3ac00e97df3..46101ce92be 100644 --- a/packages/react/src/TabPanels/TabPanels.features.stories.tsx +++ b/packages/react/src/TabPanels/TabPanels.features.stories.tsx @@ -1,7 +1,7 @@ import React from 'react' -import {Meta} from '@storybook/react' +import type {Meta} from '@storybook/react' import TabPanels from './TabPanels' -import {ComponentProps} from '../utils/types' +import type {ComponentProps} from '../utils/types' export default { title: 'Components/TabPanels/Features', diff --git a/packages/react/src/TabPanels/TabPanels.stories.tsx b/packages/react/src/TabPanels/TabPanels.stories.tsx index c8e5dae67ad..b578134c414 100644 --- a/packages/react/src/TabPanels/TabPanels.stories.tsx +++ b/packages/react/src/TabPanels/TabPanels.stories.tsx @@ -1,7 +1,7 @@ import React from 'react' -import {Meta, Story} from '@storybook/react' +import type {Meta, Story} from '@storybook/react' import TabPanels from './TabPanels' -import {ComponentProps} from '../utils/types' +import type {ComponentProps} from '../utils/types' export default { title: 'Components/TabPanels', diff --git a/packages/react/src/TabPanels/TabPanels.tsx b/packages/react/src/TabPanels/TabPanels.tsx index c646275fe7b..e3fd38ee3c3 100644 --- a/packages/react/src/TabPanels/TabPanels.tsx +++ b/packages/react/src/TabPanels/TabPanels.tsx @@ -1,4 +1,4 @@ -import {type ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic' +import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic' import clsx from 'clsx' import React from 'react' import styled from 'styled-components' @@ -6,7 +6,7 @@ import {get} from '../constants' import {TabContainerElement} from '@github/tab-container-element' import {createComponent} from '@lit-labs/react' import sx, {type SxProp} from '../sx' -import {type ComponentProps} from '../utils/types' +import type {ComponentProps} from '../utils/types' import getGlobalFocusStyles from '../internal/utils/getGlobalFocusStyles' const TAB_CLASS = 'TabPanel-tab' From 999a81554bbe8d7e4046f20552612fc92032bc72 Mon Sep 17 00:00:00 2001 From: Owen Niblock Date: Thu, 15 Feb 2024 16:04:48 +0000 Subject: [PATCH 23/94] Fix TabPanels tests --- e2e/components/{TabPages.test.ts => TabPanels.test.ts} | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) rename e2e/components/{TabPages.test.ts => TabPanels.test.ts} (82%) diff --git a/e2e/components/TabPages.test.ts b/e2e/components/TabPanels.test.ts similarity index 82% rename from e2e/components/TabPages.test.ts rename to e2e/components/TabPanels.test.ts index 65c665be111..71a13f05eee 100644 --- a/e2e/components/TabPages.test.ts +++ b/e2e/components/TabPanels.test.ts @@ -2,25 +2,25 @@ import {test, expect} from '@playwright/test' import {visit} from '../test-helpers/storybook' import {themes} from '../test-helpers/themes' -test.describe('TabPages', () => { +test.describe('TabPanels', () => { test.describe('Default', () => { for (const theme of themes) { test.describe(theme, () => { test('default @vrt', async ({page}) => { await visit(page, { - id: 'components-tabpages--default', + id: 'components-tabpanels--default', globals: { colorScheme: theme, }, }) // Default state - expect(await page.screenshot()).toMatchSnapshot(`TabPages.Default.${theme}.png`) + expect(await page.screenshot()).toMatchSnapshot(`TabPanels.Default.${theme}.png`) }) test('axe @aat', async ({page}) => { await visit(page, { - id: 'components-tabpages--default', + id: 'components-tabpanels--default', globals: { colorScheme: theme, }, From 6f6e0819137e5bbcda8904a3276402ff636cc842 Mon Sep 17 00:00:00 2001 From: owenniblock Date: Thu, 15 Feb 2024 16:11:05 +0000 Subject: [PATCH 24/94] test(vrt): update snapshots --- .../Dialog-v1-Default-dark-colorblind-linux.png | Bin 0 -> 7228 bytes .../Dialog-v1-Default-dark-dimmed-linux.png | Bin 0 -> 7190 bytes ...ialog-v1-Default-dark-high-contrast-linux.png | Bin 0 -> 7246 bytes .../Dialog-v1-Default-dark-linux.png | Bin 0 -> 7228 bytes .../Dialog-v1-Default-dark-tritanopia-linux.png | Bin 0 -> 7228 bytes .../Dialog-v1-Default-light-colorblind-linux.png | Bin 0 -> 7294 bytes ...alog-v1-Default-light-high-contrast-linux.png | Bin 0 -> 7347 bytes .../Dialog-v1-Default-light-linux.png | Bin 0 -> 7297 bytes .../Dialog-v1-Default-light-tritanopia-linux.png | Bin 0 -> 7294 bytes .../TabPanels-Default-dark-colorblind-linux.png | Bin 0 -> 8551 bytes .../TabPanels-Default-dark-dimmed-linux.png | Bin 0 -> 8487 bytes ...abPanels-Default-dark-high-contrast-linux.png | Bin 0 -> 8508 bytes .../TabPanels-Default-dark-linux.png | Bin 0 -> 8532 bytes .../TabPanels-Default-dark-tritanopia-linux.png | Bin 0 -> 8551 bytes .../TabPanels-Default-light-colorblind-linux.png | Bin 0 -> 8553 bytes ...bPanels-Default-light-high-contrast-linux.png | Bin 0 -> 8530 bytes .../TabPanels-Default-light-linux.png | Bin 0 -> 8557 bytes .../TabPanels-Default-light-tritanopia-linux.png | Bin 0 -> 8553 bytes 18 files changed, 0 insertions(+), 0 deletions(-) create mode 100644 .playwright/snapshots/components/Dialog v1.test.ts-snapshots/Dialog-v1-Default-dark-colorblind-linux.png create mode 100644 .playwright/snapshots/components/Dialog v1.test.ts-snapshots/Dialog-v1-Default-dark-dimmed-linux.png create mode 100644 .playwright/snapshots/components/Dialog v1.test.ts-snapshots/Dialog-v1-Default-dark-high-contrast-linux.png create mode 100644 .playwright/snapshots/components/Dialog v1.test.ts-snapshots/Dialog-v1-Default-dark-linux.png create mode 100644 .playwright/snapshots/components/Dialog v1.test.ts-snapshots/Dialog-v1-Default-dark-tritanopia-linux.png create mode 100644 .playwright/snapshots/components/Dialog v1.test.ts-snapshots/Dialog-v1-Default-light-colorblind-linux.png create mode 100644 .playwright/snapshots/components/Dialog v1.test.ts-snapshots/Dialog-v1-Default-light-high-contrast-linux.png create mode 100644 .playwright/snapshots/components/Dialog v1.test.ts-snapshots/Dialog-v1-Default-light-linux.png create mode 100644 .playwright/snapshots/components/Dialog v1.test.ts-snapshots/Dialog-v1-Default-light-tritanopia-linux.png create mode 100644 .playwright/snapshots/components/TabPanels.test.ts-snapshots/TabPanels-Default-dark-colorblind-linux.png create mode 100644 .playwright/snapshots/components/TabPanels.test.ts-snapshots/TabPanels-Default-dark-dimmed-linux.png create mode 100644 .playwright/snapshots/components/TabPanels.test.ts-snapshots/TabPanels-Default-dark-high-contrast-linux.png create mode 100644 .playwright/snapshots/components/TabPanels.test.ts-snapshots/TabPanels-Default-dark-linux.png create mode 100644 .playwright/snapshots/components/TabPanels.test.ts-snapshots/TabPanels-Default-dark-tritanopia-linux.png create mode 100644 .playwright/snapshots/components/TabPanels.test.ts-snapshots/TabPanels-Default-light-colorblind-linux.png create mode 100644 .playwright/snapshots/components/TabPanels.test.ts-snapshots/TabPanels-Default-light-high-contrast-linux.png create mode 100644 .playwright/snapshots/components/TabPanels.test.ts-snapshots/TabPanels-Default-light-linux.png create mode 100644 .playwright/snapshots/components/TabPanels.test.ts-snapshots/TabPanels-Default-light-tritanopia-linux.png diff --git a/.playwright/snapshots/components/Dialog v1.test.ts-snapshots/Dialog-v1-Default-dark-colorblind-linux.png b/.playwright/snapshots/components/Dialog v1.test.ts-snapshots/Dialog-v1-Default-dark-colorblind-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..a44d202234138fceaf82e80c485f20d067b2ce03 GIT binary patch literal 7228 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 literal 0 HcmV?d00001 diff --git a/.playwright/snapshots/components/Dialog v1.test.ts-snapshots/Dialog-v1-Default-dark-high-contrast-linux.png b/.playwright/snapshots/components/Dialog v1.test.ts-snapshots/Dialog-v1-Default-dark-high-contrast-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..beac3be46706e22ddec6b31f5a2e9a49a65fe6d3 GIT binary patch literal 7246 zcmeHM`&ScZ8jhs}Eyb*5mC7ykSoL%fS?fmR8Wj;K0t!SF4DnJ05(A|e0t6B-t?WvH zwv?bC0i_BgAyFZqKoVUPtdIbbWHgX)69@@O5OR@(Bs=u zJ25QzKA z@O^vYvTvxQ#9sk?Rredig&m)if4BRyzklKAyymABK2_2$nox$gv)3gUjFKXvTyLZ# zFg;sOUvW7`Xr*?h*(TGp}B_bl-Qj|0Jcc%io z!@*={H|KwjvGE=WFxt{Se%OnY>yd%s5(`3=Y5R zHv3&a6gH6L77$=M<(SWC$_yz=fxVKiUrxck-CcXx-YLtjBPgzq;!WKNo}Bx1(htM{ zwChG*$P*Y6NyC)Xwi)@|@{i!sPD<2`m|ovY@$fFVgga$I$8 zt`j8j9DtyyPwP%q?5sx%+$A7fUAr2`Tj7Ff8 zKzjY+f`(O@X4xNPl-DAW?1#k6D)Y?};d7*yo8MaSDG@PFj>f`mODU1pvJaqgCgE)D zy)*EXxkvtsPg;TAzTW!5C`1#*Cw;a_mHuGNOQ&fSFewy@>yEPrtIm(F!cP>T8HGOF z-_&i&Eux{J#D(dRk^Uku@ufGIqx~?_lQH~Yq%W{!A|F8_-F&me)4|qgcHZK=B7f?- zN`p;JYw!xz{a&$CRj-f@BLTs+V}zx-Ffdomv!8YM90jc6kS$_XOEAiD-B!kWfON+{ zAONdxO%|~MJ_BZb%cRjN{1zmxe)l<10jgda&0k&<4>$qjo5kkB30hs<^f41vp`gLB z;v-1W{G^vc-L7dUxj~FV<-G~TYdCdrJr^iO7A&td3SnkpXHJ)h?w;&aTyhl9JE4^c zd_JH3?SLI#Cj!JYWOSf%c6tbf#LtJPvkW{d1Cy4|_@>ov&4#6%}If5zsh8;4GJb7{e* zS7Zj*C%JnvM4CMTU?hjh3Etk`aDr^9VyUtQk-hXF!BSYJ8x1L>*G>Syor5#=CUs?d zY^877EJNoe2I|fF{9;5O8$ZzP(*UL-j*SjNj#w>Z@doGBB(W(e#V`=YV|wPMWJq(S zQS6)rit$BxT0N7Wn1$H_&WTUHlj)gR!d5Ce7Pi&v^=t4?))W9IWBnB`A`pj_0RhV4 z%sv(y3xLz`yo|@08K!viRu55D@Zq`IdgG)~$Ick+Qn3)+**6M+g)VY`m6SOxpcf)C zPO?Fco{X&%Ui!fiBbA_!gmu3*zCl@09v-DiG?&y9rBRQt$hzQeE2ZSK?Hz)}eh1}G zt0w4V9!b;@pD9WY4xejJN+Fo$#@KmJ(>1WWxS^JWdHF9@vQ-esqlm;#SYqp0zGS(! zqP2r8rgJnY8IFwQD1RJm<#BOC0vLKBcErtw1~%_LN&sNrXmSTB9SQGoGHbLaalmm6NU$?Ko-9zm<}W30MRRZI z*Y9NLW$ic<+b$_*w@$AI$-}d(whZSiU=+e)#kIhObzAdlNS1|7_(xt{!s?ExXBA|t zS=Xx>&eJ^IH9ZRzK40slyyyTM9?K<~{w+x#`5E8iJ+cfTkn+1y{|jp-hD={^HIvm| z-;Q3SqCrJ{RP6excKP8mCRWqd0|!~1Py|CV6ehg3-2|l8RV9Q)5^>AW@X789fqFAH zMU;yR`W7oOI9%hJPD6u%s#CX36vL2)DLxVjC#aYF)%*nE^4l)|?j%RWOD^Cguqa0afVRGKhQq(}lH+5Q3& zS#2Hetq35Hq;JbuD($f?)w%om9aHn%8=wz)+;ztty( zK!|TlY`?S4axTp~=bMb$X)ye*n=W#b34Ewj$b!_e zY`C)F%7&|V`GLg7C>x_}jIuH6U3_e{X^BlsY+7Q|5}TI1mw#FBNnZP{A8>uQXRoyu SfnRmNOou3_tkvS) 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 AzW@LL literal 0 HcmV?d00001 diff --git a/.playwright/snapshots/components/Dialog v1.test.ts-snapshots/Dialog-v1-Default-light-high-contrast-linux.png b/.playwright/snapshots/components/Dialog v1.test.ts-snapshots/Dialog-v1-Default-light-high-contrast-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..957f56579ba6a0f85776fe5407744e95d03f38f9 GIT binary patch literal 7347 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 RTM_~}b~N?~=g{fP{{{#+^H~4@ literal 0 HcmV?d00001 diff --git a/.playwright/snapshots/components/Dialog v1.test.ts-snapshots/Dialog-v1-Default-light-linux.png b/.playwright/snapshots/components/Dialog v1.test.ts-snapshots/Dialog-v1-Default-light-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..dc2bcfc86d7409aa684e99801e3fe9955ac26ef3 GIT binary patch literal 7297 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 AzW@LL literal 0 HcmV?d00001 diff --git a/.playwright/snapshots/components/TabPanels.test.ts-snapshots/TabPanels-Default-dark-colorblind-linux.png b/.playwright/snapshots/components/TabPanels.test.ts-snapshots/TabPanels-Default-dark-colorblind-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..aed8c0c94ffa4432530fdf164afde701d48c9add GIT binary patch literal 8551 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 Z6|jHVI)C{Z)^#d!=<6c~_+Nc{@t=V#ah(7F literal 0 HcmV?d00001 diff --git a/.playwright/snapshots/components/TabPanels.test.ts-snapshots/TabPanels-Default-dark-dimmed-linux.png b/.playwright/snapshots/components/TabPanels.test.ts-snapshots/TabPanels-Default-dark-dimmed-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..fd3d58cdc09c41a72b9c2fb69589da717170a08e GIT binary patch literal 8487 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 literal 0 HcmV?d00001 diff --git a/.playwright/snapshots/components/TabPanels.test.ts-snapshots/TabPanels-Default-dark-high-contrast-linux.png b/.playwright/snapshots/components/TabPanels.test.ts-snapshots/TabPanels-Default-dark-high-contrast-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..28697b4ba3e50373dd8f33e9dd8fdd9bd1f70bcc GIT binary patch literal 8508 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 aiu}fnR|507(*Rq5j(!z+i2dd1EB^wTt+lHF literal 0 HcmV?d00001 diff --git a/.playwright/snapshots/components/TabPanels.test.ts-snapshots/TabPanels-Default-dark-tritanopia-linux.png b/.playwright/snapshots/components/TabPanels.test.ts-snapshots/TabPanels-Default-dark-tritanopia-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..aed8c0c94ffa4432530fdf164afde701d48c9add GIT binary patch literal 8551 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 Z6|jHVI)C{Z)^#d!=<6c~_+Nc{@t=V#ah(7F literal 0 HcmV?d00001 diff --git a/.playwright/snapshots/components/TabPanels.test.ts-snapshots/TabPanels-Default-light-colorblind-linux.png b/.playwright/snapshots/components/TabPanels.test.ts-snapshots/TabPanels-Default-light-colorblind-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..a741deb0bb28c84f571f48cd457d943ad0aca796 GIT binary patch literal 8553 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 ycdvE-j4Y|xMlJYVz#a5Kt@&d*|Ged0 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 w{9 Date: Thu, 15 Feb 2024 17:35:42 +0000 Subject: [PATCH 25/94] Update test snapshot --- .../react/src/__tests__/__snapshots__/exports.test.ts.snap | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/react/src/__tests__/__snapshots__/exports.test.ts.snap b/packages/react/src/__tests__/__snapshots__/exports.test.ts.snap index 037ad161509..b97aa6e3dc7 100644 --- a/packages/react/src/__tests__/__snapshots__/exports.test.ts.snap +++ b/packages/react/src/__tests__/__snapshots__/exports.test.ts.snap @@ -150,6 +150,10 @@ exports[`@primer/react should not update exports without a semver change 1`] = ` "TabNav", "type TabNavLinkProps", "type TabNavProps", + "TabPanels", + "type TabPanelsPanelProps", + "type TabPanelsProps", + "type TabPanelsTabProps", "Text", "Textarea", "type TextareaProps", From 0a164f96a355efcfed5a25329a5114f6f178fb0b Mon Sep 17 00:00:00 2001 From: Owen Niblock Date: Mon, 19 Feb 2024 19:38:34 +0000 Subject: [PATCH 26/94] Use the new shadowdom version of tab-container-element --- package-lock.json | 10 +++- packages/react/package.json | 2 +- .../TabPanels/TabPanels.features.stories.tsx | 14 ++++++ packages/react/src/TabPanels/TabPanels.tsx | 48 ++----------------- 4 files changed, 26 insertions(+), 48 deletions(-) diff --git a/package-lock.json b/package-lock.json index 6571547bdbd..0cff0fe941b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4967,7 +4967,8 @@ "node_modules/@github/tab-container-element": { "version": "3.4.0", "resolved": "https://registry.npmjs.org/@github/tab-container-element/-/tab-container-element-3.4.0.tgz", - "integrity": "sha512-Yx70pO8A0p7Stnm9knKkUNX8i4bjuwDYZarRkM8JH0Z+ffhpe++oNAPbzGI9GEcGugRHvKuSC6p4YOdoHtTniQ==" + "integrity": "sha512-Yx70pO8A0p7Stnm9knKkUNX8i4bjuwDYZarRkM8JH0Z+ffhpe++oNAPbzGI9GEcGugRHvKuSC6p4YOdoHtTniQ==", + "dev": true }, "node_modules/@graphql-tools/batch-execute": { "version": "7.1.2", @@ -61910,7 +61911,7 @@ "@github/markdown-toolbar-element": "^2.1.0", "@github/paste-markdown": "^1.4.0", "@github/relative-time-element": "^4.1.2", - "@github/tab-container-element": "^3.4.0", + "@github/tab-container-element": "4.0.1", "@lit-labs/react": "^1.1.1", "@oddbird/popover-polyfill": "^0.3.1", "@primer/behaviors": "^1.5.1", @@ -62070,6 +62071,11 @@ } } }, + "packages/react/node_modules/@github/tab-container-element": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/@github/tab-container-element/-/tab-container-element-4.0.1.tgz", + "integrity": "sha512-TiWCo2KJNYc+yD8PfvMP2DxfAW8diZdce/3lja2t3x3w6JcrL8ip//3y65OUrf5YhaGuSl9+k9aPpkVGQ00ONQ==" + }, "packages/react/node_modules/@rollup/plugin-commonjs": { "version": "25.0.4", "resolved": "https://registry.npmjs.org/@rollup/plugin-commonjs/-/plugin-commonjs-25.0.4.tgz", diff --git a/packages/react/package.json b/packages/react/package.json index 4ca2c9f8b3c..8c8e98ba110 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -83,7 +83,7 @@ "@github/markdown-toolbar-element": "^2.1.0", "@github/paste-markdown": "^1.4.0", "@github/relative-time-element": "^4.1.2", - "@github/tab-container-element": "^3.4.0", + "@github/tab-container-element": "^4.0.1", "@lit-labs/react": "^1.1.1", "@oddbird/popover-polyfill": "^0.3.1", "@primer/behaviors": "^1.5.1", diff --git a/packages/react/src/TabPanels/TabPanels.features.stories.tsx b/packages/react/src/TabPanels/TabPanels.features.stories.tsx index 46101ce92be..f9fa918dde0 100644 --- a/packages/react/src/TabPanels/TabPanels.features.stories.tsx +++ b/packages/react/src/TabPanels/TabPanels.features.stories.tsx @@ -2,6 +2,7 @@ import React from 'react' import type {Meta} from '@storybook/react' import TabPanels from './TabPanels' import type {ComponentProps} from '../utils/types' +import { Button } from '../Button' export default { title: 'Components/TabPanels/Features', @@ -14,7 +15,20 @@ export const Selected = () => ( Two Three One + Two + Three + +) + +export const AdditionalContent = () => ( + + One + Two + Three + + One Two Three +
Additional content after the panels
 ) diff --git a/packages/react/src/TabPanels/TabPanels.tsx b/packages/react/src/TabPanels/TabPanels.tsx index e3fd38ee3c3..3e2d8298324 100644 --- a/packages/react/src/TabPanels/TabPanels.tsx +++ b/packages/react/src/TabPanels/TabPanels.tsx @@ -23,51 +23,9 @@ const TabList = styled.div` export type TabPanelsProps = ComponentProps function TabPanels({children, 'aria-label': ariaLabel}: TabPanelsProps) { - const childrenArray = React.Children.toArray(children) - let selectedTabIndex = -1 - let tabIndex = -1 - - for (const child of childrenArray) { - if (React.isValidElement(child) && child.type === Tab) { - tabIndex += 1 - if (child.props.selected === true) { - selectedTabIndex = tabIndex - break - } - } - } - - if (tabIndex === -1) { - throw new Error('TabPanels must have at least one Tab') - } - - selectedTabIndex = Math.max(selectedTabIndex, 0) - tabIndex = -1 - let panelIndex = -1 - - const tabs: JSX.Element[] = [] - const panels: JSX.Element[] = [] - for (const child of childrenArray) { - if (React.isValidElement(child) && child.type === Tab) { - tabIndex += 1 - tabs.push(React.cloneElement(child, {selected: tabIndex === selectedTabIndex})) - } - if (React.isValidElement(child) && child.type === Panel) { - panelIndex += 1 - panels.push(React.cloneElement(child, {selected: panelIndex === selectedTabIndex})) - } - } - - if (tabIndex !== panelIndex) { - throw new Error('TabPanels must have equal Panels and Tabs') - } - return ( - - - {tabs} - - {panels} + + {children} ) } @@ -125,7 +83,7 @@ export type TabPanelsPanelProps = { function Panel({children, selected}: TabPanelsPanelProps) { return ( -