@wordpress/components 30.7.1-next.36001005c.0 → 30.7.2-next.2f1c7c01b.0

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

@@ -91,3 +91,62 @@ export const FullBleedContent: StoryObj< typeof Card > = {
 		),
 	},
 };
+
+/**
+ * The Card component supports three approaches to padding:
+ * 1. Default padding (medium) - no size prop needed
+ * 2. Token-based padding - using size tokens: xSmall, small, medium, large
+ * 3. Logical padding - customize each direction using logical properties
+ *
+ * Each component (Card, CardHeader, CardBody) can have its own padding configuration.
+ */
+export const PaddingVariations: StoryObj< typeof Card > = {
+	render: () => (
+		<div
+			style={ { display: 'flex', flexDirection: 'column', gap: '32px' } }
+		>
+			{ /* 1. Default Padding */ }
+			<div>
+				<Card>
+					<CardHeader>
+						<Text>Header with default padding</Text>
+					</CardHeader>
+					<CardBody>
+						<Text>Body with default padding (medium)</Text>
+					</CardBody>
+				</Card>
+			</div>
+
+			<div>
+				<Card>
+					<CardHeader
+						size={ {
+							blockStart: 'large',
+							blockEnd: 'small',
+							inlineStart: 'xSmall',
+							inlineEnd: 'large',
+						} }
+					>
+						<Text>
+							Header with logical padding (large blockStart, small
+							blockEnd, xSmall inlineStart, large inlineEnd)
+						</Text>
+					</CardHeader>
+					<CardBody
+						size={ {
+							blockStart: 'medium',
+							blockEnd: 'xSmall',
+							inlineStart: 'large',
+							inlineEnd: 'xSmall',
+						} }
+					>
+						<Text>
+							Body with logical padding (medium blockStart, xSmall
+							blockEnd, large inlineStart, xSmall inlineEnd)
+						</Text>
+					</CardBody>
+				</Card>
+			</div>
+		</div>
+	),
+};

package/src/card/styles.ts

@@ -94,26 +94,6 @@ export const rounded = css`
 	border-radius: ${ adjustedBorderRadius };
 `;
 
-const xSmallCardPadding = css`
-	padding: ${ CONFIG.cardPaddingXSmall };
-`;
-
-export const cardPaddings = {
-	large: css`
-		padding: ${ CONFIG.cardPaddingLarge };
-	`,
-	medium: css`
-		padding: ${ CONFIG.cardPaddingMedium };
-	`,
-	small: css`
-		padding: ${ CONFIG.cardPaddingSmall };
-	`,
-	xSmall: xSmallCardPadding,
-	// The `extraSmall` size is not officially documented, but the following styles
-	// are kept for legacy reasons to support older values of the `size` prop.
-	extraSmall: xSmallCardPadding,
-};
-
 export const shady = css`
 	background-color: ${ COLORS.ui.backgroundDisabled };
 `;

package/src/card/types.ts

@@ -1,16 +1,20 @@
-/**
- * External dependencies
- */
-import type { CSSProperties } from 'react';
-
 /**
  * Internal dependencies
  */
 import type { SurfaceProps } from '../surface/types';
+import type { FlexProps } from '../flex/types';
 
 type DeprecatedSizeOptions = 'extraSmall';
-export type SizeOptions = 'xSmall' | 'small' | 'medium' | 'large';
+export type SizeToken = 'xSmall' | 'small' | 'medium' | 'large' | 'none';
 
+export type SizeOptions =
+	| SizeToken
+	| {
+			blockStart: SizeToken;
+			blockEnd: SizeToken;
+			inlineStart: SizeToken;
+			inlineEnd: SizeToken;
+	  };
 type SizeableProps = {
 	/**
 	 * Determines the amount of padding within the component.
@@ -90,8 +94,6 @@ type MarginalSubComponentProps = BaseSubComponentProps & {
 	isBorderless?: boolean;
 };
 
-export type HeaderProps = MarginalSubComponentProps;
+export type HeaderProps = MarginalSubComponentProps & Partial< FlexProps >;
 
-export type FooterProps = MarginalSubComponentProps & {
-	justify?: CSSProperties[ 'justifyContent' ];
-};
+export type FooterProps = MarginalSubComponentProps & Partial< FlexProps >;

package/src/combobox-control/index.tsx

@@ -365,13 +365,10 @@ function ComboboxControl( props: ComboboxControlProps ) {
 							/>
 						</FlexBlock>
 						{ isLoading && <Spinner /> }
-						{ allowReset && (
+						{ allowReset && Boolean( value ) && ! isExpanded && (
 							<Button
 								size="small"
 								icon={ closeSmall }
-								// Disable reason: Focus returns to input field when reset is clicked.
-								// eslint-disable-next-line no-restricted-syntax
-								disabled={ ! value }
 								onClick={ handleOnReset }
 								onKeyDown={ handleResetStopPropagation }
 								label={ __( 'Reset' ) }

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

@@ -79,7 +79,6 @@ export const Default = Template.bind( {} );
 Default.args = {
 	__next40pxDefaultSize: true,
 	__nextHasNoMarginBottom: true,
-	allowReset: false,
 	label: 'Select a country',
 	options: countryOptions,
 };

package/src/combobox-control/test/index.tsx

@@ -356,7 +356,7 @@ describe.each( [
 		expect( input ).toHaveValue( targetOption.label );
 	} );
 
-	it( 'should render with Reset button disabled', () => {
+	it( 'should not render Reset button when no value is set', () => {
 		render(
 			<Component
 				options={ timezones }
@@ -365,10 +365,23 @@ describe.each( [
 			/>
 		);
 
-		const resetButton = screen.getByRole( 'button', { name: 'Reset' } );
+		const resetButton = screen.queryByRole( 'button', { name: 'Reset' } );
+
+		expect( resetButton ).not.toBeInTheDocument();
+	} );
+
+	it( 'should not render Reset button when allowReset is false', () => {
+		render(
+			<Component
+				options={ timezones }
+				label={ defaultLabelText }
+				allowReset={ false }
+			/>
+		);
+
+		const resetButton = screen.queryByRole( 'button', { name: 'Reset' } );
 
-		expect( resetButton ).toBeVisible();
-		expect( resetButton ).toBeDisabled();
+		expect( resetButton ).not.toBeInTheDocument();
 	} );
 
 	it( 'should reset input when clicking the Reset button', async () => {
@@ -400,8 +413,8 @@ describe.each( [
 
 		await user.click( resetButton );
 
+		expect( resetButton ).not.toBeInTheDocument();
 		expect( input ).toHaveValue( '' );
-		expect( resetButton ).toBeDisabled();
 		expect( input ).toHaveFocus();
 	} );
 
@@ -439,8 +452,8 @@ describe.each( [
 		// Pressing Enter/Return resets the input.
 		await user.keyboard( '{Enter}' );
 
+		expect( resetButton ).not.toBeInTheDocument();
 		expect( input ).toHaveValue( '' );
-		expect( resetButton ).toBeDisabled();
 		expect( input ).toHaveFocus();
 	} );
 
@@ -478,8 +491,8 @@ describe.each( [
 		// Pressing Spacebar resets the input.
 		await user.keyboard( '[Space]' );
 
+		expect( resetButton ).not.toBeInTheDocument();
 		expect( input ).toHaveValue( '' );
-		expect( resetButton ).toBeDisabled();
 		expect( input ).toHaveFocus();
 	} );
 } );

package/src/composite/legacy/index.tsx

@@ -238,7 +238,6 @@ export function useCompositeState(
 		loop: focusLoop = false,
 		wrap: focusWrap = false,
 		shift: focusShift = false,
-		// eslint-disable-next-line camelcase
 		unstable_virtual: virtualFocus,
 	} = legacyStateOptions;
 

package/src/context/use-context-system.js

@@ -33,14 +33,12 @@ export function useContextSystem( props, namespace ) {
 
 	const contextProps = contextSystemProps?.[ namespace ] || {};
 
-	/* eslint-disable jsdoc/no-undefined-types */
 	/** @type {ConnectedProps<P>} */
 	// @ts-ignore We fill in the missing properties below
 	const finalComponentProps = {
 		...getConnectedNamespace(),
 		...getNamespace( namespace ),
 	};
-	/* eslint-enable jsdoc/no-undefined-types */
 
 	const { _overrides: overrideProps, ...otherContextProps } = contextProps;
 

package/src/custom-select-control-v2/custom-select.tsx

@@ -12,7 +12,7 @@ import { __, _n, sprintf } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import { VisuallyHidden } from '..';
+import { VisuallyHidden } from '../visually-hidden';
 import * as Styled from './styles';
 import type {
 	CustomSelectContext as CustomSelectContextType,

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

@@ -2,6 +2,7 @@
  * External dependencies
  */
 import clsx from 'clsx';
+import type { KeyboardEventHandler } from 'react';
 
 /**
  * WordPress dependencies
@@ -10,19 +11,19 @@ import { __ } from '@wordpress/i18n';
 import { useEffect, useRef, useState } from '@wordpress/element';
 import {
 	__experimentalUseDragging as useDragging,
-	useInstanceId,
 	useIsomorphicLayoutEffect,
 } from '@wordpress/compose';
+import deprecated from '@wordpress/deprecated';
 
 /**
  * Internal dependencies
  */
-import BaseControl from '../base-control';
 import Controls from './controls';
 import FocalPoint from './focal-point';
 import Grid from './grid';
 import Media from './media';
 import {
+	Container,
 	MediaWrapper,
 	MediaContainer,
 } from './styles/focal-point-picker-style';
@@ -33,7 +34,11 @@ import type {
 	FocalPoint as FocalPointType,
 	FocalPointPickerProps,
 } from './types';
-import type { KeyboardEventHandler } from 'react';
+import {
+	StyledLabel,
+	StyledHelp,
+} from '../base-control/styles/base-control-styles';
+import { VisuallyHidden } from '../visually-hidden';
 
 const GRID_OVERLAY_TIMEOUT = 600;
 
@@ -88,6 +93,7 @@ export function FocalPointPicker( {
 	autoPlay = true,
 	className,
 	help,
+	hideLabelFromVision,
 	label,
 	onChange,
 	onDrag,
@@ -104,6 +110,14 @@ export function FocalPointPicker( {
 	const [ point, setPoint ] = useState( valueProp );
 	const [ showGridOverlay, setShowGridOverlay ] = useState( false );
 
+	if ( ! __nextHasNoMarginBottom ) {
+		deprecated( 'Bottom margin styles for wp.components.FocalPointPicker', {
+			since: '6.7',
+			version: '7.0',
+			hint: 'Set the `__nextHasNoMarginBottom` prop to true to start opting into the new styles, which will become the default in a future version.',
+		} );
+	}
+
 	const { startDrag, endDrag, isDragging } = useDragging( {
 		onDragStart: ( event ) => {
 			dragAreaRef.current?.focus();
@@ -233,9 +247,7 @@ export function FocalPointPicker( {
 	};
 
 	const classes = clsx( 'components-focal-point-picker-control', className );
-
-	const instanceId = useInstanceId( FocalPointPicker );
-	const id = `inspector-focal-point-picker-control-${ instanceId }`;
+	const Label = hideLabelFromVision ? VisuallyHidden : StyledLabel;
 
 	useUpdateEffect( () => {
 		setShowGridOverlay( true );
@@ -247,15 +259,8 @@ export function FocalPointPicker( {
 	}, [ x, y ] );
 
 	return (
-		<BaseControl
-			{ ...restProps }
-			__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
-			__associatedWPComponentName="FocalPointPicker"
-			label={ label }
-			id={ id }
-			help={ help }
-			className={ classes }
-		>
+		<Container { ...restProps } as="fieldset" className={ classes }>
+			{ !! label && <Label as="legend">{ label }</Label> }
 			<MediaWrapper className="components-focal-point-picker-wrapper">
 				<MediaContainer
 					className="components-focal-point-picker"
@@ -291,7 +296,12 @@ export function FocalPointPicker( {
 					onChange?.( getFinalValue( value ) );
 				} }
 			/>
-		</BaseControl>
+			{ !! help && (
+				<StyledHelp __nextHasNoMarginBottom={ __nextHasNoMarginBottom }>
+					{ help }
+				</StyledHelp>
+			) }
+		</Container>
 	);
 }
 

package/src/focal-point-picker/styles/focal-point-picker-style.ts

@@ -9,10 +9,20 @@ import styled from '@emotion/styled';
  */
 import { Flex } from '../../flex';
 import UnitControl from '../../unit-control';
-import { COLORS, CONFIG } from '../../utils';
+import { View } from '../../view';
+import { COLORS, CONFIG, boxSizingReset, font } from '../../utils';
 import type { FocalPointPickerControlsProps } from '../types';
 import { INITIAL_BOUNDS } from '../utils';
 
+export const Container = styled( View )`
+	border: 0;
+	padding: 0;
+	margin: 0;
+	font-family: ${ font( 'default.fontFamily' ) };
+	font-size: ${ font( 'default.fontSize' ) };
+	${ boxSizingReset }
+`;
+
 export const MediaWrapper = styled.div`
 	background-color: transparent;
 	display: flex;

package/src/font-size-picker/README.md

@@ -103,6 +103,16 @@ The current font size value.
 
 -   Required: No
 
+### `valueMode`: `'literal' | 'slug'`
+
+Determines how the `value` prop should be interpreted.
+
+- `'literal'`: The `value` prop contains the actual font size value (number or string).
+- `'slug'`: The `value` prop contains the slug of the selected font size.
+
+-   Required: No
+-   Default: `'literal'`
+
 ### `withReset`: `boolean`
 
 If `true`, a reset button will be displayed alongside the input field when a custom font size is active. Has no effect when `disableCustomFontSizes` is `true`.

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

@@ -2,16 +2,17 @@
  * WordPress dependencies
  */
 import { __, sprintf } from '@wordpress/i18n';
+import { useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
-import CustomSelectControl from '../custom-select-control';
 import type {
 	FontSizePickerSelectProps,
 	FontSizePickerSelectOption,
 } from './types';
-import { isSimpleCssValue } from './utils';
+import { generateFontSizeHint } from './utils';
+import { StyledCustomSelectControl } from './styles';
 
 const DEFAULT_OPTION: FontSizePickerSelectOption = {
 	key: 'default',
@@ -20,15 +21,19 @@ const DEFAULT_OPTION: FontSizePickerSelectOption = {
 };
 
 const FontSizePickerSelect = ( props: FontSizePickerSelectProps ) => {
-	const { __next40pxDefaultSize, fontSizes, value, size, onChange } = props;
+	const {
+		__next40pxDefaultSize,
+		fontSizes,
+		value,
+		size,
+		valueMode = 'literal',
+		onChange,
+	} = props;
 
 	const options: FontSizePickerSelectOption[] = [
 		DEFAULT_OPTION,
 		...fontSizes.map( ( fontSize ) => {
-			let hint;
-			if ( isSimpleCssValue( fontSize.size ) ) {
-				hint = String( fontSize.size );
-			}
+			const hint = generateFontSizeHint( fontSize );
 			return {
 				key: fontSize.slug,
 				name: fontSize.name || fontSize.slug,
@@ -38,11 +43,30 @@ const FontSizePickerSelect = ( props: FontSizePickerSelectProps ) => {
 		} ),
 	];
 
-	const selectedOption =
-		options.find( ( option ) => option.value === value ) ?? DEFAULT_OPTION;
+	const selectedOption = useMemo( () => {
+		if ( value === undefined ) {
+			return DEFAULT_OPTION;
+		}
+
+		// If valueMode is 'slug', find by slug
+		if ( valueMode === 'slug' ) {
+			const optionBySlug = options.find(
+				( option ) => option.key === value
+			);
+			if ( optionBySlug ) {
+				return optionBySlug;
+			}
+		}
+
+		// If valueMode is 'literal', find by value (size)
+		return (
+			options.find( ( option ) => option.value === value ) ??
+			DEFAULT_OPTION
+		);
+	}, [ value, valueMode, options ] );
 
 	return (
-		<CustomSelectControl
+		<StyledCustomSelectControl
 			__next40pxDefaultSize={ __next40pxDefaultSize }
 			__shouldNotWarnDeprecated36pxSize
 			className="components-font-size-picker__select"
@@ -61,7 +85,16 @@ const FontSizePickerSelect = ( props: FontSizePickerSelectProps ) => {
 			}: {
 				selectedItem: FontSizePickerSelectOption;
 			} ) => {
-				onChange( selectedItem.value );
+				// Find the corresponding FontSize object
+				const matchingFontSize =
+					selectedItem.key === 'default'
+						? undefined
+						: fontSizes.find(
+								( fontSize ) =>
+									fontSize.slug === selectedItem.key
+						  );
+
+				onChange( selectedItem.value, matchingFontSize );
 			} }
 			size={ size }
 		/>

package/src/font-size-picker/font-size-picker-toggle-group.tsx

@@ -14,7 +14,46 @@ import { T_SHIRT_ABBREVIATIONS, T_SHIRT_NAMES } from './constants';
 import type { FontSizePickerToggleGroupProps } from './types';
 
 const FontSizePickerToggleGroup = ( props: FontSizePickerToggleGroupProps ) => {
-	const { fontSizes, value, __next40pxDefaultSize, size, onChange } = props;
+	const {
+		fontSizes,
+		value,
+		valueMode = 'literal',
+		__next40pxDefaultSize,
+		size,
+		onChange,
+	} = props;
+
+	// Find the current value based on valueMode
+	const currentValue = ( () => {
+		if ( ! value ) {
+			return undefined;
+		}
+
+		// If valueMode is 'slug', the value is already the slug
+		if ( valueMode === 'slug' ) {
+			return String( value );
+		}
+
+		// If valueMode is 'literal', find the font size by size value
+		// If multiple font sizes have the same size value, we can't distinguish them
+		// without additional information, so we return undefined to avoid incorrect selection
+		const matchingFontSizes = fontSizes.filter(
+			( fontSize ) => fontSize.size === value
+		);
+
+		// If there are multiple matches, return undefined to avoid selecting the wrong font size
+		if ( matchingFontSizes.length > 1 ) {
+			return undefined;
+		}
+
+		// Find the font size by size value
+		const fontSizeBySize = fontSizes.find(
+			( fontSize ) => fontSize.size === value
+		);
+
+		return fontSizeBySize?.slug;
+	} )();
+
 	return (
 		<ToggleGroupControl
 			__nextHasNoMarginBottom
@@ -22,15 +61,30 @@ const FontSizePickerToggleGroup = ( props: FontSizePickerToggleGroupProps ) => {
 			__shouldNotWarnDeprecated36pxSize
 			label={ __( 'Font size' ) }
 			hideLabelFromVision
-			value={ value }
-			onChange={ onChange }
+			value={ currentValue }
+			onChange={ ( newSlug: string | number | undefined ) => {
+				if ( newSlug === undefined ) {
+					onChange( undefined );
+				} else {
+					// Find the font size by slug
+					const selectedFontSize = fontSizes.find(
+						( fontSize ) => fontSize.slug === String( newSlug )
+					);
+					if ( selectedFontSize ) {
+						onChange(
+							selectedFontSize.size as number | string,
+							selectedFontSize
+						);
+					}
+				}
+			} }
 			isBlock
 			size={ size }
 		>
 			{ fontSizes.map( ( fontSize, index ) => (
 				<ToggleGroupControlOption
 					key={ fontSize.slug }
-					value={ fontSize.size }
+					value={ fontSize.slug }
 					label={ T_SHIRT_ABBREVIATIONS[ index ] }
 					aria-label={ fontSize.name || T_SHIRT_NAMES[ index ] }
 					showTooltip