Tabs: rename initialTabId prop to defaultTabId (#59035)

* rename `initialTabId` prop * changelog * Update readme --------- Co-authored-by: chad1008 <shireling@git.wordpress.org> Co-authored-by: mirka <0mirka00@git.wordpress.org>
WordPress · Feb 21, 2024 · b63cfd5 · b63cfd5 · github-actions · Feb 21, 2024
1 parent f01fef6
commit b63cfd5
Show file tree

Hide file tree

Showing 12 changed files with 68 additions and 64 deletions.
diff --git a/packages/block-editor/src/components/colors-gradients/control.js b/packages/block-editor/src/components/colors-gradients/control.js
@@ -133,7 +133,7 @@ function ColorGradientControlInner( {
 					{ canChooseAColor && canChooseAGradient && (
 						<div>
 							<Tabs
-								initialTabId={
+								defaultTabId={
 									gradientValue
 										? TAB_IDS.gradient
 										: !! canChooseAColor && TAB_IDS.color

diff --git a/packages/block-editor/src/components/global-styles/color-panel.js b/packages/block-editor/src/components/global-styles/color-panel.js
@@ -259,7 +259,7 @@ function ColorPanelDropdown( {
 								/>
 							) }
 							{ tabs.length > 1 && (
-								<Tabs initialTabId={ currentTab?.key }>
+								<Tabs defaultTabId={ currentTab?.key }>
 									<Tabs.TabList>
 										{ tabs.map( ( tab ) => (
 											<Tabs.Tab

diff --git a/packages/block-editor/src/components/inspector-controls-tabs/index.js b/packages/block-editor/src/components/inspector-controls-tabs/index.js
@@ -35,7 +35,7 @@ export default function InspectorControlsTabs( {
 
 	return (
 		<div className="block-editor-block-inspector__tabs">
-			<Tabs initialTabId={ initialTabName } key={ clientId }>
+			<Tabs defaultTabId={ initialTabName } key={ clientId }>
 				<Tabs.TabList>
 					{ tabs.map( ( tab ) => (
 						<Tabs.Tab

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -20,6 +20,10 @@
 -   Removing `dom-scroll-into-view` as a dependency of the components package ([#59085](https://github.com/WordPress/gutenberg/pull/59085)).
 -   Add higher-order function to ignore IME keydowns ([#59081](https://github.com/WordPress/gutenberg/pull/59081)).
 
+### Experimental
+
+-   `Tabs`: rename `initialTabId` prop to `defaultTabId` ([#59035](https://github.com/WordPress/gutenberg/pull/59035)).
+
 ## 26.0.1 (2024-02-13)
 
 ### Bug Fix

diff --git a/packages/components/src/tabs/README.md b/packages/components/src/tabs/README.md
@@ -14,7 +14,7 @@ Tabs organizes content across different screens, data sets, and interactions. It
 
 #### 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.
+Tabs can be used in an uncontrolled mode, where the component manages its own state. In this mode, the `defaultTabId` 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';
@@ -24,25 +24,25 @@ const onSelect = ( tabName ) => {
 };
 
 const MyUncontrolledTabs = () => (
-		<Tabs onSelect={onSelect} initialTab="tab2">
-			<Tabs.TabList >
-				<Tabs.Tab id={ 'tab1' } title={ 'Tab 1' }>
+		<Tabs onSelect={ onSelect } defaultTabId="tab2">
+			<Tabs.TabList>
+				<Tabs.Tab tabId="tab1" title="Tab 1">
 					Tab 1
 				</Tabs.Tab>
-				<Tabs.Tab id={ 'tab2' } title={ 'Tab 2' }>
+				<Tabs.Tab tabId="tab2" title="Tab 2">
 					Tab 2
 				</Tabs.Tab>
-				<Tabs.Tab id={ 'tab3' } title={ 'Tab 3' }>
+				<Tabs.Tab tabId="tab3" title="Tab 3">
 					Tab 3
 				</Tabs.Tab>
 			</Tabs.TabList>
-			<Tabs.TabPanel id={ 'tab1' }>
+			<Tabs.TabPanel tabId="tab1">
 				<p>Selected tab: Tab 1</p>
 			</Tabs.TabPanel>
-			<Tabs.TabPanel id={ 'tab2' }>
+			<Tabs.TabPanel tabId="tab2">
 				<p>Selected tab: Tab 2</p>
 			</Tabs.TabPanel>
-			<Tabs.TabPanel id={ 'tab3' }>
+			<Tabs.TabPanel tabId="tab3">
 				<p>Selected tab: Tab 3</p>
 			</Tabs.TabPanel>
 		</Tabs>
@@ -51,7 +51,7 @@ const MyUncontrolledTabs = () => (
 
 #### Controlled Mode
 
-Tabs can also be used in a controlled mode, where the parent component specifies the `selectedTabId` and the `onSelect` props to control tab selection. In this mode, the `initialTabId` prop will be ignored if it is provided. 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, leaving the controlling component in charge of implementing the desired logic.
+Tabs can also be used in a controlled mode, where the parent component specifies the `selectedTabId` and the `onSelect` props to control tab selection. In this mode, the `defaultTabId` prop will be ignored if it is provided. 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, leaving the controlling component in charge of implementing the desired logic.
 
 ```jsx
 import { Tabs } from '@wordpress/components';
@@ -71,24 +71,24 @@ const MyControlledTabs = () => (
 				onSelect( selectedId );
 			} }
 		>
-			<Tabs.TabList >
-				<Tabs.Tab id={ 'tab1' } title={ 'Tab 1' }>
+			<Tabs.TabList>
+				<Tabs.Tab tabId="tab1" title="Tab 1">
 					Tab 1
 				</Tabs.Tab>
-				<Tabs.Tab id={ 'tab2' } title={ 'Tab 2' }>
+				<Tabs.Tab tabId="tab2" title="Tab 2">
 					Tab 2
 				</Tabs.Tab>
-				<Tabs.Tab id={ 'tab3' } title={ 'Tab 3' }>
+				<Tabs.Tab tabId="tab3" title="Tab 3">
 					Tab 3
 				</Tabs.Tab>
 			</Tabs.TabList>
-			<Tabs.TabPanel id={ 'tab1' }>
+			<Tabs.TabPanel tabId="tab1">
 				<p>Selected tab: Tab 1</p>
 			</Tabs.TabPanel>
-			<Tabs.TabPanel id={ 'tab2' }>
+			<Tabs.TabPanel tabId="tab2">
 				<p>Selected tab: Tab 2</p>
 			</Tabs.TabPanel>
-			<Tabs.TabPanel id={ 'tab3' }>
+			<Tabs.TabPanel tabId="tab3">
 				<p>Selected tab: Tab 3</p>
 			</Tabs.TabPanel>
 		</Tabs>
@@ -120,7 +120,7 @@ When `true`, the tab will be selected when receiving focus (automatic tab activa
 -   Required: No
 -   Default: `true`
 
-###### `initialTabId`: `string`
+###### `defaultTabId`: `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.
 

diff --git a/packages/components/src/tabs/index.tsx b/packages/components/src/tabs/index.tsx
@@ -26,7 +26,7 @@ import { TabPanel } from './tabpanel';
 
 function Tabs( {
 	selectOnMove = true,
-	initialTabId,
+	defaultTabId,
 	orientation = 'horizontal',
 	onSelect,
 	children,
@@ -36,7 +36,7 @@ function Tabs( {
 	const store = Ariakit.useTabStore( {
 		selectOnMove,
 		orientation,
-		defaultSelectedId: initialTabId && `${ instanceId }-${ initialTabId }`,
+		defaultSelectedId: defaultTabId && `${ instanceId }-${ defaultTabId }`,
 		setSelectedId: ( selectedId ) => {
 			const strippedDownId =
 				typeof selectedId === 'string'
@@ -66,7 +66,7 @@ function Tabs( {
 		return ! item.dimmed;
 	} );
 	const initialTab = items.find(
-		( item ) => item.id === `${ instanceId }-${ initialTabId }`
+		( item ) => item.id === `${ instanceId }-${ defaultTabId }`
 	);
 
 	// Handle selecting the initial tab.
@@ -78,8 +78,8 @@ function Tabs( {
 		// Wait for the denoted initial tab to be declared before making a
 		// selection. This ensures that if a tab is declared lazily it can
 		// still receive initial selection, as well as ensuring no tab is
-		// selected if an invalid `initialTabId` is provided.
-		if ( initialTabId && ! initialTab ) {
+		// selected if an invalid `defaultTabId` is provided.
+		if ( defaultTabId && ! initialTab ) {
 			return;
 		}
 
@@ -101,7 +101,7 @@ function Tabs( {
 	}, [
 		firstEnabledTab,
 		initialTab,
-		initialTabId,
+		defaultTabId,
 		isControlled,
 		items,
 		selectedId,
@@ -122,7 +122,7 @@ function Tabs( {
 		}
 
 		// If the currently selected tab becomes disabled, fall back to the
-		// `initialTabId` if possible. Otherwise select the first
+		// `defaultTabId` if possible. Otherwise select the first
 		// enabled tab (if there is one).
 		if ( initialTab && ! initialTab.dimmed ) {
 			setSelectedId( initialTab.id );