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

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,

package/src/range-control/styles/range-control-styles.ts

@@ -18,7 +18,6 @@ import type {
 	TooltipProps,
 	TrackProps,
 	WrapperProps,
-	RangeControlProps,
 } from '../types';
 
 const rangeHeightValue = 30;
@@ -27,13 +26,7 @@ const rangeHeight = () =>
 	css( { height: rangeHeightValue, minHeight: rangeHeightValue } );
 const thumbSize = 12;
 
-const deprecatedHeight = ( {
-	__next40pxDefaultSize,
-}: Pick< RangeControlProps, '__next40pxDefaultSize' > ) =>
-	! __next40pxDefaultSize && css( { minHeight: rangeHeightValue } );
-
-type RootProps = Pick< RangeControlProps, '__next40pxDefaultSize' >;
-export const Root = styled.div< RootProps >`
+export const Root = styled.div`
 	-webkit-tap-highlight-color: transparent;
 	align-items: center;
 	display: flex;
@@ -43,8 +36,6 @@ export const Root = styled.div< RootProps >`
 	touch-action: none;
 	width: 100%;
 	min-height: 40px;
-	/* TODO: remove after removing the __next40pxDefaultSize prop */
-	${ deprecatedHeight };
 `;
 
 const wrapperColor = ( { color = COLORS.ui.borderFocus }: WrapperProps ) =>

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

@@ -1,12 +1,5 @@
-/**
- * External dependencies
- */
 import { act, fireEvent, render, screen } from '@testing-library/react';
-
-/**
- * Internal dependencies
- */
-import _RangeControl from '../';
+import RangeControl from '../';
 
 const getRangeInput = (): HTMLInputElement => screen.getByRole( 'slider' );
 const getNumberInput = (): HTMLInputElement => screen.getByRole( 'spinbutton' );
@@ -15,12 +8,6 @@ const getResetButton = (): HTMLButtonElement => screen.getByRole( 'button' );
 const fireChangeEvent = ( input: HTMLInputElement, value?: number | string ) =>
 	fireEvent.change( input, { target: { value } } );
 
-const RangeControl = (
-	props: React.ComponentProps< typeof _RangeControl >
-) => {
-	return <_RangeControl { ...props } __next40pxDefaultSize />;
-};
-
 describe( 'RangeControl', () => {
 	describe( '#render()', () => {
 		it( 'should trigger change callback with numeric value', () => {

package/src/range-control/types.ts

@@ -202,7 +202,8 @@ export type RangeControlProps = Pick<
 		/**
 		 * Start opting into the larger default height that will become the default size in a future version.
 		 *
-		 * @default false
+		 * @deprecated Default behavior since WordPress 7.1. Prop can be safely removed.
+		 * @ignore
 		 */
 		__next40pxDefaultSize?: boolean;
 		/**
@@ -233,6 +234,7 @@ export type RangeControlProps = Pick<
 		 * Do not throw a warning for the deprecated 36px default size.
 		 * For internal components of other components that already throw the warning.
 		 *
+		 * @deprecated Default behavior since WordPress 7.1. Prop can be safely removed.
 		 * @ignore
 		 */
 		__shouldNotWarnDeprecated36pxSize?: boolean;

package/src/resizable-box/index.tsx

@@ -132,6 +132,10 @@ function UnforwardedResizableBox(
 	);
 }
 
+/**
+ * `ResizableBox` wraps content in a container with draggable handles, letting
+ * users interactively resize it along one or more edges or corners.
+ */
 export const ResizableBox = forwardRef( UnforwardedResizableBox );
 ResizableBox.displayName = 'ResizableBox';
 

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

@@ -3,26 +3,24 @@
 exports[`props should render correctly 1`] = `
 .emotion-0 {
   height: 100%;
-  overflow-x: hidden;
-  overflow-y: auto;
 }
 
 @media only screen and ( min-device-width: 40em ) {
-  .emotion-0::-webkit-scrollbar {
+  .emotion-1::-webkit-scrollbar {
     height: 12px;
     width: 12px;
   }
 
-  .emotion-0::-webkit-scrollbar-track {
+  .emotion-1::-webkit-scrollbar-track {
     background-color: transparent;
   }
 
-  .emotion-0::-webkit-scrollbar-track {
+  .emotion-1::-webkit-scrollbar-track {
     background: rgba(0, 0, 0, 0.04);
     border-radius: 8px;
   }
 
-  .emotion-0::-webkit-scrollbar-thumb {
+  .emotion-1::-webkit-scrollbar-thumb {
     -webkit-background-clip: padding-box;
     background-clip: padding-box;
     background-color: rgba(0, 0, 0, 0.2);
@@ -30,13 +28,18 @@ exports[`props should render correctly 1`] = `
     border-radius: 7px;
   }
 
-  .emotion-0:hover::-webkit-scrollbar-thumb {
+  .emotion-1:hover::-webkit-scrollbar-thumb {
     background-color: rgba(0, 0, 0, 0.5);
   }
 }
 
+.emotion-2 {
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
 <div
-  class="components-scrollable emotion-0 emotion-1"
+  class="emotion-0 emotion-1 emotion-2 components-scrollable"
   data-testid="scrollable"
   data-wp-c16t="true"
   data-wp-component="Scrollable"
@@ -50,12 +53,14 @@ Snapshot Diff:
 - Received styles
 + Base styles
 
-  Array [
+@@ -4,9 +4,6 @@
+    },
     Object {
-      "height": "100%",
       "overflow-x": "hidden",
       "overflow-y": "auto",
--     "scroll-behavior": "smooth",
     },
+-   Object {
+-     "scroll-behavior": "smooth",
+-   },
   ]
 `;

package/src/search-control/index.tsx

@@ -58,7 +58,9 @@ function SuffixItem( {
 
 function UnforwardedSearchControl(
 	{
-		__nextHasNoMarginBottom: _, // Prevent passing to internal component
+		// Prevent passing legacy props to internal component.
+		__nextHasNoMarginBottom: _,
+		__next40pxDefaultSize: _next40pxDefaultSize,
 		className,
 		onChange,
 		value,

package/src/select-control/README.md

@@ -92,7 +92,6 @@ const MySelectControl = () => {
 				{ label: 'Small', value: '25%' },
 			] }
 			onChange={ ( newSize ) => setSize( newSize ) }
-			__next40pxDefaultSize
 		/>
 	);
 };
@@ -114,7 +113,6 @@ Render a user interface to select multiple users from a list.
 		{ value: 'b', label: 'User B' },
 		{ value: 'c', label: 'User c' },
 	] }
-	__next40pxDefaultSize
 />
 ```
 
@@ -129,7 +127,6 @@ const [ item, setItem ] = useState( '' );
     label={ __( 'My dinosaur' ) }
     value={ item } // e.g: value = 'a'
     onChange={ ( selection ) => { setItem( selection ) } }
-    __next40pxDefaultSize
 >
 	<optgroup label="Theropods">
 		<option value="Tyrannosaurus">Tyrannosaurus</option>
@@ -229,14 +226,6 @@ The style variant of the control.
 -   Required: No
 -   Default: `'default'`
 
-### __next40pxDefaultSize
-
-Start opting into the larger default height that will become the default size in a future version.
-
--   Type: `Boolean`
--   Required: No
--   Default: `false`
-
 ## Related components
 
 -   To select one option from a set, and you want to show them all the available options at once, use the `Radio` component.

package/src/select-control/index.tsx

@@ -17,8 +17,6 @@ import { Select, StyledInputBase } from './styles/select-control-styles';
 import type { WordPressComponentProps } from '../context';
 import type { SelectControlProps } from './types';
 import SelectControlChevronDown from './chevron-down';
-import { useDeprecated36pxDefaultSizeProp } from '../utils/use-deprecated-props';
-import { maybeWarnDeprecated36pxSize } from '../utils/deprecated-36px-size';
 
 function useUniqueId( idProp?: string ) {
 	const instanceId = useInstanceId( SelectControl );
@@ -48,6 +46,11 @@ function UnforwardedSelectControl< V extends string >(
 	ref: React.ForwardedRef< HTMLSelectElement >
 ) {
 	const {
+		// Prevent passing legacy props to internal components.
+		__nextHasNoMarginBottom: _,
+		__next40pxDefaultSize: _next40pxDefaultSize,
+		__next36pxDefaultSize: _next36pxDefaultSize,
+		__shouldNotWarnDeprecated36pxSize: _shouldNotWarnDeprecated36pxSize,
 		className,
 		disabled = false,
 		help,
@@ -64,11 +67,8 @@ function UnforwardedSelectControl< V extends string >(
 		prefix,
 		suffix,
 		variant = 'default',
-		__next40pxDefaultSize = false,
-		__nextHasNoMarginBottom: _, // Prevent passing to internal component
-		__shouldNotWarnDeprecated36pxSize,
 		...restProps
-	} = useDeprecated36pxDefaultSizeProp( props );
+	} = props;
 	const id = useUniqueId( idProp );
 	const helpId = help ? `${ id }__help` : undefined;
 
@@ -95,13 +95,6 @@ function UnforwardedSelectControl< V extends string >(
 
 	const classes = clsx( 'components-select-control', className );
 
-	maybeWarnDeprecated36pxSize( {
-		componentName: 'SelectControl',
-		__next40pxDefaultSize,
-		size,
-		__shouldNotWarnDeprecated36pxSize,
-	} );
-
 	return (
 		<BaseControl help={ help } id={ id } className={ classes }>
 			<StyledInputBase
@@ -120,11 +113,10 @@ function UnforwardedSelectControl< V extends string >(
 					variant === 'minimal' ? 'auto' : undefined
 				}
 				variant={ variant }
-				__next40pxDefaultSize={ __next40pxDefaultSize }
+				__next40pxDefaultSize
 			>
 				<Select
 					{ ...restProps }
-					__next40pxDefaultSize={ __next40pxDefaultSize }
 					aria-describedby={ helpId }
 					className="components-select-control__input"
 					disabled={ disabled }
@@ -156,7 +148,6 @@ function UnforwardedSelectControl< V extends string >(
  *
  *   return (
  *     <SelectControl
- *       __next40pxDefaultSize
  *       label="Size"
  *       value={ size }
  *       options={ [

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

@@ -48,7 +48,6 @@ const SelectControlWithState: StoryFn< typeof SelectControl > = ( props ) => {
 	if ( props.multiple ) {
 		return (
 			<SelectControl
-				__next40pxDefaultSize
 				{ ...props }
 				multiple
 				value={ selection }
@@ -62,7 +61,6 @@ const SelectControlWithState: StoryFn< typeof SelectControl > = ( props ) => {
 
 	return (
 		<SelectControl
-			__next40pxDefaultSize
 			{ ...props }
 			multiple={ false }
 			value={ selection?.[ 0 ] }
@@ -76,7 +74,6 @@ const SelectControlWithState: StoryFn< typeof SelectControl > = ( props ) => {
 
 export const Default = SelectControlWithState.bind( {} );
 Default.args = {
-	__next40pxDefaultSize: true,
 	label: 'Label',
 	options: [
 		{ value: '', label: 'Select an Option', disabled: true },
@@ -98,7 +95,6 @@ WithLabelAndHelpText.args = {
  */
 export const WithCustomChildren = SelectControlWithState.bind( {} );
 WithCustomChildren.args = {
-	__next40pxDefaultSize: true,
 	label: 'Label',
 	children: (
 		<>

package/src/select-control/styles/select-control-styles.ts

@@ -15,10 +15,7 @@ import { fontSizeStyles } from '../../input-control/styles/input-control-styles'
 import InputBase from '../../input-control/input-base';
 
 interface SelectProps
-	extends Pick<
-		SelectControlProps,
-		'__next40pxDefaultSize' | 'disabled' | 'multiple' | 'variant'
-	> {
+	extends Pick< SelectControlProps, 'disabled' | 'multiple' | 'variant' > {
 	// Using `selectSize` instead of `size` to avoid a type conflict with the
 	// `size` HTML attribute of the `select` element.
 	selectSize?: SelectControlProps[ 'size' ];
@@ -53,11 +50,7 @@ export const StyledInputBase = styled( InputBase )`
 	${ inputBaseVariantStyles }
 `;
 
-const sizeStyles = ( {
-	__next40pxDefaultSize,
-	multiple,
-	selectSize = 'default',
-}: SelectProps ) => {
+const sizeStyles = ( { multiple, selectSize = 'default' }: SelectProps ) => {
 	if ( multiple ) {
 		// When `multiple`, just use the native browser styles
 		// without setting explicit height.
@@ -91,10 +84,6 @@ const sizeStyles = ( {
 		},
 	};
 
-	if ( ! __next40pxDefaultSize ) {
-		sizes.default = sizes.compact;
-	}
-
 	const style = sizes[ selectSize ] || sizes.default;
 
 	return css( style );
@@ -102,11 +91,7 @@ const sizeStyles = ( {
 
 export const chevronIconSize = 18;
 
-const sizePaddings = ( {
-	__next40pxDefaultSize,
-	multiple,
-	selectSize = 'default',
-}: SelectProps ) => {
+const sizePaddings = ( { multiple, selectSize = 'default' }: SelectProps ) => {
 	const padding = {
 		default: CONFIG.controlPaddingX,
 		small: CONFIG.controlPaddingXSmall,
@@ -114,10 +99,6 @@ const sizePaddings = ( {
 		'__unstable-large': CONFIG.controlPaddingX,
 	};
 
-	if ( ! __next40pxDefaultSize ) {
-		padding.default = padding.compact;
-	}
-
 	const selectedPadding = padding[ selectSize ] || padding.default;
 
 	return rtl( {

package/src/select-control/test/select-control.tsx

@@ -7,13 +7,7 @@ import userEvent from '@testing-library/user-event';
 /**
  * Internal dependencies
  */
-import _SelectControl from '..';
-
-const SelectControl = (
-	props: React.ComponentProps< typeof _SelectControl >
-) => {
-	return <_SelectControl { ...props } __next40pxDefaultSize />;
-};
+import SelectControl from '..';
 
 describe( 'SelectControl', () => {
 	it( 'should not render when no options or children are provided', () => {
@@ -129,7 +123,7 @@ describe( 'SelectControl', () => {
 					onChange={ onChange }
 				/>;
 
-				<_SelectControl
+				<SelectControl
 					// @ts-expect-error "string" is not "narrow" or "value"
 					value="string"
 					options={ [
@@ -148,7 +142,7 @@ describe( 'SelectControl', () => {
 			} );
 
 			it( 'should accept an explicit type argument', () => {
-				<_SelectControl< 'narrow' | 'value' >
+				<SelectControl< 'narrow' | 'value' >
 					// @ts-expect-error "string" is not "narrow" or "value"
 					value="string"
 					options={ [
@@ -172,7 +166,7 @@ describe( 'SelectControl', () => {
 					value: ( 'foo' | 'bar' )[]
 				) => void = () => {};
 
-				<_SelectControl
+				<SelectControl
 					multiple
 					value={ [ 'narrow' ] }
 					options={ [
@@ -189,7 +183,7 @@ describe( 'SelectControl', () => {
 					onChange={ onChange }
 				/>;
 
-				<_SelectControl
+				<SelectControl
 					multiple
 					// @ts-expect-error "string" is not "narrow" or "value"
 					value={ [ 'string' ] }
@@ -211,7 +205,7 @@ describe( 'SelectControl', () => {
 			} );
 
 			it( 'should accept an explicit type argument', () => {
-				<_SelectControl< 'narrow' | 'value' >
+				<SelectControl< 'narrow' | 'value' >
 					multiple
 					// @ts-expect-error "string" is not "narrow" or "value"
 					value={ [ 'string' ] }

package/src/select-control/types.ts

@@ -12,7 +12,6 @@ import type { BaseControlProps } from '../base-control/types';
 type SelectControlBaseProps< V extends string > = Pick<
 	InputBaseProps,
 	| '__next36pxDefaultSize'
-	| '__next40pxDefaultSize'
 	| '__shouldNotWarnDeprecated36pxSize'
 	| 'disabled'
 	| 'hideLabelFromVision'
@@ -23,6 +22,13 @@ type SelectControlBaseProps< V extends string > = Pick<
 	| 'suffix'
 > &
 	Pick< BaseControlProps, '__nextHasNoMarginBottom' | 'help' > & {
+		/**
+		 * 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;
 		/**
 		 * An array of option property objects to be rendered,
 		 * each with a `label` and `value` property, as well as any other

package/src/slot-fill/index.tsx

@@ -30,6 +30,11 @@ import type {
 
 export { Fill };
 
+/**
+ * `Slot` marks a location where content rendered by matching `Fill` components
+ * elsewhere will appear. Use it to allow a component to define UI areas that
+ * can be extended from other parts of the application.
+ */
 export const Slot = forwardRef(
 	(
 		props: SlotComponentProps &

package/src/slot-fill/test/__snapshots__/slot.js.snap

@@ -42,16 +42,12 @@ exports[`Slot bubblesVirtually true should subsume another slot by the same name
   <div
     data-position="first"
   >
-    <div
-      class="css-1ragr82-PolymorphicDiv emotion-0"
-    />
+    <div />
   </div>
   <div
     data-position="second"
   >
-    <div
-      class="css-1ragr82-PolymorphicDiv emotion-0"
-    >
+    <div>
       Content
     </div>
   </div>
@@ -66,9 +62,7 @@ exports[`Slot bubblesVirtually true should subsume another slot by the same name
   <div
     data-position="second"
   >
-    <div
-      class="css-1ragr82-PolymorphicDiv emotion-0"
-    >
+    <div>
       Content
     </div>
   </div>
@@ -207,9 +201,7 @@ exports[`Slot should render in expected order when fills unmounted 1`] = `
 exports[`Slot should warn without a Provider 1`] = `
 <div>
   <div>
-    <div
-      class="css-1ragr82-PolymorphicDiv emotion-0"
-    />
+    <div />
   </div>
 </div>
 `;

package/src/spacer/hook.ts

@@ -40,7 +40,7 @@ export function useSpacer(
 
 	const cx = useCx();
 
-	const classes = cx(
+	const spacerStyles = css(
 		isDefined( margin ) &&
 			css`
 				margin: ${ space( margin ) };
@@ -100,9 +100,10 @@ export function useSpacer(
 		isDefined( paddingRight ) &&
 			rtl( {
 				paddingRight: space( paddingRight ),
-			} )(),
-		className
+			} )()
 	);
 
+	const classes = cx( spacerStyles, className );
+
 	return { ...otherProps, className: classes };
 }

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

@@ -38,7 +38,7 @@ exports[`props should render correctly 1`] = `
 }
 
 <div
-  class="components-spacer emotion-0 emotion-1"
+  class="emotion-0 components-spacer"
   data-testid="spacer"
   data-wp-c16t="true"
   data-wp-component="Spacer"

package/src/spacer/test/index.tsx

@@ -95,6 +95,20 @@ describe( 'props', () => {
 		).toMatchStyleDiffSnapshot( screen.getByTestId( 'spacer' ) );
 	} );
 
+	test( 'should preserve explicit margin props regardless of Emotion insertion order', () => {
+		render( <Spacer marginRight={ 5 } data-testid="primer" /> );
+		render(
+			<Spacer margin={ 10 } marginRight={ 5 } data-testid="target" />
+		);
+
+		const styles = window.getComputedStyle(
+			screen.getByTestId( 'target' )
+		);
+
+		expect( styles.marginRight ).toBe( 'calc(20px)' );
+		expect( styles.marginTop ).toBe( 'calc(40px)' );
+	} );
+
 	test( 'should render padding', () => {
 		render( <Spacer data-testid="spacer" /> );
 		render( <Spacer padding={ 5 } data-testid="customized-spacer" /> );
@@ -176,4 +190,18 @@ describe( 'props', () => {
 			screen.getByTestId( 'customized-spacer' )
 		).toMatchStyleDiffSnapshot( screen.getByTestId( 'spacer' ) );
 	} );
+
+	test( 'should preserve explicit padding props regardless of Emotion insertion order', () => {
+		render( <Spacer paddingRight={ 5 } data-testid="primer" /> );
+		render(
+			<Spacer padding={ 10 } paddingRight={ 5 } data-testid="target" />
+		);
+
+		const styles = window.getComputedStyle(
+			screen.getByTestId( 'target' )
+		);
+
+		expect( styles.paddingRight ).toBe( 'calc(20px)' );
+		expect( styles.paddingTop ).toBe( 'calc(40px)' );
+	} );
 } );