@wordpress/components 36.1.0 → 37.0.0

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

@@ -19,6 +19,11 @@ const meta: Meta< typeof Navigator > = {
 		Button: Navigator.Button,
 		BackButton: Navigator.BackButton,
 	},
+	// Temporary: Due to an upstream bug, render the root explicitly so the
+	// components manifest extractor can resolve props from the JSX.
+	//
+	// See: https://github.com/storybookjs/storybook/issues/34877
+	render: ( args ) => <Navigator { ...args } />,
 	title: 'Components/Navigation/Navigator',
 	id: 'components-navigator',
 	argTypes: {

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

@@ -6,7 +6,7 @@ exports[`Notice should match snapshot 1`] = `
     class="components-notice is-success"
   >
     <div
-      class="components-visually-hidden css-1ragr82-PolymorphicDiv emotion-0"
+      class="components-visually-hidden"
       data-visually-hidden=""
       data-wp-c16t="true"
       data-wp-component="VisuallyHidden"

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`

package/src/number-control/index.tsx

@@ -26,8 +26,6 @@ import type { NumberControlProps } from './types';
 import { HStack } from '../h-stack';
 import { Spacer } from '../spacer';
 import { useCx } from '../utils';
-import { useDeprecated36pxDefaultSizeProp } from '../utils/use-deprecated-props';
-import { maybeWarnDeprecated36pxSize } from '../utils/deprecated-36px-size';
 
 const noop = () => {};
 
@@ -55,16 +53,8 @@ function UnforwardedNumberControl(
 		size = 'default',
 		suffix,
 		onChange = noop,
-		__shouldNotWarnDeprecated36pxSize,
 		...restProps
-	} = useDeprecated36pxDefaultSizeProp< NumberControlProps >( props );
-
-	maybeWarnDeprecated36pxSize( {
-		componentName: 'NumberControl',
-		size,
-		__next40pxDefaultSize: restProps.__next40pxDefaultSize,
-		__shouldNotWarnDeprecated36pxSize,
-	} );
+	} = props;
 
 	if ( hideHTMLArrows ) {
 		deprecated( 'wp.components.NumberControl hideHTMLArrows prop ', {
@@ -239,7 +229,6 @@ function UnforwardedNumberControl(
 			value={ valueProp }
 			__unstableStateReducer={ numberControlStateReducer }
 			size={ size }
-			__shouldNotWarnDeprecated36pxSize
 			suffix={
 				spinControls === 'custom' ? (
 					<>
@@ -276,6 +265,10 @@ function UnforwardedNumberControl(
 	);
 }
 
+/**
+ * `NumberControl` is a text input control that lets users enter and adjust a
+ * numeric value.
+ */
 export const NumberControl = forwardRef( UnforwardedNumberControl );
 NumberControl.displayName = 'NumberControl';
 

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

@@ -32,7 +32,7 @@ const meta: Meta< typeof NumberControl > = {
 		componentStatus: {
 			status: 'recommended',
 			whereUsed: 'global',
-			notes: 'Will be superseded by `InputControl` with `type="number"` in `@wordpress/ui`, but continue using for now.',
+			notes: 'Will be superseded by [`InputControl`](?path=/docs/design-system-components-form-inputcontrol--docs) with `type="number"` in `@wordpress/ui`, but continue using for now.',
 		},
 	},
 };
@@ -49,7 +49,6 @@ const Template: StoryFn< typeof NumberControl > = ( {
 	return (
 		<>
 			<NumberControl
-				__next40pxDefaultSize
 				{ ...props }
 				value={ value }
 				onChange={ ( v, extra ) => {
@@ -69,5 +68,4 @@ const Template: StoryFn< typeof NumberControl > = ( {
 export const Default = Template.bind( {} );
 Default.args = {
 	label: 'Value',
-	__next40pxDefaultSize: true,
 };

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

@@ -17,7 +17,7 @@ import type { NumberControlProps } from '../types';
 
 const NumberControl = (
 	props: React.ComponentProps< typeof _NumberControl >
-) => <_NumberControl __next40pxDefaultSize { ...props } />;
+) => <_NumberControl { ...props } />;
 
 function StatefulNumberControl( props: NumberControlProps ) {
 	const [ value, setValue ] = useState( props.value );

package/src/number-control/types.ts

@@ -5,7 +5,14 @@ import type { InputControlProps } from '../input-control/types';
 
 export type NumberControlProps = Omit<
 	InputControlProps,
-	'isDragEnabled' | 'min' | 'max' | 'required' | 'step' | 'type' | 'value'
+	| 'isDragEnabled'
+	| 'min'
+	| 'max'
+	| 'required'
+	| 'step'
+	| 'type'
+	| 'value'
+	| '__next40pxDefaultSize'
 > & {
 	/**
 	 * If true, the default `input` HTML arrows will be hidden.
@@ -98,4 +105,11 @@ export type NumberControlProps = Omit<
 	 * @ignore
 	 */
 	__shouldNotWarnDeprecated36pxSize?: boolean;
+	/**
+	 * Start opting into the larger default height that will become the default size in a future version.
+	 *
+	 * @deprecated Default behavior since WordPress 7.1. Prop can be safely removed.
+	 * @ignore
+	 */
+	__next40pxDefaultSize?: boolean;
 };

package/src/palette-edit/styles.ts

@@ -52,7 +52,7 @@ export const NameContainer = styled.div`
 export const PaletteHeading = styled( Heading )`
 	text-transform: uppercase;
 	line-height: ${ space( 6 ) };
-	font-weight: ${ CONFIG.fontWeightMedium };
+	font-weight: ${ CONFIG.fontWeightEmphasis };
 	&&& {
 		font-size: 11px;
 		margin-bottom: 0;

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

@@ -30,7 +30,7 @@ const meta: Meta< typeof Panel > = {
 		componentStatus: {
 			status: 'recommended',
 			whereUsed: 'editor',
-			notes: 'Intended for the block inspector sidebar. For collapsible sections elsewhere, use `CollapsibleCard` from `@wordpress/ui` instead.',
+			notes: 'Intended for the block inspector sidebar. For collapsible sections elsewhere, use [`CollapsibleCard`](?path=/docs/design-system-components-collapsiblecard--docs) from `@wordpress/ui` instead.',
 		},
 	},
 };
@@ -78,12 +78,12 @@ _PanelRow.args = {
 	children: (
 		<PanelBody title="My Profile">
 			<PanelRow>
-				<InputControl label="First name" __next40pxDefaultSize />
-				<InputControl label="Last name" __next40pxDefaultSize />
+				<InputControl label="First name" />
+				<InputControl label="Last name" />
 			</PanelRow>
 			<PanelRow>
 				<div style={ { flex: 1 } }>
-					<InputControl label="Email" __next40pxDefaultSize />
+					<InputControl label="Email" />
 				</div>
 			</PanelRow>
 		</PanelBody>

package/src/panel/style.scss

@@ -87,13 +87,10 @@
 .components-panel__body-toggle.components-button {
 	position: relative;
 	padding: $grid-unit-20 $grid-unit-60 $grid-unit-20 $grid-unit-20;
-	outline: none;
 	width: 100%;
-	font-weight: $font-weight-medium;
+	font-weight: var(--wpds-typography-font-weight-emphasis);
 	text-align: left;
 	color: $gray-900;
-	border: none;
-	box-shadow: none;
 
 	@media not (prefers-reduced-motion) {
 		transition: 0.1s background ease-in-out;
@@ -102,7 +99,7 @@
 	height: auto;
 
 	&:focus {
-		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) $components-color-accent;
+		outline-offset: calc(var(--wpds-border-width-focus) * -1);
 		border-radius: 0;
 	}
 

package/src/placeholder/style.scss

@@ -42,7 +42,7 @@
 }
 
 .components-placeholder__label {
-	font-weight: 600;
+	font-weight: var(--wpds-typography-font-weight-emphasis);
 	align-items: center;
 	display: flex;
 

package/src/private-apis.ts

@@ -24,15 +24,18 @@ import {
 	ValidatedNumberControl,
 	ValidatedSelectControl,
 	ValidatedRadioControl,
+	ValidatedContentEditableControl,
 	ValidatedTextControl,
 	ValidatedTextareaControl,
 	ValidatedToggleControl,
 	ValidatedToggleGroupControl,
 } from './validated-form-controls';
 import { ValidatedFormTokenField } from './validated-form-controls/components/form-token-field';
+import ContentEditableControl from './content-editable-control';
 
 export const privateApis = {};
 lock( privateApis, {
+	ContentEditableControl,
 	__experimentalPopoverLegacyPositionToPlacement,
 	ComponentsContext,
 	Tabs,
@@ -52,6 +55,7 @@ lock( privateApis, {
 	ValidatedNumberControl,
 	ValidatedSelectControl,
 	ValidatedRadioControl,
+	ValidatedContentEditableControl,
 	ValidatedTextControl,
 	ValidatedTextareaControl,
 	ValidatedToggleControl,

package/src/query-controls/README.md

@@ -247,10 +247,3 @@ The selected category for the `categoriesList` prop.
 
 -   Required: No
 -   Platform: Web
-
-#### `__next40pxDefaultSize`: `boolean`
-
-Start opting into the larger default height that will become the default size in a future version.
-
-- Required: No
-- Default: `false`

package/src/query-controls/author-select.tsx

@@ -6,7 +6,6 @@ import TreeSelect from '../tree-select';
 import type { AuthorSelectProps } from './types';
 
 export default function AuthorSelect( {
-	__next40pxDefaultSize,
 	label,
 	noOptionLabel,
 	authorList,
@@ -30,7 +29,6 @@ export default function AuthorSelect( {
 					? String( selectedAuthorId )
 					: undefined
 			}
-			__next40pxDefaultSize={ __next40pxDefaultSize }
 		/>
 	);
 }

package/src/query-controls/category-select.tsx

@@ -4,7 +4,6 @@ import TreeSelect from '../tree-select';
 import type { CategorySelectProps } from './types';
 
 export default function CategorySelect( {
-	__next40pxDefaultSize,
 	label,
 	noOptionLabel,
 	categoriesList,
@@ -30,7 +29,6 @@ export default function CategorySelect( {
 					: undefined
 			}
 			{ ...props }
-			__next40pxDefaultSize={ __next40pxDefaultSize }
 		/>
 	);
 }

package/src/query-controls/index.tsx

@@ -103,7 +103,6 @@ export function QueryControls( {
 			{ [
 				onOrderChange && onOrderByChange && (
 					<SelectControl
-						__next40pxDefaultSize
 						key="query-controls-order-select"
 						label={ __( 'Order by' ) }
 						value={
@@ -139,7 +138,6 @@ export function QueryControls( {
 					props.categoriesList &&
 					props.onCategoryChange && (
 						<CategorySelect
-							__next40pxDefaultSize
 							key="query-controls-category-select"
 							categoriesList={ props.categoriesList }
 							label={ __( 'Category' ) }
@@ -152,7 +150,6 @@ export function QueryControls( {
 					props.categorySuggestions &&
 					props.onCategoryChange && (
 						<FormTokenField
-							__next40pxDefaultSize
 							key="query-controls-categories-select"
 							label={ __( 'Categories' ) }
 							value={
@@ -175,7 +172,6 @@ export function QueryControls( {
 					),
 				onAuthorChange && (
 					<AuthorSelect
-						__next40pxDefaultSize
 						key="query-controls-author-select"
 						authorList={ authorList }
 						label={ __( 'Author' ) }
@@ -186,7 +182,6 @@ export function QueryControls( {
 				),
 				onNumberOfItemsChange && (
 					<RangeControl
-						__next40pxDefaultSize
 						key="query-controls-range-control"
 						label={ __( 'Number of items' ) }
 						value={ numberOfItems }

package/src/query-controls/types.ts

@@ -31,7 +31,6 @@ export type CategorySelectProps = Pick<
 	categoriesList: Category[];
 	onChange: ( newCategory: string ) => void;
 	selectedCategoryId?: Category[ 'id' ];
-	__next40pxDefaultSize: boolean;
 };
 
 export type AuthorSelectProps = Pick<
@@ -41,7 +40,6 @@ export type AuthorSelectProps = Pick<
 	authorList?: Author[];
 	onChange: ( newAuthor: string ) => void;
 	selectedAuthorId?: Author[ 'id' ];
-	__next40pxDefaultSize: boolean;
 };
 
 type Order = 'asc' | 'desc';

package/src/radio-group/README.md

@@ -57,10 +57,10 @@ const MyControlledRadioRadioGroup = () => {
 	const [ checked, setChecked ] = useState( '25' );
 	return (
 		<RadioGroup label="Width" onChange={ setChecked } checked={ checked }>
-			<Radio __next40pxDefaultSize value="25">25%</Radio>
-			<Radio __next40pxDefaultSize value="50">50%</Radio>
-			<Radio __next40pxDefaultSize value="75">75%</Radio>
-			<Radio __next40pxDefaultSize value="100">100%</Radio>
+			<Radio value="25">25%</Radio>
+			<Radio value="50">50%</Radio>
+			<Radio value="75">75%</Radio>
+			<Radio value="100">100%</Radio>
 		</RadioGroup>
 	);
 };
@@ -80,10 +80,10 @@ import {
 const MyUncontrolledRadioRadioGroup = () => {
 	return (
 		<RadioGroup label="Width" defaultChecked="25">
-			<Radio __next40pxDefaultSize value="25">25%</Radio>
-			<Radio __next40pxDefaultSize value="50">50%</Radio>
-			<Radio __next40pxDefaultSize value="75">75%</Radio>
-			<Radio __next40pxDefaultSize value="100">100%</Radio>
+			<Radio value="25">25%</Radio>
+			<Radio value="50">50%</Radio>
+			<Radio value="75">75%</Radio>
+			<Radio value="100">100%</Radio>
 		</RadioGroup>
 	);
 };

package/src/radio-group/radio.tsx

@@ -15,12 +15,12 @@ import Button from '../button';
 import { RadioGroupContext } from './context';
 import type { WordPressComponentProps } from '../context';
 import type { RadioProps } from './types';
-import { maybeWarnDeprecated36pxSize } from '../utils/deprecated-36px-size';
 
 function UnforwardedRadio(
 	{
 		value,
 		children,
+		__next40pxDefaultSize: _next40pxDefaultSize,
 		...props
 	}: WordPressComponentProps< RadioProps, 'button', false >,
 	ref: React.ForwardedRef< any >
@@ -30,12 +30,6 @@ function UnforwardedRadio(
 	const selectedValue = Ariakit.useStoreState( store, 'value' );
 	const isChecked = selectedValue !== undefined && selectedValue === value;
 
-	maybeWarnDeprecated36pxSize( {
-		componentName: 'Radio',
-		size: undefined,
-		__next40pxDefaultSize: props.__next40pxDefaultSize,
-	} );
-
 	return (
 		<Ariakit.Radio
 			disabled={ disabled }
@@ -43,10 +37,9 @@ function UnforwardedRadio(
 			ref={ ref }
 			value={ value }
 			render={
-				// Disable: the parent component already takes care of the `__next40pxDefaultSize` prop.
-				// eslint-disable-next-line @wordpress/components-no-missing-40px-size-prop
 				<Button
 					variant={ isChecked ? 'primary' : 'secondary' }
+					__next40pxDefaultSize
 					{ ...props }
 				/>
 			}

package/src/radio-group/stories/index.story.tsx

@@ -52,15 +52,9 @@ Default.args = {
 	defaultChecked: 'option2',
 	children: (
 		<>
-			<Radio __next40pxDefaultSize value="option1">
-				Option 1
-			</Radio>
-			<Radio __next40pxDefaultSize value="option2">
-				Option 2
-			</Radio>
-			<Radio __next40pxDefaultSize value="option3">
-				Option 3
-			</Radio>
+			<Radio value="option1">Option 1</Radio>
+			<Radio value="option2">Option 2</Radio>
+			<Radio value="option3">Option 3</Radio>
 		</>
 	),
 };

package/src/radio-group/types.ts

@@ -1,8 +1,3 @@
-/**
- * Internal dependencies
- */
-import type { ButtonProps } from '../button/types';
-
 export type RadioGroupProps = {
 	/**
 	 * Accessible label for the radio group
@@ -32,7 +27,14 @@ export type RadioGroupProps = {
 	children: React.ReactNode;
 };
 
-export type RadioProps = Pick< ButtonProps, '__next40pxDefaultSize' > & {
+export type RadioProps = {
+	/**
+	 * Start opting into the larger default height that will become the default size in a future version.
+	 *
+	 * @deprecated Default behavior since WordPress 7.1. Prop can be safely removed.
+	 * @ignore
+	 */
+	__next40pxDefaultSize?: boolean;
 	/**
 	 * The actual value of the radio element.
 	 */

package/src/range-control/README.md

@@ -90,7 +90,6 @@ const MyRangeControl = () => {
 
 	return (
 		<RangeControl
-			__next40pxDefaultSize
 			label="Columns"
 			value={ columns }
 			onChange={ ( value ) => setColumns( value ) }
@@ -362,13 +361,6 @@ Determines if the `input` number field will render next to the RangeControl. Thi
 -   Required: No
 -   Platform: Web
 
-### `__next40pxDefaultSize`: `boolean`
-
-Start opting into the larger default height that will become the default size in a future version.
-
--   Required: No
--   Default: `false`
-
 ## Related components
 
 -   To collect a numerical input in a text field, use the `TextControl` component.

package/src/range-control/index.tsx

@@ -38,7 +38,6 @@ import {
 import type { RangeControlProps } from './types';
 import type { WordPressComponentProps } from '../context';
 import { space } from '../utils/space';
-import { maybeWarnDeprecated36pxSize } from '../utils/deprecated-36px-size';
 
 const noop = () => {};
 
@@ -66,7 +65,10 @@ function UnforwardedRangeControl(
 	forwardedRef: ForwardedRef< HTMLInputElement >
 ) {
 	const {
-		__nextHasNoMarginBottom: _, // Prevent passing to internal component
+		// Prevent passing legacy props to internal component.
+		__nextHasNoMarginBottom: _,
+		__next40pxDefaultSize: _next40pxDefaultSize,
+		__shouldNotWarnDeprecated36pxSize: _shouldNotWarnDeprecated36pxSize,
 		afterIcon,
 		allowReset = false,
 		beforeIcon,
@@ -90,14 +92,12 @@ function UnforwardedRangeControl(
 		railColor,
 		renderTooltipContent = ( v ) => v,
 		resetFallbackValue,
-		__next40pxDefaultSize = false,
 		shiftStep = 10,
 		showTooltip: showTooltipProp,
 		step = 1,
 		trackColor,
 		value: valueProp,
 		withInputField = true,
-		__shouldNotWarnDeprecated36pxSize,
 		...otherProps
 	} = props;
 
@@ -231,14 +231,6 @@ function UnforwardedRangeControl(
 		[ isRTL() ? 'right' : 'left' ]: fillValueOffset,
 	};
 
-	// Add default size deprecation warning.
-	maybeWarnDeprecated36pxSize( {
-		componentName: 'RangeControl',
-		__next40pxDefaultSize,
-		size: undefined,
-		__shouldNotWarnDeprecated36pxSize,
-	} );
-
 	return (
 		<BaseControl
 			className={ classes }
@@ -247,10 +239,7 @@ function UnforwardedRangeControl(
 			id={ `${ id }` }
 			help={ help }
 		>
-			<Root
-				className="components-range-control__root"
-				__next40pxDefaultSize={ __next40pxDefaultSize }
-			>
+			<Root className="components-range-control__root">
 				{ beforeIcon && (
 					<BeforeIconWrapper>
 						<Icon icon={ beforeIcon } />
@@ -336,18 +325,10 @@ function UnforwardedRangeControl(
 						onBlur={ handleOnInputNumberBlur }
 						onChange={ handleOnChange }
 						shiftStep={ shiftStep }
-						size={
-							__next40pxDefaultSize
-								? '__unstable-large'
-								: 'default'
-						}
-						__unstableInputWidth={
-							__next40pxDefaultSize ? space( 20 ) : space( 16 )
-						}
+						__unstableInputWidth={ space( 20 ) }
 						step={ step }
 						// @ts-expect-error TODO: Investigate if the `null` value is necessary
 						value={ inputSliderValue }
-						__shouldNotWarnDeprecated36pxSize
 					/>
 				) }
 				{ allowReset && (
@@ -391,7 +372,6 @@ function UnforwardedRangeControl(
  *   const [ value, setValue ] = useState();
  *   return (
  *     <RangeControl
- *       __next40pxDefaultSize
  *       help="Please select how transparent you would like this."
  *       initialPosition={ 50 }
  *       label="Opacity"

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

@@ -71,7 +71,6 @@ const Template: StoryFn< typeof RangeControl > = ( { onChange, ...args } ) => {
 
 	return (
 		<RangeControl
-			__next40pxDefaultSize
 			{ ...args }
 			value={ value }
 			onChange={ ( v ) => {
@@ -84,7 +83,6 @@ const Template: StoryFn< typeof RangeControl > = ( { onChange, ...args } ) => {
 
 export const Default: StoryFn< typeof RangeControl > = Template.bind( {} );
 Default.args = {
-	__next40pxDefaultSize: true,
 	help: 'Please select how transparent you would like this.',
 	initialPosition: 50,
 	label: 'Opacity',
@@ -106,7 +104,6 @@ export const WithAnyStep: StoryFn< typeof RangeControl > = ( {
 	return (
 		<>
 			<RangeControl
-				__next40pxDefaultSize
 				{ ...args }
 				value={ value }
 				onChange={ ( v ) => {
@@ -120,7 +117,6 @@ export const WithAnyStep: StoryFn< typeof RangeControl > = ( {
 	);
 };
 WithAnyStep.args = {
-	__next40pxDefaultSize: true,
 	label: 'Brightness',
 	step: 'any',
 };
@@ -137,7 +133,6 @@ const MarkTemplate: StoryFn< typeof RangeControl > = ( {
 		<>
 			<h2>{ label }</h2>
 			<RangeControl
-				__next40pxDefaultSize
 				{ ...args }
 				label="Automatic marks"
 				marks
@@ -148,7 +143,6 @@ const MarkTemplate: StoryFn< typeof RangeControl > = ( {
 				value={ automaticValue }
 			/>
 			<RangeControl
-				__next40pxDefaultSize
 				{ ...args }
 				label="Custom marks"
 				onChange={ ( v ) => {
@@ -186,7 +180,6 @@ export const WithIntegerStepAndMarks: StoryFn< typeof RangeControl > =
 	MarkTemplate.bind( {} );
 
 WithIntegerStepAndMarks.args = {
-	__next40pxDefaultSize: true,
 	label: 'Integer Step',
 	marks: marksBase,
 	max: 10,
@@ -203,7 +196,6 @@ export const WithDecimalStepAndMarks: StoryFn< typeof RangeControl > =
 	MarkTemplate.bind( {} );
 
 WithDecimalStepAndMarks.args = {
-	__next40pxDefaultSize: true,
 	marks: [
 		...marksBase,
 		{ value: 3.5, label: '3.5' },
@@ -223,7 +215,6 @@ export const WithNegativeMinimumAndMarks: StoryFn< typeof RangeControl > =
 	MarkTemplate.bind( {} );
 
 WithNegativeMinimumAndMarks.args = {
-	__next40pxDefaultSize: true,
 	marks: marksWithNegatives,
 	max: 10,
 	min: -10,
@@ -239,7 +230,6 @@ export const WithNegativeRangeAndMarks: StoryFn< typeof RangeControl > =
 	MarkTemplate.bind( {} );
 
 WithNegativeRangeAndMarks.args = {
-	__next40pxDefaultSize: true,
 	marks: marksWithNegatives,
 	max: -1,
 	min: -10,
@@ -255,7 +245,6 @@ export const WithAnyStepAndMarks: StoryFn< typeof RangeControl > =
 	MarkTemplate.bind( {} );
 
 WithAnyStepAndMarks.args = {
-	__next40pxDefaultSize: true,
 	marks: marksBase,
 	max: 10,
 	min: 0,