@wordpress/components 28.4.0 → 28.6.0

package/build-types/tree-select/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/tree-select/index.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,eAAe,EAAgB,MAAM,SAAS,CAAC;AAiB7D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+CG;AAEH,wBAAgB,UAAU,CAAE,KAAK,EAAE,eAAe,+BAwBjD;AAED,eAAe,UAAU,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/tree-select/index.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,eAAe,EAAgB,MAAM,SAAS,CAAC;AA0B7D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+CG;AACH,wBAAgB,UAAU,CAAE,KAAK,EAAE,eAAe,+BA0BjD;AAED,eAAe,UAAU,CAAC"}

package/build-types/utils/config-values.d.ts

@@ -5,7 +5,6 @@ declare const _default: {
     controlPaddingXLarge: string;
     controlPaddingXSmall: string;
     controlBackgroundColor: "#fff";
-    controlBorderRadius: string;
     controlBoxShadow: string;
     controlBoxShadowFocus: string;
     controlDestructiveBorderColor: string;
@@ -26,7 +25,12 @@ declare const _default: {
     colorScrollbarThumbHover: string;
     colorScrollbarTrack: string;
     elevationIntensity: number;
-    radiusBlockUi: string;
+    radiusXSmall: string;
+    radiusSmall: string;
+    radiusMedium: string;
+    radiusLarge: string;
+    radiusFull: string;
+    radiusRound: string;
     borderWidth: string;
     borderWidthFocus: string;
     borderWidthTab: string;
@@ -51,7 +55,10 @@ declare const _default: {
     cardPaddingSmall: string;
     cardPaddingMedium: string;
     cardPaddingLarge: string;
-    popoverShadow: string;
+    elevationXSmall: string;
+    elevationSmall: string;
+    elevationMedium: string;
+    elevationLarge: string;
     surfaceBackgroundColor: "#fff";
     surfaceBackgroundSubtleColor: string;
     surfaceBackgroundTintColor: string;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/components",
-	"version": "28.4.0",
+	"version": "28.6.0",
 	"description": "UI components for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -31,7 +31,7 @@
 	],
 	"types": "build-types",
 	"dependencies": {
-		"@ariakit/react": "^0.3.12",
+		"@ariakit/react": "^0.4.10",
 		"@babel/runtime": "^7.16.0",
 		"@emotion/cache": "^11.7.1",
 		"@emotion/css": "^11.7.1",
@@ -43,23 +43,23 @@
 		"@types/gradient-parser": "0.1.3",
 		"@types/highlight-words-core": "1.2.1",
 		"@use-gesture/react": "^10.3.1",
-		"@wordpress/a11y": "^4.4.0",
-		"@wordpress/compose": "^7.4.0",
-		"@wordpress/date": "^5.4.0",
-		"@wordpress/deprecated": "^4.4.0",
-		"@wordpress/dom": "^4.4.0",
-		"@wordpress/element": "^6.4.0",
-		"@wordpress/escape-html": "^3.4.0",
-		"@wordpress/hooks": "^4.4.0",
-		"@wordpress/html-entities": "^4.4.0",
-		"@wordpress/i18n": "^5.4.0",
-		"@wordpress/icons": "^10.4.0",
-		"@wordpress/is-shallow-equal": "^5.4.0",
-		"@wordpress/keycodes": "^4.4.0",
-		"@wordpress/primitives": "^4.4.0",
-		"@wordpress/private-apis": "^1.4.0",
-		"@wordpress/rich-text": "^7.4.0",
-		"@wordpress/warning": "^3.4.0",
+		"@wordpress/a11y": "^4.6.0",
+		"@wordpress/compose": "^7.6.0",
+		"@wordpress/date": "^5.6.0",
+		"@wordpress/deprecated": "^4.6.0",
+		"@wordpress/dom": "^4.6.0",
+		"@wordpress/element": "^6.6.0",
+		"@wordpress/escape-html": "^3.6.0",
+		"@wordpress/hooks": "^4.6.0",
+		"@wordpress/html-entities": "^4.6.0",
+		"@wordpress/i18n": "^5.6.0",
+		"@wordpress/icons": "^10.6.0",
+		"@wordpress/is-shallow-equal": "^5.6.0",
+		"@wordpress/keycodes": "^4.6.0",
+		"@wordpress/primitives": "^4.6.0",
+		"@wordpress/private-apis": "^1.6.0",
+		"@wordpress/rich-text": "^7.6.0",
+		"@wordpress/warning": "^3.6.0",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.7.0",
@@ -85,5 +85,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "363edb39b8dda8727f652e42cbb8497732693ed2"
+	"gitHead": "ab9564947967bb3f00343130954b9efacba6cdd7"
 }

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

@@ -1,7 +1,7 @@
 /**
  * Internal dependencies
  */
-import { CompositeItem } from '../composite/v2';
+import { Composite } from '../composite';
 import Tooltip from '../tooltip';
 import { VisuallyHidden } from '../visually-hidden';
 
@@ -26,7 +26,7 @@ export default function Cell( {
 
 	return (
 		<Tooltip text={ tooltipText }>
-			<CompositeItem
+			<Composite.Item
 				id={ id }
 				render={ <CellView { ...props } role="gridcell" /> }
 			>
@@ -35,7 +35,7 @@ export default function Cell( {
 			hidden element instead of aria-label. */ }
 				<VisuallyHidden>{ value }</VisuallyHidden>
 				<Point isActive={ isActive } role="presentation" />
-			</CompositeItem>
+			</Composite.Item>
 		</Tooltip>
 	);
 }

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

@@ -2,6 +2,7 @@
  * External dependencies
  */
 import clsx from 'clsx';
+import { useStoreState } from '@ariakit/react';
 
 /**
  * WordPress dependencies
@@ -13,7 +14,7 @@ import { useInstanceId } from '@wordpress/compose';
  * Internal dependencies
  */
 import Cell from './cell';
-import { Composite, CompositeRow, useCompositeStore } from '../composite/v2';
+import { Composite, useCompositeStore } from '../composite';
 import { Root, Row } from './styles/alignment-matrix-control-styles';
 import AlignmentMatrixControlIcon from './icon';
 import { GRID, getItemId, getItemValue } from './utils';
@@ -68,7 +69,7 @@ export function AlignmentMatrixControl( {
 		rtl: isRTL(),
 	} );
 
-	const activeId = compositeStore.useState( 'activeId' );
+	const activeId = useStoreState( compositeStore, 'activeId' );
 
 	const classes = clsx( 'component-alignment-matrix-control', className );
 
@@ -87,7 +88,7 @@ export function AlignmentMatrixControl( {
 			}
 		>
 			{ GRID.map( ( cells, index ) => (
-				<CompositeRow render={ <Row role="row" /> } key={ index }>
+				<Composite.Row render={ <Row role="row" /> } key={ index }>
 					{ cells.map( ( cell ) => {
 						const cellId = getItemId( baseId, cell );
 						const isActive = cellId === activeId;
@@ -101,7 +102,7 @@ export function AlignmentMatrixControl( {
 							/>
 						);
 					} ) }
-				</CompositeRow>
+				</Composite.Row>
 			) ) }
 		</Composite>
 	);

package/src/alignment-matrix-control/styles/alignment-matrix-control-styles.ts

@@ -7,7 +7,7 @@ import { css } from '@emotion/react';
 /**
  * Internal dependencies
  */
-import { COLORS } from '../../utils';
+import { COLORS, CONFIG } from '../../utils';
 import type {
 	AlignmentMatrixControlProps,
 	AlignmentMatrixControlCellProps,
@@ -15,7 +15,7 @@ import type {
 
 export const rootBase = () => {
 	return css`
-		border-radius: 2px;
+		border-radius: ${ CONFIG.radiusMedium };
 		box-sizing: border-box;
 		direction: ltr;
 		display: grid;

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

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { render, screen, waitFor, within } from '@testing-library/react';
-import { press, click, sleep } from '@ariakit/test';
+import { press, click } from '@ariakit/test';
 
 /**
  * Internal dependencies
@@ -39,7 +39,6 @@ describe( 'AlignmentMatrixControl', () => {
 		it( 'should be centered by default', async () => {
 			await renderAndInitCompositeStore( <AlignmentMatrixControl /> );
 
-			await sleep();
 			await press.Tab();
 
 			expect( getCell( 'center center' ) ).toHaveFocus();
@@ -110,7 +109,6 @@ describe( 'AlignmentMatrixControl', () => {
 						<AlignmentMatrixControl onChange={ spy } />
 					);
 
-					await sleep();
 					await press.Tab();
 					await press[ keyRef ]();
 

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

@@ -15,7 +15,7 @@ const CIRCLE_SIZE = 32;
 const INNER_CIRCLE_SIZE = 6;
 
 export const CircleRoot = styled.div`
-	border-radius: 50%;
+	border-radius: ${ CONFIG.radiusRound };
 	border: ${ CONFIG.borderWidth } solid ${ COLORS.ui.border };
 	box-sizing: border-box;
 	cursor: grab;
@@ -41,7 +41,7 @@ export const CircleIndicatorWrapper = styled.div`
 
 export const CircleIndicator = styled.div`
 	background: ${ COLORS.theme.accent };
-	border-radius: 50%;
+	border-radius: ${ CONFIG.radiusRound };
 	box-sizing: border-box;
 	display: block;
 	left: 50%;

package/src/autocomplete/autocompleter-ui.tsx

@@ -64,9 +64,11 @@ function ListBox( {
 						'components-autocomplete__result',
 						className,
 						{
+							// Unused, for backwards compatibility.
 							'is-selected': index === selectedIndex,
 						}
 					) }
+					variant={ index === selectedIndex ? 'primary' : undefined }
 					onClick={ () => onSelect( option ) }
 				>
 					{ option.label }

package/src/autocomplete/style.scss

@@ -13,10 +13,4 @@
 	&:focus:not(:disabled) {
 		@include block-toolbar-button-style__focus();
 	}
-
-	&.is-selected,
-	&:not(:disabled,[aria-disabled="true"]):active {
-		background: $components-color-accent;
-		color: $white;
-	}
 }

package/src/base-control/README.md

@@ -15,7 +15,7 @@ const MyCustomTextareaControl = ({ children, ...baseProps }) => (
 	const { baseControlProps, controlProps } = useBaseControlProps( baseProps );
 
 	return (
-		<BaseControl { ...baseControlProps } __nextHasNoMarginBottom={ true }>
+		<BaseControl { ...baseControlProps } __nextHasNoMarginBottom>
 			<textarea { ...controlProps }>
 			  { children }
 			</textarea>
@@ -92,7 +92,10 @@ It should only be used in cases where the children being rendered inside BaseCon
 import { BaseControl } from '@wordpress/components';
 
 const MyBaseControl = () => (
-	<BaseControl help="This button is already accessibly labeled.">
+	<BaseControl
+		__nextHasNoMarginBottom
+		help="This button is already accessibly labeled."
+	>
 		<BaseControl.VisualLabel>Author</BaseControl.VisualLabel>
 		<Button>Select an author</Button>
 	</BaseControl>

package/src/base-control/index.tsx

@@ -7,6 +7,7 @@ import type { ForwardedRef } from 'react';
 /**
  * WordPress dependencies
  */
+import deprecated from '@wordpress/deprecated';
 import { forwardRef } from '@wordpress/element';
 
 /**
@@ -26,34 +27,12 @@ import { contextConnectWithoutRef, useContextSystem } from '../context';
 
 export { useBaseControlProps } from './hooks';
 
-/**
- * `BaseControl` is a component used to generate labels and help text for components handling user inputs.
- *
- * ```jsx
- * import { BaseControl, useBaseControlProps } from '@wordpress/components';
- *
- * // Render a `BaseControl` for a textarea input
- * const MyCustomTextareaControl = ({ children, ...baseProps }) => (
- * 	// `useBaseControlProps` is a convenience hook to get the props for the `BaseControl`
- * 	// and the inner control itself. Namely, it takes care of generating a unique `id`,
- * 	// properly associating it with the `label` and `help` elements.
- * 	const { baseControlProps, controlProps } = useBaseControlProps( baseProps );
- *
- * 	return (
- * 		<BaseControl { ...baseControlProps } __nextHasNoMarginBottom={ true }>
- * 			<textarea { ...controlProps }>
- * 			  { children }
- * 			</textarea>
- * 		</BaseControl>
- * 	);
- * );
- * ```
- */
 const UnconnectedBaseControl = (
 	props: WordPressComponentProps< BaseControlProps, null >
 ) => {
 	const {
 		__nextHasNoMarginBottom = false,
+		__associatedWPComponentName = 'BaseControl',
 		id,
 		label,
 		hideLabelFromVision = false,
@@ -62,6 +41,17 @@ const UnconnectedBaseControl = (
 		children,
 	} = useContextSystem( props, 'BaseControl' );
 
+	if ( ! __nextHasNoMarginBottom ) {
+		deprecated(
+			`Bottom margin styles for wp.components.${ __associatedWPComponentName }`,
+			{
+				since: '6.7',
+				version: '7.0',
+				hint: 'Set the `__nextHasNoMarginBottom` prop to true to start opting into the new styles, which will become the default in a future version.',
+			}
+		);
+	}
+
 	return (
 		<Wrapper className={ className }>
 			<StyledField
@@ -105,23 +95,6 @@ const UnconnectedBaseControl = (
 	);
 };
 
-/**
- * `BaseControl.VisualLabel` is used to render a purely visual label inside a `BaseControl` component.
- *
- * It should only be used in cases where the children being rendered inside `BaseControl` are already accessibly labeled,
- * e.g., a button, but we want an additional visual label for that section equivalent to the labels `BaseControl` would
- * otherwise use if the `label` prop was passed.
- *
- * @example
- * import { BaseControl } from '@wordpress/components';
- *
- * const MyBaseControl = () => (
- * 	<BaseControl help="This button is already accessibly labeled.">
- * 		<BaseControl.VisualLabel>Author</BaseControl.VisualLabel>
- * 		<Button>Select an author</Button>
- * 	</BaseControl>
- * );
- */
 const UnforwardedVisualLabel = (
 	props: WordPressComponentProps< BaseControlVisualLabelProps, 'span' >,
 	ref: ForwardedRef< any >
@@ -141,9 +114,56 @@ const UnforwardedVisualLabel = (
 
 export const VisualLabel = forwardRef( UnforwardedVisualLabel );
 
+/**
+ * `BaseControl` is a component used to generate labels and help text for components handling user inputs.
+ *
+ * ```jsx
+ * import { BaseControl, useBaseControlProps } from '@wordpress/components';
+ *
+ * // Render a `BaseControl` for a textarea input
+ * const MyCustomTextareaControl = ({ children, ...baseProps }) => (
+ * 	// `useBaseControlProps` is a convenience hook to get the props for the `BaseControl`
+ * 	// and the inner control itself. Namely, it takes care of generating a unique `id`,
+ * 	// properly associating it with the `label` and `help` elements.
+ * 	const { baseControlProps, controlProps } = useBaseControlProps( baseProps );
+ *
+ * 	return (
+ * 		<BaseControl { ...baseControlProps } __nextHasNoMarginBottom>
+ * 			<textarea { ...controlProps }>
+ * 			  { children }
+ * 			</textarea>
+ * 		</BaseControl>
+ * 	);
+ * );
+ * ```
+ */
 export const BaseControl = Object.assign(
 	contextConnectWithoutRef( UnconnectedBaseControl, 'BaseControl' ),
-	{ VisualLabel }
+
+	{
+		/**
+		 * `BaseControl.VisualLabel` is used to render a purely visual label inside a `BaseControl` component.
+		 *
+		 * It should only be used in cases where the children being rendered inside `BaseControl` are already accessibly labeled,
+		 * e.g., a button, but we want an additional visual label for that section equivalent to the labels `BaseControl` would
+		 * otherwise use if the `label` prop was passed.
+		 *
+		 * ```jsx
+		 * import { BaseControl } from '@wordpress/components';
+		 *
+		 * const MyBaseControl = () => (
+		 * 	<BaseControl
+		 * 		__nextHasNoMarginBottom
+		 * 		help="This button is already accessibly labeled."
+		 * 	>
+		 * 		<BaseControl.VisualLabel>Author</BaseControl.VisualLabel>
+		 * 		<Button>Select an author</Button>
+		 * 	</BaseControl>
+		 * );
+		 * ```
+		 */
+		VisualLabel,
+	}
 );
 
 export default BaseControl;

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

@@ -37,7 +37,7 @@ export const StyledField = styled.div`
 const labelStyles = css`
 	${ baseLabelTypography };
 
-	display: inline-block;
+	display: block;
 	margin-bottom: ${ space( 2 ) };
 	/**
 	 * Removes Chrome/Safari/Firefox user agent stylesheet padding from

package/src/base-control/types.ts

@@ -10,6 +10,13 @@ export type BaseControlProps = {
 	 * @default false
 	 */
 	__nextHasNoMarginBottom?: boolean;
+	/**
+	 * Temporary private prop for showing better deprecation messages,
+	 * e.g. `Some feature from wp.components.${ __associatedWPControl } is deprecated`.
+	 *
+	 * @ignore
+	 */
+	__associatedWPComponentName?: string;
 	/**
 	 * The HTML `id` of the control element (passed in as a child to `BaseControl`) to which labels and help text are being generated.
 	 * This is necessary to accessibly associate the label with that element.

package/src/border-box-control/border-box-control/README.md

@@ -169,3 +169,10 @@ const splitBorders = {
 ```
 
 - Required: No
+
+### `__next40pxDefaultSize`: `boolean`
+
+Start opting into the larger default height that will become the default size in a future version.
+
+- Required: No
+- Default: `false`

package/src/border-control/border-control/README.md

@@ -173,3 +173,10 @@ Flags whether this `BorderControl` should also render a `RangeControl` for
 additional control over a border's width.
 
 - Required: No
+
+### `__next40pxDefaultSize`: `boolean`
+
+Start opting into the larger default height that will become the default size in a future version.
+
+- Required: No
+- Default: `false`

package/src/border-control/styles.ts

@@ -16,10 +16,6 @@ import {
 
 import type { Border } from './types';
 
-const labelStyles = css`
-	font-weight: 500;
-`;
-
 const focusBoxShadow = css`
 	box-shadow: inset ${ CONFIG.controlBoxShadowFocus };
 `;
@@ -103,7 +99,7 @@ export const colorIndicatorWrapper = (
 	const { style } = border || {};
 
 	return css`
-		border-radius: 9999px;
+		border-radius: ${ CONFIG.radiusFull };
 		border: 2px solid transparent;
 		${ style ? colorIndicatorBorder( border ) : undefined }
 		width: ${ size === '__unstable-large' ? '24px' : '22px' };
@@ -140,7 +136,6 @@ export const borderControlPopoverControls = css`
 
 	> div:first-of-type > ${ StyledLabel } {
 		margin-bottom: 0;
-		${ labelStyles }
 	}
 
 	&& ${ StyledLabel } + button:not( .has-text ) {

package/src/button/README.md

@@ -292,6 +292,13 @@ Specifies the button's style. The accepted values are `'primary'` (the primary b
 
 -   Required: No
 
+#### `__next40pxDefaultSize`: `boolean`
+
+Start opting into the larger default height that will become the default size in a future version.
+
+- Required: No
+- Default: `false`
+
 ## Related components
 
 -   To group buttons together, use the [ButtonGroup](/packages/components/src/button-group/README.md) component.

package/src/button/stories/e2e/index.story.tsx

@@ -31,28 +31,110 @@ export const VariantStates: StoryFn< typeof Button > = (
 		'link',
 	];
 
-	return (
-		<div style={ { display: 'flex', flexDirection: 'column', gap: 24 } }>
-			{ variants.map( ( variant ) => (
-				<div
-					style={ { display: 'flex', gap: 8 } }
-					key={ variant ?? 'undefined' }
+	const VariantsRow = ( {
+		buttonProps,
+		name,
+	}: {
+		buttonProps?: ButtonAsButtonProps;
+		name: string;
+	} ) => {
+		return (
+			<tr>
+				<th
+					style={ {
+						fontSize: 13,
+						fontWeight: 'normal',
+						padding: 8,
+						background: '#f3f4f5',
+					} }
 				>
-					<Button { ...props } variant={ variant } />
-					{ /* eslint-disable-next-line no-restricted-syntax */ }
-					<Button { ...props } variant={ variant } disabled />
-					<Button
-						{ ...props }
-						variant={ variant }
-						disabled
-						accessibleWhenDisabled
-					/>
-					<Button { ...props } variant={ variant } isBusy />
-					<Button { ...props } variant={ variant } isDestructive />
-					<Button { ...props } variant={ variant } isPressed />
-				</div>
-			) ) }
-		</div>
+					{ name }
+				</th>
+				{ variants.map( ( variant ) => (
+					<td key={ variant ?? 'undefined' } style={ { padding: 4 } }>
+						<Button
+							{ ...props }
+							variant={ variant }
+							{ ...buttonProps }
+						/>
+					</td>
+				) ) }
+			</tr>
+		);
+	};
+
+	return (
+		<table>
+			<thead>
+				<tr style={ { background: '#f3f4f5' } }>
+					<th />
+					{ variants.map( ( variant ) => (
+						<th
+							key={ variant ?? 'undefined' }
+							style={ { padding: 8 } }
+						>
+							{ variant ?? '(default)' }
+						</th>
+					) ) }
+				</tr>
+			</thead>
+			<tbody>
+				<VariantsRow name="(default)" />
+				<VariantsRow
+					name="disabled"
+					buttonProps={ { disabled: true } }
+				/>
+				<VariantsRow
+					name="focusable disabled"
+					buttonProps={ {
+						accessibleWhenDisabled: true,
+						disabled: true,
+					} }
+				/>
+				<VariantsRow
+					name="isBusy"
+					buttonProps={ {
+						isBusy: true,
+					} }
+				/>
+				<VariantsRow
+					name="isBusy disabled"
+					buttonProps={ {
+						isBusy: true,
+						accessibleWhenDisabled: true,
+						disabled: true,
+					} }
+				/>
+				<VariantsRow
+					name="isDestructive"
+					buttonProps={ {
+						isDestructive: true,
+					} }
+				/>
+				<VariantsRow
+					name="isDestructive disabled"
+					buttonProps={ {
+						isDestructive: true,
+						accessibleWhenDisabled: true,
+						disabled: true,
+					} }
+				/>
+				<VariantsRow
+					name="isPressed"
+					buttonProps={ {
+						isPressed: true,
+					} }
+				/>
+				<VariantsRow
+					name="isPressed disabled"
+					buttonProps={ {
+						isPressed: true,
+						accessibleWhenDisabled: true,
+						disabled: true,
+					} }
+				/>
+			</tbody>
+		</table>
 	);
 };
 VariantStates.args = {