@wordpress/components 30.9.0 → 31.0.1-next.6deb34194.0

package/build-types/validated-form-controls/control-with-error.d.ts

@@ -1,3 +1,6 @@
+/**
+ * Internal dependencies
+ */
 import type { ValidatedControlProps } from './components/types';
 /**
  * HTML elements that support the Constraint Validation API.
@@ -17,11 +20,7 @@ export declare const ControlWithError: import("react").ForwardRefExoticComponent
      * Label the control as "optional" when _not_ `required`, instead of the inverse.
      */
     markWhenOptional?: boolean;
-    /**
-     * The callback to run when the input should be validated.
-     */
-    onValidate?: () => void;
-    customValidity?: ValidatedControlProps<unknown>["customValidity"];
+    customValidity?: ValidatedControlProps["customValidity"];
     /**
      * A function that returns the actual element on which the validity data should be applied.
      */

package/build-types/validated-form-controls/control-with-error.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"control-with-error.d.ts","sourceRoot":"","sources":["../../src/validated-form-controls/control-with-error.tsx"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAyBhE;;;;;;;GAOG;AACH,KAAK,cAAc,GAChB,mBAAmB,GACnB,gBAAgB,GAChB,iBAAiB,GACjB,mBAAmB,CAAC;AAyMvB,eAAO,MAAM,gBAAgB;IA9L3B;;OAEG;eACQ,OAAO;IAClB;;OAEG;uBACgB,OAAO;IAC1B;;OAEG;iBACU,MAAM,IAAI;qBACN,qBAAqB,CAAE,OAAO,CAAE,CAAE,gBAAgB,CAAE;IACrE;;OAEG;uBACgB,MAAM,cAAc,GAAG,IAAI,GAAG,SAAS;IAC1D;;;;;;;OAOG;;kDAsKoE,CAAC"}
+{"version":3,"file":"control-with-error.d.ts","sourceRoot":"","sources":["../../src/validated-form-controls/control-with-error.tsx"],"names":[],"mappings":"AAWA;;GAEG;AACH,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AA0BhE;;;;;;;GAOG;AACH,KAAK,cAAc,GAChB,mBAAmB,GACnB,gBAAgB,GAChB,iBAAiB,GACjB,mBAAmB,CAAC;AA+KvB,eAAO,MAAM,gBAAgB;IArK3B;;OAEG;eACQ,OAAO;IAClB;;OAEG;uBACgB,OAAO;qBACT,qBAAqB,CAAE,gBAAgB,CAAE;IAC1D;;OAEG;uBACgB,MAAM,cAAc,GAAG,IAAI,GAAG,SAAS;IAC1D;;;;;;;OAOG;;kDAiJoE,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/components",
-	"version": "30.9.0",
+	"version": "31.0.1-next.6deb34194.0",
 	"description": "UI components for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -55,24 +55,24 @@
 		"@types/gradient-parser": "1.1.0",
 		"@types/highlight-words-core": "1.2.1",
 		"@use-gesture/react": "^10.3.1",
-		"@wordpress/a11y": "^4.36.0",
-		"@wordpress/base-styles": "^6.12.0",
-		"@wordpress/compose": "^7.36.0",
-		"@wordpress/date": "^5.36.0",
-		"@wordpress/deprecated": "^4.36.0",
-		"@wordpress/dom": "^4.36.0",
-		"@wordpress/element": "^6.36.0",
-		"@wordpress/escape-html": "^3.36.0",
-		"@wordpress/hooks": "^4.36.0",
-		"@wordpress/html-entities": "^4.36.0",
-		"@wordpress/i18n": "^6.9.0",
-		"@wordpress/icons": "^11.3.0",
-		"@wordpress/is-shallow-equal": "^5.36.0",
-		"@wordpress/keycodes": "^4.36.0",
-		"@wordpress/primitives": "^4.36.0",
-		"@wordpress/private-apis": "^1.36.0",
-		"@wordpress/rich-text": "^7.36.0",
-		"@wordpress/warning": "^3.36.0",
+		"@wordpress/a11y": "^4.36.1-next.6deb34194.0",
+		"@wordpress/base-styles": "^6.12.1-next.6deb34194.0",
+		"@wordpress/compose": "^7.36.1-next.6deb34194.0",
+		"@wordpress/date": "^5.36.1-next.6deb34194.0",
+		"@wordpress/deprecated": "^4.36.1-next.6deb34194.0",
+		"@wordpress/dom": "^4.36.1-next.6deb34194.0",
+		"@wordpress/element": "^6.36.1-next.6deb34194.0",
+		"@wordpress/escape-html": "^3.36.1-next.6deb34194.0",
+		"@wordpress/hooks": "^4.36.1-next.6deb34194.0",
+		"@wordpress/html-entities": "^4.36.1-next.6deb34194.0",
+		"@wordpress/i18n": "^6.9.1-next.6deb34194.0",
+		"@wordpress/icons": "^11.3.1-next.6deb34194.0",
+		"@wordpress/is-shallow-equal": "^5.36.1-next.6deb34194.0",
+		"@wordpress/keycodes": "^4.36.1-next.6deb34194.0",
+		"@wordpress/primitives": "^4.36.1-next.6deb34194.0",
+		"@wordpress/private-apis": "^1.36.1-next.6deb34194.0",
+		"@wordpress/rich-text": "^7.36.1-next.6deb34194.0",
+		"@wordpress/warning": "^3.36.1-next.6deb34194.0",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.7.0",
@@ -101,5 +101,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "b35cf1a2dce04665e99fd6b9c2891c0b336361b9"
+	"gitHead": "457096e9e9b3896d2d4fe54fc19d7fb571ee9a44"
 }

package/src/alignment-matrix-control/cell.tsx

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
 /**
  * Internal dependencies
  */
@@ -9,9 +14,9 @@ import { VisuallyHidden } from '../visually-hidden';
  * Internal dependencies
  */
 import { ALIGNMENT_LABEL } from './utils';
-import { Cell as CellView, Point } from './styles';
 import type { AlignmentMatrixControlCellProps } from './types';
 import type { WordPressComponentProps } from '../context';
+import styles from './style.module.scss';
 
 export default function Cell( {
 	id,
@@ -22,13 +27,19 @@ export default function Cell( {
 		<Tooltip text={ ALIGNMENT_LABEL[ value ] }>
 			<Composite.Item
 				id={ id }
-				render={ <CellView { ...props } role="gridcell" /> }
+				render={
+					<span
+						{ ...props }
+						className={ clsx( styles.cell, props.className ) }
+						role="gridcell"
+					/>
+				}
 			>
 				{ /* VoiceOver needs a text content to be rendered within grid cell,
 			otherwise it'll announce the content as "blank". So we use a visually
 			hidden element instead of aria-label. */ }
 				<VisuallyHidden>{ value }</VisuallyHidden>
-				<Point role="presentation" />
+				<span className={ styles.point } role="presentation" />
 			</Composite.Item>
 		</Tooltip>
 	);

package/src/alignment-matrix-control/index.tsx

@@ -15,11 +15,11 @@ import { useCallback } from '@wordpress/element';
  */
 import Cell from './cell';
 import { Composite } from '../composite';
-import { GridContainer, GridRow } from './styles';
 import AlignmentMatrixControlIcon from './icon';
 import { GRID, getItemId, getItemValue } from './utils';
 import type { WordPressComponentProps } from '../context';
 import type { AlignmentMatrixControlProps } from './types';
+import styles from './style.module.scss';
 
 function UnforwardedAlignmentMatrixControl( {
 	className,
@@ -49,7 +49,11 @@ function UnforwardedAlignmentMatrixControl( {
 		[ baseId, onChange ]
 	);
 
-	const classes = clsx( 'component-alignment-matrix-control', className );
+	const classes = clsx(
+		'component-alignment-matrix-control',
+		styles[ 'grid-container' ],
+		className
+	);
 
 	return (
 		<Composite
@@ -58,18 +62,23 @@ function UnforwardedAlignmentMatrixControl( {
 			setActiveId={ setActiveId }
 			rtl={ isRTL() }
 			render={
-				<GridContainer
+				<div
 					{ ...props }
-					aria-label={ label }
 					className={ classes }
+					aria-label={ label }
 					id={ baseId }
 					role="grid"
-					size={ width }
+					style={ { width: `${ width }px` } }
 				/>
 			}
 		>
 			{ GRID.map( ( cells, index ) => (
-				<Composite.Row render={ <GridRow role="row" /> } key={ index }>
+				<Composite.Row
+					render={
+						<div className={ styles[ 'grid-row' ] } role="row" />
+					}
+					key={ index }
+				>
 					{ cells.map( ( cell ) => (
 						<Cell
 							id={ getItemId( baseId, cell ) }

package/src/alignment-matrix-control/style.module.scss

@@ -0,0 +1,84 @@
+@use "@wordpress/base-styles/variables" as *;
+@use "../utils/theme-variables" as *;
+
+.grid-container {
+	direction: ltr;
+
+	display: grid;
+	grid-template-columns: repeat(3, 1fr);
+	grid-template-rows: repeat(3, 1fr);
+
+	box-sizing: border-box;
+	aspect-ratio: 1;
+
+	border: 1px solid transparent;
+	border-radius: $radius-medium;
+	outline: none;
+
+	cursor: pointer;
+}
+
+.grid-row {
+	grid-column: 1 / -1;
+
+	box-sizing: border-box;
+	display: grid;
+	grid-template-columns: repeat(3, 1fr);
+}
+
+.cell {
+	position: relative;
+
+	display: flex;
+	align-items: center;
+	justify-content: center;
+
+	box-sizing: border-box;
+	margin: 0;
+	padding: 0;
+
+	appearance: none;
+	border: none;
+	outline: none;
+}
+
+.point {
+	display: block;
+	contain: strict;
+
+	box-sizing: border-box;
+	width: 6px;
+	aspect-ratio: 1;
+
+	margin: auto;
+
+	color: $components-color-gray-400;
+
+	/* Use border instead of background color so that the point shows
+	in Windows High Contrast Mode */
+	border: 3px solid currentColor;
+
+	/* Highlight active item */
+	.cell[data-active-item] & {
+		color: $components-color-foreground;
+		transform: scale(calc(5 / 3));
+	}
+
+	/* Hover styles for non-active items */
+	.cell:not([data-active-item]):hover & {
+		color: $components-color-accent;
+	}
+
+	/* Show an outline only when interacting with keyboard */
+	.cell[data-focus-visible] & {
+		outline: 1px solid $components-color-accent;
+		outline-offset: 1px;
+	}
+
+	@media not (prefers-reduced-motion) {
+		transition-property: color, transform;
+		transition-duration: 120ms;
+		transition-timing-function: linear;
+	}
+}
+

package/src/angle-picker-control/angle-circle.tsx

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
 /**
  * WordPress dependencies
  */
@@ -7,11 +12,7 @@ import { __experimentalUseDragging as useDragging } from '@wordpress/compose';
 /**
  * Internal dependencies
  */
-import {
-	CircleRoot,
-	CircleIndicatorWrapper,
-	CircleIndicator,
-} from './styles/angle-picker-control-styles';
+import styles from './style.module.scss';
 
 import type { WordPressComponentProps } from '../context';
 import type { AngleCircleProps } from './types';
@@ -25,6 +26,7 @@ type UseDraggingCallbackEvent =
 function AngleCircle( {
 	value,
 	onChange,
+	className,
 	...props
 }: WordPressComponentProps< AngleCircleProps, 'div' > ) {
 	const angleCircleRef = useRef< HTMLDivElement | null >( null );
@@ -89,22 +91,35 @@ function AngleCircle( {
 	}, [ isDragging ] );
 
 	return (
-		<CircleRoot
+		// eslint-disable-next-line jsx-a11y/no-static-element-interactions
+		<div
 			ref={ angleCircleRef }
 			onMouseDown={ startDrag }
-			className="components-angle-picker-control__angle-circle"
+			className={ clsx(
+				'components-angle-picker-control__angle-circle',
+				styles[ 'circle-root' ],
+				className
+			) }
 			{ ...props }
 		>
-			<CircleIndicatorWrapper
+			<div
 				style={
 					value ? { transform: `rotate(${ value }deg)` } : undefined
 				}
-				className="components-angle-picker-control__angle-circle-indicator-wrapper"
+				className={ clsx(
+					'components-angle-picker-control__angle-circle-indicator-wrapper',
+					styles[ 'circle-indicator-wrapper' ]
+				) }
 				tabIndex={ -1 }
 			>
-				<CircleIndicator className="components-angle-picker-control__angle-circle-indicator" />
-			</CircleIndicatorWrapper>
-		</CircleRoot>
+				<div
+					className={ clsx(
+						'components-angle-picker-control__angle-circle-indicator',
+						styles[ 'circle-indicator' ]
+					) }
+				/>
+			</div>
+		</div>
 	);
 }
 

package/src/angle-picker-control/index.tsx

@@ -16,8 +16,9 @@ import { isRTL, __ } from '@wordpress/i18n';
 import { Flex, FlexBlock } from '../flex';
 import { Spacer } from '../spacer';
 import NumberControl from '../number-control';
+import InputControlPrefixWrapper from '../input-control/input-prefix-wrapper';
+import InputControlSuffixWrapper from '../input-control/input-suffix-wrapper';
 import AngleCircle from './angle-circle';
-import { UnitText } from './styles/angle-picker-control-styles';
 
 import type { WordPressComponentProps } from '../context';
 import type { AnglePickerControlProps } from './types';
@@ -48,10 +49,11 @@ function UnforwardedAnglePickerControl(
 
 	const classes = clsx( 'components-angle-picker-control', className );
 
-	const unitText = <UnitText>°</UnitText>;
-	const [ prefixedUnitText, suffixedUnitText ] = isRTL()
-		? [ unitText, null ]
-		: [ null, unitText ];
+	// Override the default behavior and position the degree symbol to the
+	// right of the number, regardless of the language direction.
+	const prefixOrSuffixProp = isRTL()
+		? { prefix: <InputControlPrefixWrapper>°</InputControlPrefixWrapper> }
+		: { suffix: <InputControlSuffixWrapper>°</InputControlSuffixWrapper> };
 
 	return (
 		<Flex { ...restProps } ref={ ref } className={ classes } gap={ 2 }>
@@ -66,8 +68,7 @@ function UnforwardedAnglePickerControl(
 					step="1"
 					value={ value }
 					spinControls="none"
-					prefix={ prefixedUnitText }
-					suffix={ suffixedUnitText }
+					{ ...prefixOrSuffixProp }
 				/>
 			</FlexBlock>
 			<Spacer marginBottom="1" marginTop="auto">

package/src/angle-picker-control/style.module.scss

@@ -0,0 +1,40 @@
+@use "@wordpress/base-styles/variables" as *;
+@use "../utils/theme-variables" as *;
+
+.circle-root {
+	border-radius: $radius-round;
+	border: $border-width solid $components-color-border;
+	box-sizing: border-box;
+	cursor: grab;
+	height: 32px;
+	overflow: hidden;
+	width: 32px;
+
+	&:active {
+		cursor: grabbing;
+	}
+}
+
+.circle-indicator-wrapper {
+	box-sizing: border-box;
+	position: relative;
+	width: 100%;
+	height: 100%;
+
+	&:focus-visible {
+		outline: none;
+	}
+}
+
+.circle-indicator {
+	background: $components-color-accent;
+	border-radius: $radius-round;
+	box-sizing: border-box;
+	display: block;
+	left: 50%;
+	top: 4px;
+	transform: translateX(-50%);
+	position: absolute;
+	width: 6px;
+	height: 6px;
+}

package/src/button/style.scss

@@ -29,7 +29,7 @@
 	height: $button-size;
 	align-items: center;
 	box-sizing: border-box;
-	padding: 6px 12px;
+	padding: 4px 12px; // Allows 32px min-height.
 	border-radius: $radius-small;
 	color: $components-color-foreground;
 

package/src/dropdown-menu/index.tsx

@@ -164,7 +164,7 @@ function UnconnectedDropdownMenu( dropdownMenuProps: DropdownMenuProps ) {
 						{ controlSets?.flatMap( ( controlSet, indexOfSet ) =>
 							controlSet.map( ( control, indexOfControl ) => (
 								<Button
-									__next40pxDefaultSize
+									size="compact"
 									key={ [
 										indexOfSet,
 										indexOfControl,

package/src/dropdown-menu/style.scss

@@ -57,7 +57,7 @@
 
 	.components-menu-item__button,
 	.components-menu-item__button.components-button {
-		min-height: $button-size-next-default-40px;
+		min-height: $grid-unit-40;
 		height: auto;
 		text-align: left;
 		padding-left: $grid-unit-10;

package/src/guide/style.scss

@@ -59,7 +59,7 @@
 		height: $button-size;
 		justify-content: center;
 		margin: 0 0 $grid-unit-30 0;
-		padding: 0 $grid-unit-40;
+		padding: 0 $grid-unit-30;
 		position: relative;
 		width: 100%;
 	}
@@ -103,11 +103,11 @@
 	}
 
 	&.components-guide__back-button {
-		left: $grid-unit-40;
+		left: $grid-unit-30;
 	}
 
 	&.components-guide__forward-button,
 	&.components-guide__finish-button {
-		right: $grid-unit-40;
+		right: $grid-unit-30;
 	}
 }

package/src/menu/styles.ts

@@ -25,7 +25,7 @@ const ANIMATION_PARAMS = {
 };
 
 const CONTENT_WRAPPER_PADDING = space( 1 );
-const ITEM_PADDING_BLOCK = space( 2 );
+const ITEM_PADDING_BLOCK = space( 1 );
 const ITEM_PADDING_INLINE = space( 3 );
 
 // TODO:
@@ -152,7 +152,7 @@ const baseItem = css`
 	all: unset;
 
 	position: relative;
-	min-height: ${ space( 10 ) };
+	min-height: ${ space( 8 ) };
 	box-sizing: border-box;
 
 	/* Occupy the width of all grid columns (ie. full width) */

package/src/menu-item/index.tsx

@@ -56,7 +56,7 @@ function UnforwardedMenuItem(
 
 	return (
 		<Button
-			__next40pxDefaultSize
+			size="compact"
 			ref={ ref }
 			// Make sure aria-checked matches spec https://www.w3.org/TR/wai-aria-1.1/#aria-checked
 			aria-checked={

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

@@ -3,7 +3,7 @@
 exports[`MenuItem should match snapshot when all props provided 1`] = `
 <button
   aria-checked="true"
-  class="components-button components-menu-item__button my-class is-next-40px-default-size"
+  class="components-button components-menu-item__button my-class is-compact"
   role="menuitemcheckbox"
   type="button"
 >
@@ -35,7 +35,7 @@ exports[`MenuItem should match snapshot when all props provided 1`] = `
 
 exports[`MenuItem should match snapshot when info is provided 1`] = `
 <button
-  class="components-button components-menu-item__button is-next-40px-default-size"
+  class="components-button components-menu-item__button is-compact"
   role="menuitem"
   type="button"
 >
@@ -62,7 +62,7 @@ exports[`MenuItem should match snapshot when info is provided 1`] = `
 
 exports[`MenuItem should match snapshot when isSelected and role are optionally provided 1`] = `
 <button
-  class="components-button components-menu-item__button my-class is-next-40px-default-size"
+  class="components-button components-menu-item__button my-class is-compact"
   role="menuitem"
   type="button"
 >
@@ -94,7 +94,7 @@ exports[`MenuItem should match snapshot when isSelected and role are optionally
 
 exports[`MenuItem should match snapshot when only label provided 1`] = `
 <button
-  class="components-button components-menu-item__button is-next-40px-default-size"
+  class="components-button components-menu-item__button is-compact"
   role="menuitem"
   type="button"
 >

package/src/modal/style.scss

@@ -109,10 +109,10 @@
 
 	&.is-full-screen {
 		// When full screen, make sure the children container is full height.
-		.components-modal__content {
+		:where(.components-modal__content) {
 			display: flex;
 			// If this container is scrollable, bottom padding won't apply so we use margin instead.
-			margin-bottom: $grid-unit-40;
+			margin-bottom: $grid-unit-30;
 			padding-bottom: 0;
 
 			> :last-child {
@@ -152,7 +152,7 @@
 .components-modal__header {
 	box-sizing: border-box;
 	border-bottom: $border-width solid transparent;
-	padding: $grid-unit-30 $grid-unit-40 $grid-unit-10;
+	padding: $grid-unit-30;
 	display: flex;
 	flex-direction: row;
 	justify-content: space-between;
@@ -206,12 +206,12 @@
 	flex: 1;
 	margin-top: $header-height + $grid-unit-10;
 	// Small top padding required to avoid cutting off the visible outline when the first child element is focusable.
-	padding: $grid-unit-05 $grid-unit-40 $grid-unit-40;
+	padding: $grid-unit-05 $grid-unit-30 $grid-unit-30;
 	overflow: auto;
 
 	&.hide-header {
 		margin-top: 0;
-		padding-top: $grid-unit-40;
+		padding-top: $grid-unit-30;
 	}
 
 	&.is-scrollable:focus-visible {