@wordpress/components 37.0.1-next.v.202607070741.0 → 38.0.0

package/src/gradient-picker/types.ts

@@ -17,10 +17,16 @@ type GradientPickerBaseProps = {
 	 */
 	className?: string;
 	/**
-	 * The function called when a new gradient has been defined. It is passed to
-	 * the `currentGradient` as an argument.
+	 * The function called when a new gradient has been defined. It is passed
+	 * the `currentGradient` as an argument. When a predefined gradient is
+	 * selected, the second argument is its index (or, for multiple-origin
+	 * gradients, the origin index) and the third argument is its slug.
 	 */
-	onChange: ( currentGradient: string | undefined ) => void;
+	onChange: (
+		currentGradient: string | undefined,
+		index?: number,
+		slug?: string
+	) => void;
 	/**
 	 * The current value of the gradient. Pass a css gradient string (See default value for example).
 	 * Optionally pass in a `null` value to specify no gradient is currently selected.
@@ -28,6 +34,19 @@ type GradientPickerBaseProps = {
 	 * @default 'linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)'
 	 */
 	value?: GradientObject[ 'gradient' ] | null;
+	/**
+	 * The slug of the currently selected predefined gradient.
+	 *
+	 * When set to a non-empty string, selection is determined by slug rather
+	 * than by gradient value, which correctly handles palettes where two
+	 * entries share the same gradient. Entries whose slug does not match will
+	 * not appear selected in this mode, even if their gradient value matches
+	 * `value`.
+	 *
+	 * An empty string is treated the same as `undefined`: selection falls
+	 * back to matching by gradient value.
+	 */
+	selectedSlug?: string;
 	/**
 	 * Whether the palette should have a clearing button or not.
 	 *
@@ -121,7 +140,8 @@ export type PickerProps< TOriginType extends GradientObject | OriginObject > =
 		clearGradient: () => void;
 		onChange: (
 			currentGradient: string | undefined,
-			index: number
+			index: number,
+			slug?: string
 		) => void;
 		actions?: React.ReactNode;
 		gradients: TOriginType[];

package/src/h-stack/stories/index.story.tsx

@@ -77,7 +77,7 @@ const meta: Meta< typeof HStack > = {
 		componentStatus: {
 			status: 'not-recommended',
 			whereUsed: 'global',
-			notes: 'Use `Stack` from `@wordpress/ui` instead.',
+			notes: 'Use [`Stack`](?path=/docs/design-system-components-stack--docs) from `@wordpress/ui` instead.',
 		},
 	},
 };

package/src/h-stack/test/__snapshots__/index.tsx.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`props should render alignment 1`] = `
 <div>

package/src/heading/hook.ts

@@ -16,7 +16,7 @@ export function useHeading(
 		level = 2,
 		color = COLORS.theme.foreground,
 		isBlock = true,
-		weight = CONFIG.fontWeightHeading as React.CSSProperties[ 'fontWeight' ],
+		weight = CONFIG.fontWeightEmphasis as React.CSSProperties[ 'fontWeight' ],
 		...otherProps
 	} = useContextSystem( props, 'Heading' );
 

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

@@ -32,7 +32,7 @@ const meta: Meta< typeof Heading > = {
 		componentStatus: {
 			status: 'not-recommended',
 			whereUsed: 'global',
-			notes: 'Use `Text` from `@wordpress/ui` instead, with the `render` prop set to the heading level element and the variant set to the visual heading size (e.g. `<Text render={ <h1 /> } variant="heading-2xl">`).',
+			notes: 'Use [`Text`](?path=/docs/design-system-components-text--docs) from `@wordpress/ui` instead, with the `render` prop set to the heading level element and the variant set to the visual heading size (e.g. `<Text render={ <h1 /> } variant="heading-2xl">`).',
 		},
 	},
 };

package/src/heading/test/__snapshots__/index.tsx.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`props should render correctly 1`] = `
 .emotion-0 {

package/src/higher-order/with-filters/test/__snapshots__/index.tsx.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`withFilters should display a component overridden by the filter 1`] = `
 <div>

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

@@ -13,7 +13,7 @@ const meta: Meta< typeof Icon > = {
 		componentStatus: {
 			status: 'use-with-caution',
 			whereUsed: 'global',
-			notes: 'When rendering SVGs, use `Icon` from `@wordpress/ui` instead.',
+			notes: 'When rendering SVGs, use [`Icon`](?path=/docs/design-system-components-icon--docs) from `@wordpress/ui` instead.',
 		},
 	},
 };

package/src/input-control/README.md

@@ -17,7 +17,6 @@ const Example = () => {
 
 	return (
 		<InputControl
-			__next40pxDefaultSize
 			value={ value }
 			onChange={ ( nextValue ) => setValue( nextValue ?? '' ) }
 		/>
@@ -109,10 +108,3 @@ The current value of the input.
 -   Type: `String`
 -   Required: No
 
-### __next40pxDefaultSize
-
-Start opting into the larger default height that will become the default size in a future version.
-
--   Type: `Boolean`
--   Required: No
--   Default: `false`

package/src/input-control/index.tsx

@@ -19,8 +19,6 @@ import type { InputControlProps } from './types';
 import { space } from '../utils/space';
 import { useDraft } from './utils';
 import BaseControl from '../base-control';
-import { useDeprecated36pxDefaultSizeProp } from '../utils/use-deprecated-props';
-import { maybeWarnDeprecated36pxSize } from '../utils/deprecated-36px-size';
 
 const noop = () => {};
 
@@ -36,8 +34,9 @@ export function UnforwardedInputControl(
 	ref: ForwardedRef< HTMLInputElement >
 ) {
 	const {
-		__next40pxDefaultSize,
-		__shouldNotWarnDeprecated36pxSize,
+		// Prevent passing legacy props to internal components.
+		__next40pxDefaultSize: _next40pxDefaultSize,
+		__next36pxDefaultSize: _next36pxDefaultSize,
 		__unstableStateReducer: stateReducer = ( state ) => state,
 		__unstableInputWidth,
 		className,
@@ -57,7 +56,7 @@ export function UnforwardedInputControl(
 		suffix,
 		value,
 		...restProps
-	} = useDeprecated36pxDefaultSizeProp< InputControlProps >( props );
+	} = props;
 
 	const id = useUniqueId( idProp );
 	const classes = clsx( 'components-input-control', className );
@@ -70,17 +69,9 @@ export function UnforwardedInputControl(
 
 	const helpProp = !! help ? { 'aria-describedby': `${ id }__help` } : {};
 
-	maybeWarnDeprecated36pxSize( {
-		componentName: 'InputControl',
-		__next40pxDefaultSize,
-		size,
-		__shouldNotWarnDeprecated36pxSize,
-	} );
-
 	return (
 		<BaseControl className={ classes } help={ help } id={ id }>
 			<InputBase
-				__next40pxDefaultSize={ __next40pxDefaultSize }
 				__unstableInputWidth={ __unstableInputWidth }
 				disabled={ disabled }
 				gap={ 3 }
@@ -97,7 +88,6 @@ export function UnforwardedInputControl(
 				<InputField
 					{ ...restProps }
 					{ ...helpProp }
-					__next40pxDefaultSize={ __next40pxDefaultSize }
 					className="components-input-control__input"
 					disabled={ disabled }
 					id={ id }
@@ -129,7 +119,6 @@ export function UnforwardedInputControl(
  *
  *   return (
  *  	<InputControl
- * 			__next40pxDefaultSize
  *  		value={ value }
  *  		onChange={ ( nextValue ) => setValue( nextValue ?? '' ) }
  *  	/>
@@ -138,6 +127,5 @@ export function UnforwardedInputControl(
  * ```
  */
 export const InputControl = forwardRef( UnforwardedInputControl );
-InputControl.displayName = 'InputControl';
 
 export default InputControl;

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

@@ -22,7 +22,6 @@ import {
 	contextConnect,
 	useContextSystem,
 } from '../context';
-import { useDeprecated36pxDefaultSizeProp } from '../utils/use-deprecated-props';
 
 function useUniqueId( idProp?: string ) {
 	const instanceId = useInstanceId( InputBase );
@@ -63,7 +62,6 @@ function InputBase(
 	ref: ForwardedRef< HTMLDivElement >
 ) {
 	const {
-		__next40pxDefaultSize,
 		__unstableInputWidth,
 		children,
 		className,
@@ -77,19 +75,17 @@ function InputBase(
 		size = 'default',
 		suffix,
 		...restProps
-	} = useDeprecated36pxDefaultSizeProp(
-		useContextSystem( props, 'InputBase' )
-	);
+	} = useContextSystem( props, 'InputBase' );
 
 	const id = useUniqueId( idProp );
 	const hideLabel = hideLabelFromVision || ! label;
 
 	const prefixSuffixContextValue = useMemo( () => {
 		return {
-			InputControlPrefixWrapper: { __next40pxDefaultSize, size },
-			InputControlSuffixWrapper: { __next40pxDefaultSize, size },
+			InputControlPrefixWrapper: { size },
+			InputControlSuffixWrapper: { size },
 		};
-	}, [ __next40pxDefaultSize, size ] );
+	}, [ size ] );
 
 	return (
 		// @ts-expect-error The `direction` prop from Flex (FlexDirection) conflicts with legacy SVGAttributes `direction` (string) that come from React intrinsic prop definitions.

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

@@ -43,21 +43,20 @@ const meta: Meta< typeof InputControl > = {
 		componentStatus: {
 			status: 'recommended',
 			whereUsed: 'global',
-			notes: 'Will be superseded by `InputControl` in `@wordpress/ui`, but continue using for now.',
+			notes: 'Will be superseded by [`InputControl`](?path=/docs/design-system-components-form-inputcontrol--docs) in `@wordpress/ui`, but continue using for now.',
 		},
 	},
 };
 export default meta;
 
 const Template: StoryFn< typeof InputControl > = ( args ) => (
-	<InputControl __next40pxDefaultSize { ...args } />
+	<InputControl { ...args } />
 );
 
 export const Default = Template.bind( {} );
 Default.args = {
 	label: 'Value',
 	placeholder: 'Placeholder',
-	__next40pxDefaultSize: true,
 };
 
 export const WithHelpText = Template.bind( {} );
@@ -128,7 +127,6 @@ export const ShowPassword: StoryFn< typeof InputControl > = ( args ) => {
 	const [ visible, setVisible ] = useState( false );
 	return (
 		<InputControl
-			__next40pxDefaultSize
 			type={ visible ? 'text' : 'password' }
 			suffix={
 				<InputControlSuffixWrapper variant="control">

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

@@ -134,7 +134,6 @@ export const Container = styled.div< ContainerProps >`
 `;
 
 type InputProps = {
-	__next40pxDefaultSize?: boolean;
 	disabled?: boolean;
 	inputSize?: Size;
 	isDragging?: boolean;
@@ -158,7 +157,6 @@ export const fontSizeStyles = ( { inputSize: size }: InputProps ) => {
 		default: '13px',
 		small: '11px',
 		compact: '13px',
-		'__unstable-large': '13px',
 	};
 
 	const fontSize = sizes[ size as Size ] || sizes.default;
@@ -177,10 +175,7 @@ export const fontSizeStyles = ( { inputSize: size }: InputProps ) => {
 	`;
 };
 
-export const getSizeConfig = ( {
-	inputSize: size,
-	__next40pxDefaultSize,
-}: InputProps ) => {
+export const getSizeConfig = ( { inputSize: size }: InputProps ) => {
 	// Paddings may be overridden by the custom paddings props.
 	const sizes = {
 		default: {
@@ -204,19 +199,8 @@ export const getSizeConfig = ( {
 			paddingLeft: CONFIG.controlPaddingXSmall,
 			paddingRight: CONFIG.controlPaddingXSmall,
 		},
-		'__unstable-large': {
-			height: 40,
-			lineHeight: 1,
-			minHeight: 40,
-			paddingLeft: CONFIG.controlPaddingX,
-			paddingRight: CONFIG.controlPaddingX,
-		},
 	};
 
-	if ( ! __next40pxDefaultSize ) {
-		sizes.default = sizes.compact;
-	}
-
 	return sizes[ size as Size ] || sizes.default;
 };
 
@@ -332,12 +316,10 @@ export const LabelWrapper = styled( FlexItem )`
 const prefixSuffixWrapperStyles = ( {
 	variant = 'default',
 	size,
-	__next40pxDefaultSize,
 	isPrefix,
 }: PrefixSuffixWrapperProps & { isPrefix?: boolean } ) => {
 	const { paddingLeft: padding } = getSizeConfig( {
 		inputSize: size,
-		__next40pxDefaultSize,
 	} );
 
 	const paddingProperty = isPrefix

package/src/input-control/test/__snapshots__/index.js.snap

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+
+exports[`InputControl Legacy size support treats __unstable-large the same as default 1`] = `
+Snapshot Diff:
+Compared values have no visual difference.
+`;
+
+exports[`InputControl Legacy size support treats __unstable-large the same as default 2`] = `
+Snapshot Diff:
+Compared values have no visual difference.
+`;

package/src/input-control/test/index.js

@@ -13,18 +13,13 @@ import { useState } from '@wordpress/element';
  * Internal dependencies
  */
 import BaseInputControl from '../';
+import InputControlPrefixWrapper from '../input-prefix-wrapper';
 
 const getInput = () => screen.getByTestId( 'input' );
 
 describe( 'InputControl', () => {
 	const InputControl = ( props ) => {
-		return (
-			<BaseInputControl
-				{ ...props }
-				__next40pxDefaultSize
-				data-testid="input"
-			/>
-		);
+		return <BaseInputControl { ...props } data-testid="input" />;
 	};
 
 	describe( 'Basic rendering', () => {
@@ -213,4 +208,31 @@ describe( 'InputControl', () => {
 			expect( spyChange ).toHaveBeenLastCalledWith( 'this is meow' );
 		} );
 	} );
+
+	describe( 'Legacy size support', () => {
+		it( 'treats __unstable-large the same as default', () => {
+			const prefix = (
+				<InputControlPrefixWrapper>$</InputControlPrefixWrapper>
+			);
+
+			render( <InputControl label="Test" prefix={ prefix } /> );
+			render(
+				<InputControl
+					label="Test"
+					prefix={ prefix }
+					{ ...{ size: '__unstable-large' } }
+				/>
+			);
+
+			const [ defaultPrefixWrapper, legacyPrefixWrapper ] =
+				screen.getAllByText( '$' );
+			const [ defaultInput, legacyInput ] =
+				screen.getAllByTestId( 'input' );
+
+			expect( legacyPrefixWrapper ).toMatchStyleDiffSnapshot(
+				defaultPrefixWrapper
+			);
+			expect( legacyInput ).toMatchStyleDiffSnapshot( defaultInput );
+		} );
+	} );
 } );

package/src/input-control/types.ts

@@ -23,30 +23,9 @@ export type DragDirection = 'n' | 's' | 'e' | 'w';
 
 export type DragProps = Parameters< Parameters< typeof useDrag >[ 0 ] >[ 0 ];
 
-export type Size = 'default' | 'small' | 'compact' | '__unstable-large';
+export type Size = 'default' | 'small' | 'compact';
 
 interface BaseProps {
-	/**
-	 * Deprecated. Use `__next40pxDefaultSize` instead.
-	 *
-	 * @default false
-	 * @deprecated
-	 * @ignore
-	 */
-	__next36pxDefaultSize?: boolean;
-	/**
-	 * Start opting into the larger default height that will become the default size in a future version.
-	 *
-	 * @default false
-	 */
-	__next40pxDefaultSize?: boolean;
-	/**
-	 * Do not throw a warning for the deprecated 36px default size.
-	 * For internal components of other components that already throw the warning.
-	 *
-	 * @ignore
-	 */
-	__shouldNotWarnDeprecated36pxSize?: boolean;
 	__unstableInputWidth?: CSSProperties[ 'width' ];
 	/**
 	 * If true, the label will only be visible to screen readers.
@@ -73,8 +52,7 @@ export type InputChangeCallback< P = {} > = (
 	extra: { event: SyntheticEvent } & P
 ) => void;
 
-export interface InputFieldProps
-	extends Omit< BaseProps, '__next36pxDefaultSize' > {
+export interface InputFieldProps extends BaseProps {
 	/**
 	 * Determines the drag axis.
 	 *
@@ -208,6 +186,19 @@ export interface InputControlProps
 			| 'paddingInlineStart'
 			| 'paddingInlineEnd'
 		> {
+	/**
+	 * Deprecated. Use `__next40pxDefaultSize` instead.
+	 *
+	 * @default false
+	 * @deprecated
+	 * @ignore
+	 */
+	__next36pxDefaultSize?: boolean;
+	/**
+	 * @deprecated Default behavior since WordPress 7.1. Prop can be safely removed.
+	 * @ignore
+	 */
+	__next40pxDefaultSize?: boolean;
 	__unstableStateReducer?: InputFieldProps[ 'stateReducer' ];
 }
 
@@ -229,12 +220,6 @@ export type PrefixSuffixWrapperProps = {
 	 * @ignore
 	 */
 	size?: BaseProps[ 'size' ];
-	/**
-	 * Internal prop used to control the padding size of the wrapper.
-	 *
-	 * @ignore
-	 */
-	__next40pxDefaultSize?: BaseProps[ '__next40pxDefaultSize' ];
 	/**
 	 * Adjust the wrapper based on the prefix or suffix content.
 	 *

package/src/item-group/test/__snapshots__/index.js.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`ItemGroup Item should read the value of the size prop from context when the prop is not defined 1`] = `
 Snapshot Diff:

package/src/menu/README.md

@@ -19,8 +19,8 @@ component, and the `Menu.Popover` component.
 
 ### `as`
 
- - Type: `"symbol" | "object" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | ... 517 more ...`
- - Required: No
+ - Type: `ElementType<any, keyof IntrinsicElements>`
+ - Required: Yes
 
 The HTML element or React component to render the component as.
 

package/src/menu/group-label.tsx

@@ -9,6 +9,7 @@ import { forwardRef, useContext } from '@wordpress/element';
 import type { WordPressComponentProps } from '../context';
 import { Context } from './context';
 import { Text } from '../text';
+import { CONFIG } from '../utils';
 import type { GroupLabelProps } from './types';
 import * as Styled from './styles';
 
@@ -33,7 +34,7 @@ export const GroupLabel = forwardRef<
 					upperCase
 					variant="muted"
 					size="11px"
-					weight={ 500 }
+					weight={ CONFIG.fontWeightEmphasis }
 					lineHeight="16px"
 				/>
 			}

package/src/menu-group/style.scss

@@ -23,6 +23,6 @@
 	color: $gray-700;
 	text-transform: uppercase;
 	font-size: 11px;
-	font-weight: $font-weight-medium;
+	font-weight: var(--wpds-typography-font-weight-emphasis);
 	white-space: nowrap;
 }

package/src/menu-item/style.scss

@@ -6,7 +6,7 @@
 .components-menu-item__button,
 .components-menu-item__button.components-button {
 	width: 100%;
-	font-weight: $font-weight-regular;
+	font-weight: var(--wpds-typography-font-weight-default);
 
 	&[role="menuitemradio"],
 	&[role="menuitemcheckbox"] {

package/src/menu-item/test/__snapshots__/index.js.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`MenuItem should match snapshot when all props provided 1`] = `
 <button

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

@@ -48,7 +48,7 @@ const meta: Meta< typeof Modal > = {
 		componentStatus: {
 			status: 'recommended',
 			whereUsed: 'global',
-			notes: 'Will be superseded by `Dialog` in `@wordpress/ui`, but continue using for now.',
+			notes: 'Will be superseded by [`Dialog`](?path=/docs/design-system-components-dialog--docs) in `@wordpress/ui`, but continue using for now.',
 		},
 	},
 };
@@ -85,10 +85,7 @@ const Template: StoryFn< typeof Modal > = ( { onRequestClose, ...args } ) => {
 						anim id est laborum.
 					</p>
 
-					<InputControl
-						__next40pxDefaultSize
-						style={ { marginBottom: '20px' } }
-					/>
+					<InputControl style={ { marginBottom: '20px' } } />
 
 					<Button
 						__next40pxDefaultSize

package/src/modal/style.scss

@@ -208,7 +208,7 @@
 
 	.components-modal__header-heading {
 		font-size: $font-size-x-large;
-		font-weight: 600;
+		font-weight: var(--wpds-typography-font-weight-emphasis);
 	}
 
 	h1 {

package/src/modal/test/index.tsx

@@ -8,6 +8,10 @@ import userEvent from '@testing-library/user-event';
  * WordPress dependencies
  */
 import { useEffect, useState } from '@wordpress/element';
+import {
+	getWpCompatOverlaySlot,
+	useEnableWpCompatOverlaySlot,
+} from '@wordpress/ui';
 
 /**
  * Internal dependencies
@@ -254,6 +258,44 @@ describe( 'Modal', () => {
 		expect( container ).not.toHaveAttribute( 'aria-hidden' );
 	} );
 
+	it( 'keeps the @wordpress/ui compat overlay slot exposed while open', async () => {
+		const user = userEvent.setup();
+
+		const CompatOverlayDemo = () => {
+			useEnableWpCompatOverlaySlot();
+			useEffect( () => {
+				const slot = getWpCompatOverlaySlot();
+				return () => slot?.remove();
+			}, [] );
+
+			const [ isShown, setIsShown ] = useState( false );
+			return (
+				<>
+					<button onClick={ () => setIsShown( true ) }>
+						Open Modal
+					</button>
+					{ isShown && (
+						<Modal onRequestClose={ () => setIsShown( false ) }>
+							<p>Modal content</p>
+						</Modal>
+					) }
+				</>
+			);
+		};
+
+		const { container } = render( <CompatOverlayDemo /> );
+		// Disable reason: The infrastructure slot has no semantic role.
+		// eslint-disable-next-line testing-library/no-node-access
+		const slot = document.querySelector( '[data-wp-compat-overlay-slot]' );
+
+		await user.click(
+			screen.getByRole( 'button', { name: 'Open Modal' } )
+		);
+
+		expect( container ).toHaveAttribute( 'aria-hidden', 'true' );
+		expect( slot ).toHaveAttribute( 'aria-hidden', 'false' );
+	} );
+
 	it( 'should render `headerActions` React nodes', async () => {
 		render(
 			<Modal

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

@@ -33,7 +33,7 @@ const meta: Meta< typeof Notice > = {
 		componentStatus: {
 			status: 'recommended',
 			whereUsed: 'global',
-			notes: 'Will be superseded by `Notice` in `@wordpress/ui`, but continue using for now.',
+			notes: 'Will be superseded by [`Notice`](?path=/docs/design-system-components-notice--docs) in `@wordpress/ui`, but continue using for now.',
 		},
 	},
 };

package/src/notice/test/__snapshots__/index.tsx.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Notice should match snapshot 1`] = `
 <div>

package/src/number-control/README.md

@@ -16,7 +16,6 @@ const Example = () => {
 
 	return (
 		<NumberControl
-			__next40pxDefaultSize
 			isShiftStepEnabled={ true }
 			onChange={ setValue }
 			shiftStep={ 10 }
@@ -141,10 +140,3 @@ Amount by which the `value` is changed when incrementing/decrementing. It is als
 -   Required: No
 -   Default: `1`
 
-### __next40pxDefaultSize
-
-Start opting into the larger default height that will become the default size in a future version.
-
--   Type: `Boolean`
--   Required: No
--   Default: `false`