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

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

@@ -1,122 +1,43 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`props should render alignment 1`] = `
-.emotion-0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  gap: calc(4px * 2);
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  width: 100%;
-}
-
-.emotion-0>* {
-  min-width: 0;
-}
-
 <div>
   <div
-    class="components-flex components-h-stack emotion-0 emotion-1"
+    class="style-flex style-items-row style-expanded-row components-flex components-h-stack"
     data-wp-c16t="true"
     data-wp-component="HStack"
+    style="--wp-components-flex-align: center; --wp-components-flex-direction: row; --wp-components-flex-wrap: nowrap; --wp-components-flex-gap: calc(4px * 2); --wp-components-flex-justify: center;"
   >
-    <div
-      class="emotion-2 emotion-1"
-    />
-    <div
-      class="emotion-2 emotion-1"
-    />
+    <div />
+    <div />
   </div>
 </div>
 `;
 
 exports[`props should render correctly 1`] = `
-.emotion-0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  gap: calc(4px * 2);
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  justify-content: space-between;
-  width: 100%;
-}
-
-.emotion-0>* {
-  min-width: 0;
-}
-
 <div>
   <div
-    class="components-flex components-h-stack emotion-0 emotion-1"
+    class="style-flex style-items-row style-expanded-row components-flex components-h-stack"
     data-wp-c16t="true"
     data-wp-component="HStack"
+    style="--wp-components-flex-align: center; --wp-components-flex-direction: row; --wp-components-flex-wrap: nowrap; --wp-components-flex-gap: calc(4px * 2); --wp-components-flex-justify: space-between;"
   >
-    <div
-      class="emotion-2 emotion-1"
-    />
-    <div
-      class="emotion-2 emotion-1"
-    />
+    <div />
+    <div />
   </div>
 </div>
 `;
 
 exports[`props should render spacing 1`] = `
-.emotion-0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  gap: calc(4px * 5);
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  justify-content: space-between;
-  width: 100%;
-}
-
-.emotion-0>* {
-  min-width: 0;
-}
-
 <div>
   <div
-    class="components-flex components-h-stack emotion-0 emotion-1"
+    class="style-flex style-items-row style-expanded-row components-flex components-h-stack"
     data-wp-c16t="true"
     data-wp-component="HStack"
+    style="--wp-components-flex-align: center; --wp-components-flex-direction: row; --wp-components-flex-wrap: nowrap; --wp-components-flex-gap: calc(4px * 5); --wp-components-flex-justify: space-between;"
   >
-    <div
-      class="emotion-2 emotion-1"
-    />
-    <div
-      class="emotion-2 emotion-1"
-    />
+    <div />
+    <div />
   </div>
 </div>
 `;

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

@@ -13,7 +13,7 @@ exports[`props should render correctly 1`] = `
 }
 
 <h2
-  class="components-truncate components-text components-heading emotion-0 emotion-1"
+  class="components-truncate emotion-0 components-text components-heading"
   data-wp-c16t="true"
   data-wp-component="Heading"
 >

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

@@ -11,8 +11,8 @@ Snapshot Diff:
         role="listitem"
       >
         <div
--         class="components-item css-14dwj71-PolymorphicDiv-medium-item-spacedAround e19lxcc00"
-+         class="components-item css-avymxl-PolymorphicDiv-large-item-spacedAround e19lxcc00"
+-         class="css-17kujwd-medium css-1izz8ne-item css-166x88h-spacedAround components-item"
++         class="css-o0djae-large css-1izz8ne-item css-166x88h-spacedAround components-item"
           data-wp-c16t="true"
           data-wp-component="Item"
         >
@@ -24,8 +24,8 @@ Snapshot Diff:
         role="listitem"
       >
         <div
--         class="components-item css-14dwj71-PolymorphicDiv-medium-item-spacedAround e19lxcc00"
-+         class="components-item css-avymxl-PolymorphicDiv-large-item-spacedAround e19lxcc00"
+-         class="css-17kujwd-medium css-1izz8ne-item css-166x88h-spacedAround components-item"
++         class="css-o0djae-large css-1izz8ne-item css-166x88h-spacedAround components-item"
           data-wp-c16t="true"
           data-wp-component="Item"
         >
@@ -44,8 +44,8 @@ Snapshot Diff:
       role="listitem"
     >
       <div
--       class="components-item css-5pzc6i-PolymorphicDiv-medium-item e19lxcc00"
-+       class="components-item css-y16wpf-PolymorphicDiv-large-item e19lxcc00"
+-       class="css-17kujwd-medium css-1izz8ne-item components-item"
++       class="css-o0djae-large css-1izz8ne-item components-item"
         data-wp-c16t="true"
         data-wp-component="Item"
       >
@@ -68,34 +68,40 @@ exports[`ItemGroup ItemGroup component should render correctly 1`] = `
   border-bottom-right-radius: 2px;
 }
 
-.emotion-2 {
+.emotion-1 {
   width: 100%;
   display: block;
 }
 
-.emotion-3 {
+.emotion-2 {
   padding: calc((36px - calc(13px * 1.4) - 2px) / 2) 12px;
+}
+
+.emotion-3 {
   box-sizing: border-box;
   width: 100%;
   display: block;
   margin: 0;
   color: inherit;
+}
+
+.emotion-4 {
   border-radius: 2px;
 }
 
 <div>
   <div
-    class="components-item-group emotion-0 emotion-1"
+    class="emotion-0 components-item-group"
     data-wp-c16t="true"
     data-wp-component="ItemGroup"
     role="list"
   >
     <div
-      class="emotion-2"
+      class="emotion-1"
       role="listitem"
     >
       <div
-        class="components-item emotion-3 emotion-1"
+        class="emotion-2 emotion-3 emotion-4 components-item"
         data-wp-c16t="true"
         data-wp-component="Item"
       >
@@ -114,8 +120,8 @@ Snapshot Diff:
 @@ -1,18 +1,18 @@
   <div>
     <div
--     class="components-item-group css-7sdlfv-PolymorphicDiv-rounded e19lxcc00"
-+     class="components-item-group css-12ds22-PolymorphicDiv-separated-rounded e19lxcc00"
+-     class="css-1e6snp6-rounded components-item-group"
++     class="css-qr0sb5-separated css-1e6snp6-rounded components-item-group"
       data-wp-c16t="true"
       data-wp-component="ItemGroup"
       role="list"
@@ -125,8 +131,8 @@ Snapshot Diff:
         role="listitem"
       >
         <div
--         class="components-item css-14dwj71-PolymorphicDiv-medium-item-spacedAround e19lxcc00"
-+         class="components-item css-5pzc6i-PolymorphicDiv-medium-item e19lxcc00"
+-         class="css-17kujwd-medium css-1izz8ne-item css-166x88h-spacedAround components-item"
++         class="css-17kujwd-medium css-1izz8ne-item components-item"
           data-wp-c16t="true"
           data-wp-component="Item"
         >
@@ -142,8 +148,8 @@ Snapshot Diff:
 @@ -1,18 +1,18 @@
   <div>
     <div
--     class="components-item-group css-7sdlfv-PolymorphicDiv-rounded e19lxcc00"
-+     class="components-item-group css-z3k5b4-PolymorphicDiv-bordered-rounded e19lxcc00"
+-     class="css-1e6snp6-rounded components-item-group"
++     class="css-9rmwob-bordered css-1e6snp6-rounded components-item-group"
       data-wp-c16t="true"
       data-wp-component="ItemGroup"
       role="list"
@@ -153,8 +159,8 @@ Snapshot Diff:
         role="listitem"
       >
         <div
--         class="components-item css-14dwj71-PolymorphicDiv-medium-item-spacedAround e19lxcc00"
-+         class="components-item css-5pzc6i-PolymorphicDiv-medium-item e19lxcc00"
+-         class="css-17kujwd-medium css-1izz8ne-item css-166x88h-spacedAround components-item"
++         class="css-17kujwd-medium css-1izz8ne-item components-item"
           data-wp-c16t="true"
           data-wp-component="Item"
         >
@@ -170,8 +176,8 @@ Snapshot Diff:
 @@ -1,8 +1,8 @@
   <div>
     <div
--     class="components-item-group css-7sdlfv-PolymorphicDiv-rounded e19lxcc00"
-+     class="components-item-group css-1ragr82-PolymorphicDiv e19lxcc00"
+-     class="css-1e6snp6-rounded components-item-group"
++     class="components-item-group"
       data-wp-c16t="true"
       data-wp-component="ItemGroup"
       role="list"

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/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/index.tsx

@@ -276,6 +276,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/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,11 @@ function UnforwardedRangeControl(
 						onBlur={ handleOnInputNumberBlur }
 						onChange={ handleOnChange }
 						shiftStep={ shiftStep }
-						size={
-							__next40pxDefaultSize
-								? '__unstable-large'
-								: 'default'
-						}
-						__unstableInputWidth={
-							__next40pxDefaultSize ? space( 20 ) : space( 16 )
-						}
+						__unstableInputWidth={ space( 20 ) }
+						__next40pxDefaultSize
 						step={ step }
 						// @ts-expect-error TODO: Investigate if the `null` value is necessary
 						value={ inputSliderValue }
-						__shouldNotWarnDeprecated36pxSize
 					/>
 				) }
 				{ allowReset && (
@@ -391,7 +373,6 @@ function UnforwardedRangeControl(
  *   const [ value, setValue ] = useState();
  *   return (
  *     <RangeControl
- *       __next40pxDefaultSize
  *       help="Please select how transparent you would like this."
  *       initialPosition={ 50 }
  *       label="Opacity"