Tabs: indicator animation

packages/components/CHANGELOG.md

@@ -4,6 +4,7 @@
 
 ### Enhancements
 
+-   `Tabs`: Animate indicator ([#60560](https://github.com/WordPress/gutenberg/pull/60560)).
 -   `ExternalLink`: Use unicode arrow instead of svg icon ([#60255](https://github.com/WordPress/gutenberg/pull/60255)).
 -   `ProgressBar`: Move the indicator width styles from emotion to a CSS variable ([#60388](https://github.com/WordPress/gutenberg/pull/60388)).
 -   `Text`: Add `text-wrap: pretty;` to improve wrapping. ([#60164](https://github.com/WordPress/gutenberg/pull/60164)).

packages/components/src/tabs/styles.ts

@@ -13,12 +13,33 @@ import { space } from '../utils/space';
 import { reduceMotion } from '../utils/reduce-motion';
 
 export const TabListWrapper = styled.div`
+	position: relative;
 	display: flex;
 	align-items: stretch;
 	flex-direction: row;
 	&[aria-orientation='vertical'] {
 		flex-direction: column;
 	}
+	&::after {
+		content: '';
+		position: absolute;
+		left: var( --indicator-left );
+		bottom: 0;
+		width: var( --indicator-width );
+		height: 0;
+		border-bottom: var( --wp-admin-border-width-focus ) solid
+			${ COLORS.theme.accent };
+		pointer-events: none;
+		@media not ( prefers-reduced-motion: reduce ) {
+			transition-property: left width;
+			transition-duration: 0.2s;
+			transition-timing-function: ease-out;
+		}
+
+		// Windows high contrast mode.
+		outline: 2px solid transparent;
+		outline-offset: -1px;
+	}
 `;
 
 export const Tab = styled( Ariakit.Tab )`
@@ -51,34 +72,6 @@ export const Tab = styled( Ariakit.Tab )`
 			outline: none;
 		}
 
-		// Tab indicator
-		&::after {
-			content: '';
-			position: absolute;
-			right: 0;
-			bottom: 0;
-			left: 0;
-			pointer-events: none;
-
-			// Draw the indicator.
-			background: ${ COLORS.theme.accent };
-			height: calc( 0 * var( --wp-admin-border-width-focus ) );
-			border-radius: 0;
-
-			// Animation
-			transition: all 0.1s linear;
-			${ reduceMotion( 'transition' ) };
-		}
-
-		// Active.
-		&[aria-selected='true']::after {
-			height: calc( 1 * var( --wp-admin-border-width-focus ) );
-
-			// Windows high contrast mode.
-			outline: 2px solid transparent;
-			outline-offset: -1px;
-		}
-
 		// Focus.
 		&::before {
 			content: '';

packages/components/src/tabs/tablist.tsx

@@ -8,7 +8,7 @@ import * as Ariakit from '@ariakit/react';
  * WordPress dependencies
  */
 import warning from '@wordpress/warning';
-import { forwardRef } from '@wordpress/element';
+import { forwardRef, useEffect, useRef, useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -17,19 +17,61 @@ import type { TabListProps } from './types';
 import { useTabsContext } from './context';
 import { TabListWrapper } from './styles';
 import type { WordPressComponentProps } from '../context';
+import type { CSSProperties } from 'react';
 
 export const TabList = forwardRef<
 	HTMLDivElement,
 	WordPressComponentProps< TabListProps, 'div', false >
 >( function TabList( { children, ...otherProps }, ref ) {
 	const context = useTabsContext();
+
+	const [ indicatorPosition, setIndicatorPosition ] = useState( {
+		left: 0,
+		width: 0,
+	} );
+	const selectedId = context?.store.useState( 'selectedId' );
+	const selectedTabEl = context?.store.item( selectedId )?.element;
+	const resizeObserverRef = useRef< ResizeObserver >();
+	const observedElementRef = useRef< HTMLElement >();
+
+	useEffect( () => {
+		if ( selectedTabEl === observedElementRef.current ) return;
+		observedElementRef.current = selectedTabEl ?? undefined;
+
+		function updateIndicator( element: HTMLElement ) {
+			setIndicatorPosition( {
+				left: element.offsetLeft,
+				width: element.getBoundingClientRect().width,
+			} );
+		}
+
+		// Set up a ResizeObserver.
+		if ( ! resizeObserverRef.current ) {
+			resizeObserverRef.current = new ResizeObserver( () => {
+				if ( observedElementRef.current )
+					updateIndicator( observedElementRef.current );
+			} );
+		}
+		const { current: resizeObserver } = resizeObserverRef;
+
+		// Unobserve previous element.
+		const { current: observedElement } = observedElementRef;
+		if ( observedElement ) resizeObserver.unobserve( observedElement );
+
+		// Observe new element.
+		if ( selectedTabEl ) {
+			updateIndicator( selectedTabEl );
+			resizeObserver.observe( selectedTabEl );
+		}
+	}, [ selectedTabEl ] );
+
 	if ( ! context ) {
 		warning( '`Tabs.TabList` must be wrapped in a `Tabs` component.' );
 		return null;
 	}
 	const { store } = context;
 
-	const { selectedId, activeId, selectOnMove } = store.useState();
+	const { activeId, selectOnMove } = store.useState();
 	const { setActiveId } = store;
 
 	const onBlur = () => {
@@ -50,6 +92,12 @@ export const TabList = forwardRef<
 		<Ariakit.TabList
 			ref={ ref }
 			store={ store }
+			style={
+				{
+					'--indicator-left': `${ indicatorPosition.left }px`,
+					'--indicator-width': `${ indicatorPosition.width }px`,
+				} as CSSProperties
+			}
 			render={ <TabListWrapper /> }
 			onBlur={ onBlur }
 			{ ...otherProps }

packages/preferences/src/components/preferences-modal-tabs/style.scss

@@ -1,12 +1,15 @@
 $vertical-tabs-width: 160px;
 
 .preferences__tabs-tablist {
-	position: absolute;
+	position: absolute !important;
 	top: $header-height + $grid-unit-30;
 	// Aligns button text instead of button box.
 	left: $grid-unit-20;
 	width: $vertical-tabs-width;
 
+	&::after {
+		content: none !important;
+	}
 }
 
 .preferences__tabs-tab {
@@ -19,10 +22,6 @@ $vertical-tabs-width: 160px;
 		font-weight: 500;
 	}
 
-	&[aria-selected="true"]::after {
-		content: none;
-	}
-
 	&[role="tab"]:focus:not(:disabled) {
 		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
 		// Windows high contrast mode.