@wordpress/components 25.16.0 → 26.0.0

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

@@ -36,10 +36,3 @@ export const HeaderLabel = styled( BaseControl.VisualLabel )`
 export const HeaderHint = styled.span`
 	color: ${ COLORS.gray[ 700 ] };
 `;
-
-export const Controls = styled.div< {
-	__nextHasNoMarginBottom: boolean;
-} >`
-	${ ( props ) =>
-		! props.__nextHasNoMarginBottom && `margin-bottom: ${ space( 6 ) };` }
-`;

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

@@ -21,13 +21,7 @@ describe( 'FontSizePicker', () => {
 		async ( { value, expectedValue } ) => {
 			const user = userEvent.setup();
 			const onChange = jest.fn();
-			render(
-				<FontSizePicker
-					__nextHasNoMarginBottom
-					value={ value }
-					onChange={ onChange }
-				/>
-			);
+			render( <FontSizePicker value={ value } onChange={ onChange } /> );
 			const input = screen.getByLabelText( 'Custom' );
 			await user.clear( input );
 			await user.type( input, '80' );
@@ -48,7 +42,6 @@ describe( 'FontSizePicker', () => {
 			const onChange = jest.fn();
 			render(
 				<FontSizePicker
-					__nextHasNoMarginBottom
 					fontSizes={ [ { slug: 'slug', size: firstFontSize } ] }
 					onChange={ onChange }
 				/>
@@ -99,12 +92,7 @@ describe( 'FontSizePicker', () => {
 
 		it( 'displays a select control', async () => {
 			const user = userEvent.setup();
-			render(
-				<FontSizePicker
-					__nextHasNoMarginBottom
-					fontSizes={ fontSizes }
-				/>
-			);
+			render( <FontSizePicker fontSizes={ fontSizes } /> );
 			await user.click(
 				screen.getByRole( 'button', { name: 'Font size' } )
 			);
@@ -128,11 +116,7 @@ describe( 'FontSizePicker', () => {
 			'displays $expectedLabel as label when value is $value',
 			( { value, expectedLabel } ) => {
 				render(
-					<FontSizePicker
-						__nextHasNoMarginBottom
-						fontSizes={ fontSizes }
-						value={ value }
-					/>
+					<FontSizePicker fontSizes={ fontSizes } value={ value } />
 				);
 				expect(
 					screen.getByLabelText( expectedLabel )
@@ -158,7 +142,6 @@ describe( 'FontSizePicker', () => {
 				const onChange = jest.fn();
 				render(
 					<FontSizePicker
-						__nextHasNoMarginBottom
 						fontSizes={ fontSizes }
 						value={ value }
 						onChange={ onChange }
@@ -215,12 +198,7 @@ describe( 'FontSizePicker', () => {
 
 		it( 'displays a select control', async () => {
 			const user = userEvent.setup();
-			render(
-				<FontSizePicker
-					__nextHasNoMarginBottom
-					fontSizes={ fontSizes }
-				/>
-			);
+			render( <FontSizePicker fontSizes={ fontSizes } /> );
 			await user.click(
 				screen.getByRole( 'button', { name: 'Font size' } )
 			);
@@ -244,11 +222,7 @@ describe( 'FontSizePicker', () => {
 			'defaults to $option when value is $value',
 			( { value, option } ) => {
 				render(
-					<FontSizePicker
-						__nextHasNoMarginBottom
-						fontSizes={ fontSizes }
-						value={ value }
-					/>
+					<FontSizePicker fontSizes={ fontSizes } value={ value } />
 				);
 				expect(
 					screen.getByRole( 'button', { name: 'Font size' } )
@@ -267,11 +241,7 @@ describe( 'FontSizePicker', () => {
 			'displays $expectedLabel as label when value is $value',
 			( { value, expectedLabel } ) => {
 				render(
-					<FontSizePicker
-						__nextHasNoMarginBottom
-						fontSizes={ fontSizes }
-						value={ value }
-					/>
+					<FontSizePicker fontSizes={ fontSizes } value={ value } />
 				);
 				expect(
 					screen.getByLabelText( expectedLabel )
@@ -315,7 +285,6 @@ describe( 'FontSizePicker', () => {
 				const onChange = jest.fn();
 				render(
 					<FontSizePicker
-						__nextHasNoMarginBottom
 						fontSizes={ fontSizes }
 						value={ value }
 						onChange={ onChange }
@@ -366,12 +335,7 @@ describe( 'FontSizePicker', () => {
 		];
 
 		it( 'displays a toggle group control with t-shirt sizes', () => {
-			render(
-				<FontSizePicker
-					__nextHasNoMarginBottom
-					fontSizes={ fontSizes }
-				/>
-			);
+			render( <FontSizePicker fontSizes={ fontSizes } /> );
 			const options = screen.getAllByRole( 'radio' );
 			expect( options ).toHaveLength( 5 );
 			expect( options[ 0 ] ).toHaveTextContent( 'S' );
@@ -394,11 +358,7 @@ describe( 'FontSizePicker', () => {
 			'displays $expectedLabel as label when value is $value',
 			( { value, expectedLabel } ) => {
 				render(
-					<FontSizePicker
-						__nextHasNoMarginBottom
-						fontSizes={ fontSizes }
-						value={ value }
-					/>
+					<FontSizePicker fontSizes={ fontSizes } value={ value } />
 				);
 				expect(
 					screen.getByLabelText( expectedLabel )
@@ -410,11 +370,7 @@ describe( 'FontSizePicker', () => {
 			const user = userEvent.setup();
 			const onChange = jest.fn();
 			render(
-				<FontSizePicker
-					__nextHasNoMarginBottom
-					fontSizes={ fontSizes }
-					onChange={ onChange }
-				/>
+				<FontSizePicker fontSizes={ fontSizes } onChange={ onChange } />
 			);
 			await user.click( screen.getByRole( 'radio', { name: 'Medium' } ) );
 			expect( onChange ).toHaveBeenCalledTimes( 1 );
@@ -450,12 +406,7 @@ describe( 'FontSizePicker', () => {
 		];
 
 		it( 'displays a toggle group control with t-shirt sizes', () => {
-			render(
-				<FontSizePicker
-					__nextHasNoMarginBottom
-					fontSizes={ fontSizes }
-				/>
-			);
+			render( <FontSizePicker fontSizes={ fontSizes } /> );
 			const options = screen.getAllByRole( 'radio' );
 			expect( options ).toHaveLength( 4 );
 			expect( options[ 0 ] ).toHaveTextContent( 'S' );
@@ -481,11 +432,7 @@ describe( 'FontSizePicker', () => {
 			'displays $expectedLabel as label when value is $value',
 			( { value, expectedLabel } ) => {
 				render(
-					<FontSizePicker
-						__nextHasNoMarginBottom
-						fontSizes={ fontSizes }
-						value={ value }
-					/>
+					<FontSizePicker fontSizes={ fontSizes } value={ value } />
 				);
 				expect(
 					screen.getByLabelText( expectedLabel )
@@ -511,7 +458,6 @@ describe( 'FontSizePicker', () => {
 				const onChange = jest.fn();
 				render(
 					<FontSizePicker
-						__nextHasNoMarginBottom
 						fontSizes={ fontSizes }
 						onChange={ onChange }
 					/>
@@ -532,7 +478,6 @@ describe( 'FontSizePicker', () => {
 		it( 'defaults to M when value is 16px', () => {
 			render(
 				<FontSizePicker
-					__nextHasNoMarginBottom
 					fontSizes={ fontSizes }
 					value={ fontSizes[ 0 ].size }
 				/>
@@ -546,11 +491,7 @@ describe( 'FontSizePicker', () => {
 			'has no selection when value is %p',
 			( value ) => {
 				render(
-					<FontSizePicker
-						__nextHasNoMarginBottom
-						fontSizes={ fontSizes }
-						value={ value }
-					/>
+					<FontSizePicker fontSizes={ fontSizes } value={ value } />
 				);
 				expect( screen.getByRole( 'radiogroup' ) ).toBeInTheDocument();
 				expect(
@@ -565,11 +506,7 @@ describe( 'FontSizePicker', () => {
 			const user = userEvent.setup();
 			const onChange = jest.fn();
 			render(
-				<FontSizePicker
-					__nextHasNoMarginBottom
-					fontSizes={ fontSizes }
-					onChange={ onChange }
-				/>
+				<FontSizePicker fontSizes={ fontSizes } onChange={ onChange } />
 			);
 			await user.click(
 				screen.getByRole( 'button', { name: 'Font size' } )
@@ -584,13 +521,7 @@ describe( 'FontSizePicker', () => {
 
 	function commonTests( fontSizes: FontSize[] ) {
 		it( 'shows custom input when value is unknown', () => {
-			render(
-				<FontSizePicker
-					__nextHasNoMarginBottom
-					fontSizes={ fontSizes }
-					value="3px"
-				/>
-			);
+			render( <FontSizePicker fontSizes={ fontSizes } value="3px" /> );
 			expect( screen.getByLabelText( 'Custom' ) ).toBeInTheDocument();
 		} );
 
@@ -598,11 +529,7 @@ describe( 'FontSizePicker', () => {
 			const user = userEvent.setup();
 			const onChange = jest.fn();
 			render(
-				<FontSizePicker
-					__nextHasNoMarginBottom
-					fontSizes={ fontSizes }
-					onChange={ onChange }
-				/>
+				<FontSizePicker fontSizes={ fontSizes } onChange={ onChange } />
 			);
 			await user.click(
 				screen.getByRole( 'button', { name: 'Set custom size' } )
@@ -615,7 +542,6 @@ describe( 'FontSizePicker', () => {
 		it( 'does not allow custom values when disableCustomFontSizes is set', () => {
 			render(
 				<FontSizePicker
-					__nextHasNoMarginBottom
 					fontSizes={ fontSizes }
 					disableCustomFontSizes
 				/>
@@ -627,12 +553,7 @@ describe( 'FontSizePicker', () => {
 
 		it( 'does not display a slider by default', async () => {
 			const user = userEvent.setup();
-			render(
-				<FontSizePicker
-					__nextHasNoMarginBottom
-					fontSizes={ fontSizes }
-				/>
-			);
+			render( <FontSizePicker fontSizes={ fontSizes } /> );
 			await user.click(
 				screen.getByRole( 'button', { name: 'Set custom size' } )
 			);
@@ -646,7 +567,6 @@ describe( 'FontSizePicker', () => {
 			const onChange = jest.fn();
 			render(
 				<FontSizePicker
-					__nextHasNoMarginBottom
 					fontSizes={ fontSizes }
 					withSlider
 					onChange={ onChange }
@@ -668,7 +588,6 @@ describe( 'FontSizePicker', () => {
 			const onChange = jest.fn();
 			render(
 				<FontSizePicker
-					__nextHasNoMarginBottom
 					fontSizes={ fontSizes }
 					value={ fontSizes[ 0 ].size }
 					onChange={ onChange }
@@ -686,7 +605,6 @@ describe( 'FontSizePicker', () => {
 			const user = userEvent.setup();
 			render(
 				<FontSizePicker
-					__nextHasNoMarginBottom
 					fontSizes={ fontSizes }
 					value={ fontSizes[ 0 ].size }
 					withReset={ false }
@@ -705,7 +623,6 @@ describe( 'FontSizePicker', () => {
 
 			render(
 				<FontSizePicker
-					__nextHasNoMarginBottom
 					fontSizes={ fontSizes }
 					value={ fontSizes[ 0 ].size }
 					units={ [ 'px', 'ch', 'ex' ] }

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

@@ -55,6 +55,8 @@ export type FontSizePickerProps = {
 	 * can be safely removed once this happens.)
 	 *
 	 * @default false
+	 * @deprecated Default behavior since WP 6.5. Prop can be safely removed.
+	 * @ignore
 	 */
 	__nextHasNoMarginBottom?: boolean;
 	/**
@@ -111,7 +113,7 @@ export type FontSizePickerSelectOption = {
 
 export type FontSizePickerToggleGroupProps = Pick<
 	FontSizePickerProps,
-	'value' | 'size' | '__nextHasNoMarginBottom' | '__next40pxDefaultSize'
+	'value' | 'size' | '__next40pxDefaultSize'
 > & {
 	fontSizes: NonNullable< FontSizePickerProps[ 'fontSizes' ] >;
 	onChange: NonNullable< FontSizePickerProps[ 'onChange' ] >;

package/src/form-token-field/index.tsx

@@ -74,10 +74,7 @@ export function FormTokenField( props: FormTokenFieldProps ) {
 		__experimentalAutoSelectFirstMatch = false,
 		__nextHasNoMarginBottom = false,
 		tokenizeOnBlur = false,
-	} = useDeprecated36pxDefaultSizeProp< FormTokenFieldProps >(
-		props,
-		'wp.components.FormTokenField'
-	);
+	} = useDeprecated36pxDefaultSizeProp< FormTokenFieldProps >( props );
 
 	const instanceId = useInstanceId( FormTokenField );
 

package/src/gradient-picker/README.md

@@ -17,7 +17,6 @@ const myGradientPicker = () => {
 
 	return (
 		<GradientPicker
-			__nextHasNoMargin
 			value={ gradient }
 			onChange={ ( currentGradient ) => setGradient( currentGradient ) }
 			gradients={ [
@@ -89,13 +88,6 @@ If true, the gradient picker will not be displayed and only defined gradients fr
 -   Required: No
 -   Default: false
 
-### `__nextHasNoMargin`: `boolean`
-
-Start opting into the new margin-free styles that will become the default in a future version, currently scheduled to be WordPress 6.4. (The prop can be safely removed once this happens.)
-
--   Required: No
--   Default: `false`
-
 ### `headingLevel`: `1 | 2 | 3 | 4 | 5 | 6 | '1' | '2' | '3' | '4' | '5' | '6'`
 
 The heading level. Only applies in cases where gradients are provided from multiple origins (ie. when the array passed as the `gradients` prop contains two or more items).

package/src/gradient-picker/index.tsx

@@ -4,7 +4,6 @@
 import { __, sprintf } from '@wordpress/i18n';
 import { useInstanceId } from '@wordpress/compose';
 import { useCallback, useMemo } from '@wordpress/element';
-import deprecated from '@wordpress/deprecated';
 
 /**
  * Internal dependencies
@@ -13,7 +12,6 @@ import CircularOptionPicker from '../circular-option-picker';
 import CustomGradientPicker from '../custom-gradient-picker';
 import { VStack } from '../v-stack';
 import { ColorHeading } from '../color-palette/styles';
-import { Spacer } from '../spacer';
 import type {
 	GradientPickerComponentProps,
 	PickerProps,
@@ -181,7 +179,6 @@ function Component( props: PickerProps< any > ) {
  *
  *	return (
  *		<GradientPicker
- *			__nextHasNoMargin
  *			value={ gradient }
  *			onChange={ ( currentGradient ) => setGradient( currentGradient ) }
  *			gradients={ [
@@ -211,8 +208,6 @@ function Component( props: PickerProps< any > ) {
  *
  */
 export function GradientPicker( {
-	/** Start opting into the new margin-free styles that will become the default in a future version. */
-	__nextHasNoMargin = false,
 	className,
 	gradients = [],
 	onChange,
@@ -228,58 +223,39 @@ export function GradientPicker( {
 		[ onChange ]
 	);
 
-	if ( ! __nextHasNoMargin ) {
-		deprecated( 'Outer margin styles for wp.components.GradientPicker', {
-			since: '6.1',
-			version: '6.4',
-			hint: 'Set the `__nextHasNoMargin` prop to true to start opting into the new styles, which will become the default in a future version',
-		} );
-	}
-
-	const deprecatedMarginSpacerProps = ! __nextHasNoMargin
-		? {
-				marginTop: ! gradients.length ? 3 : undefined,
-				marginBottom: ! clearable ? 6 : 0,
-		  }
-		: {};
-
 	return (
-		// Outmost Spacer wrapper can be removed when deprecation period is over
-		<Spacer marginBottom={ 0 } { ...deprecatedMarginSpacerProps }>
-			<VStack spacing={ gradients.length ? 4 : 0 }>
-				{ ! disableCustomGradients && (
-					<CustomGradientPicker
-						__nextHasNoMargin
-						__experimentalIsRenderedInSidebar={
-							__experimentalIsRenderedInSidebar
-						}
-						value={ value }
-						onChange={ onChange }
-					/>
-				) }
-				{ ( gradients.length > 0 || clearable ) && (
-					<Component
-						{ ...additionalProps }
-						className={ className }
-						clearGradient={ clearGradient }
-						gradients={ gradients }
-						onChange={ onChange }
-						value={ value }
-						actions={
-							clearable &&
-							! disableCustomGradients && (
-								<CircularOptionPicker.ButtonAction
-									onClick={ clearGradient }
-								>
-									{ __( 'Clear' ) }
-								</CircularOptionPicker.ButtonAction>
-							)
-						}
-						headingLevel={ headingLevel }
-					/>
-				) }
-			</VStack>
-		</Spacer>
+		<VStack spacing={ gradients.length ? 4 : 0 }>
+			{ ! disableCustomGradients && (
+				<CustomGradientPicker
+					__experimentalIsRenderedInSidebar={
+						__experimentalIsRenderedInSidebar
+					}
+					value={ value }
+					onChange={ onChange }
+				/>
+			) }
+			{ ( gradients.length > 0 || clearable ) && (
+				<Component
+					{ ...additionalProps }
+					className={ className }
+					clearGradient={ clearGradient }
+					gradients={ gradients }
+					onChange={ onChange }
+					value={ value }
+					actions={
+						clearable &&
+						! disableCustomGradients && (
+							<CircularOptionPicker.ButtonAction
+								onClick={ clearGradient }
+							>
+								{ __( 'Clear' ) }
+							</CircularOptionPicker.ButtonAction>
+						)
+					}
+					headingLevel={ headingLevel }
+				/>
+			) }
+		</VStack>
 	);
 }
 

package/src/gradient-picker/stories/index.story.tsx

@@ -85,7 +85,6 @@ const Template: StoryFn< typeof GradientPicker > = ( {
 
 export const Default = Template.bind( {} );
 Default.args = {
-	__nextHasNoMargin: true,
 	gradients: GRADIENTS,
 };
 

package/src/gradient-picker/types.ts

@@ -93,6 +93,8 @@ export type GradientPickerComponentProps = GradientPickerBaseProps & {
 	 * can be safely removed once this happens.)
 	 *
 	 * @default false
+	 * @deprecated Default behavior since WP 6.5. Prop can be safely removed.
+	 * @ignore
 	 */
 	__nextHasNoMargin?: boolean;
 	/**

package/src/guide/style.scss

@@ -82,7 +82,7 @@
 		}
 
 		li[aria-current="step"] .components-button {
-			color: var(--wp-components-color-accent, var(--wp-admin-theme-color));
+			color: $components-color-accent;
 		}
 	}
 }

package/src/input-control/backdrop.tsx

@@ -7,12 +7,17 @@ import { memo } from '@wordpress/element';
  */
 import { BackdropUI } from './styles/input-control-styles';
 
-function Backdrop( { disabled = false, isFocused = false } ) {
+function Backdrop( {
+	disabled = false,
+	isBorderless = false,
+	isFocused = false,
+} ) {
 	return (
 		<BackdropUI
 			aria-hidden="true"
 			className="components-input-control__backdrop"
 			disabled={ disabled }
+			isBorderless={ isBorderless }
 			isFocused={ isFocused }
 		/>
 	);

package/src/input-control/index.tsx

@@ -55,11 +55,7 @@ export function UnforwardedInputControl(
 		suffix,
 		value,
 		...restProps
-	} = useDeprecated36pxDefaultSizeProp< InputControlProps >(
-		props,
-		'wp.components.InputControl',
-		'6.4'
-	);
+	} = useDeprecated36pxDefaultSizeProp< InputControlProps >( props );
 
 	const [ isFocused, setIsFocused ] = useState( false );
 

package/src/input-control/input-base.tsx

@@ -7,7 +7,7 @@ import type { ForwardedRef } from 'react';
  * WordPress dependencies
  */
 import { useInstanceId } from '@wordpress/compose';
-import { forwardRef, useMemo } from '@wordpress/element';
+import { useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -23,7 +23,11 @@ import {
 } from './styles/input-control-styles';
 import type { InputBaseProps, LabelPosition } from './types';
 import type { WordPressComponentProps } from '../context';
-import { ContextSystemProvider } from '../context';
+import {
+	ContextSystemProvider,
+	contextConnect,
+	useContextSystem,
+} from '../context';
 import { useDeprecated36pxDefaultSizeProp } from '../utils/use-deprecated-props';
 
 function useUniqueId( idProp?: string ) {
@@ -73,6 +77,7 @@ export function InputBase(
 		hideLabelFromVision = false,
 		labelPosition,
 		id: idProp,
+		isBorderless = false,
 		isFocused = false,
 		label,
 		prefix,
@@ -80,9 +85,7 @@ export function InputBase(
 		suffix,
 		...restProps
 	} = useDeprecated36pxDefaultSizeProp(
-		props,
-		'wp.components.InputBase',
-		'6.4'
+		useContextSystem( props, 'InputBase' )
 	);
 
 	const id = useUniqueId( idProp );
@@ -138,10 +141,14 @@ export function InputBase(
 						</Suffix>
 					) }
 				</ContextSystemProvider>
-				<Backdrop disabled={ disabled } isFocused={ isFocused } />
+				<Backdrop
+					disabled={ disabled }
+					isBorderless={ isBorderless }
+					isFocused={ isFocused }
+				/>
 			</Container>
 		</Root>
 	);
 }
 
-export default forwardRef( InputBase );
+export default contextConnect( InputBase, 'InputBase' );

package/src/input-control/styles/input-control-styles.tsx

@@ -213,7 +213,7 @@ export const Input = styled.input< InputProps >`
 		box-sizing: border-box;
 		border: none;
 		box-shadow: none !important;
-		color: ${ COLORS.gray[ 900 ] };
+		color: ${ COLORS.theme.foreground };
 		display: block;
 		font-family: inherit;
 		margin: 0;
@@ -263,20 +263,23 @@ export const LabelWrapper = styled( FlexItem )`
 
 type BackdropProps = {
 	disabled?: boolean;
+	isBorderless?: boolean;
 	isFocused?: boolean;
 };
 
 const backdropFocusedStyles = ( {
 	disabled,
+	isBorderless,
 	isFocused,
 }: BackdropProps ): SerializedStyles => {
-	let borderColor = isFocused ? COLORS.ui.borderFocus : COLORS.ui.border;
+	let borderColor = isBorderless ? 'transparent' : COLORS.ui.border;
 
 	let boxShadow;
 	let outline;
 	let outlineOffset;
 
 	if ( isFocused ) {
+		borderColor = COLORS.ui.borderFocus;
 		boxShadow = CONFIG.controlBoxShadowFocus;
 		// Windows High Contrast mode will show this outline, but not the box-shadow.
 		outline = `2px solid transparent`;
@@ -284,7 +287,7 @@ const backdropFocusedStyles = ( {
 	}
 
 	if ( disabled ) {
-		borderColor = COLORS.ui.borderDisabled;
+		borderColor = isBorderless ? 'transparent' : COLORS.ui.borderDisabled;
 	}
 
 	return css( {

package/src/input-control/types.ts

@@ -176,10 +176,19 @@ export interface InputBaseProps extends BaseProps, FlexProps {
 	 * If this property is added, a label will be generated using label property as the content.
 	 */
 	label?: ReactNode;
+	/**
+	 * Whether to hide the border when not focused.
+	 *
+	 * @default false
+	 */
+	isBorderless?: boolean;
 }
 
 export interface InputControlProps
-	extends Omit< InputBaseProps, 'children' | 'isFocused' | keyof FlexProps >,
+	extends Omit<
+			InputBaseProps,
+			'children' | 'isBorderless' | 'isFocused' | keyof FlexProps
+		>,
 		Pick< BaseControlProps, 'help' >,
 		/**
 		 * The `prefix` prop in `WordPressComponentProps< InputFieldProps, 'input', false >` comes from the

package/src/item-group/styles.ts

@@ -35,10 +35,7 @@ export const unstyledButton = ( as: 'a' | 'button' ) => {
 
 		&:focus-visible {
 			box-shadow: 0 0 0 var( --wp-admin-border-width-focus )
-				var(
-					--wp-components-color-accent,
-					var( --wp-admin-theme-color, ${ COLORS.theme.accent } )
-				);
+				${ COLORS.theme.accent };
 			// Windows high contrast mode.
 			outline: 2px solid transparent;
 			outline-offset: 0;