Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Tabs: rename initialTabId prop to defaultTabId #59035

Merged
merged 4 commits into from
Feb 21, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -133,7 +133,7 @@ function ColorGradientControlInner( {
{ canChooseAColor && canChooseAGradient && (
<div>
<Tabs
initialTabId={
defaultTabId={
gradientValue
? TAB_IDS.gradient
: !! canChooseAColor && TAB_IDS.color
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -259,7 +259,7 @@ function ColorPanelDropdown( {
/>
) }
{ tabs.length > 1 && (
<Tabs initialTabId={ currentTab?.key }>
<Tabs defaultTabId={ currentTab?.key }>
<Tabs.TabList>
{ tabs.map( ( tab ) => (
<Tabs.Tab
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
4 changes: 4 additions & 0 deletions packages/components/CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,10 @@
- `FormTokenField`: Use `Element.scrollIntoView()` instead of `dom-scroll-into-view` ([#59085](https://github.com/WordPress/gutenberg/pull/59085)).
- Removing `dom-scroll-into-view` as a dependency of the components package ([#59085](https://github.com/WordPress/gutenberg/pull/59085)).

### Experimental

- `Tabs`: rename `initialTabId` prop to `defaultTabId` ([#59035](https://github.com/WordPress/gutenberg/pull/59035)).

## 26.0.1 (2024-02-13)

### Bug Fix
Expand Down
36 changes: 18 additions & 18 deletions packages/components/src/tabs/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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>
Expand All @@ -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';
Expand All @@ -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>
Expand Down Expand Up @@ -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.

Expand Down
14 changes: 7 additions & 7 deletions packages/components/src/tabs/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ import { TabPanel } from './tabpanel';

function Tabs( {
selectOnMove = true,
initialTabId,
defaultTabId,
orientation = 'horizontal',
onSelect,
children,
Expand All @@ -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'
Expand Down Expand Up @@ -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.
Expand All @@ -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;
}

Expand All @@ -101,7 +101,7 @@ function Tabs( {
}, [
firstEnabledTab,
initialTab,
initialTabId,
defaultTabId,
isControlled,
items,
selectedId,
Expand All @@ -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 );
Expand Down
Loading
Loading