@wordpress/components 19.16.0 → 19.17.0

package/src/toggle-group-control/test/__snapshots__/index.js.snap

@@ -4,6 +4,13 @@ exports[`ToggleGroupControl should render correctly with icons 1`] = `
 .emotion-0 {
   font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',sans-serif;
   font-size: 13px;
+  box-sizing: border-box;
+}
+
+.emotion-0 *,
+.emotion-0 *::before,
+.emotion-0 *::after {
+  box-sizing: inherit;
 }
 
 .emotion-2 {
@@ -15,8 +22,13 @@ exports[`ToggleGroupControl should render correctly with icons 1`] = `
 }
 
 .emotion-4 {
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 1.4;
+  text-transform: uppercase;
   display: inline-block;
   margin-bottom: calc(4px * 2);
+  padding: 0;
 }
 
 .emotion-6 {
@@ -257,6 +269,13 @@ exports[`ToggleGroupControl should render correctly with text options 1`] = `
 .emotion-0 {
   font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',sans-serif;
   font-size: 13px;
+  box-sizing: border-box;
+}
+
+.emotion-0 *,
+.emotion-0 *::before,
+.emotion-0 *::after {
+  box-sizing: inherit;
 }
 
 .emotion-2 {
@@ -268,8 +287,13 @@ exports[`ToggleGroupControl should render correctly with text options 1`] = `
 }
 
 .emotion-4 {
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 1.4;
+  text-transform: uppercase;
   display: inline-block;
   margin-bottom: calc(4px * 2);
+  padding: 0;
 }
 
 .emotion-6 {

package/src/tools-panel/styles.ts

@@ -9,7 +9,6 @@ import { css } from '@emotion/react';
 import {
 	StyledField as BaseControlField,
 	StyledHelp as BaseControlHelp,
-	StyledLabel as BaseControlLabel,
 	Wrapper as BaseControlWrapper,
 } from '../base-control/styles/base-control-styles';
 import { LabelWrapper } from '../input-control/styles/input-control-styles';
@@ -17,6 +16,9 @@ import { COLORS, CONFIG } from '../utils';
 import { space } from '../ui/utils/space';
 
 const toolsPanelGrid = {
+	columns: ( columns: number ) => css`
+		grid-template-columns: ${ `repeat( ${ columns }, minmax(0, 1fr) )` };
+	`,
 	spacing: css`
 		column-gap: ${ space( 4 ) };
 		row-gap: ${ space( 6 ) };
@@ -28,8 +30,9 @@ const toolsPanelGrid = {
 	},
 };
 
-export const ToolsPanel = css`
-	${ toolsPanelGrid.spacing };
+export const ToolsPanel = ( columns: number ) => css`
+	${ toolsPanelGrid.columns( columns ) }
+	${ toolsPanelGrid.spacing }
 
 	border-top: ${ CONFIG.borderWidth } solid ${ COLORS.gray[ 300 ] };
 	margin-top: -1px;
@@ -46,7 +49,7 @@ export const ToolsPanelWithInnerWrapper = ( columns: number ) => {
 	return css`
 		> div:not( :first-of-type ) {
 			display: grid;
-			grid-template-columns: ${ `repeat( ${ columns }, 1fr )` };
+			${ toolsPanelGrid.columns( columns ) }
 			${ toolsPanelGrid.spacing }
 			${ toolsPanelGrid.item.fullWidth }
 		}
@@ -133,18 +136,6 @@ export const ToolsPanelItem = css`
 			line-height: 1.4em;
 		}
 	}
-
-	/**
-	 * The targeting of .components-custom-select-control__label here is a
-	 * temporary measure only.
-	 *
-	 * It should be replaced once CustomSelectControl component has been
-	 * refactored and can be targeted via component interpolation.
-	 */
-	.components-custom-select-control__label,
-	${ BaseControlLabel } {
-		line-height: 1.4em;
-	}
 `;
 
 export const ToolsPanelItemPlaceholder = css`

package/src/tools-panel/test/__snapshots__/index.js.snap

@@ -5,6 +5,7 @@ exports[`ToolsPanel first and last panel items should apply first/last classes t
   display: grid;
   gap: calc( 4px * 3 );
   grid-template-columns: repeat( 2, 1fr );
+  grid-template-columns: repeat( 2, minmax(0, 1fr) );
   -webkit-column-gap: calc(4px * 4);
   column-gap: calc(4px * 4);
   row-gap: calc(4px * 6);
@@ -15,7 +16,7 @@ exports[`ToolsPanel first and last panel items should apply first/last classes t
 
 .emotion-0>div:not( :first-of-type ) {
   display: grid;
-  grid-template-columns: repeat( 2, 1fr );
+  grid-template-columns: repeat( 2, minmax(0, 1fr) );
   -webkit-column-gap: calc(4px * 4);
   column-gap: calc(4px * 4);
   row-gap: calc(4px * 6);
@@ -105,11 +106,6 @@ exports[`ToolsPanel first and last panel items should apply first/last classes t
   line-height: 1.4em;
 }
 
-.emotion-6 .components-custom-select-control__label,
-.emotion-6 .ej5x27r2 {
-  line-height: 1.4em;
-}
-
 .emotion-8 {
   grid-column: 1/-1;
 }
@@ -137,11 +133,6 @@ exports[`ToolsPanel first and last panel items should apply first/last classes t
   line-height: 1.4em;
 }
 
-.emotion-8 .components-custom-select-control__label,
-.emotion-8 .ej5x27r2 {
-  line-height: 1.4em;
-}
-
 <div>
   <div
     class="components-grid components-tools-panel emotion-0 emotion-1"

package/src/tools-panel/tools-panel/hook.ts

@@ -190,7 +190,12 @@ export function useToolsPanel(
 			areAllOptionalControlsHidden &&
 			styles.ToolsPanelHiddenInnerWrapper;
 
-		return cx( styles.ToolsPanel, wrapperStyle, emptyStyle, className );
+		return cx(
+			styles.ToolsPanel( DEFAULT_COLUMNS ),
+			wrapperStyle,
+			emptyStyle,
+			className
+		);
 	}, [
 		areAllOptionalControlsHidden,
 		className,

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/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

@@ -10,6 +10,7 @@ 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.
@@ -59,62 +60,113 @@ export const ValueInput = styled( NumberControl )`
 	}
 `;
 
-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%;
-		/* Removing margin ensures focus styles neatly overlay the wrapper. */
-		margin: 0;
-		transition: box-shadow 0.1s linear, border 0.1s linear;
+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: 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;
-		}
+			&: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/types.ts

@@ -43,7 +43,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 +54,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.
 	 */

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/style-mixins.js

@@ -1,3 +1,4 @@
+export { boxSizingReset } from './box-sizing';
 export { rgba } from './colors';
 export { reduceMotion } from './reduce-motion';
 export { rtl } from './rtl';
@@ -5,3 +6,4 @@ export { font } from './font';
 export { breakpoint } from './breakpoint';
 export { default as CONFIG } from './config-values';
 export { COLORS } from './colors-values';
+export { baseLabelTypography } from './base-label';

package/tsconfig.json

@@ -72,6 +72,7 @@
 		"src/navigable-container/**/*",
 		"src/navigator/**/*",
 		"src/number-control/**/*",
+		"src/placeholder/**/*",
 		"src/popover/**/*",
 		"src/radio-control/**/*",
 		"src/range-control/**/*",
@@ -85,6 +86,7 @@
 		"src/spacer/**/*",
 		"src/spinner/**/*",
 		"src/surface/**/*",
+		"src/swatch/**/*",
 		"src/text/**/*",
 		"src/text-control/**/*",
 		"src/text-highlight/**/*",