@wordpress/components 25.0.0 → 25.1.0

package/src/dropdown-menu-v2/types.ts

@@ -44,7 +44,7 @@ export type DropdownMenuProps = {
 	 * The preferred alignment against the trigger.
 	 * May change when collisions occur.
 	 *
-	 * @default 'center'
+	 * @default 'start'
 	 */
 	align?: DropdownMenuPrimitive.DropdownMenuContentProps[ 'align' ];
 	/**
@@ -248,3 +248,18 @@ export type DropdownMenuGroupProps = {
 };
 
 export type DropdownMenuSeparatorProps = {};
+
+export type DropdownMenuContext = {
+	/**
+	 * This variant can be used to change the appearance of the component in
+	 * specific contexts, ie. when rendered inside the `Toolbar` component.
+	 */
+	variant?: 'toolbar';
+};
+
+export type DropdownMenuPrivateContext = Pick<
+	DropdownMenuContext,
+	'variant'
+> & {
+	portalContainer: HTMLElement | null;
+};

package/src/focal-point-picker/controls.tsx

@@ -54,6 +54,7 @@ export default function FocalPointPickerControls( {
 		>
 			<FocalPointUnitControl
 				label={ __( 'Left' ) }
+				aria-label={ __( 'Focal point left position' ) }
 				value={ [ valueX, '%' ].join( '' ) }
 				onChange={
 					( ( next ) =>
@@ -66,6 +67,7 @@ export default function FocalPointPickerControls( {
 			/>
 			<FocalPointUnitControl
 				label={ __( 'Top' ) }
+				aria-label={ __( 'Focal point top position' ) }
 				value={ [ valueY, '%' ].join( '' ) }
 				onChange={
 					( ( next ) =>

package/src/focal-point-picker/test/index.js

@@ -120,7 +120,9 @@ describe( 'FocalPointPicker', () => {
 			const { rerender } = render(
 				<Picker value={ { x: 0.25, y: 0.5 } } />
 			);
-			const xInput = screen.getByRole( 'spinbutton', { name: 'Left' } );
+			const xInput = screen.getByRole( 'spinbutton', {
+				name: 'Focal point left position',
+			} );
 			rerender( <Picker value={ { x: 0.93, y: 0.5 } } /> );
 			expect( xInput.value ).toBe( '93' );
 		} );
@@ -155,10 +157,14 @@ describe( 'FocalPointPicker', () => {
 			);
 
 			expect(
-				screen.getByRole( 'spinbutton', { name: 'Left' } ).value
+				screen.getByRole( 'spinbutton', {
+					name: 'Focal point left position',
+				} ).value
 			).toBe( '10' );
 			expect(
-				screen.getByRole( 'spinbutton', { name: 'Top' } ).value
+				screen.getByRole( 'spinbutton', {
+					name: 'Focal point top position',
+				} ).value
 			).toBe( '20' );
 			expect( onChangeSpy ).not.toHaveBeenCalled();
 		} );

package/src/font-size-picker/index.tsx

@@ -14,7 +14,6 @@ import { useState, useMemo, forwardRef } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import Button from '../button';
 import RangeControl from '../range-control';
 import { Flex, FlexItem } from '../flex';
 import {
@@ -24,12 +23,13 @@ import {
 } from '../unit-control';
 import { VisuallyHidden } from '../visually-hidden';
 import { getCommonSizeUnit } from './utils';
-import { HStack } from '../h-stack';
 import type { FontSizePickerProps } from './types';
 import {
 	Container,
+	Header,
 	HeaderHint,
 	HeaderLabel,
+	HeaderToggle,
 	Controls,
 	ResetButton,
 } from './styles';
@@ -127,7 +127,7 @@ const UnforwardedFontSizePicker = (
 		<Container ref={ ref } className="components-font-size-picker">
 			<VisuallyHidden as="legend">{ __( 'Font size' ) }</VisuallyHidden>
 			<Spacer>
-				<HStack className="components-font-size-picker__header">
+				<Header className="components-font-size-picker__header">
 					<HeaderLabel
 						aria-label={ `${ __( 'Size' ) } ${ headerHint || '' }` }
 					>
@@ -139,7 +139,7 @@ const UnforwardedFontSizePicker = (
 						) }
 					</HeaderLabel>
 					{ ! disableCustomFontSizes && (
-						<Button
+						<HeaderToggle
 							label={
 								showCustomValueControl
 									? __( 'Use size preset' )
@@ -155,7 +155,7 @@ const UnforwardedFontSizePicker = (
 							isSmall
 						/>
 					) }
-				</HStack>
+				</Header>
 			</Spacer>
 			<Controls
 				className="components-font-size-picker__controls"

package/src/font-size-picker/styles.ts

@@ -8,6 +8,7 @@ import styled from '@emotion/styled';
  */
 import BaseControl from '../base-control';
 import Button from '../button';
+import { HStack } from '../h-stack';
 import { space } from '../ui/utils/space';
 import { COLORS } from '../utils';
 import type { FontSizePickerProps } from './types';
@@ -18,6 +19,14 @@ export const Container = styled.fieldset`
 	padding: 0;
 `;
 
+export const Header = styled( HStack )`
+	height: ${ space( 4 ) };
+`;
+
+export const HeaderToggle = styled( Button )`
+	margin-top: ${ space( -1 ) };
+`;
+
 export const HeaderLabel = styled( BaseControl.VisualLabel )`
 	display: flex;
 	gap: ${ space( 1 ) };

package/src/mobile/bottom-sheet/cell.native.js

@@ -26,6 +26,7 @@ import { withPreferredColorScheme } from '@wordpress/compose';
 import styles from './styles.scss';
 import platformStyles from './cellStyles.scss';
 import TouchableRipple from './ripple';
+import LockIcon from './lock-icon';
 
 const isIOS = Platform.OS === 'ios';
 class BottomSheetCell extends Component {
@@ -93,6 +94,7 @@ class BottomSheetCell extends Component {
 			accessibilityRole,
 			disabled = false,
 			disabledStyle = styles.cellDisabled,
+			showLockIcon = true,
 			activeOpacity,
 			onPress,
 			onLongPress,
@@ -374,6 +376,7 @@ class BottomSheetCell extends Component {
 									] }
 								>
 									<Icon
+										lock
 										icon={ icon }
 										size={ 24 }
 										fill={
@@ -440,6 +443,11 @@ class BottomSheetCell extends Component {
 					>
 						{ children }
 					</View>
+					{ disabled && showLockIcon && (
+						<View style={ styles.cellDisabled }>
+							<LockIcon />
+						</View>
+					) }
 				</View>
 				{ help && (
 					<Text style={ [ cellHelpStyle, styles.placeholderColor ] }>

package/src/mobile/bottom-sheet/color-cell.native.js

@@ -11,7 +11,7 @@ import Cell from './cell';
 import styles from './styles.scss';
 
 export default function BottomSheetColorCell( props ) {
-	const { color, withColorIndicator = true, ...cellProps } = props;
+	const { color, withColorIndicator = true, disabled, ...cellProps } = props;
 
 	return (
 		<Cell
@@ -22,12 +22,13 @@ export default function BottomSheetColorCell( props ) {
 				__( 'Double tap to go to color settings' )
 			}
 			editable={ false }
+			disabled={ disabled }
 			value={ withColorIndicator && ! color && __( 'Default' ) }
 		>
 			{ withColorIndicator && color && (
 				<ColorIndicator color={ color } style={ styles.colorCircle } />
 			) }
-			<Icon icon={ chevronRight }></Icon>
+			{ disabled ? null : <Icon icon={ chevronRight }></Icon> }
 		</Cell>
 	);
 }

package/src/mobile/bottom-sheet/lock-icon/index.native.js

@@ -0,0 +1,19 @@
+/**
+ * WordPress dependencies
+ */
+import { Icon, lock } from '@wordpress/icons';
+import { usePreferredColorSchemeStyle } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import styles from './styles.scss';
+
+export default function LockIcon() {
+	const iconStyle = usePreferredColorSchemeStyle(
+		styles.icon,
+		styles[ 'icon--dark' ]
+	);
+
+	return <Icon icon={ lock } color={ iconStyle.color } style={ iconStyle } />;
+}

package/src/mobile/bottom-sheet/lock-icon/styles.native.scss

@@ -0,0 +1,8 @@
+.icon {
+	color: $gray-dark;
+	margin-left: 6px;
+}
+
+.icon--dark {
+	color: $gray-light;
+}

package/src/mobile/bottom-sheet/radio-cell.native.js

@@ -10,7 +10,7 @@ import { usePreferredColorSchemeStyle } from '@wordpress/compose';
 import Cell from './cell';
 import styles from './styles.scss';
 
-export default function BottomSheetColorCell( props ) {
+export default function BottomSheetRadioCell( props ) {
 	const { selected, ...cellProps } = props;
 
 	const selectedIconStyle = usePreferredColorSchemeStyle(
@@ -29,6 +29,7 @@ export default function BottomSheetColorCell( props ) {
 			}
 			editable={ false }
 			value={ '' }
+			showLockIcon={ selected }
 		>
 			{ selected && (
 				<Icon icon={ check } style={ selectedIconStyle }></Icon>

package/src/mobile/bottom-sheet/range-cell.native.js

@@ -15,6 +15,7 @@ import { withPreferredColorScheme } from '@wordpress/compose';
  * Internal dependencies
  */
 import Cell from './cell';
+import LockIcon from './lock-icon';
 import styles from './range-cell.scss';
 import RangeTextInput from './range-text-input';
 import { toFixed } from '../utils';
@@ -219,6 +220,7 @@ class BottomSheetRangeCell extends Component {
 						accessible={ false }
 						valueStyle={ styles.valueStyle }
 						disabled={ disabled }
+						showLockIcon={ false }
 					>
 						<View style={ containerStyle }>
 							{ preview }
@@ -260,6 +262,7 @@ class BottomSheetRangeCell extends Component {
 									{ children }
 								</RangeTextInput>
 							) }
+							{ disabled && <LockIcon /> }
 						</View>
 					</Cell>
 				</View>

package/src/mobile/bottom-sheet/styles.native.scss

@@ -1,5 +1,7 @@
 //Bottom Sheet
 
+$cell-disable-opacity: 0.38;
+
 .bottomModal {
 	justify-content: flex-end;
 	margin: 0;
@@ -288,11 +290,11 @@
 }
 
 .placeholderColorDisabled {
-	color: lighten($gray, 20%);
+	color: rgba($gray-dark, $cell-disable-opacity);
 }
 
 .placeholderColorDisabledDark {
-	color: lighten($gray-dark, 10%);
+	color: rgba($white, $cell-disable-opacity);
 }
 
 .applyButton {
@@ -327,5 +329,5 @@
 }
 
 .cellDisabled {
-	opacity: 0.3;
+	opacity: $cell-disable-opacity;
 }

package/src/mobile/bottom-sheet-select-control/index.native.js

@@ -71,7 +71,7 @@ const BottomSheetSelectControl = ( {
 					) }
 					disabled={ disabled }
 				>
-					<Icon icon={ chevronRight }></Icon>
+					{ disabled ? null : <Icon icon={ chevronRight } /> }
 				</BottomSheet.Cell>
 			}
 			showSheet={ showSubSheet }

package/src/mobile/bottom-sheet-text-control/index.native.js

@@ -65,7 +65,7 @@ const BottomSheetTextControl = ( {
 					placeholder={ cellPlaceholder || placeholder || '' }
 					disabled={ disabled }
 				>
-					<Icon icon={ chevronRight }></Icon>
+					{ disabled ? null : <Icon icon={ chevronRight } /> }
 				</BottomSheet.Cell>
 			}
 			showSheet={ showSubSheet }

package/src/popover/index.tsx

@@ -74,7 +74,7 @@ import { overlayMiddlewares } from './overlay-middlewares';
  *
  * @type {string}
  */
-const SLOT_NAME = 'Popover';
+export const SLOT_NAME = 'Popover';
 
 // An SVG displaying a triangle facing down, filled with a solid
 // color and bordered in such a way to create an arrow-like effect.

package/src/private-apis.ts

@@ -21,6 +21,7 @@ import {
 	DropdownSubMenu as DropdownSubMenuV2,
 	DropdownSubMenuTrigger as DropdownSubMenuTriggerV2,
 } from './dropdown-menu-v2';
+import { ComponentsContext } from './ui/context/context-system-provider';
 
 export const { lock, unlock } =
 	__dangerousOptInToUnstableAPIsOnlyForCoreModules(
@@ -33,6 +34,7 @@ lock( privateApis, {
 	CustomSelectControl,
 	__experimentalPopoverLegacyPositionToPlacement,
 	createPrivateSlotFill,
+	ComponentsContext,
 	DropdownMenuV2,
 	DropdownMenuCheckboxItemV2,
 	DropdownMenuGroupV2,

package/src/slot-fill/README.md

@@ -70,7 +70,7 @@ Both `Slot` and `Fill` accept a `name` string prop, where a `Slot` with a given
 
 `Slot` with `bubblesVirtually` set to true also accept an optional `className` to add to the slot container.
 
-`Slot` also accepts optional `children` function prop, which takes `fills` as a param. It allows to perform additional processing and wrap `fills` conditionally.
+`Slot` accepts an optional `children` function prop, which takes `fills` as a param. It allows you to perform additional processing and wrap `fills` conditionally.
 
 _Example_:
 
@@ -89,3 +89,28 @@ const Toolbar = ( { isMobile } ) => (
 	</div>
 );
 ```
+
+Props can also be passed from a `Slot` to a `Fill` by using the prop `fillProps` on the `Slot`:
+
+```jsx
+const { Fill, Slot } = createSlotFill( 'Toolbar' );
+
+const ToolbarItem = () => (
+	<Fill>
+		{ ( { hideToolbar } ) => {
+			<Button onClick={ hideToolbar }>Hide</Button>;
+		} }
+	</Fill>
+);
+
+const Toolbar = () => 
+	const hideToolbar() => {
+		console.log( 'Hide toolbar' );
+	}
+	return (
+		<div className="toolbar">
+			<Slot fillProps={ { hideToolbar } } />
+		</div>
+	);
+);
+```

package/src/snackbar/list.tsx

@@ -73,6 +73,7 @@ export function SnackbarList( {
 
 					return (
 						<motion.div
+							layout={ ! isReducedMotion } // See https://www.framer.com/docs/animation/#layout-animations
 							initial={ 'init' }
 							animate={ 'open' }
 							exit={ 'exit' }

package/src/tab-panel/index.tsx

@@ -2,11 +2,13 @@
  * External dependencies
  */
 import classnames from 'classnames';
+import type { ForwardedRef } from 'react';
 
 /**
  * WordPress dependencies
  */
 import {
+	forwardRef,
 	useState,
 	useEffect,
 	useLayoutEffect,
@@ -76,16 +78,19 @@ const TabButton = ( {
  * );
  * ```
  */
-export function TabPanel( {
-	className,
-	children,
-	tabs,
-	selectOnMove = true,
-	initialTabName,
-	orientation = 'horizontal',
-	activeClass = 'is-active',
-	onSelect,
-}: WordPressComponentProps< TabPanelProps, 'div', false > ) {
+const UnforwardedTabPanel = (
+	{
+		className,
+		children,
+		tabs,
+		selectOnMove = true,
+		initialTabName,
+		orientation = 'horizontal',
+		activeClass = 'is-active',
+		onSelect,
+	}: WordPressComponentProps< TabPanelProps, 'div', false >,
+	ref: ForwardedRef< any >
+) => {
 	const instanceId = useInstanceId( TabPanel, 'tab-panel' );
 	const [ selected, setSelected ] = useState< string >();
 
@@ -151,7 +156,7 @@ export function TabPanel( {
 	}, [ tabs, selectedTab?.disabled, handleTabSelection ] );
 
 	return (
-		<div className={ className }>
+		<div className={ className } ref={ ref }>
 			<NavigableMenu
 				role="tablist"
 				orientation={ orientation }
@@ -196,6 +201,7 @@ export function TabPanel( {
 			) }
 		</div>
 	);
-}
+};
 
+export const TabPanel = forwardRef( UnforwardedTabPanel );
 export default TabPanel;

package/src/toolbar/toolbar/index.tsx

@@ -16,7 +16,22 @@ import deprecated from '@wordpress/deprecated';
 import ToolbarGroup from '../toolbar-group';
 import ToolbarContainer from './toolbar-container';
 import type { ToolbarProps } from './types';
-import type { WordPressComponentProps } from '../../ui/context';
+import {
+	WordPressComponentProps,
+	ContextSystemProvider,
+} from '../../ui/context';
+
+// TODO:
+// - (optional) make the legacy `DropdownMenu` read the context variable
+// - swap the legacy `DropdownMenu` with the new version of the component
+//   once it's stable
+const CONTEXT_SYSTEM_VALUE = {
+	DropdownMenu: {
+		// Note: the legacy `DropdownMenu` component is not yet reactive to this
+		// context variant. See https://github.com/WordPress/gutenberg/pull/51097.
+		variant: 'toolbar',
+	},
+};
 
 function UnforwardedToolbar(
 	{
@@ -40,12 +55,14 @@ function UnforwardedToolbar(
 		className
 	);
 	return (
-		<ToolbarContainer
-			className={ finalClassName }
-			label={ label }
-			ref={ ref }
-			{ ...props }
-		/>
+		<ContextSystemProvider value={ CONTEXT_SYSTEM_VALUE }>
+			<ToolbarContainer
+				className={ finalClassName }
+				label={ label }
+				ref={ ref }
+				{ ...props }
+			/>
+		</ContextSystemProvider>
 	);
 }
 

package/src/ui/context/index.ts

@@ -4,6 +4,7 @@ export {
 } from './context-system-provider';
 export {
 	contextConnect,
+	contextConnectWithoutRef,
 	hasConnectNamespace,
 	getConnectNamespace,
 } from './context-connect';

package/src/utils/config-values.js

@@ -67,6 +67,7 @@ export default Object.assign( {}, CONTROL_PROPS, TOGGLE_GROUP_CONTROL_PROPS, {
 	cardPaddingSmall: `${ space( 4 ) }`,
 	cardPaddingMedium: `${ space( 4 ) } ${ space( 6 ) }`,
 	cardPaddingLarge: `${ space( 6 ) } ${ space( 8 ) }`,
+	popoverShadow: `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)`,
 	surfaceBackgroundColor: COLORS.white,
 	surfaceBackgroundSubtleColor: '#F3F3F3',
 	surfaceBackgroundTintColor: '#F5F5F5',

package/src/view/README.md

@@ -27,13 +27,13 @@ function Example() {
 
 ## Props
 
-##### as
+### as
 
 **Type**: `string`,`E`
 
 Render the component as another React Component or HTML Element.
 
-##### css
+### css
 
 **Type**: `InterpolatedCSS`