@wordpress/components 28.8.3 → 28.9.0

package/src/navigator/styles.ts

@@ -3,69 +3,140 @@
  */
 import { css, keyframes } from '@emotion/react';
 
-export const navigatorProviderWrapper = css`
+export const navigatorWrapper = css`
+	position: relative;
 	/* Prevents horizontal overflow while animating screen transitions */
-	overflow-x: hidden;
-	/* Mark this subsection of the DOM as isolated, providing performance benefits
-	 * by limiting calculations of layout, style and paint to a DOM subtree rather
-	 * than the entire page.
+	overflow-x: clip;
+	/*
+	 * Mark this DOM subtree as isolated when it comes to layout calculations,
+	 * providing performance benefits.
 	 */
-	contain: content;
+	contain: layout;
+
+	display: grid;
+	grid-template-columns: 1fr;
+	grid-template-rows: 1fr;
+	align-items: start;
 `;
 
-const fadeInFromRight = keyframes( {
-	'0%': {
+const fadeIn = keyframes( {
+	from: {
 		opacity: 0,
-		transform: `translateX( 50px )`,
 	},
-	'100%': { opacity: 1, transform: 'none' },
 } );
 
-const fadeInFromLeft = keyframes( {
-	'0%': {
+const fadeOut = keyframes( {
+	to: {
 		opacity: 0,
-		transform: `translateX( -50px )`,
 	},
-	'100%': { opacity: 1, transform: 'none' },
 } );
 
-type NavigatorScreenAnimationProps = {
-	isInitial?: boolean;
-	isBack?: boolean;
-	isRTL: boolean;
+export const slideFromRight = keyframes( {
+	from: {
+		transform: 'translateX(100px)',
+	},
+} );
+
+export const slideToLeft = keyframes( {
+	to: {
+		transform: 'translateX(-80px)',
+	},
+} );
+
+export const slideFromLeft = keyframes( {
+	from: {
+		transform: 'translateX(-100px)',
+	},
+} );
+
+export const slideToRight = keyframes( {
+	to: {
+		transform: 'translateX(80px)',
+	},
+} );
+
+const FADE = {
+	DURATION: 70,
+	EASING: 'linear',
+	DELAY: {
+		IN: 70,
+		OUT: 40,
+	},
+};
+const SLIDE = {
+	DURATION: 300,
+	EASING: 'cubic-bezier(0.33, 0, 0, 1)',
+};
+
+export const TOTAL_ANIMATION_DURATION = {
+	IN: Math.max( FADE.DURATION + FADE.DELAY.IN, SLIDE.DURATION ),
+	OUT: Math.max( FADE.DURATION + FADE.DELAY.OUT, SLIDE.DURATION ),
 };
 
-const navigatorScreenAnimation = ( {
-	isInitial,
-	isBack,
-	isRTL,
-}: NavigatorScreenAnimationProps ) => {
-	if ( isInitial && ! isBack ) {
-		return;
-	}
+export const ANIMATION_END_NAMES = {
+	end: {
+		in: slideFromRight.name,
+		out: slideToLeft.name,
+	},
+	start: {
+		in: slideFromLeft.name,
+		out: slideToRight.name,
+	},
+};
 
-	const animationName =
-		( isRTL && isBack ) || ( ! isRTL && ! isBack )
-			? fadeInFromRight
-			: fadeInFromLeft;
+const ANIMATION = {
+	end: {
+		in: css`
+			${ FADE.DURATION }ms ${ FADE.EASING } ${ FADE.DELAY
+				.IN }ms both ${ fadeIn }, ${ SLIDE.DURATION }ms ${ SLIDE.EASING } both ${ slideFromRight }
+		`,
+		out: css`
+			${ FADE.DURATION }ms ${ FADE.EASING } ${ FADE.DELAY
+				.OUT }ms both ${ fadeOut }, ${ SLIDE.DURATION }ms ${ SLIDE.EASING } both ${ slideToLeft }
+		`,
+	},
+	start: {
+		in: css`
+			${ FADE.DURATION }ms ${ FADE.EASING } ${ FADE.DELAY
+				.IN }ms both ${ fadeIn }, ${ SLIDE.DURATION }ms ${ SLIDE.EASING } both ${ slideFromLeft }
+		`,
+		out: css`
+			${ FADE.DURATION }ms ${ FADE.EASING } ${ FADE.DELAY
+				.OUT }ms both ${ fadeOut }, ${ SLIDE.DURATION }ms ${ SLIDE.EASING } both ${ slideToRight }
+		`,
+	},
+} as const;
+export const navigatorScreenAnimation = css`
+	z-index: 1;
 
-	return css`
-		animation-duration: 0.14s;
-		animation-timing-function: ease-in-out;
-		will-change: transform, opacity;
-		animation-name: ${ animationName };
+	&[data-animation-type='out'] {
+		z-index: 0;
+	}
 
-		@media ( prefers-reduced-motion ) {
-			animation-duration: 0s;
+	@media not ( prefers-reduced-motion ) {
+		&:not( [data-skip-animation] ) {
+			${ ( [ 'start', 'end' ] as const ).map( ( direction ) =>
+				( [ 'in', 'out' ] as const ).map(
+					( type ) => css`
+						&[data-animation-direction='${ direction }'][data-animation-type='${ type }'] {
+							animation: ${ ANIMATION[ direction ][ type ] };
+						}
+					`
+				)
+			) }
 		}
-	`;
-};
+	}
+`;
 
-export const navigatorScreen = ( props: NavigatorScreenAnimationProps ) => css`
+export const navigatorScreen = css`
 	/* Ensures horizontal overflow is visually accessible */
 	overflow-x: auto;
 	/* In case the root has a height, it should not be exceeded */
 	max-height: 100%;
+	box-sizing: border-box;
+
+	position: relative;
 
-	${ navigatorScreenAnimation( props ) }
+	grid-column: 1 / -1;
+	grid-row: 1 / -1;
 `;

package/src/navigator/test/index.tsx

@@ -14,14 +14,8 @@ import { useState } from '@wordpress/element';
  * Internal dependencies
  */
 import Button from '../../button';
-import {
-	NavigatorProvider,
-	NavigatorScreen,
-	NavigatorButton,
-	NavigatorBackButton,
-	NavigatorToParentButton,
-	useNavigator,
-} from '..';
+import { Navigator, useNavigator } from '..';
+import { NavigatorToParentButton } from '../legacy';
 import type { NavigateOptions } from '../types';
 
 const INVALID_HTML_ATTRIBUTE = {
@@ -76,11 +70,11 @@ function CustomNavigatorButton( {
 	path,
 	onClick,
 	...props
-}: Omit< ComponentPropsWithoutRef< typeof NavigatorButton >, 'onClick' > & {
+}: Omit< ComponentPropsWithoutRef< typeof Navigator.Button >, 'onClick' > & {
 	onClick?: CustomTestOnClickHandler;
 } ) {
 	return (
-		<NavigatorButton
+		<Navigator.Button
 			onClick={ () => {
 				// Used to spy on the values passed to `navigator.goTo`.
 				onClick?.( { type: 'goTo', path } );
@@ -95,7 +89,7 @@ function CustomNavigatorGoToBackButton( {
 	path,
 	onClick,
 	...props
-}: Omit< ComponentPropsWithoutRef< typeof NavigatorButton >, 'onClick' > & {
+}: Omit< ComponentPropsWithoutRef< typeof Navigator.Button >, 'onClick' > & {
 	onClick?: CustomTestOnClickHandler;
 } ) {
 	const { goTo } = useNavigator();
@@ -115,7 +109,7 @@ function CustomNavigatorGoToSkipFocusButton( {
 	path,
 	onClick,
 	...props
-}: Omit< ComponentPropsWithoutRef< typeof NavigatorButton >, 'onClick' > & {
+}: Omit< ComponentPropsWithoutRef< typeof Navigator.Button >, 'onClick' > & {
 	onClick?: CustomTestOnClickHandler;
 } ) {
 	const { goTo } = useNavigator();
@@ -134,11 +128,14 @@ function CustomNavigatorGoToSkipFocusButton( {
 function CustomNavigatorBackButton( {
 	onClick,
 	...props
-}: Omit< ComponentPropsWithoutRef< typeof NavigatorBackButton >, 'onClick' > & {
+}: Omit<
+	ComponentPropsWithoutRef< typeof Navigator.BackButton >,
+	'onClick'
+> & {
 	onClick?: CustomTestOnClickHandler;
 } ) {
 	return (
-		<NavigatorBackButton
+		<Navigator.BackButton
 			onClick={ () => {
 				// Used to spy on the values passed to `navigator.goBack`.
 				onClick?.( { type: 'goBack' } );
@@ -151,7 +148,10 @@ function CustomNavigatorBackButton( {
 function CustomNavigatorToParentButton( {
 	onClick,
 	...props
-}: Omit< ComponentPropsWithoutRef< typeof NavigatorBackButton >, 'onClick' > & {
+}: Omit<
+	ComponentPropsWithoutRef< typeof Navigator.BackButton >,
+	'onClick'
+> & {
 	onClick?: CustomTestOnClickHandler;
 } ) {
 	return (
@@ -194,13 +194,13 @@ const ProductScreen = ( {
 	const { params } = useNavigator();
 
 	return (
-		<NavigatorScreen path={ PATHS.PRODUCT_PATTERN }>
+		<Navigator.Screen path={ PATHS.PRODUCT_PATTERN }>
 			<p>{ SCREEN_TEXT.product }</p>
 			<p>Product ID is { params.productId }</p>
 			<CustomNavigatorBackButton onClick={ onBackButtonClick }>
 				{ BUTTON_TEXT.back }
 			</CustomNavigatorBackButton>
-		</NavigatorScreen>
+		</Navigator.Screen>
 	);
 };
 
@@ -215,8 +215,8 @@ const MyNavigation = ( {
 	const [ outerInputValue, setOuterInputValue ] = useState( '' );
 	return (
 		<>
-			<NavigatorProvider initialPath={ initialPath }>
-				<NavigatorScreen path={ PATHS.HOME }>
+			<Navigator initialPath={ initialPath }>
+				<Navigator.Screen path={ PATHS.HOME }>
 					<p>{ SCREEN_TEXT.home }</p>
 					{ /*
 					 * A button useful to test focus restoration. This button is the first
@@ -254,9 +254,9 @@ const MyNavigation = ( {
 					>
 						{ BUTTON_TEXT.toInvalidHtmlPathScreen }
 					</CustomNavigatorButton>
-				</NavigatorScreen>
+				</Navigator.Screen>
 
-				<NavigatorScreen path={ PATHS.CHILD }>
+				<Navigator.Screen path={ PATHS.CHILD }>
 					<p>{ SCREEN_TEXT.child }</p>
 					{ /*
 					 * A button useful to test focus restoration. This button is the first
@@ -286,30 +286,30 @@ const MyNavigation = ( {
 						} }
 						value={ innerInputValue }
 					/>
-				</NavigatorScreen>
+				</Navigator.Screen>
 
-				<NavigatorScreen path={ PATHS.NESTED }>
+				<Navigator.Screen path={ PATHS.NESTED }>
 					<p>{ SCREEN_TEXT.nested }</p>
 					<CustomNavigatorBackButton
 						onClick={ onNavigatorButtonClick }
 					>
 						{ BUTTON_TEXT.back }
 					</CustomNavigatorBackButton>
-				</NavigatorScreen>
+				</Navigator.Screen>
 
 				<ProductScreen onBackButtonClick={ onNavigatorButtonClick } />
 
-				<NavigatorScreen path={ PATHS.INVALID_HTML_ATTRIBUTE }>
+				<Navigator.Screen path={ PATHS.INVALID_HTML_ATTRIBUTE }>
 					<p>{ SCREEN_TEXT.invalidHtmlPath }</p>
 					<CustomNavigatorBackButton
 						onClick={ onNavigatorButtonClick }
 					>
 						{ BUTTON_TEXT.back }
 					</CustomNavigatorBackButton>
-				</NavigatorScreen>
+				</Navigator.Screen>
 
-				{ /* A `NavigatorScreen` with `path={ PATHS.NOT_FOUND }` is purposefully not included. */ }
-			</NavigatorProvider>
+				{ /* A `Navigator.Screen` with `path={ PATHS.NOT_FOUND }` is purposefully not included. */ }
+			</Navigator>
 
 			<label htmlFor="test-input-outer">Outer input</label>
 			<input
@@ -334,8 +334,8 @@ const MyHierarchicalNavigation = ( {
 } ) => {
 	return (
 		<>
-			<NavigatorProvider initialPath={ initialPath }>
-				<NavigatorScreen path={ PATHS.HOME }>
+			<Navigator initialPath={ initialPath }>
+				<Navigator.Screen path={ PATHS.HOME }>
 					<p>{ SCREEN_TEXT.home }</p>
 					{ /*
 					 * A button useful to test focus restoration. This button is the first
@@ -349,9 +349,9 @@ const MyHierarchicalNavigation = ( {
 					>
 						{ BUTTON_TEXT.toChildScreen }
 					</CustomNavigatorButton>
-				</NavigatorScreen>
+				</Navigator.Screen>
 
-				<NavigatorScreen path={ PATHS.CHILD }>
+				<Navigator.Screen path={ PATHS.CHILD }>
 					<p>{ SCREEN_TEXT.child }</p>
 					{ /*
 					 * A button useful to test focus restoration. This button is the first
@@ -370,9 +370,9 @@ const MyHierarchicalNavigation = ( {
 					>
 						{ BUTTON_TEXT.back }
 					</CustomNavigatorBackButton>
-				</NavigatorScreen>
+				</Navigator.Screen>
 
-				<NavigatorScreen path={ PATHS.NESTED }>
+				<Navigator.Screen path={ PATHS.NESTED }>
 					<p>{ SCREEN_TEXT.nested }</p>
 					<CustomNavigatorBackButton
 						onClick={ onNavigatorButtonClick }
@@ -385,14 +385,14 @@ const MyHierarchicalNavigation = ( {
 					>
 						{ BUTTON_TEXT.backUsingGoTo }
 					</CustomNavigatorGoToBackButton>
-				</NavigatorScreen>
+				</Navigator.Screen>
 				<CustomNavigatorGoToSkipFocusButton
 					path={ PATHS.NESTED }
 					onClick={ onNavigatorButtonClick }
 				>
 					{ BUTTON_TEXT.goToWithSkipFocus }
 				</CustomNavigatorGoToSkipFocusButton>
-			</NavigatorProvider>
+			</Navigator>
 		</>
 	);
 };
@@ -406,8 +406,8 @@ const MyDeprecatedNavigation = ( {
 } ) => {
 	return (
 		<>
-			<NavigatorProvider initialPath={ initialPath }>
-				<NavigatorScreen path={ PATHS.HOME }>
+			<Navigator initialPath={ initialPath }>
+				<Navigator.Screen path={ PATHS.HOME }>
 					<p>{ SCREEN_TEXT.home }</p>
 					{ /*
 					 * A button useful to test focus restoration. This button is the first
@@ -421,9 +421,9 @@ const MyDeprecatedNavigation = ( {
 					>
 						{ BUTTON_TEXT.toChildScreen }
 					</CustomNavigatorButton>
-				</NavigatorScreen>
+				</Navigator.Screen>
 
-				<NavigatorScreen path={ PATHS.CHILD }>
+				<Navigator.Screen path={ PATHS.CHILD }>
 					<p>{ SCREEN_TEXT.child }</p>
 					{ /*
 					 * A button useful to test focus restoration. This button is the first
@@ -442,17 +442,17 @@ const MyDeprecatedNavigation = ( {
 					>
 						{ BUTTON_TEXT.back }
 					</CustomNavigatorToParentButton>
-				</NavigatorScreen>
+				</Navigator.Screen>
 
-				<NavigatorScreen path={ PATHS.NESTED }>
+				<Navigator.Screen path={ PATHS.NESTED }>
 					<p>{ SCREEN_TEXT.nested }</p>
 					<CustomNavigatorToParentButtonAlternative
 						onClick={ onNavigatorButtonClick }
 					>
 						{ BUTTON_TEXT.back }
 					</CustomNavigatorToParentButtonAlternative>
-				</NavigatorScreen>
-			</NavigatorProvider>
+				</Navigator.Screen>
+			</Navigator>
 		</>
 	);
 };
@@ -643,10 +643,10 @@ describe( 'Navigator', () => {
 	} );
 
 	it( 'should warn if the `path` prop does not follow the required format', () => {
-		render( <NavigatorScreen path="not-valid">Test</NavigatorScreen> );
+		render( <Navigator.Screen path="not-valid">Test</Navigator.Screen> );
 
 		expect( console ).toHaveWarnedWith(
-			'wp.components.NavigatorScreen: the `path` should follow a URL-like scheme; it should start with and be separated by the `/` character.'
+			'wp.components.Navigator.Screen: the `path` should follow a URL-like scheme; it should start with and be separated by the `/` character.'
 		);
 	} );
 
@@ -880,7 +880,7 @@ describe( 'Navigator', () => {
 
 			// Rendering `NavigatorToParentButton` logs a deprecation notice
 			expect( console ).toHaveWarnedWith(
-				'wp.components.NavigatorToParentButton is deprecated since version 6.7. Please use wp.components.NavigatorBackButton instead.'
+				'wp.components.NavigatorToParentButton is deprecated since version 6.7. Please use wp.components.Navigator.BackButton instead.'
 			);
 		} );
 

package/src/navigator/types.ts

@@ -86,7 +86,7 @@ export type NavigatorContext = Navigator & {
 	match?: string;
 };
 
-export type NavigatorProviderProps = {
+export type NavigatorProps = {
 	/**
 	 * The initial active path.
 	 */
@@ -100,6 +100,24 @@ export type NavigatorProviderProps = {
 export type NavigatorScreenProps = {
 	/**
 	 * The screen's path, matched against the current path stored in the navigator.
+	 *
+	 * `Navigator` assumes that screens are organized hierarchically according
+	 * to their `path`, which should follow a URL-like scheme where each path
+	 * segment starts with and is separated by the `/` character.
+	 *
+	 * `Navigator` will treat "back" navigations as going to the parent screen —
+	 * it is, therefore, the responsibility of the consumer of the component to
+	 * create the correct screen hierarchy.
+	 *
+	 * For example:
+	 *  - `/` is the root of all paths. There should always be a screen with
+	 *    `path="/"`;
+	 *  - `/parent/child` is a child of `/parent`;
+	 *  - `/parent/child/grand-child` is a child of `/parent/child`;
+	 *  - `/parent/:param` is a child of `/parent` as well;
+	 *  - if the current screen has a `path="/parent/child/grand-child"`, when
+	 *    going "back" `Navigator` will try to recursively navigate the path
+	 *    hierarchy until a matching screen (or the root `/`) is found.
 	 */
 	path: string;
 	/**

package/src/navigator/use-navigator.ts

@@ -10,7 +10,10 @@ import { NavigatorContext } from './context';
 import type { Navigator } from './types';
 
 /**
- * Retrieves a `navigator` instance.
+ * Retrieves a `navigator` instance. This hook provides advanced functionality,
+ * such as imperatively navigating to a new location (with options like
+ * navigating back or skipping focus restoration) and accessing the current
+ * location and path parameters.
  */
 export function useNavigator(): Navigator {
 	const { location, params, goTo, goBack, goToParent } =

package/src/search-control/index.tsx

@@ -67,7 +67,7 @@ function UnforwardedSearchControl(
 ) {
 	// @ts-expect-error The `disabled` prop is not yet supported in the SearchControl component.
 	// Work with the design team (@WordPress/gutenberg-design) if you need this feature.
-	delete restProps.disabled;
+	const { disabled, ...filteredRestProps } = restProps;
 
 	const searchRef = useRef< HTMLInputElement >( null );
 	const instanceId = useInstanceId(
@@ -117,7 +117,7 @@ function UnforwardedSearchControl(
 						/>
 					</SuffixItemWrapper>
 				}
-				{ ...restProps }
+				{ ...filteredRestProps }
 			/>
 		</ContextSystemProvider>
 	);

package/src/select-control/stories/index.story.tsx

@@ -12,6 +12,7 @@ import { useState } from '@wordpress/element';
  * Internal dependencies
  */
 import SelectControl from '../';
+import { InputControlPrefixWrapper } from '../../input-control/input-prefix-wrapper';
 
 const meta: Meta< typeof SelectControl > = {
 	title: 'Components/SelectControl',
@@ -64,6 +65,7 @@ const SelectControlWithState: StoryFn< typeof SelectControl > = ( props ) => {
 export const Default = SelectControlWithState.bind( {} );
 Default.args = {
 	__nextHasNoMarginBottom: true,
+	label: 'Label',
 	options: [
 		{ value: '', label: 'Select an Option', disabled: true },
 		{ value: 'a', label: 'Option A' },
@@ -76,7 +78,6 @@ export const WithLabelAndHelpText = SelectControlWithState.bind( {} );
 WithLabelAndHelpText.args = {
 	...Default.args,
 	help: 'Help text to explain the select control.',
-	label: 'Value',
 };
 
 /**
@@ -86,6 +87,7 @@ WithLabelAndHelpText.args = {
 export const WithCustomChildren = SelectControlWithState.bind( {} );
 WithCustomChildren.args = {
 	__nextHasNoMarginBottom: true,
+	label: 'Label',
 	children: (
 		<>
 			<option value="option-1">Option 1</option>
@@ -104,8 +106,19 @@ WithCustomChildren.args = {
 	),
 };
 
+/**
+ * By default, the prefix is aligned with the edge of the input border, with no padding.
+ * If you want to apply standard padding in accordance with the size variant, wrap the element in the `<InputControlPrefixWrapper>` component.
+ */
+export const WithPrefix = SelectControlWithState.bind( {} );
+WithPrefix.args = {
+	...Default.args,
+	prefix: <InputControlPrefixWrapper>Prefix:</InputControlPrefixWrapper>,
+};
+
 export const Minimal = SelectControlWithState.bind( {} );
 Minimal.args = {
 	...Default.args,
 	variant: 'minimal',
+	hideLabelFromVision: true,
 };

package/src/tabs/stories/index.story.tsx

@@ -70,6 +70,112 @@ const Template: StoryFn< typeof Tabs > = ( props ) => {
 
 export const Default = Template.bind( {} );
 
+export const SizeAndOverflowPlayground: StoryFn< typeof Tabs > = ( props ) => {
+	const [ fullWidth, setFullWidth ] = useState( false );
+	return (
+		<div>
+			<div style={ { maxWidth: '40rem', marginBottom: '1rem' } }>
+				<p>
+					This story helps understand how the TabList component
+					behaves under different conditions. The container below
+					(with the dotted red border) can be horizontally resized,
+					and it has a bit of padding to be out of the way of the
+					TabList.
+				</p>
+				<p>
+					The button will toggle between full width (adding{ ' ' }
+					<code>width: 100%</code>) and the default width.
+				</p>
+				<p>Try the following:</p>
+				<ul>
+					<li>
+						<strong>Small container</strong> that causes tabs to
+						overflow with scroll.
+					</li>
+					<li>
+						<strong>Large container</strong> that exceeds the normal
+						width of the tabs.
+						<ul>
+							<li>
+								<strong>
+									With <code>width: 100%</code>
+								</strong>{ ' ' }
+								set on the TabList (tabs fill up the space).
+							</li>
+							<li>
+								<strong>
+									Without <code>width: 100%</code>
+								</strong>{ ' ' }
+								(defaults to <code>auto</code>) set on the
+								TabList (tabs take up space proportional to
+								their content).
+							</li>
+						</ul>
+					</li>
+				</ul>
+			</div>
+			<Button
+				style={ { marginBottom: '1rem' } }
+				variant="primary"
+				onClick={ () => setFullWidth( ! fullWidth ) }
+			>
+				{ fullWidth
+					? 'Remove width: 100% from TabList'
+					: 'Set width: 100% in TabList' }
+			</Button>
+			<Tabs { ...props }>
+				<div
+					style={ {
+						width: '20rem',
+						border: '2px dotted red',
+						padding: '1rem',
+						resize: 'horizontal',
+						overflow: 'auto',
+					} }
+				>
+					<Tabs.TabList
+						style={ {
+							maxWidth: '100%',
+							width: fullWidth ? '100%' : undefined,
+						} }
+					>
+						<Tabs.Tab tabId="tab1">
+							Label with multiple words
+						</Tabs.Tab>
+						<Tabs.Tab tabId="tab2">Short</Tabs.Tab>
+						<Tabs.Tab tabId="tab3">
+							Hippopotomonstrosesquippedaliophobia
+						</Tabs.Tab>
+						<Tabs.Tab tabId="tab4">Tab 4</Tabs.Tab>
+						<Tabs.Tab tabId="tab5">Tab 5</Tabs.Tab>
+					</Tabs.TabList>
+				</div>
+				<Tabs.TabPanel tabId="tab1">
+					<p>Selected tab: Tab 1</p>
+					<p>(Label with multiple words)</p>
+				</Tabs.TabPanel>
+				<Tabs.TabPanel tabId="tab2">
+					<p>Selected tab: Tab 2</p>
+					<p>(Short)</p>
+				</Tabs.TabPanel>
+				<Tabs.TabPanel tabId="tab3">
+					<p>Selected tab: Tab 3</p>
+					<p>(Hippopotomonstrosesquippedaliophobia)</p>
+				</Tabs.TabPanel>
+				<Tabs.TabPanel tabId="tab4">
+					<p>Selected tab: Tab 4</p>
+				</Tabs.TabPanel>
+				<Tabs.TabPanel tabId="tab5">
+					<p>Selected tab: Tab 5</p>
+				</Tabs.TabPanel>
+			</Tabs>
+		</div>
+	);
+};
+SizeAndOverflowPlayground.args = {
+	defaultTabId: 'tab4',
+};
+
 const VerticalTemplate: StoryFn< typeof Tabs > = ( props ) => {
 	return (
 		<Tabs orientation="vertical" { ...props }>