,
+// tabs: [
+// {
+// name: 'tab1',
+// title: 'Tab 1',
+// },
+// {
+// name: 'tab2',
+// title: 'Tab 2',
+// },
+// ],
+// selectOnMove: false,
+// };
diff --git a/packages/components/src/tabs/types.ts b/packages/components/src/tabs/types.ts
new file mode 100644
index 0000000000000..981ed60852cc5
--- /dev/null
+++ b/packages/components/src/tabs/types.ts
@@ -0,0 +1,193 @@
+/**
+ * External dependencies
+ */
+import type * as Ariakit from '@ariakit/react';
+
+/**
+ * Internal dependencies
+ */
+import type { IconType } from '../icon';
+
+type Tab = {
+ /**
+ * The key of the tab. Also used in the id of the tab button and the
+ * corresponding tabpanel.
+ */
+ id: string;
+ /**
+ * The label of the tab.
+ */
+ title: string;
+ /**
+ * The content to be displayed in the tabpanel when this tab is selected.
+ */
+ content: React.ReactNode;
+ /**
+ * Optional props to be applied to the tab button.
+ */
+ tab?: {
+ /**
+ * The class name to apply to the tab button.
+ */
+ className?: string;
+ /**
+ * The icon used for the tab button.
+ */
+ icon?: IconType;
+ /**
+ * Determines if the tab button should be disabled.
+ */
+ disabled?: boolean;
+ };
+ // TODO: evaluate if this is needed
+ /**
+ * Optional props to be applied to the tabpanel.
+ */
+} & Record< any, any >;
+
+export type TabsContextProps =
+ | {
+ /**
+ * The tabStore object returned by Ariakit's `useTabStore` hook.
+ */
+ store: Ariakit.TabStore;
+ /**
+ * The class name to add to the active tab.
+ */
+ activeClass: string;
+ /**
+ * The unique id string for this instance of the Tabs component.
+ */
+ instanceId: string;
+ }
+ | undefined;
+
+export type TabsProps =
+ // Because providing a tabs array will automatically render all of the
+ // subcomponents, we need to make sure that the children prop is not also
+ // provided.
+ (
+ | {
+ /**
+ * Array of tab objects. Each tab object should contain at least
+ * a `id`, a `title`, and a `content` value.
+ */
+ tabs: Tab[];
+ children?: never;
+ }
+ | {
+ tabs?: never;
+ /**
+ * The children elements, which should be at least a
+ * `Tabs.Tablist` component and a series of `Tabs.TabPanel`
+ * components.
+ */
+ children: React.ReactNode;
+ }
+ ) & {
+ /**
+ * The class name to add to the active tab.
+ *
+ * @default 'is-active'
+ */
+ activeClass?: string;
+ /**
+ * When `true`, the tab will be selected when receiving focus (automatic tab
+ * activation). When `false`, the tab will be selected only when clicked
+ * (manual tab activation). See the official W3C docs for more info.
+ * .
+ *
+ * @default true
+ *
+ * @see https://www.w3.org/WAI/ARIA/apg/patterns/tabpanel/
+ */
+ selectOnMove?: boolean;
+ /**
+ * The id of the tab to be selected upon mounting of component.
+ * If this prop is not set, the first tab will be selected by default.
+ * The id provided will be internally prefixed with the
+ * `TabsContextProps.instanceId`.
+ */
+ initialTabId?: string;
+ /**
+ * The function called when a tab has been selected.
+ * It is passed the `instanceId`-prefixed `tabId` as an argument.
+ */
+ onSelect?:
+ | ( ( selectedId: string | null | undefined ) => void )
+ | undefined;
+ /**
+ * The orientation of the tablist.
+ *
+ * @default `horizontal`
+ */
+ orientation?: 'horizontal' | 'vertical';
+ };
+
+export type TabListProps = {
+ /**
+ * The children elements
+ */
+ children?: React.ReactNode;
+ /**
+ * The class name to apply to the tablist.
+ */
+ className?: string;
+ /**
+ * Custom CSS styles for the rendered tablist.
+ */
+ style?: React.CSSProperties;
+};
+
+export type TabProps = {
+ /**
+ * The id of the tab, which is prepended with the `Tabs` instanceId.
+ */
+ id: Tab[ 'id' ];
+ /**
+ * The label for the tab.
+ */
+ title: Tab[ 'title' ];
+ /**
+ * Custom CSS styles for the tab.
+ */
+ style?: React.CSSProperties;
+ /**
+ * The children elements, generally the text to display on the tab.
+ */
+ children?: React.ReactNode;
+ /**
+ * The class name to apply to the tab button.
+ */
+ className?: string;
+ /**
+ * The icon used for the tab button.
+ */
+ icon?: IconType;
+ /**
+ * Determines if the tab button should be disabled.
+ *
+ * @default false
+ */
+ disabled?: boolean;
+};
+
+export type TabPanelProps = {
+ /**
+ * The children elements
+ */
+ children?: React.ReactNode;
+ /**
+ * The id of the TabPanel, which is combined with the `Tabs` instanceId and
+ * the suffix '-view'.
+ */
+ id: string;
+ /**
+ * The class name to apply to the tabpanel.
+ */
+ className?: string;
+ /**
+ * Custom CSS styles for the rendered `TabPanel` component.
+ */
+ style?: React.CSSProperties;
+};
From 7ffc88a3bce15814ae4b09d364f57b8b30f36994 Mon Sep 17 00:00:00 2001
From: chad1008 <13856531+chad1008@users.noreply.github.com>
Date: Fri, 4 Aug 2023 18:15:41 -0400
Subject: [PATCH 02/42] summon stories
---
.../src/tabs/stories/index.story.tsx | 295 ++++++++++++++++++
.../components/src/tabs/stories/index.tsx | 140 ---------
2 files changed, 295 insertions(+), 140 deletions(-)
create mode 100644 packages/components/src/tabs/stories/index.story.tsx
delete mode 100644 packages/components/src/tabs/stories/index.tsx
diff --git a/packages/components/src/tabs/stories/index.story.tsx b/packages/components/src/tabs/stories/index.story.tsx
new file mode 100644
index 0000000000000..85d21271b9f2a
--- /dev/null
+++ b/packages/components/src/tabs/stories/index.story.tsx
@@ -0,0 +1,295 @@
+/**
+ * External dependencies
+ */
+import type { Meta, StoryFn } from '@storybook/react';
+
+/**
+ * WordPress dependencies
+ */
+import { wordpress, more, link } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import Tabs from '..';
+import Popover from '../../popover';
+import { Slot, Fill, Provider as SlotFillProvider } from '../../slot-fill';
+import DropdownMenu from '../../dropdown-menu';
+import Button from '../../button';
+
+const meta: Meta< typeof Tabs > = {
+ title: 'Components/Tabs',
+ component: Tabs,
+ parameters: {
+ actions: { argTypesRegex: '^on.*' },
+ controls: { expanded: true },
+ docs: { canvas: { sourceState: 'shown' } },
+ },
+};
+export default meta;
+
+const Template: StoryFn< typeof Tabs > = ( props ) => {
+ return (
+ // Ignore reason: `children` and `tabs` props are mutually exclusive.
+ // When we ambiguously pass `props` here in Storybook, TS doesn't know
+ // what to expect, so it errors.
+ // @ts-expect-error
+
+
+
+ Tab 1
+
+
+ Tab 2
+
+
+ Tab 3
+
+
+
+
Selected tab: Tab 1
+
+
+
Selected tab: Tab 2
+
+
+
Selected tab: Tab 3
+
+
+ );
+};
+
+export const Default = Template.bind( {} );
+
+const DisabledTabTemplate: StoryFn< typeof Tabs > = ( props ) => {
+ return (
+ // Ignore reason: `children` and `tabs` props are mutually exclusive.
+ // When we ambiguously pass `props` here in Storybook, TS doesn't know
+ // what to expect, so it errors.
+ // @ts-expect-error
+
+
+
+ Tab 1
+
+
+ Tab 2
+
+
+ Tab 3
+
+
+
+
Selected tab: Tab 1
+
+
+
Selected tab: Tab 2
+
+
+
Selected tab: Tab 3
+
+
+ );
+};
+export const DisabledTab = DisabledTabTemplate.bind( {} );
+
+const WithTabIconsAndTooltipsTemplate: StoryFn< typeof Tabs > = ( props ) => {
+ return (
+ // SlotFill is used here to ensure the icon's tooltips are not
+ // rendered inline, as that would cause them to inherit the tab's opacity.
+
+ { /* Ignore reason: `children` and `tabs` props are mutually
+ exclusive. When we ambiguously pass `props` here in Storybook, TS
+ doesn't know what to expect, so it errors.
+ @ts-expect-error */ }
+
+
+
+
+
+
+
+
Selected tab: Tab 1
+
+
+
Selected tab: Tab 2
+
+
+
Selected tab: Tab 3
+
+
+ { /* @ts-expect-error The 'Slot' component hasn't been typed yet. */ }
+
+
+ );
+};
+export const WithTabIconsAndTooltips = WithTabIconsAndTooltipsTemplate.bind(
+ {}
+);
+
+export const ManualActivation = Template.bind( {} );
+ManualActivation.args = {
+ selectOnMove: false,
+};
+
+const UsingSlotFillTemplate: StoryFn< typeof Tabs > = ( props ) => {
+ return (
+
+ { /* Ignore reason: `children` and `tabs` props are mutually
+ exclusive. When we ambiguously pass `props` here in Storybook, TS
+ doesn't know what to expect, so it errors.
+ @ts-expect-error */ }
+
+
+
+ Tab 1
+
+
+ Tab 2
+
+
+ Tab 3
+
+
+
+
+
+ { /* Ignore reason: `children` and `tabs` props are mutually
+ exclusive. When we ambiguously pass `props` here in Storybook, TS
+ doesn't know what to expect, so it errors.
+ @ts-expect-error */ }
+
+
,
- tab: { icon: wordpress },
- },
- ],
-};
-
const ControlledModeTemplate: StoryFn< typeof Tabs > = ( props ) => {
const [ selectedTabId, setSelectedTabId ] = useState<
string | undefined | null
@@ -302,10 +250,6 @@ const ControlledModeTemplate: StoryFn< typeof Tabs > = ( props ) => {
return (
<>
- { /* Ignore reason: `children` and `tabs` props are mutually
- exclusive. When we ambiguously pass `props` here in Storybook, TS
- doesn't know what to expect, so it errors.
- @ts-expect-error */ }
{
>( props?.selectedTabId );
return (
- // @ts-expect-error
;
-
export type TabsContextProps =
| {
/**
@@ -62,79 +25,63 @@ export type TabsContextProps =
}
| undefined;
-export type TabsProps =
- // Because providing a tabs array will automatically render all of the
- // subcomponents, we need to make sure that the children prop is not also
- // provided.
- (
- | {
- /**
- * Array of tab objects. Each tab object should contain at least
- * a `id`, a `title`, and a `content` value.
- */
- tabs: Tab[];
- children?: never;
- }
- | {
- tabs?: never;
- /**
- * The children elements, which should be at least a
- * `Tabs.Tablist` component and a series of `Tabs.TabPanel`
- * components.
- */
- children: React.ReactNode;
- }
- ) & {
- /**
- * The class name to add to the active tab.
- *
- * @default 'is-active'
- */
- activeClass?: string;
- /**
- * When `true`, the tab will be selected when receiving focus (automatic tab
- * activation). When `false`, the tab will be selected only when clicked
- * (manual tab activation). See the official W3C docs for more info.
- * .
- *
- * @default true
- *
- * @see https://www.w3.org/WAI/ARIA/apg/patterns/tabpanel/
- */
- selectOnMove?: boolean;
- /**
- * The id of the tab to be selected upon mounting of component.
- * If this prop is not set, the first tab will be selected by default.
- * The id provided will be internally prefixed with the
- * `TabsContextProps.instanceId`.
- *
- * Note: this prop will be overridden by the `selectedTabId` prop if it is
- * provided. (Controlled Mode)
- */
- initialTabId?: string;
- /**
- * The function called when a tab has been selected.
- * It is passed the `instanceId`-prefixed `tabId` as an argument.
- */
- onSelect?:
- | ( ( selectedId: string | null | undefined ) => void )
- | undefined;
- /**
- * The orientation of the tablist.
- *
- * @default `horizontal`
- */
- orientation?: 'horizontal' | 'vertical';
- /**
- * The Id of the tab to display. This id is prepended with the `Tabs`
- * instanceId internally.
- *
- * This prop puts the component into controlled mode. A value of
- * `undefined` returns the component to uncontrolled mode. A value of
- * `null` will result in no tab being selected.
- */
- selectedTabId?: string | null;
- };
+export type TabsProps = {
+ /**
+ * The children elements, which should be at least a
+ * `Tabs.Tablist` component and a series of `Tabs.TabPanel`
+ * components.
+ */
+ children: React.ReactNode;
+ /**
+ * The class name to add to the active tab.
+ *
+ * @default 'is-active'
+ */
+ activeClass?: string;
+ /**
+ * When `true`, the tab will be selected when receiving focus (automatic tab
+ * activation). When `false`, the tab will be selected only when clicked
+ * (manual tab activation). See the official W3C docs for more info.
+ * .
+ *
+ * @default true
+ *
+ * @see https://www.w3.org/WAI/ARIA/apg/patterns/tabpanel/
+ */
+ selectOnMove?: boolean;
+ /**
+ * The id of the tab to be selected upon mounting of component.
+ * If this prop is not set, the first tab will be selected by default.
+ * The id provided will be internally prefixed with the
+ * `TabsContextProps.instanceId`.
+ *
+ * Note: this prop will be overridden by the `selectedTabId` prop if it is
+ * provided. (Controlled Mode)
+ */
+ initialTabId?: string;
+ /**
+ * The function called when a tab has been selected.
+ * It is passed the `instanceId`-prefixed `tabId` as an argument.
+ */
+ onSelect?:
+ | ( ( selectedId: string | null | undefined ) => void )
+ | undefined;
+ /**
+ * The orientation of the tablist.
+ *
+ * @default `horizontal`
+ */
+ orientation?: 'horizontal' | 'vertical';
+ /**
+ * The Id of the tab to display. This id is prepended with the `Tabs`
+ * instanceId internally.
+ *
+ * This prop puts the component into controlled mode. A value of
+ * `undefined` returns the component to uncontrolled mode. A value of
+ * `null` will result in no tab being selected.
+ */
+ selectedTabId?: string | null;
+};
export type TabListProps = {
/**
@@ -155,11 +102,11 @@ export type TabProps = {
/**
* The id of the tab, which is prepended with the `Tabs` instanceId.
*/
- id: Tab[ 'id' ];
+ id: string;
/**
* The label for the tab.
*/
- title: Tab[ 'title' ];
+ title: string;
/**
* Custom CSS styles for the tab.
*/
From 298defe614256a01cbbbd3db19a6cab3ab060644 Mon Sep 17 00:00:00 2001
From: chad1008 <13856531+chad1008@users.noreply.github.com>
Date: Tue, 12 Sep 2023 11:24:10 -0400
Subject: [PATCH 06/42] specify styles
---
packages/components/src/style.scss | 1 +
packages/components/src/tabs/index.tsx | 11 +---
packages/components/src/tabs/style.scss | 83 +++++++++++++++++++++++++
3 files changed, 87 insertions(+), 8 deletions(-)
create mode 100644 packages/components/src/tabs/style.scss
diff --git a/packages/components/src/style.scss b/packages/components/src/style.scss
index 02dce83f66dcc..b28eac22d1a7c 100644
--- a/packages/components/src/style.scss
+++ b/packages/components/src/style.scss
@@ -48,6 +48,7 @@
@import "./select-control/style.scss";
@import "./snackbar/style.scss";
@import "./tab-panel/style.scss";
+@import "./tabs/style.scss";
@import "./text-control/style.scss";
@import "./tip/style.scss";
@import "./toolbar/toolbar/style.scss";
diff --git a/packages/components/src/tabs/index.tsx b/packages/components/src/tabs/index.tsx
index 04a8193dbde48..cd224055715f3 100644
--- a/packages/components/src/tabs/index.tsx
+++ b/packages/components/src/tabs/index.tsx
@@ -209,14 +209,9 @@ function Tab( {
Date: Tue, 12 Sep 2023 14:04:05 -0400
Subject: [PATCH 07/42] render README
---
packages/components/src/tabs/README.md | 290 +++++++++++++++++++++++++
1 file changed, 290 insertions(+)
create mode 100644 packages/components/src/tabs/README.md
diff --git a/packages/components/src/tabs/README.md b/packages/components/src/tabs/README.md
new file mode 100644
index 0000000000000..e9f447e86e8ef
--- /dev/null
+++ b/packages/components/src/tabs/README.md
@@ -0,0 +1,290 @@
+# TabPanel
+
+Tabs is a collection of React components that combine to render an ARIA-compliant TabPanel.
+
+Tabs organizes content across different screens, data sets, and interactions. It has two sections: a list of tabs, and the view to show when tabs are chosen.
+
+
+
+## Table of contents
+
+1. Design guidelines
+2. Development guidelines
+
+## Design guidelines
+
+### Usage
+
+Tabs organizes and allows navigation between groups of content that are related and at the same level of hierarchy.
+
+#### Tabs in a set
+
+As a set, all individual tab items are unified by a shared topic. For clarity, each tab item should contain content that is distinct from all the other tabs in a set.
+
+### Anatomy
+
+
+
+1. Container
+2. Active text label
+3. Active tab indicator
+4. Inactive text label
+5. Tab item
+
+#### Labels
+
+Tab labels appear in a single row, in the same typeface and size. Use text labels that clearly and succinctly describe the content of a tab, and make sure that a set of tabs contains a cohesive group of items that share a common characteristic.
+
+Tab labels can wrap to a second line, but do not add a second row of tabs.
+
+#### Active tab indicators
+
+To differentiate an active tab from an inactive tab, apply an underline and color change to the active tab’s text and icon.
+
+
+
+### Behavior
+
+Users can navigate between tabs by clicking the desired tab with their mouse. They can also tap the tab key on their keyboard to focus the `tablist`, and then navigate between tabs by tapping the arrow keys on their keyboard.
+
+### Placement
+
+Tabs are generally placed above content, allowing them to control the UI region displayed below them. It is also possible to render the tabs or the content elsewhere in the UI, using a `SlotFill` component when necessary.
+
+## Development guidelines
+
+### Usage
+
+#### Uncontrolled Mode
+
+Tabs can be used in an uncontrolled mode, where the component manages its own state. In this mode, the `initialTabId` prop can be used to set the initially selected tab. If this prop is not set, the first tab will be selected by default. In addition, in most cases where the currently active tab becomes disabled or otherwise unavailable, uncontrolled mode will automatically fall back to selecting the first available tab.
+
+```jsx
+import { Tabs } from '@wordpress/components';
+
+const onSelect = ( tabName ) => {
+ console.log( 'Selecting tab', tabName );
+};
+
+const MyUncontrolledTabs = () => (
+
+
+
+ Tab 1
+
+
+ Tab 2
+
+
+ Tab 3
+
+
+
+
Selected tab: Tab 1
+
+
+
Selected tab: Tab 2
+
+
+
Selected tab: Tab 3
+
+
+ );
+```
+
+#### Controlled Mode
+
+Tabs can also be used in a controlled mode, where the selected tab is specified by a parent component. In this mode, the `initialTabId` prop will be ignored if it is provided. Instead, the `selectedTabId` value will be used to determine the selected tab. If the `selectedTabId` is `null`, no tab is selected. In this mode, if the currently selected tab becomes disabled or otherwise unavailable, the component will _not_ fall back to another available tab.
+
+```jsx
+import { Tabs } from '@wordpress/components';
+ const [ selectedTabId, setSelectedTabId ] = useState<
+ string | undefined | null
+ >();
+
+const onSelect = ( tabName ) => {
+ console.log( 'Selecting tab', tabName );
+};
+
+const MyControlledTabs = () => (
+ {
+ setSelectedTabId( selectedId );
+ onSelect( selectedId );
+ } }
+ >
+
+
+ Tab 1
+
+
+ Tab 2
+
+
+ Tab 3
+
+
+
+
Selected tab: Tab 1
+
+
+
Selected tab: Tab 2
+
+
+
Selected tab: Tab 3
+
+
+ );
+```
+
+### Components and Sub-components
+
+Tabs is comprised of four individual components:
+- `Tabs`: a wrapper component and context provider. It is responsible for managing the state of the tabs and rendering the `TabList` and `TabPanels`.
+- `TabList`: a wrapper component for the `Tab` components. It is responsible for rendering the list of tabs.
+- `Tab`: renders a single tab.
+- `TabPanel`: renders the content to display for a single tab once that tab is selected.
+
+#### Tabs
+
+##### Props
+
+###### `children`: `React.ReactNode`
+
+The children elements, which should be at least a `Tabs.Tablist` component and a series of `Tabs.TabPanel` components.
+
+- Required: Yes
+
+###### `activeClass`: `string`
+
+The class to add to the active tab
+
+- Required: No
+- Default: `is-active`
+
+###### `selectOnMove`: `boolean`
+
+When `true`, the tab will be selected when receiving focus (automatic tab activation). When `false`, the tab will be selected only when clicked (manual tab activation). See the [official W3C docs](https://www.w3.org/WAI/ARIA/apg/patterns/tabpanel/) for more info.
+
+- Required: No
+- Default: `true`
+
+###### `initialTabId`: `string`
+
+The id of the tab to be selected upon mounting of component. If this prop is not set, the first tab will be selected by default. The id provided will be internally prefixed with a unique instance ID to avoid collisions.
+
+_Note: this prop will be overridden by the `selectedTabId` prop if it is provided. (Controlled Mode)_
+
+- Required: No
+- Default: none
+
+###### `onSelect`: `( ( selectedId: string | null | undefined ) => void )`
+
+The function called when a tab has been selected. It is passed the selected tab's ID as an argument.
+
+- Required: No
+- Default: `noop`
+
+###### `orientation`: `horizontal | vertical`
+
+The orientation of the `tablist` (`vertical` or `horizontal`)
+
+- Required: No
+- Default: `horizontal`
+
+#### TabList
+
+##### Props
+
+###### `children`: `React.ReactNode`
+
+The children elements, which should be a series of `Tabs.TabPanel` components.
+
+- Required: No
+
+###### `className`: `string`
+
+The class name to apply to the tablist.
+
+- Required: No
+- Default: ''
+
+###### `style`: `React.CSSProperties`
+
+Custom CSS styles for the tablist.
+
+- Required: No
+
+#### Tab
+
+##### Props
+
+###### `id`: `string`
+
+The id of the tab, which is prepended with the `Tabs` instance ID.
+
+- Required: Yes
+
+###### `title`: `string`
+
+The label for the tab.
+
+- Required: Yes
+
+###### `style`: `React.CSSProperties`
+
+Custom CSS styles for the tab.
+
+- Required: No
+
+###### `children`: `React.ReactNode`
+
+The children elements, generally the text to display on the tab.
+
+- Required: No
+
+###### `className`: `string`
+
+The class name to apply to the tab.
+
+- Required: No
+
+###### `icon`: `IconType`
+
+The icon used for the tab button.
+
+- Required: No
+
+###### `disabled`: `boolean`
+
+Determines if the tab button should be disabled.
+
+- Required: No
+- Default: `false`
+
+#### TabPanel
+
+##### Props
+
+###### `children`: `React.ReactNode`
+
+The children elements, generally the content to display on the tabpanel.
+
+- Required: No
+
+###### `id`: `string`
+
+The id of the tabpanel, which is combined with the `Tabs` instance ID and the suffix `-view`
+
+###### `className`: `string`
+
+The class name to apply to the tabpanel.
+
+- Required: No
+
+###### `style`: `React.CSSProperties`
+
+Custom CSS styles for the tab.
+
+- Required: No
From aabbf401faa5c9e44f1f85d4458b0363a70be2a3 Mon Sep 17 00:00:00 2001
From: chad1008 <13856531+chad1008@users.noreply.github.com>
Date: Thu, 14 Sep 2023 14:18:51 -0400
Subject: [PATCH 08/42] incorporate initial doc feedback
---
packages/components/src/tabs/README.md | 9 ++++++++-
packages/components/src/tabs/types.ts | 5 ++---
2 files changed, 10 insertions(+), 4 deletions(-)
diff --git a/packages/components/src/tabs/README.md b/packages/components/src/tabs/README.md
index e9f447e86e8ef..cc8d5dc72d941 100644
--- a/packages/components/src/tabs/README.md
+++ b/packages/components/src/tabs/README.md
@@ -177,7 +177,6 @@ The id of the tab to be selected upon mounting of component. If this prop is not
_Note: this prop will be overridden by the `selectedTabId` prop if it is provided. (Controlled Mode)_
- Required: No
-- Default: none
###### `onSelect`: `( ( selectedId: string | null | undefined ) => void )`
@@ -193,6 +192,12 @@ The orientation of the `tablist` (`vertical` or `horizontal`)
- Required: No
- Default: `horizontal`
+###### `selectedTabId`: `string | null | undefined`
+
+The ID of the tab to display. This id is prepended with the `Tabs` instanceId internally.
+This prop puts the component into controlled mode. A value of `null` will result in no tab being selected.
+- Required: No
+
#### TabList
##### Props
@@ -277,6 +282,8 @@ The children elements, generally the content to display on the tabpanel.
The id of the tabpanel, which is combined with the `Tabs` instance ID and the suffix `-view`
+- Required: Yes
+
###### `className`: `string`
The class name to apply to the tabpanel.
diff --git a/packages/components/src/tabs/types.ts b/packages/components/src/tabs/types.ts
index 675fbe92ab9cd..09941f506db89 100644
--- a/packages/components/src/tabs/types.ts
+++ b/packages/components/src/tabs/types.ts
@@ -77,7 +77,6 @@ export type TabsProps = {
* instanceId internally.
*
* This prop puts the component into controlled mode. A value of
- * `undefined` returns the component to uncontrolled mode. A value of
* `null` will result in no tab being selected.
*/
selectedTabId?: string | null;
@@ -85,7 +84,7 @@ export type TabsProps = {
export type TabListProps = {
/**
- * The children elements
+ * The children elements, which should be a series of `Tabs.TabPanel` components.
*/
children?: React.ReactNode;
/**
@@ -133,7 +132,7 @@ export type TabProps = {
export type TabPanelProps = {
/**
- * The children elements
+ * The children elements, generally the content to display on the tabpanel.
*/
children?: React.ReactNode;
/**
From 59b1387f81c82fa98661166625a0773c042b3ded Mon Sep 17 00:00:00 2001
From: chad1008 <13856531+chad1008@users.noreply.github.com>
Date: Thu, 14 Sep 2023 16:08:05 -0400
Subject: [PATCH 09/42] update for Tootip/Popover.Slot changes
---
.../src/tabs/stories/index.story.tsx | 43 ++++-----
packages/components/src/tabs/test/index.tsx | 96 ++++++++-----------
2 files changed, 58 insertions(+), 81 deletions(-)
diff --git a/packages/components/src/tabs/stories/index.story.tsx b/packages/components/src/tabs/stories/index.story.tsx
index 481079c45f0e4..559d467d85c82 100644
--- a/packages/components/src/tabs/stories/index.story.tsx
+++ b/packages/components/src/tabs/stories/index.story.tsx
@@ -13,7 +13,6 @@ import { useState } from '@wordpress/element';
* Internal dependencies
*/
import Tabs from '..';
-import Popover from '../../popover';
import { Slot, Fill, Provider as SlotFillProvider } from '../../slot-fill';
import DropdownMenu from '../../dropdown-menu';
import Button from '../../button';
@@ -88,32 +87,22 @@ export const DisabledTab = DisabledTabTemplate.bind( {} );
const WithTabIconsAndTooltipsTemplate: StoryFn< typeof Tabs > = ( props ) => {
return (
- // SlotFill is used here to ensure the icon's tooltips are not
- // rendered inline, as that would cause them to inherit the tab's opacity.
-
-
-
-
-
-
-
-
-
diff --git a/packages/components/src/tabs/styles.ts b/packages/components/src/tabs/styles.ts
index 468900356eec5..cd5bdd0cc93cf 100644
--- a/packages/components/src/tabs/styles.ts
+++ b/packages/components/src/tabs/styles.ts
@@ -2,11 +2,12 @@
* External dependencies
*/
import styled from '@emotion/styled';
+// eslint-disable-next-line no-restricted-imports
+import * as Ariakit from '@ariakit/react';
/**
* Internal dependencies
*/
-import Button from '../button';
import { COLORS } from '../utils';
import { space } from '../ui/utils/space';
import { reduceMotion } from '../utils/reduce-motion';
@@ -20,7 +21,7 @@ export const TabListWrapper = styled.div`
}
`;
-export const TabButton = styled( Button )`
+export const Tab = styled( Ariakit.Tab )`
&& {
position: relative;
border-radius: 0;
@@ -33,6 +34,11 @@ export const TabButton = styled( Button )`
margin-left: 0;
font-weight: 500;
+ &[aria-disabled='true'] {
+ cursor: default;
+ opacity: 0.3;
+ }
+
&:focus:not( :disabled ) {
position: relative;
box-shadow: none;
diff --git a/packages/components/src/tabs/tab.tsx b/packages/components/src/tabs/tab.tsx
index 46cca28fcdb6c..5548b0e990123 100644
--- a/packages/components/src/tabs/tab.tsx
+++ b/packages/components/src/tabs/tab.tsx
@@ -1,9 +1,3 @@
-/**
- * External dependencies
- */
-// eslint-disable-next-line no-restricted-imports
-import * as Ariakit from '@ariakit/react';
-
/**
* WordPress dependencies
*/
@@ -16,17 +10,9 @@ import { useContext } from '@wordpress/element';
import type { TabProps } from './types';
import warning from '@wordpress/warning';
import { TabsContext } from './context';
-import { TabButton } from './styles';
+import { Tab as StyledTab } from './styles';
-function Tab( {
- children,
- id,
- className,
- disabled,
- icon,
- title,
- style,
-}: TabProps ) {
+function Tab( { children, id, className, disabled, render, style }: TabProps ) {
const context = useContext( TabsContext );
if ( ! context ) {
warning( '`Tabs.TabList` must be wrapped in a `Tabs` component.' );
@@ -35,22 +21,16 @@ function Tab( {
const { store, instanceId } = context;
const instancedTabId = `${ instanceId }-${ id }`;
return (
-
- }
+ render={ render }
>
{ children }
-
+
);
}
diff --git a/packages/components/src/tabs/test/index.tsx b/packages/components/src/tabs/test/index.tsx
index 0686ba9629842..4d97070bc7d37 100644
--- a/packages/components/src/tabs/test/index.tsx
+++ b/packages/components/src/tabs/test/index.tsx
@@ -15,7 +15,6 @@ import { useState } from '@wordpress/element';
*/
import Tabs from '..';
import type { TabsProps } from '../types';
-import cleanupTooltip from '../../tooltip/test/utils';
import type { IconType } from '../../icon';
type Tab = {
@@ -75,7 +74,6 @@ const UncontrolledTabs = ( {
{
allTabs[ 0 ].getAttribute( 'id' )
);
} );
-
- it( 'should display a tooltip when hovering tabs provided with an icon', async () => {
- const user = userEvent.setup();
-
- render( );
- const allTabs = screen.getAllByRole( 'tab' );
-
- for ( let i = 0; i < allTabs.length; i++ ) {
- expect(
- screen.queryByText( TABS[ i ].title )
- ).not.toBeInTheDocument();
-
- await user.hover( allTabs[ i ] );
-
- await waitFor( () =>
- expect( screen.getByText( TABS[ i ].title ) ).toBeVisible()
- );
-
- await user.unhover( allTabs[ i ] );
- }
-
- await cleanupTooltip( user );
- } );
-
- it( 'should display a tooltip when moving the selection via the keyboard on tabs provided with an icon', async () => {
- const user = userEvent.setup();
-
- const mockOnSelect = jest.fn();
-
- render(
-
- );
-
- expect( await getSelectedTab() ).not.toHaveTextContent( 'Alpha' );
- expect( mockOnSelect ).toHaveBeenCalledTimes( 1 );
- expect( mockOnSelect ).toHaveBeenLastCalledWith( 'alpha' );
- expect( await getSelectedTab() ).not.toHaveFocus();
-
- // Tab to focus the tablist. Make sure alpha is focused, and that the
- // corresponding tooltip is shown.
- expect( screen.queryByText( 'Alpha' ) ).not.toBeInTheDocument();
- await user.keyboard( '[Tab]' );
- expect( mockOnSelect ).toHaveBeenCalledTimes( 1 );
- expect( screen.getByText( 'Alpha' ) ).toBeVisible();
- expect( await getSelectedTab() ).toHaveFocus();
-
- // Move selection with arrow keys. Make sure beta is focused, and that
- // the corresponding tooltip is shown.
- expect( screen.queryByText( 'Beta' ) ).not.toBeInTheDocument();
- await user.keyboard( '[ArrowRight]' );
- expect( mockOnSelect ).toHaveBeenCalledTimes( 2 );
- expect( mockOnSelect ).toHaveBeenLastCalledWith( 'beta' );
- expect( screen.getByText( 'Beta' ) ).toBeVisible();
- expect( await getSelectedTab() ).toHaveFocus();
-
- // Move selection with arrow keys. Make sure gamma is focused, and that
- // the corresponding tooltip is shown.
- expect( screen.queryByText( 'Gamma' ) ).not.toBeInTheDocument();
- await user.keyboard( '[ArrowRight]' );
- expect( mockOnSelect ).toHaveBeenCalledTimes( 3 );
- expect( mockOnSelect ).toHaveBeenLastCalledWith( 'gamma' );
- expect( screen.getByText( 'Gamma' ) ).toBeVisible();
- expect( await getSelectedTab() ).toHaveFocus();
-
- // Move selection with arrow keys. Make sure beta is focused, and that
- // the corresponding tooltip is shown.
- expect( screen.queryByText( 'Beta' ) ).not.toBeInTheDocument();
- await user.keyboard( '[ArrowLeft]' );
- expect( mockOnSelect ).toHaveBeenCalledTimes( 4 );
- expect( mockOnSelect ).toHaveBeenLastCalledWith( 'beta' );
- expect( screen.getByText( 'Beta' ) ).toBeVisible();
- expect( await getSelectedTab() ).toHaveFocus();
-
- await cleanupTooltip( user );
- } );
} );
describe( 'Tab Attributes', () => {
diff --git a/packages/components/src/tabs/types.ts b/packages/components/src/tabs/types.ts
index 685e3c3e6555b..db6393b129f10 100644
--- a/packages/components/src/tabs/types.ts
+++ b/packages/components/src/tabs/types.ts
@@ -93,10 +93,6 @@ export type TabProps = {
* The id of the tab, which is prepended with the `Tabs` instanceId.
*/
id: string;
- /**
- * The label for the tab.
- */
- title: string;
/**
* Custom CSS styles for the tab.
*/
@@ -119,6 +115,11 @@ export type TabProps = {
* @default false
*/
disabled?: boolean;
+ /**
+ * The type of component to render the tab button as. If this prop is not
+ * provided, the tab button will be rendered as a `button` element.
+ */
+ render?: React.ReactElement;
};
export type TabPanelProps = {
From 2995957d810849235bfb6fffe9455e1ec9b72440 Mon Sep 17 00:00:00 2001
From: chad1008 <13856531+chad1008@users.noreply.github.com>
Date: Wed, 4 Oct 2023 09:10:11 -0400
Subject: [PATCH 34/42] update path to space utils
---
packages/components/src/tabs/styles.ts | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/packages/components/src/tabs/styles.ts b/packages/components/src/tabs/styles.ts
index cd5bdd0cc93cf..091ba608fb6ec 100644
--- a/packages/components/src/tabs/styles.ts
+++ b/packages/components/src/tabs/styles.ts
@@ -9,7 +9,7 @@ import * as Ariakit from '@ariakit/react';
* Internal dependencies
*/
import { COLORS } from '../utils';
-import { space } from '../ui/utils/space';
+import { space } from '../utils/space';
import { reduceMotion } from '../utils/reduce-motion';
export const TabListWrapper = styled.div`
From b12db10673be06b71febc4d65a81872fc006407f Mon Sep 17 00:00:00 2001
From: chad1008 <13856531+chad1008@users.noreply.github.com>
Date: Wed, 4 Oct 2023 09:35:40 -0400
Subject: [PATCH 35/42] add test for uncontrolled mode removing tab when no
other tabs are enabled
---
packages/components/src/tabs/test/index.tsx | 37 +++++++++++++++++++++
1 file changed, 37 insertions(+)
diff --git a/packages/components/src/tabs/test/index.tsx b/packages/components/src/tabs/test/index.tsx
index 4d97070bc7d37..1b437966239a0 100644
--- a/packages/components/src/tabs/test/index.tsx
+++ b/packages/components/src/tabs/test/index.tsx
@@ -548,6 +548,43 @@ describe( 'Tabs', () => {
rerender( );
expect( await getSelectedTab() ).toHaveTextContent( 'Beta' );
} );
+ it( 'should not load any tab if the active tab is removed and there are no enabled tabs', async () => {
+ const TABS_WITH_BETA_GAMMA_DISABLED = TABS.map( ( tabObj ) =>
+ tabObj.id !== 'alpha'
+ ? {
+ ...tabObj,
+ tab: {
+ ...tabObj.tab,
+ disabled: true,
+ },
+ }
+ : tabObj
+ );
+
+ const { rerender } = render(
+
+ );
+ expect( await getSelectedTab() ).toHaveTextContent( 'Alpha' );
+
+ // Remove alpha
+ rerender(
+
+ );
+
+ // No tab should be selected i.e. it doesn't fall back to first tab.
+ await waitFor( () =>
+ expect(
+ screen.queryByRole( 'tab', { selected: true } )
+ ).not.toBeInTheDocument()
+ );
+
+ // No tabpanel should be rendered either
+ expect(
+ screen.queryByRole( 'tabpanel' )
+ ).not.toBeInTheDocument();
+ } );
} );
describe( 'With `initialTabId`', () => {
From 2d37e60c95b10eb88d0e13b71c5f2e9b5f8f2992 Mon Sep 17 00:00:00 2001
From: chad1008 <13856531+chad1008@users.noreply.github.com>
Date: Wed, 4 Oct 2023 15:17:43 -0400
Subject: [PATCH 36/42] add ref forwarding
---
packages/components/src/tabs/index.tsx | 6 ++--
packages/components/src/tabs/tab.tsx | 12 ++++---
packages/components/src/tabs/tablist.tsx | 41 +++++++++++----------
packages/components/src/tabs/tabpanel.tsx | 43 ++++++++++++-----------
4 files changed, 54 insertions(+), 48 deletions(-)
diff --git a/packages/components/src/tabs/index.tsx b/packages/components/src/tabs/index.tsx
index 671865e2358b3..54f547ad2f52d 100644
--- a/packages/components/src/tabs/index.tsx
+++ b/packages/components/src/tabs/index.tsx
@@ -15,9 +15,9 @@ import { useEffect, useLayoutEffect, useRef } from '@wordpress/element';
*/
import type { TabsProps } from './types';
import { TabsContext } from './context';
-import Tab from './tab';
-import TabList from './tablist';
-import TabPanel from './tabpanel';
+import { Tab } from './tab';
+import { TabList } from './tablist';
+import { TabPanel } from './tabpanel';
function Tabs( {
selectOnMove = true,
diff --git a/packages/components/src/tabs/tab.tsx b/packages/components/src/tabs/tab.tsx
index 5548b0e990123..75b3df1c1ba01 100644
--- a/packages/components/src/tabs/tab.tsx
+++ b/packages/components/src/tabs/tab.tsx
@@ -2,7 +2,7 @@
* WordPress dependencies
*/
-import { useContext } from '@wordpress/element';
+import { useContext, forwardRef } from '@wordpress/element';
/**
* Internal dependencies
@@ -12,7 +12,10 @@ import warning from '@wordpress/warning';
import { TabsContext } from './context';
import { Tab as StyledTab } from './styles';
-function Tab( { children, id, className, disabled, render, style }: TabProps ) {
+export const Tab = forwardRef< HTMLButtonElement, TabProps >( function Tab(
+ { children, id, className, disabled, render, style },
+ ref
+) {
const context = useContext( TabsContext );
if ( ! context ) {
warning( '`Tabs.TabList` must be wrapped in a `Tabs` component.' );
@@ -22,6 +25,7 @@ function Tab( { children, id, className, disabled, render, style }: TabProps ) {
const instancedTabId = `${ instanceId }-${ id }`;
return (
);
-}
-
-export default Tab;
+} );
diff --git a/packages/components/src/tabs/tablist.tsx b/packages/components/src/tabs/tablist.tsx
index e8d1dcfbbb72c..02255fefd2082 100644
--- a/packages/components/src/tabs/tablist.tsx
+++ b/packages/components/src/tabs/tablist.tsx
@@ -3,10 +3,12 @@
*/
// eslint-disable-next-line no-restricted-imports
import * as Ariakit from '@ariakit/react';
+
/**
* WordPress dependencies
*/
import warning from '@wordpress/warning';
+import { forwardRef } from '@wordpress/element';
/**
* Internal dependencies
@@ -15,23 +17,24 @@ import type { TabListProps } from './types';
import { useTabsContext } from './context';
import { TabListWrapper } from './styles';
-function TabList( { children, className, style }: TabListProps ) {
- const context = useTabsContext();
- if ( ! context ) {
- warning( '`Tabs.TabList` must be wrapped in a `Tabs` component.' );
- return null;
+export const TabList = forwardRef< HTMLDivElement, TabListProps >(
+ function TabList( { children, className, style }, ref ) {
+ const context = useTabsContext();
+ if ( ! context ) {
+ warning( '`Tabs.TabList` must be wrapped in a `Tabs` component.' );
+ return null;
+ }
+ const { store } = context;
+ return (
+ }
+ >
+ { children }
+
+ );
}
- const { store } = context;
- return (
- }
- >
- { children }
-
- );
-}
-
-export default TabList;
+);
diff --git a/packages/components/src/tabs/tabpanel.tsx b/packages/components/src/tabs/tabpanel.tsx
index b1550beb07c98..fb62fc9191233 100644
--- a/packages/components/src/tabs/tabpanel.tsx
+++ b/packages/components/src/tabs/tabpanel.tsx
@@ -8,7 +8,7 @@ import * as Ariakit from '@ariakit/react';
* WordPress dependencies
*/
-import { useContext } from '@wordpress/element';
+import { forwardRef, useContext } from '@wordpress/element';
/**
* Internal dependencies
@@ -18,24 +18,25 @@ import type { TabPanelProps } from './types';
import warning from '@wordpress/warning';
import { TabsContext } from './context';
-function TabPanel( { children, id, className, style }: TabPanelProps ) {
- const context = useContext( TabsContext );
- if ( ! context ) {
- warning( '`Tabs.TabPanel` must be wrapped in a `Tabs` component.' );
- return null;
- }
- const { store, instanceId } = context;
-
- return (
-
- { children }
-
- );
-}
+export const TabPanel = forwardRef< HTMLDivElement, TabPanelProps >(
+ function TabPanel( { children, id, className, style }, ref ) {
+ const context = useContext( TabsContext );
+ if ( ! context ) {
+ warning( '`Tabs.TabPanel` must be wrapped in a `Tabs` component.' );
+ return null;
+ }
+ const { store, instanceId } = context;
-export default TabPanel;
+ return (
+
+ { children }
+
+ );
+ }
+);
From 6831880da245cf54975baf191bd894f72b12ad70 Mon Sep 17 00:00:00 2001
From: Chad Chadbourne <13856531+chad1008@users.noreply.github.com>
Date: Fri, 6 Oct 2023 11:32:23 -0400
Subject: [PATCH 37/42] typo
Co-authored-by: Marco Ciampini
---
packages/components/src/tabs/types.ts | 1 -
1 file changed, 1 deletion(-)
diff --git a/packages/components/src/tabs/types.ts b/packages/components/src/tabs/types.ts
index db6393b129f10..dd6a456f5c768 100644
--- a/packages/components/src/tabs/types.ts
+++ b/packages/components/src/tabs/types.ts
@@ -33,7 +33,6 @@ export type TabsProps = {
* When `true`, the tab will be selected when receiving focus (automatic tab
* activation). When `false`, the tab will be selected only when clicked
* (manual tab activation). See the official W3C docs for more info.
- * .
*
* @default true
*
From 2fe4332dab57309c77deefcd3929bda3d4fb3432 Mon Sep 17 00:00:00 2001
From: Chad Chadbourne <13856531+chad1008@users.noreply.github.com>
Date: Fri, 6 Oct 2023 11:36:57 -0400
Subject: [PATCH 38/42] update `selectedTabId` description
Co-authored-by: Marco Ciampini
---
packages/components/src/tabs/types.ts | 6 ++++--
1 file changed, 4 insertions(+), 2 deletions(-)
diff --git a/packages/components/src/tabs/types.ts b/packages/components/src/tabs/types.ts
index dd6a456f5c768..77ffe7f5811b5 100644
--- a/packages/components/src/tabs/types.ts
+++ b/packages/components/src/tabs/types.ts
@@ -66,8 +66,10 @@ export type TabsProps = {
* The Id of the tab to display. This id is prepended with the `Tabs`
* instanceId internally.
*
- * This prop puts the component into controlled mode. A value of
- * `null` will result in no tab being selected.
+ * If left `undefined`, the component assumes it is being used in
+ * uncontrolled mode. Consequently, any value different than `undefined`
+ * will set the component in `controlled` mode.
+ * When in controlled mode, the `null` value will result in no tab being selected.
*/
selectedTabId?: string | null;
};
From 4025488453714b7ef27debe654a470a7eac7c64e Mon Sep 17 00:00:00 2001
From: chad1008 <13856531+chad1008@users.noreply.github.com>
Date: Fri, 6 Oct 2023 11:45:10 -0400
Subject: [PATCH 39/42] misc feedback updates
---
packages/components/src/tabs/README.md | 5 +++--
packages/components/src/tabs/types.ts | 5 ++---
2 files changed, 5 insertions(+), 5 deletions(-)
diff --git a/packages/components/src/tabs/README.md b/packages/components/src/tabs/README.md
index ffa747eef9d7f..800e0932882dc 100644
--- a/packages/components/src/tabs/README.md
+++ b/packages/components/src/tabs/README.md
@@ -138,10 +138,11 @@ The orientation of the `tablist` (`vertical` or `horizontal`)
- Required: No
- Default: `horizontal`
-###### `selectedTabId`: `string | null | undefined`
+###### `selectedTabId`: `string | null`
The ID of the tab to display. This id is prepended with the `Tabs` instanceId internally.
-This prop puts the component into controlled mode. A value of `null` will result in no tab being selected.
+If left `undefined`, the component assumes it is being used in uncontrolled mode. Consequently, any value different than `undefined` will set the component in `controlled` mode. When in controlled mode, the `null` value will result in no tab being selected.
+
- Required: No
#### TabList
diff --git a/packages/components/src/tabs/types.ts b/packages/components/src/tabs/types.ts
index 77ffe7f5811b5..46ecd6eac00c4 100644
--- a/packages/components/src/tabs/types.ts
+++ b/packages/components/src/tabs/types.ts
@@ -53,9 +53,8 @@ export type TabsProps = {
* The function called when a tab has been selected.
* It is passed the `instanceId`-prefixed `tabId` as an argument.
*/
- onSelect?:
- | ( ( selectedId: string | null | undefined ) => void )
- | undefined;
+ onSelect?: ( selectedId: string | null | undefined ) => void;
+
/**
* The orientation of the tablist.
*
From 8367af6bb6311656c5f2fd19c09cc24522fe5516 Mon Sep 17 00:00:00 2001
From: chad1008 <13856531+chad1008@users.noreply.github.com>
Date: Fri, 6 Oct 2023 11:48:23 -0400
Subject: [PATCH 40/42] mark as experimental
---
packages/components/src/tabs/README.md | 4 ++++
packages/components/src/tabs/stories/index.story.tsx | 2 +-
2 files changed, 5 insertions(+), 1 deletion(-)
diff --git a/packages/components/src/tabs/README.md b/packages/components/src/tabs/README.md
index 800e0932882dc..6907f385fda37 100644
--- a/packages/components/src/tabs/README.md
+++ b/packages/components/src/tabs/README.md
@@ -1,5 +1,9 @@
# Tabs
+
+This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.
+
+
Tabs is a collection of React components that combine to render an [ARIA-compliant tabs pattern](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/).
Tabs organizes content across different screens, data sets, and interactions. It has two sections: a list of tabs, and the view to show when tabs are chosen.
diff --git a/packages/components/src/tabs/stories/index.story.tsx b/packages/components/src/tabs/stories/index.story.tsx
index 684a55b6621c2..3b6ba022f6d91 100644
--- a/packages/components/src/tabs/stories/index.story.tsx
+++ b/packages/components/src/tabs/stories/index.story.tsx
@@ -18,7 +18,7 @@ import DropdownMenu from '../../dropdown-menu';
import Button from '../../button';
const meta: Meta< typeof Tabs > = {
- title: 'Components/Tabs',
+ title: 'Components (Experimental)/Tabs',
component: Tabs,
parameters: {
actions: { argTypesRegex: '^on.*' },
From e24d31ac91b8f854dc9c6a05faf7b58475a99621 Mon Sep 17 00:00:00 2001
From: chad1008 <13856531+chad1008@users.noreply.github.com>
Date: Fri, 6 Oct 2023 11:54:05 -0400
Subject: [PATCH 41/42] update `onSelect` JSDoc description
---
packages/components/src/tabs/types.ts | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/packages/components/src/tabs/types.ts b/packages/components/src/tabs/types.ts
index 46ecd6eac00c4..88e25eb5a3863 100644
--- a/packages/components/src/tabs/types.ts
+++ b/packages/components/src/tabs/types.ts
@@ -51,7 +51,7 @@ export type TabsProps = {
initialTabId?: string;
/**
* The function called when a tab has been selected.
- * It is passed the `instanceId`-prefixed `tabId` as an argument.
+ * It is passed the id of the newly selected tab as an argument.
*/
onSelect?: ( selectedId: string | null | undefined ) => void;
From 8d3ac35341bb3a0aa56c2d605ec83f8b24539d7a Mon Sep 17 00:00:00 2001
From: chad1008 <13856531+chad1008@users.noreply.github.com>
Date: Fri, 6 Oct 2023 11:57:00 -0400
Subject: [PATCH 42/42] update CHANGELOG
---
packages/components/CHANGELOG.md | 4 ++++
1 file changed, 4 insertions(+)
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index 42ba2a8fc9c9d..4c31abc5a27bc 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -32,6 +32,10 @@
- `SlotFill`: Migrate to TypeScript and Convert to Functional Component ``. ([#51350](https://github.com/WordPress/gutenberg/pull/51350)).
- `Components`: move `ui/utils` to `utils` and remove `ui/` folder ([#54922](https://github.com/WordPress/gutenberg/pull/54922)).
+### Experimental
+
+- Introduce `Tabs`, an experimental v2 of `TabPanel`: ([#53960](https://github.com/WordPress/gutenberg/pull/53960)).
+
## 25.8.0 (2023-09-20)
### Enhancements