@wordpress/components 28.6.0 → 28.8.0

package/src/select-control/styles/select-control-styles.ts

@@ -7,7 +7,7 @@ import styled from '@emotion/styled';
 /**
  * Internal dependencies
  */
-import { COLORS, rtl } from '../../utils';
+import { COLORS, rtl, CONFIG } from '../../utils';
 import { space } from '../../utils/space';
 import type { SelectControlProps } from '../types';
 import InputControlSuffixWrapper from '../../input-control/input-suffix-wrapper';
@@ -108,10 +108,10 @@ const sizePaddings = ( {
 	selectSize = 'default',
 }: SelectProps ) => {
 	const padding = {
-		default: 16,
-		small: 8,
-		compact: 8,
-		'__unstable-large': 16,
+		default: CONFIG.controlPaddingX,
+		small: CONFIG.controlPaddingXSmall,
+		compact: CONFIG.controlPaddingXSmall,
+		'__unstable-large': CONFIG.controlPaddingX,
 	};
 
 	if ( ! __next40pxDefaultSize ) {

package/src/slot-fill/bubbles-virtually/fill.tsx

@@ -12,17 +12,17 @@ import type { FillComponentProps } from '../types';
 
 function useForceUpdate() {
 	const [ , setState ] = useState( {} );
-	const mounted = useRef( true );
+	const mountedRef = useRef( true );
 
 	useEffect( () => {
-		mounted.current = true;
+		mountedRef.current = true;
 		return () => {
-			mounted.current = false;
+			mountedRef.current = false;
 		};
 	}, [] );
 
 	return () => {
-		if ( mounted.current ) {
+		if ( mountedRef.current ) {
 			setState( {} );
 		}
 	};

package/src/slot-fill/index.tsx

@@ -71,6 +71,7 @@ export function Provider( {
 		</SlotFillProvider>
 	);
 }
+Provider.displayName = 'SlotFillProvider';
 
 export function createSlotFill( key: SlotKey ) {
 	const baseName = typeof key === 'symbol' ? key.description : key;

package/src/snackbar/index.tsx

@@ -96,17 +96,17 @@ function UnforwardedSnackbar(
 
 	// The `onDismiss/onRemove` can have unstable references,
 	// trigger side-effect cleanup, and reset timers.
-	const callbackRefs = useRef( { onDismiss, onRemove } );
+	const callbacksRef = useRef( { onDismiss, onRemove } );
 	useLayoutEffect( () => {
-		callbackRefs.current = { onDismiss, onRemove };
+		callbacksRef.current = { onDismiss, onRemove };
 	} );
 
 	useEffect( () => {
 		// Only set up the timeout dismiss if we're not explicitly dismissing.
 		const timeoutHandle = setTimeout( () => {
 			if ( ! explicitDismiss ) {
-				callbackRefs.current.onDismiss?.();
-				callbackRefs.current.onRemove?.();
+				callbacksRef.current.onDismiss?.();
+				callbacksRef.current.onRemove?.();
 			}
 		}, NOTICE_TIMEOUT );
 

package/src/snackbar/style.scss

@@ -4,7 +4,7 @@
 	background: rgba($black, 0.85); // Emulates #1e1e1e closely.
 	backdrop-filter: blur($grid-unit-20) saturate(180%);
 	border-radius: $radius-medium;
-	box-shadow: $elevation-x-small;
+	box-shadow: $elevation-small;
 	color: $white;
 	padding: $grid-unit-15 ($grid-unit-05 * 5);
 	width: 100%;

package/src/tab-panel/style.scss

@@ -89,7 +89,6 @@
 	}
 
 	&:focus-visible {
-		border-radius: 2px;
 		box-shadow: 0 0 0 var(--wp-admin-border-width-focus) $components-color-accent;
 
 		// Windows high contrast mode.

package/src/tabs/index.tsx

@@ -55,9 +55,9 @@ function Tabs( {
 	// Keep track of whether tabs have been populated. This is used to prevent
 	// certain effects from firing too early while tab data and relevant
 	// variables are undefined during the initial render.
-	const tabsHavePopulated = useRef( false );
+	const tabsHavePopulatedRef = useRef( false );
 	if ( items.length > 0 ) {
-		tabsHavePopulated.current = true;
+		tabsHavePopulatedRef.current = true;
 	}
 
 	const selectedTab = items.find( ( item ) => item.id === selectedId );
@@ -94,7 +94,7 @@ function Tabs( {
 
 			if ( firstEnabledTab ) {
 				setSelectedId( firstEnabledTab.id );
-			} else if ( tabsHavePopulated.current ) {
+			} else if ( tabsHavePopulatedRef.current ) {
 				setSelectedId( null );
 			}
 		}
@@ -148,7 +148,11 @@ function Tabs( {
 
 		// Once the tabs have populated, if the `selectedTabId` still can't be
 		// found, clear the selection.
-		if ( tabsHavePopulated.current && !! selectedTabId && ! selectedTab ) {
+		if (
+			tabsHavePopulatedRef.current &&
+			!! selectedTabId &&
+			! selectedTab
+		) {
 			setSelectedId( null );
 		}
 	}, [ isControlled, selectedTab, selectedTabId, setSelectedId ] );

package/src/tabs/styles.ts

@@ -7,7 +7,7 @@ import * as Ariakit from '@ariakit/react';
 /**
  * Internal dependencies
  */
-import { COLORS } from '../utils';
+import { COLORS, CONFIG } from '../utils';
 import { space } from '../utils/space';
 
 export const TabListWrapper = styled.div`
@@ -22,36 +22,65 @@ export const TabListWrapper = styled.div`
 		text-align: start;
 	}
 
-	@media not ( prefers-reduced-motion: reduce ) {
+	@media not ( prefers-reduced-motion ) {
 		&.is-animation-enabled::after {
-			transition-property: left, top, width, height;
+			transition-property: transform;
 			transition-duration: 0.2s;
 			transition-timing-function: ease-out;
 		}
 	}
+	--direction-factor: 1;
+	--direction-origin-x: left;
+	--indicator-start: var( --indicator-left );
+	&:dir( rtl ) {
+		--direction-factor: -1;
+		--direction-origin-x: right;
+		--indicator-start: var( --indicator-right );
+	}
 	&::after {
 		content: '';
 		position: absolute;
 		pointer-events: none;
+		transform-origin: var( --direction-origin-x ) top;
 
 		// Windows high contrast mode.
 		outline: 2px solid transparent;
 		outline-offset: -1px;
 	}
-	&:not( [aria-orientation='vertical'] )::after {
-		bottom: 0;
-		left: var( --indicator-left );
-		width: var( --indicator-width );
-		height: 0;
-		border-bottom: var( --wp-admin-border-width-focus ) solid
-			${ COLORS.theme.accent };
+
+	/* Using a large value to avoid antialiasing rounding issues
+			when scaling in the transform, see: https://stackoverflow.com/a/52159123 */
+	--antialiasing-factor: 100;
+	&:not( [aria-orientation='vertical'] ) {
+		&::after {
+			bottom: 0;
+			height: 0;
+			width: calc( var( --antialiasing-factor ) * 1px );
+			transform: translateX(
+					calc(
+						var( --indicator-start ) * var( --direction-factor ) *
+							1px
+					)
+				)
+				scaleX(
+					calc(
+						var( --indicator-width ) / var( --antialiasing-factor )
+					)
+				);
+			border-bottom: var( --wp-admin-border-width-focus ) solid
+				${ COLORS.theme.accent };
+		}
 	}
 	&[aria-orientation='vertical']::after {
 		z-index: -1;
+		top: 0;
 		left: 0;
 		width: 100%;
-		top: var( --indicator-top );
-		height: var( --indicator-height );
+		height: calc( var( --antialiasing-factor ) * 1px );
+		transform: translateY( calc( var( --indicator-top ) * 1px ) )
+			scaleY(
+				calc( var( --indicator-height ) / var( --antialiasing-factor ) )
+			);
 		background-color: ${ COLORS.theme.gray[ 100 ] };
 	}
 `;
@@ -107,7 +136,7 @@ export const Tab = styled( Ariakit.Tab )`
 			// Outline works for Windows high contrast mode as well.
 			outline: var( --wp-admin-border-width-focus ) solid
 				${ COLORS.theme.accent };
-			border-radius: 2px;
+			border-radius: ${ CONFIG.radiusSmall };
 
 			// Animation
 			opacity: 0;
@@ -136,7 +165,6 @@ export const TabPanel = styled( Ariakit.TabPanel )`
 	}
 
 	&:focus-visible {
-		border-radius: 2px;
 		box-shadow: 0 0 0 var( --wp-admin-border-width-focus )
 			${ COLORS.theme.accent };
 		// Windows high contrast mode.

package/src/tabs/tablist.tsx

@@ -78,10 +78,11 @@ export const TabList = forwardRef<
 			onBlur={ onBlur }
 			{ ...otherProps }
 			style={ {
-				'--indicator-left': `${ indicatorPosition.left }px`,
-				'--indicator-top': `${ indicatorPosition.top }px`,
-				'--indicator-width': `${ indicatorPosition.width }px`,
-				'--indicator-height': `${ indicatorPosition.height }px`,
+				'--indicator-top': indicatorPosition.top,
+				'--indicator-right': indicatorPosition.right,
+				'--indicator-left': indicatorPosition.left,
+				'--indicator-width': indicatorPosition.width,
+				'--indicator-height': indicatorPosition.height,
 				...otherProps.style,
 			} }
 			className={ clsx(

package/src/text-control/style.scss

@@ -23,7 +23,8 @@
 
 		// Subtract 1px to account for the border, which isn't included on the element
 		// on newer components like InputControl, SelectControl, etc.
-		padding-left: $grid-unit-20;
-		padding-right: $grid-unit-20;
+		// These values should be shared with the `controlPaddingX` in ./utils/config-values.js
+		padding-left: $grid-unit-15;
+		padding-right: $grid-unit-15;
 	}
 }

package/src/toggle-group-control/toggle-group-control/utils.ts

@@ -21,23 +21,23 @@ type ValueProp = ToggleGroupControlProps[ 'value' ];
 export function useComputeControlledOrUncontrolledValue(
 	valueProp: ValueProp
 ): { value: ValueProp; defaultValue: ValueProp } {
-	const isInitialRender = useRef( true );
+	const isInitialRenderRef = useRef( true );
 	const prevValueProp = usePrevious( valueProp );
-	const prevIsControlled = useRef( false );
+	const prevIsControlledRef = useRef( false );
 
 	useEffect( () => {
-		if ( isInitialRender.current ) {
-			isInitialRender.current = false;
+		if ( isInitialRenderRef.current ) {
+			isInitialRenderRef.current = false;
 		}
 	}, [] );
 
 	// Assume the component is being used in controlled mode on the first re-render
 	// that has a different `valueProp` from the previous render.
 	const isControlled =
-		prevIsControlled.current ||
-		( ! isInitialRender.current && prevValueProp !== valueProp );
+		prevIsControlledRef.current ||
+		( ! isInitialRenderRef.current && prevValueProp !== valueProp );
 	useEffect( () => {
-		prevIsControlled.current = isControlled;
+		prevIsControlledRef.current = isControlled;
 	}, [ isControlled ] );
 
 	if ( isControlled ) {

package/src/tools-panel/tools-panel/hook.ts

@@ -94,16 +94,16 @@ export function useToolsPanel(
 		...otherProps
 	} = useContextSystem( props, 'ToolsPanel' );
 
-	const isResetting = useRef( false );
-	const wasResetting = isResetting.current;
+	const isResettingRef = useRef( false );
+	const wasResetting = isResettingRef.current;
 
-	// `isResetting` is cleared via this hook to effectively batch together
+	// `isResettingRef` is cleared via this hook to effectively batch together
 	// the resetAll task. Without this, the flag is cleared after the first
 	// control updates and forces a rerender with subsequent controls then
 	// believing they need to reset, unfortunately using stale data.
 	useEffect( () => {
 		if ( wasResetting ) {
-			isResetting.current = false;
+			isResettingRef.current = false;
 		}
 	}, [ wasResetting ] );
 
@@ -303,7 +303,7 @@ export function useToolsPanel(
 	// Resets display of children and executes resetAll callback if available.
 	const resetAllItems = useCallback( () => {
 		if ( typeof resetAll === 'function' ) {
-			isResetting.current = true;
+			isResettingRef.current = true;
 			resetAll( resetAllFilters );
 		}
 
@@ -340,7 +340,7 @@ export function useToolsPanel(
 			firstDisplayedItem,
 			flagItemCustomization,
 			hasMenuItems: !! panelItems.length,
-			isResetting: isResetting.current,
+			isResetting: isResettingRef.current,
 			lastDisplayedItem,
 			menuItems,
 			panelId,

package/src/tooltip/style.scss

@@ -8,6 +8,7 @@
 	font-size: 12px;
 	padding: $grid-unit-05 $grid-unit-10;
 	z-index: z-index(".components-tooltip");
+	box-shadow: $elevation-small;
 }
 
 .components-tooltip__shortcut {

package/src/unit-control/styles/unit-control-styles.ts

@@ -64,6 +64,7 @@ const baseUnitLabelStyles = ( { selectSize }: SelectProps ) => {
 			white-space: nowrap;
 			overflow: hidden;
 			text-overflow: ellipsis;
+			field-sizing: content;
 
 			&:not( :disabled ) {
 				color: ${ COLORS.theme.accent };
@@ -114,7 +115,7 @@ const unitSelectSizes = ( { selectSize = 'default' }: SelectProps ) => {
 			align-items: center;
 
 			&:where( :not( :disabled ) ):hover {
-				box-shadow: inset 0 0 0
+				box-shadow: 0 0 0
 					${ CONFIG.borderWidth + ' ' + COLORS.ui.borderFocus };
 				outline: ${ CONFIG.borderWidth } solid transparent; // For High Contrast Mode
 			}

package/src/utils/config-values.js

@@ -5,14 +5,16 @@ import { space } from './space';
 import { COLORS } from './colors-values';
 
 const CONTROL_HEIGHT = '36px';
-const CONTROL_PADDING_X = '12px';
 
 const CONTROL_PROPS = {
 	controlSurfaceColor: COLORS.white,
 	controlTextActiveColor: COLORS.theme.accent,
-	controlPaddingX: CONTROL_PADDING_X,
-	controlPaddingXLarge: `calc(${ CONTROL_PADDING_X } * 1.3334)`,
-	controlPaddingXSmall: `calc(${ CONTROL_PADDING_X } / 1.3334)`,
+
+	// These values should be shared with TextControl.
+	controlPaddingX: 12,
+	controlPaddingXSmall: 8,
+	controlPaddingXLarge: 12 * 1.3334, // TODO: Deprecate
+
 	controlBackgroundColor: COLORS.white,
 	controlBoxShadow: 'transparent',
 	controlBoxShadowFocus: `0 0 0 0.5px ${ COLORS.theme.accent }`,
@@ -66,15 +68,14 @@ export default Object.assign( {}, CONTROL_PROPS, TOGGLE_GROUP_CONTROL_PROPS, {
 	fontWeight: 'normal',
 	fontWeightHeading: '600',
 	gridBase: '4px',
-	cardBorderRadius: '2px',
 	cardPaddingXSmall: `${ space( 2 ) }`,
 	cardPaddingSmall: `${ space( 4 ) }`,
 	cardPaddingMedium: `${ space( 4 ) } ${ space( 6 ) }`,
 	cardPaddingLarge: `${ space( 6 ) } ${ space( 8 ) }`,
-	elevationXSmall: `0 0.7px 1px rgba(0, 0, 0, 0.1), 0 1.2px 1.7px -0.2px rgba(0, 0, 0, 0.1), 0 2.3px 3.3px -0.5px rgba(0, 0, 0, 0.1)`,
-	elevationSmall: `0 0.7px 1px 0 rgba(0, 0, 0, 0.12), 0 2.2px 3.7px -0.2px rgba(0, 0, 0, 0.12), 0 5.3px 7.3px -0.5px rgba(0, 0, 0, 0.12)`,
-	elevationMedium: `0 0.7px 1px 0 rgba(0, 0, 0, 0.14), 0 4.2px 5.7px -0.2px rgba(0, 0, 0, 0.14), 0 7.3px 9.3px -0.5px rgba(0, 0, 0, 0.14)`,
-	elevationLarge: `0 0.7px 1px rgba(0, 0, 0, 0.15), 0 2.7px 3.8px -0.2px rgba(0, 0, 0, 0.15), 0 5.5px 7.8px -0.3px rgba(0, 0, 0, 0.15), 0.1px 11.5px 16.4px -0.5px rgba(0, 0, 0, 0.15)`,
+	elevationXSmall: `0 1px 1px rgba(0, 0, 0, 0.03), 0 1px 2px rgba(0, 0, 0, 0.02), 0 3px 3px rgba(0, 0, 0, 0.02), 0 4px 4px rgba(0, 0, 0, 0.01)`,
+	elevationSmall: `0 1px 2px rgba(0, 0, 0, 0.05), 0 2px 3px rgba(0, 0, 0, 0.04), 0 6px 6px rgba(0, 0, 0, 0.03), 0 8px 8px rgba(0, 0, 0, 0.02)`,
+	elevationMedium: `0 2px 3px rgba(0, 0, 0, 0.05), 0 4px 5px rgba(0, 0, 0, 0.04), 0 12px 12px rgba(0, 0, 0, 0.03), 0 16px 16px rgba(0, 0, 0, 0.02)`,
+	elevationLarge: `0 5px 15px rgba(0, 0, 0, 0.08), 0 15px 27px rgba(0, 0, 0, 0.07), 0 30px 36px rgba(0, 0, 0, 0.04), 0 50px 43px rgba(0, 0, 0, 0.02)`,
 	surfaceBackgroundColor: COLORS.white,
 	surfaceBackgroundSubtleColor: '#F3F3F3',
 	surfaceBackgroundTintColor: '#F5F5F5',