@wordpress/components 36.0.1 → 37.0.0

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

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

@@ -11,9 +11,6 @@ import type { BaseControlProps } from '../base-control/types';
 
 type SelectControlBaseProps< V extends string > = Pick<
 	InputBaseProps,
-	| '__next36pxDefaultSize'
-	| '__next40pxDefaultSize'
-	| '__shouldNotWarnDeprecated36pxSize'
 	| 'disabled'
 	| 'hideLabelFromVision'
 	| 'label'
@@ -23,6 +20,28 @@ type SelectControlBaseProps< V extends string > = Pick<
 	| 'suffix'
 > &
 	Pick< BaseControlProps, '__nextHasNoMarginBottom' | 'help' > & {
+		/**
+		 * 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.
+		 *
+		 * @deprecated Default behavior since WordPress 7.1. Prop can be safely removed.
+		 * @ignore
+		 */
+		__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;
 		/**
 		 * 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

@@ -1,16 +1,11 @@
-/**
- * External dependencies
- */
-import { css } from '@emotion/react';
-
-/**
- * Internal dependencies
- */
+import clsx from 'clsx';
+import type { CSSProperties } from 'react';
+
 import type { WordPressComponentProps } from '../context';
 import { useContextSystem } from '../context';
 import { space } from '../utils/space';
-import { rtl, useCx } from '../utils';
 import type { SpacerProps } from './types';
+import styles from './style.module.scss';
 
 function isDefined< T >( o: T ): o is Exclude< T, null | undefined > {
 	return typeof o !== 'undefined' && o !== null;
@@ -35,74 +30,96 @@ export function useSpacer(
 		paddingTop,
 		paddingX,
 		paddingY,
+		style,
 		...otherProps
 	} = useContextSystem( props, 'Spacer' );
 
-	const cx = useCx();
-
-	const classes = cx(
-		isDefined( margin ) &&
-			css`
-				margin: ${ space( margin ) };
-			`,
-		isDefined( marginY ) &&
-			css`
-				margin-bottom: ${ space( marginY ) };
-				margin-top: ${ space( marginY ) };
-			`,
-		isDefined( marginX ) &&
-			css`
-				margin-left: ${ space( marginX ) };
-				margin-right: ${ space( marginX ) };
-			`,
-		isDefined( marginTop ) &&
-			css`
-				margin-top: ${ space( marginTop ) };
-			`,
-		isDefined( marginBottom ) &&
-			css`
-				margin-bottom: ${ space( marginBottom ) };
-			`,
-		isDefined( marginLeft ) &&
-			rtl( {
-				marginLeft: space( marginLeft ),
-			} )(),
-		isDefined( marginRight ) &&
-			rtl( {
-				marginRight: space( marginRight ),
-			} )(),
-		isDefined( padding ) &&
-			css`
-				padding: ${ space( padding ) };
-			`,
-		isDefined( paddingY ) &&
-			css`
-				padding-bottom: ${ space( paddingY ) };
-				padding-top: ${ space( paddingY ) };
-			`,
-		isDefined( paddingX ) &&
-			css`
-				padding-left: ${ space( paddingX ) };
-				padding-right: ${ space( paddingX ) };
-			`,
-		isDefined( paddingTop ) &&
-			css`
-				padding-top: ${ space( paddingTop ) };
-			`,
-		isDefined( paddingBottom ) &&
-			css`
-				padding-bottom: ${ space( paddingBottom ) };
-			`,
-		isDefined( paddingLeft ) &&
-			rtl( {
-				paddingLeft: space( paddingLeft ),
-			} )(),
-		isDefined( paddingRight ) &&
-			rtl( {
-				paddingRight: space( paddingRight ),
-			} )(),
-		className
-	);
-
-	return { ...otherProps, className: classes };
+	const spacingStyle: CSSProperties = {};
+
+	if ( isDefined( margin ) ) {
+		spacingStyle[ '--wp-components-spacer-margin' ] = space( margin );
+	}
+
+	if ( isDefined( marginY ) ) {
+		spacingStyle[ '--wp-components-spacer-margin-block-start' ] =
+			space( marginY );
+		spacingStyle[ '--wp-components-spacer-margin-block-end' ] =
+			space( marginY );
+	}
+
+	if ( isDefined( marginX ) ) {
+		spacingStyle[ '--wp-components-spacer-margin-inline-start' ] =
+			space( marginX );
+		spacingStyle[ '--wp-components-spacer-margin-inline-end' ] =
+			space( marginX );
+	}
+
+	if ( isDefined( marginTop ) ) {
+		spacingStyle[ '--wp-components-spacer-margin-block-start' ] =
+			space( marginTop );
+	}
+
+	if ( isDefined( marginBottom ) ) {
+		spacingStyle[ '--wp-components-spacer-margin-block-end' ] =
+			space( marginBottom );
+	}
+
+	if ( isDefined( marginLeft ) ) {
+		spacingStyle[ '--wp-components-spacer-margin-inline-start' ] =
+			space( marginLeft );
+	}
+
+	if ( isDefined( marginRight ) ) {
+		spacingStyle[ '--wp-components-spacer-margin-inline-end' ] =
+			space( marginRight );
+	}
+
+	if ( isDefined( padding ) ) {
+		spacingStyle[ '--wp-components-spacer-padding' ] = space( padding );
+	}
+
+	if ( isDefined( paddingY ) ) {
+		spacingStyle[ '--wp-components-spacer-padding-block-start' ] =
+			space( paddingY );
+		spacingStyle[ '--wp-components-spacer-padding-block-end' ] =
+			space( paddingY );
+	}
+
+	if ( isDefined( paddingX ) ) {
+		spacingStyle[ '--wp-components-spacer-padding-inline-start' ] =
+			space( paddingX );
+		spacingStyle[ '--wp-components-spacer-padding-inline-end' ] =
+			space( paddingX );
+	}
+
+	if ( isDefined( paddingTop ) ) {
+		spacingStyle[ '--wp-components-spacer-padding-block-start' ] =
+			space( paddingTop );
+	}
+
+	if ( isDefined( paddingBottom ) ) {
+		spacingStyle[ '--wp-components-spacer-padding-block-end' ] =
+			space( paddingBottom );
+	}
+
+	if ( isDefined( paddingLeft ) ) {
+		spacingStyle[ '--wp-components-spacer-padding-inline-start' ] =
+			space( paddingLeft );
+	}
+
+	if ( isDefined( paddingRight ) ) {
+		spacingStyle[ '--wp-components-spacer-padding-inline-end' ] =
+			space( paddingRight );
+	}
+
+	const spacerStyle: CSSProperties = {
+		...spacingStyle,
+		...style,
+	};
+
+	return {
+		...otherProps,
+		className: clsx( styles.spacer, className ),
+		style: spacerStyle,
+	};
 }

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

@@ -1,11 +1,5 @@
-/**
- * External dependencies
- */
 import type { Meta, StoryFn } from '@storybook/react-vite';
 
-/**
- * Internal dependencies
- */
 import { Spacer } from '..';
 
 const controls = [
@@ -74,3 +68,11 @@ export const Default: StoryFn< typeof Spacer > = Template.bind( {} );
 Default.args = {
 	children: 'This is the spacer',
 };
+
+export const Nested: StoryFn< typeof Spacer > = () => (
+	<Spacer padding={ 4 } style={ { backgroundColor: '#ddd' } }>
+		<Spacer style={ { backgroundColor: '#fff' } }>
+			<BlackBox />
+		</Spacer>
+	</Spacer>
+);

package/src/spacer/style.module.scss

@@ -0,0 +1,25 @@
+.spacer {
+	// Custom properties inherit by default. Reset them per Spacer so nested
+	// instances only use their own spacing props.
+	--wp-components-spacer-margin: initial;
+	--wp-components-spacer-margin-block-start: initial;
+	--wp-components-spacer-margin-block-end: initial;
+	--wp-components-spacer-margin-inline-start: initial;
+	--wp-components-spacer-margin-inline-end: initial;
+	--wp-components-spacer-padding: initial;
+	--wp-components-spacer-padding-block-start: initial;
+	--wp-components-spacer-padding-block-end: initial;
+	--wp-components-spacer-padding-inline-start: initial;
+	--wp-components-spacer-padding-inline-end: initial;
+
+	margin: var(--wp-components-spacer-margin);
+	margin-block-start: var(--wp-components-spacer-margin-block-start, var(--wp-components-spacer-margin));
+	margin-block-end: var(--wp-components-spacer-margin-block-end, var(--wp-components-spacer-margin));
+	margin-inline-start: var(--wp-components-spacer-margin-inline-start, var(--wp-components-spacer-margin));
+	margin-inline-end: var(--wp-components-spacer-margin-inline-end, var(--wp-components-spacer-margin));
+	padding: var(--wp-components-spacer-padding);
+	padding-block-start: var(--wp-components-spacer-padding-block-start, var(--wp-components-spacer-padding));
+	padding-block-end: var(--wp-components-spacer-padding-block-end, var(--wp-components-spacer-padding));
+	padding-inline-start: var(--wp-components-spacer-padding-inline-start, var(--wp-components-spacer-padding));
+	padding-inline-end: var(--wp-components-spacer-padding-inline-end, var(--wp-components-spacer-padding));
+}