@wordpress/components 25.13.0 → 25.15.1-next.79a6196f.0

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

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { render, screen, waitFor, within } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
+import { press, click } from '@ariakit/test';
 
 /**
  * Internal dependencies
@@ -37,11 +37,9 @@ describe( 'AlignmentMatrixControl', () => {
 		} );
 
 		it( 'should be centered by default', async () => {
-			const user = userEvent.setup();
-
 			await renderAndInitCompositeStore( <AlignmentMatrixControl /> );
 
-			await user.tab();
+			await press.Tab();
 
 			expect( getCell( 'center center' ) ).toHaveFocus();
 		} );
@@ -60,7 +58,6 @@ describe( 'AlignmentMatrixControl', () => {
 					'bottom center',
 					'bottom right',
 				] )( '%s', async ( alignment ) => {
-					const user = userEvent.setup();
 					const spy = jest.fn();
 
 					await renderAndInitCompositeStore(
@@ -72,14 +69,13 @@ describe( 'AlignmentMatrixControl', () => {
 
 					const cell = getCell( alignment );
 
-					await user.click( cell );
+					await click( cell );
 
 					expect( cell ).toHaveFocus();
 					expect( spy ).toHaveBeenCalledWith( alignment );
 				} );
 
 				it( 'unless already focused', async () => {
-					const user = userEvent.setup();
 					const spy = jest.fn();
 
 					await renderAndInitCompositeStore(
@@ -91,7 +87,7 @@ describe( 'AlignmentMatrixControl', () => {
 
 					const cell = getCell( 'center center' );
 
-					await user.click( cell );
+					await click( cell );
 
 					expect( cell ).toHaveFocus();
 					expect( spy ).not.toHaveBeenCalled();
@@ -106,16 +102,15 @@ describe( 'AlignmentMatrixControl', () => {
 					[ 'ArrowLeft', 'center left' ],
 					[ 'ArrowDown', 'bottom center' ],
 					[ 'ArrowRight', 'center right' ],
-				] )( '%s', async ( keyRef, cellRef ) => {
-					const user = userEvent.setup();
+				] as const )( '%s', async ( keyRef, cellRef ) => {
 					const spy = jest.fn();
 
 					await renderAndInitCompositeStore(
 						<AlignmentMatrixControl onChange={ spy } />
 					);
 
-					await user.tab();
-					await user.keyboard( `[${ keyRef }]` );
+					await press.Tab();
+					await press[ keyRef ]();
 
 					expect( getCell( cellRef ) ).toHaveFocus();
 					expect( spy ).toHaveBeenCalledWith( cellRef );
@@ -128,8 +123,7 @@ describe( 'AlignmentMatrixControl', () => {
 					[ 'ArrowLeft', 'top left' ],
 					[ 'ArrowDown', 'bottom right' ],
 					[ 'ArrowRight', 'bottom right' ],
-				] )( '%s', async ( keyRef, cellRef ) => {
-					const user = userEvent.setup();
+				] as const )( '%s', async ( keyRef, cellRef ) => {
 					const spy = jest.fn();
 
 					await renderAndInitCompositeStore(
@@ -137,8 +131,8 @@ describe( 'AlignmentMatrixControl', () => {
 					);
 
 					const cell = getCell( cellRef );
-					await user.click( cell );
-					await user.keyboard( `[${ keyRef }]` );
+					await click( cell );
+					await press[ keyRef ]();
 
 					expect( cell ).toHaveFocus();
 					expect( spy ).toHaveBeenCalledWith( cellRef );

package/src/base-control/index.tsx

@@ -16,6 +16,7 @@ import {
 	StyledVisualLabel,
 } from './styles/base-control-styles';
 import type { WordPressComponentProps } from '../context';
+import { contextConnectWithoutRef, useContextSystem } from '../context';
 
 export { useBaseControlProps } from './hooks';
 
@@ -42,19 +43,21 @@ export { useBaseControlProps } from './hooks';
  * );
  * ```
  */
-export const BaseControl = ( {
-	__nextHasNoMarginBottom = false,
-	id,
-	label,
-	hideLabelFromVision = false,
-	help,
-	className,
-	children,
-}: BaseControlProps ) => {
+const UnconnectedBaseControl = (
+	props: WordPressComponentProps< BaseControlProps, null >
+) => {
+	const {
+		__nextHasNoMarginBottom = false,
+		id,
+		label,
+		hideLabelFromVision = false,
+		help,
+		className,
+		children,
+	} = useContextSystem( props, 'BaseControl' );
+
 	return (
-		<Wrapper
-			className={ classnames( 'components-base-control', className ) }
-		>
+		<Wrapper className={ className }>
 			<StyledField
 				className="components-base-control__field"
 				// TODO: Official deprecation for this should start after all internal usages have been migrated
@@ -79,9 +82,7 @@ export const BaseControl = ( {
 					( hideLabelFromVision ? (
 						<VisuallyHidden as="label">{ label }</VisuallyHidden>
 					) : (
-						<BaseControl.VisualLabel>
-							{ label }
-						</BaseControl.VisualLabel>
+						<VisualLabel>{ label }</VisualLabel>
 					) ) }
 				{ children }
 			</StyledField>
@@ -132,6 +133,10 @@ export const VisualLabel = ( {
 		</StyledVisualLabel>
 	);
 };
-BaseControl.VisualLabel = VisualLabel;
+
+export const BaseControl = Object.assign(
+	contextConnectWithoutRef( UnconnectedBaseControl, 'BaseControl' ),
+	{ VisualLabel }
+);
 
 export default BaseControl;

package/src/border-box-control/border-box-control-linked-button/component.tsx

@@ -29,7 +29,7 @@ const BorderBoxControlLinkedButton = (
 			<View className={ className }>
 				<Button
 					{ ...buttonProps }
-					isSmall
+					size="small"
 					icon={ isLinked ? link : linkOff }
 					iconSize={ 24 }
 					aria-label={ label }

package/src/border-control/border-control-dropdown/component.tsx

@@ -149,6 +149,7 @@ const BorderControlDropdown = (
 		popoverControlsClassName,
 		resetButtonClassName,
 		showDropdownHeader,
+		size,
 		__unstablePopoverProps,
 		...otherProps
 	} = useBorderControlDropdown( props );
@@ -178,6 +179,7 @@ const BorderControlDropdown = (
 			tooltipPosition={ dropdownPosition }
 			label={ __( 'Border color and style picker' ) }
 			showTooltip={ true }
+			__next40pxDefaultSize={ size === '__unstable-large' ? true : false }
 		>
 			<span className={ indicatorWrapperClassName }>
 				<ColorIndicator
@@ -198,7 +200,7 @@ const BorderControlDropdown = (
 						<HStack>
 							<StyledLabel>{ __( 'Border color' ) }</StyledLabel>
 							<Button
-								isSmall
+								size="small"
 								label={ __( 'Close border color' ) }
 								icon={ closeSmall }
 								onClick={ onClose }

package/src/border-control/border-control-dropdown/hook.ts

@@ -57,8 +57,8 @@ export function useBorderControlDropdown(
 	// Generate class names.
 	const cx = useCx();
 	const classes = useMemo( () => {
-		return cx( styles.borderControlDropdown( size ), className );
-	}, [ className, cx, size ] );
+		return cx( styles.borderControlDropdown, className );
+	}, [ className, cx ] );
 
 	const indicatorClassName = useMemo( () => {
 		return cx( styles.borderColorIndicator );
@@ -95,6 +95,7 @@ export function useBorderControlDropdown(
 		popoverContentClassName,
 		popoverControlsClassName,
 		resetButtonClassName,
+		size,
 		__experimentalIsRenderedInSidebar,
 	};
 }

package/src/border-control/border-control-style-picker/component.tsx

@@ -63,7 +63,7 @@ const BorderControlStylePicker = (
 						key={ borderStyle.value }
 						className={ buttonClassName }
 						icon={ borderStyle.icon }
-						isSmall
+						size="small"
 						isPressed={ borderStyle.value === value }
 						onClick={ () =>
 							onChange(

package/src/border-control/styles.ts

@@ -59,18 +59,11 @@ export const wrapperHeight = ( size?: 'default' | '__unstable-large' ) => {
 	`;
 };
 
-export const borderControlDropdown = (
-	size?: 'default' | '__unstable-large'
-) => css`
+export const borderControlDropdown = css`
 	background: #fff;
 
 	&& > button {
-		/*
-		 * Override button component styles to fit within BorderControl
-		 * regardless of size.
-		 */
-		height: ${ size === '__unstable-large' ? '40px' : '30px' };
-		width: ${ size === '__unstable-large' ? '40px' : '30px' };
+		aspect-ratio: 1;
 		padding: 0;
 		display: flex;
 		align-items: center;

package/src/box-control/index.tsx

@@ -167,7 +167,7 @@ function BoxControl( {
 						<Button
 							className="component-box-control__reset-button"
 							variant="secondary"
-							isSmall
+							size="small"
 							onClick={ handleOnReset }
 							disabled={ ! isDirty }
 						>

package/src/box-control/linked-button.tsx

@@ -21,7 +21,7 @@ export default function LinkedButton( {
 			<Button
 				{ ...props }
 				className="component-box-control__linked-button"
-				isSmall
+				size="small"
 				icon={ isLinked ? link : linkOff }
 				iconSize={ 24 }
 				aria-label={ label }

package/src/button/README.md

@@ -4,12 +4,6 @@ Buttons let users take actions and make choices with a single click or tap.
 
 ![Button components](https://make.wordpress.org/design/files/2019/03/button.png)
 
-## Table of contents
-
-1. [Design guidelines](#design-guidelines)
-2. [Development guidelines](#development-guidelines)
-3. [Related components](#related-components)
-
 ## Design guidelines
 
 ### Usage
@@ -182,6 +176,14 @@ Renders a red text-based button style to indicate destructive behavior.
 
 -   Required: No
 
+#### `isLink`: `boolean`
+
+Deprecated: Renders a button with an anchor style.
+Use `variant` prop with `link` value instead.
+
+-   Required: No
+-   Default: `false`
+
 #### `isPressed`: `boolean`
 
 Renders a pressed button style.
@@ -190,6 +192,22 @@ If the native `aria-pressed` attribute is also set, it will take precedence.
 
 -   Required: No
 
+#### `isPrimary`: `boolean`
+
+Deprecated: Renders a primary button style.
+Use `variant` prop with `primary` value instead.
+
+-   Required: No
+-   Default: `false`
+
+#### `isSecondary`: `boolean`
+
+Deprecated: Renders a default button style.
+Use `variant` prop with `secondary` value instead.
+
+-   Required: No
+-   Default: `false`
+
 #### `isSmall`: `boolean`
 
 Decreases the size of the button.
@@ -198,6 +216,14 @@ Deprecated in favor of the `size` prop. If both props are defined, the `size` pr
 
 -   Required: No
 
+#### `isTertiary`: `boolean`
+
+Deprecated: Renders a text-based button style.
+Use `variant` prop with `tertiary` value instead.
+
+-   Required: No
+-   Default: `false`
+
 #### `label`: `string`
 
 Sets the `aria-label` of the component, if none is provided. Sets the Tooltip content if `showTooltip` is provided.

package/src/button/index.tsx

@@ -156,7 +156,7 @@ export function UnforwardedButton(
 		'is-busy': isBusy,
 		'is-link': variant === 'link',
 		'is-destructive': isDestructive,
-		'has-text': !! icon && hasChildren,
+		'has-text': !! icon && ( hasChildren || text ),
 		'has-icon': !! icon,
 	} );
 

package/src/button-group/README.md

@@ -4,12 +4,6 @@ ButtonGroup can be used to group any related buttons together. To emphasize rela
 
 ![ButtonGroup component](https://wordpress.org/gutenberg/files/2018/12/s_96EC471FE9C9D91A996770229947AAB54A03351BDE98F444FD3C1BF0CED365EA_1541792995815_ButtonGroup.png)
 
-## Table of contents
-
-1. [Design guidelines](#design-guidelines)
-2. [Development guidelines](#development-guidelines)
-3. [Related components](#related-components)
-
 ## Design guidelines
 
 ### Usage

package/src/card/card/README.md

@@ -99,7 +99,7 @@ const Example = () => (
 		<CardMedia>
 			<img src="..." />
 		</CardMedia>
-		<CardHeader>...</CardHeader>
+		<CardFooter>...</CardFooter>
 	</Card>
 );
 ```

package/src/checkbox-control/README.md

@@ -2,15 +2,7 @@
 
 Checkboxes allow the user to select one or more items from a set.
 
-![](https://make.wordpress.org/design/files/2019/02/CheckboxControl.png)
-
-Selected and unselected checkboxes
-
-## Table of contents
-
-1. [Design guidelines](#design-guidelines)
-2. [Development guidelines](#development-guidelines)
-3. [Related components](#related-components)
+![Selected and unselected checkboxes](https://make.wordpress.org/design/files/2019/02/CheckboxControl.png)
 
 ## Design guidelines
 
@@ -77,11 +69,12 @@ const MyCheckboxControl = () => {
 The set of props accepted by the component will be specified below.
 Props not included in this set will be applied to the input element.
 
-#### `label`: `string`
+#### `label`: `string|false`
 
 A label for the input field, that appears at the side of the checkbox.
 The prop will be rendered as content a label element.
 If no prop is passed an empty label is rendered.
+If the prop is set to false no label is rendered.
 
 -   Required: No
 

package/src/checkbox-control/index.tsx

@@ -125,12 +125,14 @@ export function CheckboxControl(
 					/>
 				) : null }
 			</span>
-			<label
-				className="components-checkbox-control__label"
-				htmlFor={ id }
-			>
-				{ label }
-			</label>
+			{ label && (
+				<label
+					className="components-checkbox-control__label"
+					htmlFor={ id }
+				>
+					{ label }
+				</label>
+			) }
 		</BaseControl>
 	);
 }

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

@@ -5,14 +5,14 @@ Snapshot Diff:
 - First value
 + Second value
 
-@@ -8,17 +8,31 @@
+@@ -8,13 +8,27 @@
         <span
           class="components-checkbox-control__input-container"
         >
           <input
             class="components-checkbox-control__input"
--           id="inspector-checkbox-control-5"
-+           id="inspector-checkbox-control-6"
+-           id="inspector-checkbox-control-6"
++           id="inspector-checkbox-control-7"
             type="checkbox"
             value="1"
 +         />
@@ -31,11 +31,6 @@ Snapshot Diff:
             />
 +         </svg>
         </span>
-        <label
-          class="components-checkbox-control__label"
--         for="inspector-checkbox-control-5"
-+         for="inspector-checkbox-control-6"
-        />
       </div>
     </div>
   </div>

package/src/checkbox-control/test/index.tsx

@@ -60,6 +60,13 @@ describe( 'CheckboxControl', () => {
 			expect( label ).toBeInTheDocument();
 		} );
 
+		it( 'should not render label element if label is set to false', () => {
+			render( <CheckboxControl label={ false } /> );
+
+			const label = screen.queryByRole( 'label' );
+			expect( label ).not.toBeInTheDocument();
+		} );
+
 		it( 'should render a checkbox in an indeterminate state', () => {
 			render( <CheckboxControl indeterminate /> );
 			expect( getInput() ).toHaveProperty( 'indeterminate', true );

package/src/checkbox-control/types.ts

@@ -19,9 +19,10 @@ export type CheckboxControlProps = Pick<
 	/**
 	 * A label for the input field, that appears at the side of the checkbox.
 	 * The prop will be rendered as content a label element. If no prop is
-	 * passed an empty label is rendered.
+	 * passed an empty label is rendered. If the prop is set to false no label
+	 * is rendered.
 	 */
-	label?: string;
+	label?: string | false;
 	/**
 	 * If checked is true the checkbox will be checked. If checked is false the
 	 * checkbox will be unchecked. If no value is passed the checkbox will be

package/src/color-palette/index.native.js

@@ -33,7 +33,7 @@ let scrollPosition = 0;
 let customIndicatorWidth = 0;
 
 function ColorPalette( {
-	enableCustomColor = true,
+	enableCustomColor = false,
 	setColor,
 	activeColor,
 	isGradientColor,
@@ -62,24 +62,35 @@ function ColorPalette( {
 	const scale = useRef( new Animated.Value( 1 ) ).current;
 	const opacity = useRef( new Animated.Value( 1 ) ).current;
 
-	const defaultColors = [
+	const mergedColors = [
 		...new Set(
 			( defaultSettings.colors ?? [] ).map( ( { color } ) => color )
 		),
 	];
-	const mergedColors = [
+	const mergedGradients = [
+		...new Set(
+			( defaultSettings.gradients ?? [] ).map(
+				( { gradient } ) => gradient
+			)
+		),
+	];
+	const allAvailableColors = [
 		...new Set(
 			( defaultSettings.allColors ?? [] ).map( ( { color } ) => color )
 		),
 	];
-	const defaultGradientColors = [
+	const allAvailableGradients = [
 		...new Set(
-			( defaultSettings.gradients ?? [] ).map(
+			( defaultSettings.allGradients ?? [] ).map(
 				( { gradient } ) => gradient
 			)
 		),
 	];
-	const colors = isGradientSegment ? defaultGradientColors : defaultColors;
+
+	const colors = isGradientSegment ? mergedGradients : mergedColors;
+	const allColors = isGradientSegment
+		? allAvailableGradients
+		: allAvailableColors;
 
 	const customIndicatorColor = isGradientSegment
 		? activeColor
@@ -110,7 +121,7 @@ function ColorPalette( {
 
 	function isSelectedCustom() {
 		const isWithinColors =
-			activeColor && mergedColors && mergedColors.includes( activeColor );
+			activeColor && allColors?.includes( activeColor );
 		if ( enableCustomColor && activeColor ) {
 			if ( isGradientSegment ) {
 				return isGradientColor && ! isWithinColors;

package/src/color-picker/color-copy-button.tsx

@@ -62,7 +62,7 @@ export const ColorCopyButton = ( props: ColorCopyButtonProps ) => {
 			}
 		>
 			<CopyButton
-				isSmall
+				size="small"
 				ref={ copyRef }
 				icon={ copy }
 				showTooltip={ false }

package/src/combobox-control/README.md

@@ -2,12 +2,6 @@
 
 `ComboboxControl` is an enhanced version of a [`SelectControl`](/packages/components/src/select-control/README.md), with the addition of being able to search for options using a search input.
 
-## Table of contents
-
-1. [Design guidelines](#design-guidelines)
-2. [Development guidelines](#development-guidelines)
-3. [Related components](#related-components)
-
 ## Design guidelines
 
 These are the same as [the ones for `SelectControl`s](/packages/components/src/select-control/README.md#design-guidelines), but this component is better suited for when there are too many items to scroll through or load at once so you need to filter them based on user input.