@wordpress/components 19.15.0 → 19.16.0

package/src/elevation/test/__snapshots__/{index.js.snap → index.tsx.snap}

@@ -10,7 +10,7 @@ exports[`props should render active 1`] = `
   will-change: box-shadow;
   border-radius: inherit;
   bottom: 0;
-  box-shadow: 0 7px 14px 0 rgba(0 ,0, 0, 0.35);
+  box-shadow: 0 7px 14px 0 rgba(0, 0, 0, 0.35);
   opacity: 1;
   left: 0;
   right: 0;
@@ -26,16 +26,17 @@ exports[`props should render active 1`] = `
 }
 
 *:hover>.emotion-0 {
-  box-shadow: 0 14px 28px 0 rgba(0 ,0, 0, 0.7);
+  box-shadow: 0 14px 28px 0 rgba(0, 0, 0, 0.7);
 }
 
 *:active>.emotion-0 {
-  box-shadow: 0 5px 10px 0 rgba(0 ,0, 0, 0.25);
+  box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.25);
 }
 
 <div
   aria-hidden="true"
   class="components-elevation emotion-0 emotion-1"
+  data-testid="elevation"
   data-wp-c16t="true"
   data-wp-component="Elevation"
 />
@@ -51,7 +52,7 @@ exports[`props should render correctly 1`] = `
   will-change: box-shadow;
   border-radius: inherit;
   bottom: 0;
-  box-shadow: 0 0px 0px 0 rgba(0 ,0, 0, 0);
+  box-shadow: 0 0px 0px 0 rgba(0, 0, 0, 0);
   opacity: 1;
   left: 0;
   right: 0;
@@ -69,6 +70,7 @@ exports[`props should render correctly 1`] = `
 <div
   aria-hidden="true"
   class="components-elevation emotion-0 emotion-1"
+  data-testid="elevation"
   data-wp-c16t="true"
   data-wp-component="Elevation"
 />
@@ -84,7 +86,7 @@ exports[`props should render hover 1`] = `
   will-change: box-shadow;
   border-radius: inherit;
   bottom: 0;
-  box-shadow: 0 7px 14px 0 rgba(0 ,0, 0, 0.35);
+  box-shadow: 0 7px 14px 0 rgba(0, 0, 0, 0.35);
   opacity: 1;
   left: 0;
   right: 0;
@@ -100,12 +102,13 @@ exports[`props should render hover 1`] = `
 }
 
 *:hover>.emotion-0 {
-  box-shadow: 0 14px 28px 0 rgba(0 ,0, 0, 0.7);
+  box-shadow: 0 14px 28px 0 rgba(0, 0, 0, 0.7);
 }
 
 <div
   aria-hidden="true"
   class="components-elevation emotion-0 emotion-1"
+  data-testid="elevation"
   data-wp-c16t="true"
   data-wp-component="Elevation"
 />
@@ -121,7 +124,7 @@ exports[`props should render isInteractive 1`] = `
   will-change: box-shadow;
   border-radius: inherit;
   bottom: 0;
-  box-shadow: 0 0px 0px 0 rgba(0 ,0, 0, 0);
+  box-shadow: 0 0px 0px 0 rgba(0, 0, 0, 0);
   opacity: 1;
   left: 0;
   right: 0;
@@ -137,16 +140,17 @@ exports[`props should render isInteractive 1`] = `
 }
 
 *:hover>.emotion-0 {
-  box-shadow: 0 0px 0px 0 rgba(0 ,0, 0, 0);
+  box-shadow: 0 0px 0px 0 rgba(0, 0, 0, 0);
 }
 
 *:active>.emotion-0 {
-  box-shadow: 0 0px 0px 0 rgba(0 ,0, 0, 0);
+  box-shadow: 0 0px 0px 0 rgba(0, 0, 0, 0);
 }
 
 <div
   aria-hidden="true"
   class="components-elevation emotion-0 emotion-1"
+  data-testid="elevation"
   data-wp-c16t="true"
   data-wp-component="Elevation"
 />
@@ -162,7 +166,7 @@ exports[`props should render offset 1`] = `
   will-change: box-shadow;
   border-radius: inherit;
   bottom: -2px;
-  box-shadow: 0 7px 14px 0 rgba(0 ,0, 0, 0.35);
+  box-shadow: 0 7px 14px 0 rgba(0, 0, 0, 0.35);
   opacity: 1;
   left: -2px;
   right: -2px;
@@ -178,16 +182,17 @@ exports[`props should render offset 1`] = `
 }
 
 *:hover>.emotion-0 {
-  box-shadow: 0 14px 28px 0 rgba(0 ,0, 0, 0.7);
+  box-shadow: 0 14px 28px 0 rgba(0, 0, 0, 0.7);
 }
 
 *:active>.emotion-0 {
-  box-shadow: 0 5px 10px 0 rgba(0 ,0, 0, 0.25);
+  box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.25);
 }
 
 <div
   aria-hidden="true"
   class="components-elevation emotion-0 emotion-1"
+  data-testid="elevation"
   data-wp-c16t="true"
   data-wp-component="Elevation"
 />
@@ -203,7 +208,7 @@ exports[`props should render value 1`] = `
   will-change: box-shadow;
   border-radius: inherit;
   bottom: 0;
-  box-shadow: 0 7px 14px 0 rgba(0 ,0, 0, 0.35);
+  box-shadow: 0 7px 14px 0 rgba(0, 0, 0, 0.35);
   opacity: 1;
   left: 0;
   right: 0;
@@ -221,6 +226,7 @@ exports[`props should render value 1`] = `
 <div
   aria-hidden="true"
   class="components-elevation emotion-0 emotion-1"
+  data-testid="elevation"
   data-wp-c16t="true"
   data-wp-component="Elevation"
 />

package/src/elevation/test/index.tsx

@@ -0,0 +1,64 @@
+/**
+ * External dependencies
+ */
+import { render, screen } from '@testing-library/react';
+
+/**
+ * Internal dependencies
+ */
+import { Elevation } from '..';
+
+describe( 'props', () => {
+	test( 'should render correctly', () => {
+		render( <Elevation data-testid="elevation" /> );
+
+		expect( screen.getByTestId( 'elevation' ) ).toMatchSnapshot();
+	} );
+
+	test( 'should render isInteractive', () => {
+		render( <Elevation isInteractive data-testid="elevation" /> );
+
+		expect( screen.getByTestId( 'elevation' ) ).toMatchSnapshot();
+	} );
+
+	test( 'should render value', () => {
+		render( <Elevation value={ 7 } data-testid="elevation" /> );
+
+		expect( screen.getByTestId( 'elevation' ) ).toMatchSnapshot();
+	} );
+
+	test( 'should render hover', () => {
+		render(
+			<Elevation hover={ 14 } value={ 7 } data-testid="elevation" />
+		);
+
+		expect( screen.getByTestId( 'elevation' ) ).toMatchSnapshot();
+	} );
+
+	test( 'should render active', () => {
+		render(
+			<Elevation
+				active={ 5 }
+				hover={ 14 }
+				value={ 7 }
+				data-testid="elevation"
+			/>
+		);
+
+		expect( screen.getByTestId( 'elevation' ) ).toMatchSnapshot();
+	} );
+
+	test( 'should render offset', () => {
+		render(
+			<Elevation
+				active={ 5 }
+				hover={ 14 }
+				offset={ -2 }
+				value={ 7 }
+				data-testid="elevation"
+			/>
+		);
+
+		expect( screen.getByTestId( 'elevation' ) ).toMatchSnapshot();
+	} );
+} );

package/src/elevation/types.ts

@@ -3,9 +3,10 @@
  */
 import type { CSSProperties } from 'react';
 
-export type Props = {
+export type ElevationProps = {
 	/**
-	 * Size of the shadow value when active (see the `value` and `isInteractive` props).
+	 * Size of the shadow value when active (see the `value` and `isInteractive`
+	 * props).
 	 */
 	active?: number;
 	/**
@@ -15,15 +16,18 @@ export type Props = {
 	 */
 	borderRadius?: CSSProperties[ 'borderRadius' ];
 	/**
-	 * Size of the shadow value when focused (see the `value` and `isInteractive` props).
+	 * Size of the shadow value when focused (see the `value` and
+	 * `isInteractive` props).
 	 */
 	focus?: number;
 	/**
-	 * Size of the shadow value when hovered  (see the `value` and `isInteractive` props).
+	 * Size of the shadow value when hovered (see the `value` and
+	 * `isInteractive` props).
 	 */
 	hover?: number;
 	/**
-	 * Determines if hover, active, and focus shadow values should be automatically calculated and rendered.
+	 * Determines if `hover`, `active`, and `focus` shadow values should be
+	 * automatically calculated and rendered.
 	 *
 	 * @default false
 	 */
@@ -35,20 +39,9 @@ export type Props = {
 	 */
 	offset?: number;
 	/**
-	 * Size of the shadow, based on the Style system's elevation system. The `value` determines the strength of the shadow, which sense of depth.
-	 * In the example below, `isInteractive` is activated to give a better sense of depth.
-	 *
-	 * @example
-	 * ```jsx
-	 * import { __experimentalElevation as Elevation } from '@wordpress/components';
-	 * 	* function Example() {
-	 * 	return (
-	 * 		<div>
-	 * 			<Elevation isInteractive value={ 200 } />
-	 * 		</div>
-	 * 	);
-	 * }
-	 * ```
+	 * Size of the shadow, based on the Style system's elevation system. The
+	 * `value` determines the strength of the shadow, which creates the sense of
+	 * depth.
 	 *
 	 * @default 0
 	 */

package/src/flex/flex/README.md

@@ -7,11 +7,7 @@
 `Flex` is used with any of it's two sub-components, `FlexItem` and `FlexBlock`.
 
 ```jsx
-import {
-	Flex,
-	FlexBlock,
-	FlexItem,
-} from '@wordpress/components';
+import { Flex, FlexBlock, FlexItem } from '@wordpress/components';
 
 function Example() {
 	return (

package/src/flex/flex/component.js

@@ -33,27 +33,21 @@ function Flex( props, forwardedRef ) {
  *
  * @example
  * ```jsx
- * import {
- * 	__experimentalFlex as Flex,
- * 	__experimentalFlexBlock as FlexBlock,
- * 	__experimentalFlexItem as FlexItem,
- * 	__experimentalText as Text
- * } from `@wordpress/components`;
+ * import { Flex, FlexBlock, FlexItem } from '@wordpress/components';
  *
  * function Example() {
- * 	return (
- * 		<Flex>
- * 			<FlexItem>
- * 				<Text>Code</Text>
- * 			</FlexItem>
- * 			<FlexBlock>
- * 				<Text>Poetry</Text>
- * 			</FlexBlock>
- * 		</Flex>
- * 	);
+ *   return (
+ *     <Flex>
+ *       <FlexItem>
+ *         <p>Code</p>
+ *       </FlexItem>
+ *       <FlexBlock>
+ *         <p>Poetry</p>
+ *       </FlexBlock>
+ *     </Flex>
+ *   );
  * }
  * ```
- *
  */
 const ConnectedFlex = contextConnect( Flex, 'Flex' );
 

package/src/flex/flex-block/README.md

@@ -1,9 +1,5 @@
 # FlexBlock
 
-<div class="callout callout-alert">
-This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.
-</div>
-
 A layout component to contain items of a fixed width within `Flex`.
 
 ## Usage

package/src/flex/flex-block/component.js

@@ -20,9 +20,15 @@ function FlexBlock( props, forwardedRef ) {
  *
  * @example
  * ```jsx
- * <Flex>
- * 	<FlexBlock>...</FlexBlock>
- * </Flex>
+ * import { Flex, FlexBlock } from '@wordpress/components';
+ *
+ * function Example() {
+ *   return (
+ *     <Flex>
+ *       <FlexBlock>...</FlexBlock>
+ *     </Flex>
+ *   );
+ * }
  * ```
  */
 const ConnectedFlexBlock = contextConnect( FlexBlock, 'FlexBlock' );

package/src/flex/flex-item/README.md

@@ -1,9 +1,5 @@
 # FlexItem
 
-<div class="callout callout-alert">
-This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.
-</div>
-
 A layout component to contain items of a fixed width within `Flex`.
 
 ## Usage

package/src/flex/flex-item/component.js

@@ -20,9 +20,15 @@ function FlexItem( props, forwardedRef ) {
  *
  * @example
  * ```jsx
- * <Flex>
- * 	<FlexItem>...</FlexItem>
- * </Flex>
+ * import { Flex, FlexItem } from '@wordpress/components';
+ *
+ * function Example() {
+ *   return (
+ *     <Flex>
+ *       <FlexItem>...</FlexItem>
+ *     </Flex>
+ *   );
+ * }
  * ```
  */
 const ConnectedFlexItem = contextConnect( FlexItem, 'FlexItem' );

package/src/flex/stories/index.js

@@ -6,7 +6,7 @@ import { View } from '../../view';
 
 export default {
 	component: Flex,
-	title: 'Components (Experimental)/Flex',
+	title: 'Components/Flex',
 };
 
 export const _default = () => {

package/src/flex/types.ts

@@ -35,7 +35,10 @@ export type FlexProps = {
 	 */
 	expanded?: boolean;
 	/**
-	 * Spacing in between each child can be adjusted by using `gap`. The value of `gap` works as a multiplier to the library's grid system (base of `4px`).
+	 * Spacing in between each child can be adjusted by using `gap`.
+	 *
+	 * Can either be a number (which will act as a multiplier to the library's grid system base of 4px),
+	 * or a literal CSS value string.
 	 *
 	 * @default 2
 	 */

package/src/form-token-field/test/index.js

@@ -162,7 +162,7 @@ describe( 'FormTokenField', () => {
 			);
 		} );
 
-		it( 'should show suggestions when when input is empty if expandOnFocus is set to true', () => {
+		it( 'should show suggestions when input is empty if expandOnFocus is set to true', () => {
 			setUp( { __experimentalExpandOnFocus: true } );
 			wrapper.setState( {
 				isExpanded: true,

package/src/index.js

@@ -66,6 +66,7 @@ export { default as Draggable } from './draggable';
 export { default as DropZone } from './drop-zone';
 export { default as DropZoneProvider } from './drop-zone/provider';
 export { default as Dropdown } from './dropdown';
+export { default as __experimentalDropdownContentWrapper } from './dropdown/dropdown-content-wrapper';
 export { default as DropdownMenu } from './dropdown-menu';
 export { DuotoneSwatch, DuotonePicker } from './duotone-picker';
 export { Elevation as __experimentalElevation } from './elevation';
@@ -91,6 +92,8 @@ export {
 	Item as __experimentalItem,
 } from './item-group';
 export { default as __experimentalInputControl } from './input-control';
+export { default as __experimentalInputControlPrefixWrapper } from './input-control/input-prefix-wrapper';
+export { default as __experimentalInputControlSuffixWrapper } from './input-control/input-suffix-wrapper';
 export { default as KeyboardShortcuts } from './keyboard-shortcuts';
 export { default as MenuGroup } from './menu-group';
 export { default as MenuItem } from './menu-item';

package/src/input-control/index.tsx

@@ -16,6 +16,7 @@ import { useState, forwardRef } from '@wordpress/element';
 import InputBase from './input-base';
 import InputField from './input-field';
 import type { InputControlProps } from './types';
+import { space } from '../ui/utils/space';
 import { useDraft } from './utils';
 
 const noop = () => {};
@@ -29,6 +30,7 @@ function useUniqueId( idProp?: string ) {
 
 export function UnforwardedInputControl(
 	{
+		__next36pxDefaultSize,
 		__unstableStateReducer: stateReducer = ( state ) => state,
 		__unstableInputWidth,
 		className,
@@ -62,6 +64,7 @@ export function UnforwardedInputControl(
 
 	return (
 		<InputBase
+			__next36pxDefaultSize={ __next36pxDefaultSize }
 			__unstableInputWidth={ __unstableInputWidth }
 			className={ classes }
 			disabled={ disabled }
@@ -78,6 +81,7 @@ export function UnforwardedInputControl(
 		>
 			<InputField
 				{ ...props }
+				__next36pxDefaultSize={ __next36pxDefaultSize }
 				className="components-input-control__input"
 				disabled={ disabled }
 				id={ id }
@@ -85,6 +89,8 @@ export function UnforwardedInputControl(
 				isPressEnterToChange={ isPressEnterToChange }
 				onKeyDown={ onKeyDown }
 				onValidate={ onValidate }
+				paddingInlineStart={ prefix ? space( 2 ) : undefined }
+				paddingInlineEnd={ suffix ? space( 2 ) : undefined }
 				ref={ ref }
 				setIsFocused={ setIsFocused }
 				size={ size }

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

@@ -7,7 +7,7 @@ import type { ForwardedRef } from 'react';
  * WordPress dependencies
  */
 import { useInstanceId } from '@wordpress/compose';
-import { forwardRef } from '@wordpress/element';
+import { forwardRef, useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -20,8 +20,10 @@ import {
 	Prefix,
 	Suffix,
 	LabelWrapper,
+	getSizeConfig,
 } from './styles/input-control-styles';
 import type { InputBaseProps, LabelPosition } from './types';
+import { ContextSystemProvider } from '../ui/context';
 
 function useUniqueId( idProp?: string ) {
 	const instanceId = useInstanceId( InputBase );
@@ -52,6 +54,7 @@ function getUIFlexProps( labelPosition?: LabelPosition ) {
 
 export function InputBase(
 	{
+		__next36pxDefaultSize,
 		__unstableInputWidth,
 		children,
 		className,
@@ -71,6 +74,17 @@ export function InputBase(
 	const id = useUniqueId( idProp );
 	const hideLabel = hideLabelFromVision || ! label;
 
+	const { paddingLeft, paddingRight } = getSizeConfig( {
+		inputSize: size,
+		__next36pxDefaultSize,
+	} );
+	const prefixSuffixContextValue = useMemo( () => {
+		return {
+			InputControlPrefixWrapper: { paddingLeft },
+			InputControlSuffixWrapper: { paddingRight },
+		};
+	}, [ paddingLeft, paddingRight ] );
+
 	return (
 		// @ts-expect-error The `direction` prop from Flex (FlexDirection) conflicts with legacy SVGAttributes `direction` (string) that come from React intrinsic prop definitions.
 		<Root
@@ -99,17 +113,19 @@ export function InputBase(
 				hideLabel={ hideLabel }
 				labelPosition={ labelPosition }
 			>
-				{ prefix && (
-					<Prefix className="components-input-control__prefix">
-						{ prefix }
-					</Prefix>
-				) }
-				{ children }
-				{ suffix && (
-					<Suffix className="components-input-control__suffix">
-						{ suffix }
-					</Suffix>
-				) }
+				<ContextSystemProvider value={ prefixSuffixContextValue }>
+					{ prefix && (
+						<Prefix className="components-input-control__prefix">
+							{ prefix }
+						</Prefix>
+					) }
+					{ children }
+					{ suffix && (
+						<Suffix className="components-input-control__suffix">
+							{ suffix }
+						</Suffix>
+					) }
+				</ContextSystemProvider>
 				<Backdrop disabled={ disabled } isFocused={ isFocused } />
 			</Container>
 		</Root>

package/src/input-control/input-prefix-wrapper.tsx

@@ -0,0 +1,48 @@
+/**
+ * External dependencies
+ */
+import type { ForwardedRef } from 'react';
+
+/**
+ * Internal dependencies
+ */
+import { Spacer } from '../spacer';
+import {
+	WordPressComponentProps,
+	contextConnect,
+	useContextSystem,
+} from '../ui/context';
+import type { InputControlPrefixWrapperProps } from './types';
+
+function UnconnectedInputControlPrefixWrapper(
+	props: WordPressComponentProps< InputControlPrefixWrapperProps, 'div' >,
+	forwardedRef: ForwardedRef< any >
+) {
+	const derivedProps = useContextSystem( props, 'InputControlPrefixWrapper' );
+
+	return (
+		<Spacer marginBottom={ 0 } { ...derivedProps } ref={ forwardedRef } />
+	);
+}
+
+/**
+ * A convenience wrapper for the `prefix` when you want to apply
+ * standard padding in accordance with the size variant.
+ *
+ * ```jsx
+ * import {
+ *   __experimentalInputControl as InputControl,
+ *   __experimentalInputControlPrefixWrapper as InputControlPrefixWrapper,
+ * } from '@wordpress/components';
+ *
+ * <InputControl
+ *   prefix={<InputControlPrefixWrapper>@</InputControlPrefixWrapper>}
+ * />
+ * ```
+ */
+export const InputControlPrefixWrapper = contextConnect(
+	UnconnectedInputControlPrefixWrapper,
+	'InputControlPrefixWrapper'
+);
+
+export default InputControlPrefixWrapper;

package/src/input-control/input-suffix-wrapper.tsx

@@ -0,0 +1,48 @@
+/**
+ * External dependencies
+ */
+import type { ForwardedRef } from 'react';
+
+/**
+ * Internal dependencies
+ */
+import { Spacer } from '../spacer';
+import {
+	WordPressComponentProps,
+	contextConnect,
+	useContextSystem,
+} from '../ui/context';
+import type { InputControlSuffixWrapperProps } from './types';
+
+function UnconnectedInputControlSuffixWrapper(
+	props: WordPressComponentProps< InputControlSuffixWrapperProps, 'div' >,
+	forwardedRef: ForwardedRef< any >
+) {
+	const derivedProps = useContextSystem( props, 'InputControlSuffixWrapper' );
+
+	return (
+		<Spacer marginBottom={ 0 } { ...derivedProps } ref={ forwardedRef } />
+	);
+}
+
+/**
+ * A convenience wrapper for the `suffix` when you want to apply
+ * standard padding in accordance with the size variant.
+ *
+ * ```jsx
+ * import {
+ *   __experimentalInputControl as InputControl,
+ *   __experimentalInputControlSuffixWrapper as InputControlSuffixWrapper,
+ * } from '@wordpress/components';
+ *
+ * <InputControl
+ *   suffix={<InputControlSuffixWrapper>%</InputControlSuffixWrapper>}
+ * />
+ * ```
+ */
+export const InputControlSuffixWrapper = contextConnect(
+	UnconnectedInputControlSuffixWrapper,
+	'InputControlSuffixWrapper'
+);
+
+export default InputControlSuffixWrapper;