@wordpress/components 19.15.0 → 20.0.1-next.d6164808d3.0

package/src/ui/tooltip/styles.js

@@ -20,6 +20,7 @@ export const TooltipContent = css`
 	outline: none;
 	transform-origin: top center;
 	transition: opacity ${ CONFIG.transitionDurationFastest } ease;
+	font-size: ${ CONFIG.fontSize };
 
 	&[data-enter] {
 		opacity: 1;

package/src/ui/tooltip/test/__snapshots__/index.js.snap

@@ -9,6 +9,7 @@ exports[`props should render correctly 1`] = `
   transform-origin: top center;
   -webkit-transition: opacity 100ms ease;
   transition: opacity 100ms ease;
+  font-size: 13px;
 }
 
 .emotion-0[data-enter] {

package/src/ui/utils/space.ts

@@ -1,5 +1,11 @@
 /**
- * A real number or something parsable as a number
+ * The argument value for the `space()` utility function.
+ *
+ * When this is a number or a numeric string, it will be interpreted as a
+ * multiplier for the grid base value (4px). For example, `space( 2 )` will be 8px.
+ *
+ * Otherwise, it will be interpreted as a literal CSS length value. For example,
+ * `space( 'auto' )` will be 'auto', and `space( '2px' )` will be 2px.
  */
 export type SpaceInput = number | string;
 

package/src/unit-control/index.tsx

@@ -9,7 +9,6 @@ import type {
 	ChangeEvent,
 	PointerEvent,
 } from 'react';
-import { omit } from 'lodash';
 import classnames from 'classnames';
 
 /**
@@ -47,6 +46,7 @@ function UnforwardedUnitControl(
 	const {
 		__unstableStateReducer: stateReducerProp,
 		autoComplete = 'off',
+		children,
 		className,
 		disabled = false,
 		disableUnits = false,
@@ -261,7 +261,7 @@ function UnforwardedUnitControl(
 			<ValueInput
 				aria-label={ label }
 				type={ isPressEnterToChange ? 'text' : 'number' }
-				{ ...omit( props, [ 'children' ] ) }
+				{ ...props }
 				autoComplete={ autoComplete }
 				className={ classes }
 				disabled={ disabled }

package/src/unit-control/stories/index.tsx

@@ -24,9 +24,6 @@ const meta: ComponentMeta< typeof UnitControl > = {
 		__unstableStateReducer: {
 			control: { type: null },
 		},
-		size: {
-			control: { type: 'select' },
-		},
 		onChange: {
 			action: 'onChange',
 			control: { type: null },
@@ -54,16 +51,14 @@ const DefaultTemplate: ComponentStory< typeof UnitControl > = ( {
 	const [ value, setValue ] = useState< string | undefined >( '10px' );
 
 	return (
-		<div style={ { maxWidth: '100px' } }>
-			<UnitControl
-				{ ...args }
-				value={ value }
-				onChange={ ( v, extra ) => {
-					setValue( v );
-					onChange?.( v, extra );
-				} }
-			/>
-		</div>
+		<UnitControl
+			{ ...args }
+			value={ value }
+			onChange={ ( v, extra ) => {
+				setValue( v );
+				onChange?.( v, extra );
+			} }
+		/>
 	);
 };
 
@@ -125,16 +120,14 @@ export const WithCustomUnits: ComponentStory< typeof UnitControl > = ( {
 	const [ value, setValue ] = useState< string | undefined >( '80km' );
 
 	return (
-		<div style={ { maxWidth: '100px' } }>
-			<UnitControl
-				{ ...args }
-				value={ value }
-				onChange={ ( v, extra ) => {
-					setValue( v );
-					onChange?.( v, extra );
-				} }
-			/>
-		</div>
+		<UnitControl
+			{ ...args }
+			value={ value }
+			onChange={ ( v, extra ) => {
+				setValue( v );
+				onChange?.( v, extra );
+			} }
+		/>
 	);
 };
 WithCustomUnits.args = {

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

@@ -6,9 +6,11 @@ import styled from '@emotion/styled';
 /**
  * Internal dependencies
  */
-import { COLORS, rtl } from '../../utils';
+import { COLORS, CONFIG, rtl } from '../../utils';
 import NumberControl from '../../number-control';
+import { BackdropUI } from '../../input-control/styles/input-control-styles';
 import type { SelectSize } from '../types';
+import { space } from '../../ui/utils/space';
 
 // Using `selectSize` instead of `size` to avoid a type conflict with the
 // `size` HTML attribute of the `select` element.
@@ -18,21 +20,17 @@ type SelectProps = {
 
 type InputProps = {
 	disableUnits?: boolean;
-	size: SelectSize;
 };
 
 export const Root = styled.div`
 	box-sizing: border-box;
 	position: relative;
-`;
-
-const paddingStyles = ( { disableUnits }: InputProps ) => {
-	if ( disableUnits ) return '';
 
-	return css`
-		${ rtl( { paddingRight: 8 } )() };
-	`;
-};
+	/* Target the InputControl's backdrop and make focus styles smoother. */
+	&&& ${ BackdropUI } {
+		transition: box-shadow 0.1s linear;
+	}
+`;
 
 const arrowStyles = ( { disableUnits }: InputProps ) => {
 	if ( disableUnits ) return '';
@@ -58,61 +56,117 @@ export const ValueInput = styled( NumberControl )`
 			width: 100%;
 
 			${ arrowStyles };
-			${ paddingStyles };
 		}
 	}
 `;
 
-const baseUnitLabelStyles = css`
-	appearance: none;
-	background: transparent;
-	border-radius: 2px;
-	border: none;
-	box-sizing: border-box;
-	color: ${ COLORS.darkGray[ 500 ] };
-	display: block;
-	font-size: 8px;
-	letter-spacing: -0.5px;
-	outline: none;
-	padding: 2px 1px;
-	text-align-last: center;
-	text-transform: uppercase;
-	width: 20px;
-
-	${ rtl( { borderTopLeftRadius: 0, borderBottomLeftRadius: 0 } )() }
-`;
+const baseUnitLabelStyles = ( { selectSize }: SelectProps ) => {
+	const sizes = {
+		default: css`
+			box-sizing: border-box;
+			padding: 2px 1px;
+			width: 20px;
+			color: ${ COLORS.darkGray[ 500 ] };
+			font-size: 8px;
+			line-height: 1;
+			letter-spacing: -0.5px;
+			text-transform: uppercase;
+			text-align-last: center;
+		`,
+		large: css`
+			box-sizing: border-box;
+			min-width: 24px;
+			max-width: 48px;
+			height: 24px;
+			margin-inline-end: ${ space( 2 ) };
+			padding: ${ space( 1 ) };
+			color: ${ COLORS.ui.theme };
+			font-size: 13px;
+			line-height: 1;
+			text-align-last: center;
+			white-space: nowrap;
+			overflow: hidden;
+			text-overflow: ellipsis;
+		`,
+	};
+
+	return selectSize === '__unstable-large' ? sizes.large : sizes.default;
+};
 
 export const UnitLabel = styled.div< SelectProps >`
 	&&& {
 		pointer-events: none;
 
 		${ baseUnitLabelStyles };
+
+		color: ${ COLORS.gray[ 900 ] };
 	}
 `;
 
-export const UnitSelect = styled.select< SelectProps >`
-	&&& {
-		${ baseUnitLabelStyles };
-		cursor: pointer;
-		border: 1px solid transparent;
-		height: 100%;
+const unitSelectSizes = ( { selectSize = 'default' }: SelectProps ) => {
+	const sizes = {
+		default: css`
+			height: 100%;
+			border: 1px solid transparent;
+			transition: box-shadow 0.1s linear, border 0.1s linear;
 
-		&:hover {
-			background-color: ${ COLORS.lightGray[ 300 ] };
-		}
+			${ rtl( { borderTopLeftRadius: 0, borderBottomLeftRadius: 0 } )() }
 
-		&:focus {
-			border-color: ${ COLORS.ui.borderFocus };
-			outline: 2px solid transparent;
-			outline-offset: 0;
-		}
+			&:not(:disabled):hover {
+				background-color: ${ COLORS.lightGray[ 300 ] };
+			}
 
-		&:disabled {
-			cursor: initial;
+			&:focus {
+				border: 1px solid ${ COLORS.ui.borderFocus };
+				box-shadow: inset 0 0 0
+					${ CONFIG.borderWidth + ' ' + COLORS.ui.borderFocus };
+				outline-offset: 0;
+				outline: 2px solid transparent;
+				z-index: 1;
+			}
+		`,
+		large: css`
+			display: flex;
+			justify-content: center;
+			align-items: center;
 
 			&:hover {
-				background-color: transparent;
+				color: ${ COLORS.ui.borderFocus };
+				box-shadow: inset 0 0 0
+					${ CONFIG.borderWidth + ' ' + COLORS.ui.borderFocus };
+				outline: ${ CONFIG.borderWidth } solid transparent; // For High Contrast Mode
+			}
+
+			&:focus {
+				box-shadow: 0 0 0
+					${ CONFIG.borderWidthFocus + ' ' + COLORS.ui.borderFocus };
+				outline: ${ CONFIG.borderWidthFocus } solid transparent; // For High Contrast Mode
 			}
+		`,
+	};
+
+	return selectSize === '__unstable-large' ? sizes.large : sizes.default;
+};
+
+export const UnitSelect = styled.select< SelectProps >`
+	// The && counteracts <select> styles in WP forms.css
+	&& {
+		appearance: none;
+		background: transparent;
+		border-radius: 2px;
+		border: none;
+		display: block;
+		outline: none;
+		/* Removing margin ensures focus styles neatly overlay the wrapper. */
+		margin: 0;
+		min-height: auto;
+		font-family: inherit;
+
+		&:not( :disabled ) {
+			cursor: pointer;
 		}
+
+		${ baseUnitLabelStyles };
+		${ unitSelectSizes };
 	}
 `;

package/src/unit-control/test/__snapshots__/index.tsx.snap

@@ -7,11 +7,11 @@ Snapshot Diff:
 
 @@ -1,10 +1,10 @@
   <div
-    class="components-unit-control-wrapper css-aa2xc3-Root e1bagdl33"
+    class="components-unit-control-wrapper css-zi0c81-Root e1bagdl33"
   >
     <div
--     class="components-flex components-input-control components-number-control components-unit-control e1bagdl32 ep48uk90 em5sgkm7 css-18wzek1-View-Flex-sx-Base-sx-Items-ItemsColumn-Root-rootLabelPositionStyles-Input-ValueInput-arrowStyles-paddingStyles em57xhy0"
-+     class="components-flex components-input-control components-number-control components-unit-control hello e1bagdl32 ep48uk90 em5sgkm7 css-18wzek1-View-Flex-sx-Base-sx-Items-ItemsColumn-Root-rootLabelPositionStyles-Input-ValueInput-arrowStyles-paddingStyles em57xhy0"
+-     class="components-flex components-input-control components-number-control components-unit-control e1bagdl32 ep48uk90 em5sgkm7 css-1njfmeu-View-Flex-sx-Base-sx-Items-ItemsColumn-Root-rootLabelPositionStyles-Input-ValueInput-arrowStyles em57xhy0"
++     class="components-flex components-input-control components-number-control components-unit-control hello e1bagdl32 ep48uk90 em5sgkm7 css-1njfmeu-View-Flex-sx-Base-sx-Items-ItemsColumn-Root-rootLabelPositionStyles-Input-ValueInput-arrowStyles em57xhy0"
       data-wp-c16t="true"
       data-wp-component="Flex"
     >
@@ -22,7 +22,7 @@ Snapshot Diff:
       >
         <input
           autocomplete="off"
-          class="components-input-control__input css-gzm6eu-Input-dragStyles-fontSizeStyles-sizeStyles em5sgkm5"
+          class="components-input-control__input css-1hsyo1w-Input-dragStyles-fontSizeStyles-sizeStyles-customPaddings em5sgkm5"
 -         id="inspector-input-control-1"
 +         id="inspector-input-control-2"
           inputmode="numeric"

package/src/unit-control/types.ts

@@ -1,7 +1,12 @@
 /**
  * External dependencies
  */
-import type { CSSProperties, FocusEventHandler, SyntheticEvent } from 'react';
+import type {
+	CSSProperties,
+	FocusEventHandler,
+	ReactNode,
+	SyntheticEvent,
+} from 'react';
 
 /**
  * Internal dependencies
@@ -43,7 +48,7 @@ export type UnitControlOnChangeCallback = InputChangeCallback<
 	{ data?: WPUnitControlUnit }
 >;
 
-export type UnitSelectControlProps = {
+export type UnitSelectControlProps = Pick< InputControlProps, 'size' > & {
 	/**
 	 * Whether the control can be focused via keyboard navigation.
 	 *
@@ -54,12 +59,6 @@ export type UnitSelectControlProps = {
 	 * A callback function invoked when the value is changed.
 	 */
 	onChange?: UnitControlOnChangeCallback;
-	/**
-	 * Size of the control option. Supports "default" and "small".
-	 *
-	 * @default 'default'
-	 */
-	size?: SelectSize;
 	/**
 	 * Current unit.
 	 */
@@ -76,10 +75,14 @@ export type UnitSelectControlProps = {
 export type UnitControlProps = Omit< UnitSelectControlProps, 'unit' > &
 	Pick<
 		InputControlProps,
-		'hideLabelFromVision' | '__next36pxDefaultSize'
+		'hideLabelFromVision' | 'prefix' | '__next36pxDefaultSize'
 	> & {
 		__unstableStateReducer?: StateReducer;
 		__unstableInputWidth?: CSSProperties[ 'width' ];
+		/**
+		 * The children elements.
+		 */
+		children?: ReactNode;
 		/**
 		 * If `true`, the unit `<select>` is hidden.
 		 *

package/src/utils/base-label.ts

@@ -0,0 +1,13 @@
+/**
+ * External dependencies
+ */
+import { css } from '@emotion/react';
+
+// This is a very low-level mixin which you shouldn't have to use directly.
+// Try to use BaseControl's StyledLabel or BaseControl.VisualLabel if you can.
+export const baseLabelTypography = css`
+	font-size: 11px;
+	font-weight: 500;
+	line-height: 1.4;
+	text-transform: uppercase;
+`;

package/src/utils/box-sizing.ts

@@ -0,0 +1,14 @@
+/**
+ * External dependencies
+ */
+import { css } from '@emotion/react';
+
+export const boxSizingReset = css`
+	box-sizing: border-box;
+
+	*,
+	*::before,
+	*::after {
+		box-sizing: inherit;
+	}
+`;

package/src/utils/colors-values.js

@@ -1,180 +1,85 @@
-/**
- * External dependencies
- */
-import { merge } from 'lodash';
-
 /**
  * Internal dependencies
  */
 import { rgba } from './colors';
 
-const BASE = {
-	black: '#000',
-	white: '#fff',
-};
+const white = '#fff';
 
-const G2 = {
-	blue: {
-		medium: {
-			focus: '#007cba',
-			focusDark: '#fff',
-		},
-	},
-	gray: {
-		900: '#1e1e1e',
-		700: '#757575', // Meets 4.6:1 text contrast against white.
-		600: '#949494', // Meets 3:1 UI or large text contrast against white.
-		400: '#ccc',
-		300: '#ddd', // Used for most borders.
-		200: '#e0e0e0', // Used sparingly for light borders.
-		100: '#f0f0f0', // Used for light gray backgrounds.
-	},
-	mediumGray: {
-		text: '#757575',
-	},
-	lightGray: {
-		ui: '#949494',
-		secondary: '#ccc',
-		tertiary: '#e7e8e9',
-	},
+// Matches the grays in @wordpress/base-styles
+const GRAY = {
+	900: '#1e1e1e',
+	800: '#2f2f2f',
+	/** Meets 4.6:1 text contrast against white. */
+	700: '#757575',
+	/** Meets 3:1 UI or large text contrast against white. */
+	600: '#949494',
+	400: '#ccc',
+	/** Used for most borders. */
+	300: '#ddd',
+	/** Used sparingly for light borders. */
+	200: '#e0e0e0',
+	/** Used for light gray backgrounds. */
+	100: '#f0f0f0',
 };
 
 const DARK_GRAY = {
-	900: '#191e23',
-	800: '#23282d',
-	700: '#32373c',
-	600: '#40464d',
 	500: '#555d66', // Use this most of the time for dark items.
-	400: '#606a73',
 	300: '#6c7781', // Lightest gray that can be used for AA text contrast.
-	200: '#7e8993',
 	150: '#8d96a0', // Lightest gray that can be used for AA non-text contrast.
-	100: '#8f98a1',
-	placeholder: rgba( G2.gray[ 900 ], 0.62 ),
-};
-
-const DARK_OPACITY = {
-	900: rgba( '#000510', 0.9 ),
-	800: rgba( '#00000a', 0.85 ),
-	700: rgba( '#06060b', 0.8 ),
-	600: rgba( '#000913', 0.75 ),
-	500: rgba( '#0a1829', 0.7 ),
-	400: rgba( '#0a1829', 0.65 ),
-	300: rgba( '#0e1c2e', 0.62 ),
-	200: rgba( '#162435', 0.55 ),
-	100: rgba( '#223443', 0.5 ),
-	backgroundFill: rgba( DARK_GRAY[ 700 ], 0.7 ),
-};
-
-const DARK_OPACITY_LIGHT = {
-	900: rgba( '#304455', 0.45 ),
-	800: rgba( '#425863', 0.4 ),
-	700: rgba( '#667886', 0.35 ),
-	600: rgba( '#7b86a2', 0.3 ),
-	500: rgba( '#9197a2', 0.25 ),
-	400: rgba( '#95959c', 0.2 ),
-	300: rgba( '#829493', 0.15 ),
-	200: rgba( '#8b8b96', 0.1 ),
-	100: rgba( '#747474', 0.05 ),
 };
 
 const LIGHT_GRAY = {
-	900: '#a2aab2',
 	800: '#b5bcc2',
-	700: '#ccd0d4',
 	600: '#d7dade',
-	500: '#e2e4e7', // Good for "grayed" items and borders.
 	400: '#e8eaeb', // Good for "readonly" input fields and special text selection.
 	300: '#edeff0',
 	200: '#f3f4f5',
-	100: '#f8f9f9',
-	placeholder: rgba( BASE.white, 0.65 ),
-};
-
-const LIGHT_OPACITY_LIGHT = {
-	900: rgba( BASE.white, 0.5 ),
-	800: rgba( BASE.white, 0.45 ),
-	700: rgba( BASE.white, 0.4 ),
-	600: rgba( BASE.white, 0.35 ),
-	500: rgba( BASE.white, 0.3 ),
-	400: rgba( BASE.white, 0.25 ),
-	300: rgba( BASE.white, 0.2 ),
-	200: rgba( BASE.white, 0.15 ),
-	100: rgba( BASE.white, 0.1 ),
-	backgroundFill: rgba( LIGHT_GRAY[ 300 ], 0.8 ),
-};
-
-// Additional colors.
-// Some are from https://make.wordpress.org/design/handbook/foundations/colors/.
-
-const BLUE = {
-	wordpress: {
-		700: '#00669b',
-	},
-	dark: {
-		900: '#0071a1',
-	},
-	medium: {
-		900: '#006589',
-		800: '#00739c',
-		700: '#007fac',
-		600: '#008dbe',
-		500: '#00a0d2',
-		400: '#33b3db',
-		300: '#66c6e4',
-		200: '#bfe7f3',
-		100: '#e5f5fa',
-		highlight: '#b3e7fe',
-		focus: '#007cba',
-	},
 };
 
+// Matches @wordpress/base-styles
 const ALERT = {
 	yellow: '#f0b849',
 	red: '#d94f4f',
 	green: '#4ab866',
 };
 
+// Matches @wordpress/base-styles
 const ADMIN = {
-	theme: `var( --wp-admin-theme-color, ${ BLUE.wordpress[ 700 ] })`,
-	themeDark10: `var( --wp-admin-theme-color-darker-10, ${ BLUE.medium.focus })`,
+	theme: 'var( --wp-admin-theme-color, #007cba)',
+	themeDark10: 'var( --wp-admin-theme-color-darker-10, #006ba1)',
 };
 
-// Namespaced values for raw colors hex codes.
 const UI = {
 	theme: ADMIN.theme,
-	background: BASE.white,
-	backgroundDisabled: LIGHT_GRAY[ 200 ],
-	border: G2.gray[ 700 ],
-	borderHover: G2.gray[ 700 ],
+	background: white,
+	backgroundDisabled: LIGHT_GRAY[ 200 ], // TODO: Replace with WordPress gray
+	border: GRAY[ 700 ],
+	borderHover: GRAY[ 700 ],
 	borderFocus: ADMIN.themeDark10,
-	borderDisabled: G2.gray[ 400 ],
-	borderLight: G2.gray[ 300 ],
-	label: DARK_GRAY[ 500 ],
-	textDisabled: DARK_GRAY[ 150 ],
-	textDark: BASE.white,
-	textLight: BASE.black,
+	borderDisabled: GRAY[ 400 ],
+	textDisabled: DARK_GRAY[ 150 ], // TODO: Replace with WordPress gray
+	textDark: white,
+
+	// Matches @wordpress/base-styles
+	darkGrayPlaceholder: rgba( GRAY[ 900 ], 0.62 ),
+	lightGrayPlaceholder: rgba( white, 0.65 ),
 };
 
-// Using Object.assign instead of { ...spread } syntax helps TypeScript
-// to extract the correct type defs here.
-export const COLORS = Object.assign( {}, BASE, {
+export const COLORS = Object.freeze( {
+	/**
+	 * @deprecated Try to use `gray` instead.
+	 */
 	darkGray: DARK_GRAY,
-	darkOpacity: DARK_OPACITY,
-	darkOpacityLight: DARK_OPACITY_LIGHT,
-	mediumGray: G2.mediumGray,
 	/**
-	 * The main gray color object (since Apr 16, 2022).
-	 *
-	 * We are in the process of simplifying the colors in this file,
-	 * please prefer this `gray` object in the meantime.
+	 * The main gray color object.
+	 */
+	gray: GRAY,
+	/**
+	 * @deprecated Try to use `gray` instead.
 	 */
-	gray: G2.gray,
-	lightGray: merge( {}, LIGHT_GRAY, G2.lightGray ),
-	lightGrayLight: LIGHT_OPACITY_LIGHT,
-	blue: merge( {}, BLUE, G2.blue ),
+	lightGray: LIGHT_GRAY,
+	white,
 	alert: ALERT,
-	admin: ADMIN,
 	ui: UI,
 } );
 

package/src/utils/config-values.js

@@ -18,7 +18,7 @@ const CONTROL_PROPS = {
 	controlBorderColor: COLORS.gray[ 700 ],
 	controlBoxShadow: 'transparent',
 	controlBorderColorHover: COLORS.gray[ 700 ],
-	controlBoxShadowFocus: `0 0 0 0.5px ${ COLORS.admin.theme }`,
+	controlBoxShadowFocus: `0 0 0 0.5px ${ COLORS.ui.theme }`,
 	controlDestructiveBorderColor: COLORS.alert.red,
 	controlHeight: CONTROL_HEIGHT,
 	controlHeightXSmall: `calc( ${ CONTROL_HEIGHT } * 0.6 )`,