@wordpress/components 21.1.2-next.4d3b314fd5.0 → 21.3.0

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

@@ -41,6 +41,9 @@ export function useBorderBoxControl(
 		? ( value as Borders )
 		: getSplitBorders( value as Border | undefined );
 
+	// If no numeric width value is set, the unit select will be disabled.
+	const hasWidthValue = ! isNaN( parseFloat( `${ linkedValue?.width }` ) );
+
 	const [ isLinked, setIsLinked ] = useState( ! mixedBorders );
 	const toggleLinked = () => setIsLinked( ! isLinked );
 
@@ -107,6 +110,7 @@ export function useBorderBoxControl(
 	return {
 		...otherProps,
 		className: classes,
+		disableUnits: mixedBorders && ! hasWidthValue,
 		hasMixedBorders: mixedBorders,
 		isLinked,
 		linkedControlClassName,

package/src/border-box-control/test/index.js

@@ -120,17 +120,20 @@ describe( 'BorderBoxControl', () => {
 			expect( widthInput.value ).toBe( '1' );
 		} );
 
-		it( 'should render placeholder when border values are mixed', () => {
+		it( 'should render placeholder and omit unit select when border values are mixed', () => {
 			renderBorderBoxControl( { value: mixedBorders } );
 
 			// First render of control with mixed values should show split view.
 			clickButton( 'Link sides' );
 
 			const widthInput = screen.getByRole( 'spinbutton' );
+			const unitSelect = screen.queryByRole( 'combobox' );
+
 			expect( widthInput ).toHaveAttribute( 'placeholder', 'Mixed' );
+			expect( unitSelect ).not.toBeInTheDocument();
 		} );
 
-		it( 'should render shared border width when switching to linked view', async () => {
+		it( 'should render shared border width and unit select when switching to linked view', async () => {
 			// Render control with mixed border values but consistent widths.
 			renderBorderBoxControl( {
 				value: {
@@ -144,8 +147,10 @@ describe( 'BorderBoxControl', () => {
 			// First render of control with mixed values should show split view.
 			clickButton( 'Link sides' );
 			const linkedInput = screen.getByRole( 'spinbutton' );
+			const unitSelect = screen.getByRole( 'combobox' );
 
 			expect( linkedInput.value ).toBe( '5' );
+			expect( unitSelect ).toBeInTheDocument();
 		} );
 
 		it( 'should omit style options when requested', () => {

package/src/border-box-control/test/utils.js

@@ -244,6 +244,54 @@ describe( 'BorderBoxControl Utils', () => {
 
 			expect( getCommonBorder( sideBorders ) ).toEqual( commonBorder );
 		} );
+
+		it( 'should return most common unit selection if border widths are mixed', () => {
+			const sideBorders = {
+				top: { color: '#fff', style: 'solid', width: '10px' },
+				right: { color: '#000', style: 'solid', width: '1rem' },
+				bottom: { color: '#000', style: 'solid', width: '2em' },
+				left: { color: '#000', style: undefined, width: '2em' },
+			};
+			const commonBorder = {
+				color: undefined,
+				style: undefined,
+				width: 'em',
+			};
+
+			expect( getCommonBorder( sideBorders ) ).toEqual( commonBorder );
+		} );
+
+		it( 'should return first unit when multiple units are equal most common', () => {
+			const sideBorders = {
+				top: { color: '#fff', style: 'solid', width: '1rem' },
+				right: { color: '#000', style: 'solid', width: '0.75em' },
+				bottom: { color: '#000', style: 'solid', width: '1vw' },
+				left: { color: '#000', style: undefined, width: '2vh' },
+			};
+			const commonBorder = {
+				color: undefined,
+				style: undefined,
+				width: 'rem',
+			};
+
+			expect( getCommonBorder( sideBorders ) ).toEqual( commonBorder );
+		} );
+
+		it( 'should ignore undefined values in determining most common unit', () => {
+			const sideBorders = {
+				top: { color: '#fff', style: 'solid', width: undefined },
+				right: { color: '#000', style: 'solid', width: '5vw' },
+				bottom: { color: '#000', style: 'solid', width: undefined },
+				left: { color: '#000', style: undefined, width: '2vh' },
+			};
+			const commonBorder = {
+				color: undefined,
+				style: undefined,
+				width: 'vw',
+			};
+
+			expect( getCommonBorder( sideBorders ) ).toEqual( commonBorder );
+		} );
 	} );
 
 	describe( 'getShorthandBorderStyle', () => {

package/src/border-box-control/utils.ts

@@ -6,6 +6,7 @@ import type { CSSProperties } from 'react';
 /**
  * Internal dependencies
  */
+import { parseCSSUnitValue } from '../utils/unit-values';
 import type { Border } from '../border-control/types';
 import type { AnyBorder, Borders, BorderProp, BorderSide } from './types';
 
@@ -123,7 +124,7 @@ export const getCommonBorder = ( borders?: Borders ) => {
 	return {
 		color: allColorsMatch ? colors[ 0 ] : undefined,
 		style: allStylesMatch ? styles[ 0 ] : undefined,
-		width: allWidthsMatch ? widths[ 0 ] : undefined,
+		width: allWidthsMatch ? widths[ 0 ] : getMostCommonUnit( widths ),
 	};
 };
 
@@ -152,3 +153,45 @@ export const getShorthandBorderStyle = (
 
 	return [ width, borderStyle, color ].filter( Boolean ).join( ' ' );
 };
+
+export const getMostCommonUnit = (
+	values: Array< string | number | undefined >
+): string | undefined => {
+	// Collect all the CSS units.
+	const units = values.map( ( value ) =>
+		value === undefined ? undefined : parseCSSUnitValue( `${ value }` )[ 1 ]
+	);
+
+	// Return the most common unit out of only the defined CSS units.
+	const filteredUnits = units.filter( ( value ) => value !== undefined );
+	return mode( filteredUnits as string[] );
+};
+
+/**
+ * Finds the mode value out of the array passed favouring the first value
+ * as a tiebreaker.
+ *
+ * @param  values Values to determine the mode from.
+ *
+ * @return The mode value.
+ */
+function mode( values: Array< string > ): string | undefined {
+	if ( values.length === 0 ) {
+		return undefined;
+	}
+
+	const map: { [ index: string ]: number } = {};
+	let maxCount = 0;
+	let currentMode;
+
+	values.forEach( ( value ) => {
+		map[ value ] = map[ value ] === undefined ? 1 : map[ value ] + 1;
+
+		if ( map[ value ] > maxCount ) {
+			currentMode = value;
+			maxCount = map[ value ];
+		}
+	} );
+
+	return currentMode;
+}

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

@@ -66,6 +66,12 @@ This toggles the ability to choose custom colors.
 
 - Required: No
 
+### `disableUnits`: `boolean`
+
+This controls whether unit selection should be disabled.
+
+- Required: No
+
 ### `enableAlpha`: `boolean`
 
 This controls whether the alpha channel will be offered when selecting

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

@@ -39,6 +39,7 @@ const UnconnectedBorderControl = (
 	const {
 		colors,
 		disableCustomColors,
+		disableUnits,
 		enableAlpha,
 		enableStyle = true,
 		hideLabelFromVision,
@@ -97,6 +98,7 @@ const UnconnectedBorderControl = (
 					onChange={ onWidthChange }
 					value={ border?.width || '' }
 					placeholder={ placeholder }
+					disableUnits={ disableUnits }
 					__unstableInputWidth={ inputWidth }
 				/>
 				{ withSlider && (

package/src/border-control/types.ts

@@ -67,6 +67,10 @@ export type LabelProps = {
 
 export type BorderControlProps = ColorProps &
 	LabelProps & {
+		/**
+		 * This controls whether unit selection should be disabled.
+		 */
+		disableUnits?: boolean;
 		/**
 		 * This controls whether to include border style options within the
 		 * `BorderDropdown` sub-component.

package/src/button/style.scss

@@ -20,7 +20,7 @@
 
 	&[aria-expanded="true"],
 	&:hover {
-		color: var(--wp-admin-theme-color);
+		color: $components-color-accent;
 	}
 
 	// Unset some hovers, instead of adding :not specificity.
@@ -31,7 +31,7 @@
 	// Focus.
 	// See https://github.com/WordPress/gutenberg/issues/13267 for more context on these selectors.
 	&:focus:not(:disabled) {
-		box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+		box-shadow: 0 0 0 var(--wp-admin-border-width-focus) $components-color-accent;
 
 		// Windows High Contrast mode will show this outline, but not the box-shadow.
 		outline: 3px solid transparent;
@@ -43,7 +43,7 @@
 
 	&.is-primary {
 		white-space: nowrap;
-		background: var(--wp-admin-theme-color);
+		background: $components-color-accent;
 		color: $white;
 		text-decoration: none;
 		text-shadow: none;
@@ -52,18 +52,18 @@
 		outline: 1px solid transparent;
 
 		&:hover:not(:disabled) {
-			background: var(--wp-admin-theme-color-darker-10);
+			background: $components-color-accent-darker-10;
 			color: $white;
 		}
 
 		&:active:not(:disabled) {
-			background: var(--wp-admin-theme-color-darker-20);
-			border-color: var(--wp-admin-theme-color-darker-20);
+			background: $components-color-accent-darker-20;
+			border-color: $components-color-accent-darker-20;
 			color: $white;
 		}
 
 		&:focus:not(:disabled) {
-			box-shadow: inset 0 0 0 1px $white, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+			box-shadow: inset 0 0 0 1px $white, 0 0 0 var(--wp-admin-border-width-focus) $components-color-accent;
 		}
 
 		&:disabled,
@@ -72,15 +72,15 @@
 		&[aria-disabled="true"]:enabled, // This catches a situation where a Button is aria-disabled, but not disabled.
 		&[aria-disabled="true"]:active:enabled {
 			color: rgba($white, 0.4);
-			background: var(--wp-admin-theme-color);
-			border-color: var(--wp-admin-theme-color);
+			background: $components-color-accent;
+			border-color: $components-color-accent;
 			opacity: 1;
 			outline: none;
 
 			&:focus:enabled {
 				box-shadow:
 					0 0 0 $border-width $white,
-					0 0 0 3px var(--wp-admin-theme-color);
+					0 0 0 3px $components-color-accent;
 			}
 		}
 
@@ -93,13 +93,13 @@
 			/* stylelint-disable */
 			background-image: linear-gradient(
 				-45deg,
-				var(--wp-admin-theme-color) 33%,
-				var(--wp-admin-theme-color-darker-20) 33%,
-				var(--wp-admin-theme-color-darker-20) 70%,
-				var(--wp-admin-theme-color) 70%
+				$components-color-accent 33%,
+				$components-color-accent-darker-20 33%,
+				$components-color-accent-darker-20 70%,
+				$components-color-accent 70%
 			);
 			/* stylelint-enable */
-			border-color: var(--wp-admin-theme-color);
+			border-color: $components-color-accent;
 		}
 	}
 
@@ -114,13 +114,13 @@
 
 		&:active:not(:disabled) {
 			background: $gray-300;
-			color: var(--wp-admin-theme-color-darker-10);
+			color: $components-color-accent-darker-10;
 			box-shadow: none;
 		}
 
 		&:hover:not(:disabled) {
-			color: var(--wp-admin-theme-color-darker-10);
-			box-shadow: inset 0 0 0 $border-width var(--wp-admin-theme-color-darker-10);
+			color: $components-color-accent-darker-10;
+			box-shadow: inset 0 0 0 $border-width $components-color-accent-darker-10;
 		}
 
 		&:disabled,
@@ -140,10 +140,10 @@
 	 */
 
 	&.is-secondary {
-		box-shadow: inset 0 0 0 $border-width var(--wp-admin-theme-color);
+		box-shadow: inset 0 0 0 $border-width $components-color-accent;
 		outline: 1px solid transparent; // Shown in high contrast mode.
 		white-space: nowrap;
-		color: var(--wp-admin-theme-color);
+		color: $components-color-accent;
 		background: transparent;
 	}
 
@@ -153,7 +153,7 @@
 
 	&.is-tertiary {
 		white-space: nowrap;
-		color: var(--wp-admin-theme-color);
+		color: $components-color-accent;
 		background: transparent;
 		padding: $grid-unit-15 * 0.5; // This reduces the horizontal padding on tertiary/text buttons, so as to space them optically.
 
@@ -182,7 +182,7 @@
 		}
 
 		&:focus:not(:disabled) {
-			color: var(--wp-admin-theme-color);
+			color: $components-color-accent;
 		}
 
 		&:active:not(:disabled) {
@@ -230,7 +230,7 @@
 		background: none;
 		outline: none;
 		text-align: left;
-		color: var(--wp-admin-theme-color);
+		color: $components-color-accent;
 		text-decoration: underline;
 		transition-property: border, background, color;
 		transition-duration: 0.05s;
@@ -253,7 +253,7 @@
 			}
 
 			&:focus:not(:disabled) {
-				color: var(--wp-admin-theme-color);
+				color: $components-color-accent;
 			}
 		}
 	}
@@ -333,7 +333,7 @@
 		background: $gray-900;
 
 		&:focus:not(:disabled) {
-			box-shadow: inset 0 0 0 1px $white, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+			box-shadow: inset 0 0 0 1px $white, 0 0 0 var(--wp-admin-border-width-focus) $components-color-accent;
 
 			// Windows High Contrast mode will show this outline, but not the box-shadow.
 			outline: 2px solid transparent;

package/src/button/test/index.js

@@ -27,7 +27,7 @@ describe( 'Button', () => {
 			expect( button ).not.toHaveClass( 'is-large' );
 			expect( button ).not.toHaveClass( 'is-primary' );
 			expect( button ).not.toHaveClass( 'is-pressed' );
-			expect( button ).not.toHaveAttribute( 'disabled' );
+			expect( button ).toBeEnabled();
 			expect( button ).not.toHaveAttribute( 'aria-disabled' );
 			expect( button ).toHaveAttribute( 'type', 'button' );
 		} );
@@ -114,16 +114,14 @@ describe( 'Button', () => {
 		it( 'should add a disabled prop to the button', () => {
 			render( <Button disabled /> );
 
-			expect( screen.getByRole( 'button' ) ).toHaveAttribute(
-				'disabled'
-			);
+			expect( screen.getByRole( 'button' ) ).toBeDisabled();
 		} );
 
 		it( 'should add only aria-disabled attribute when disabled and isFocusable are true', () => {
 			render( <Button disabled __experimentalIsFocusable /> );
 			const button = screen.getByRole( 'button' );
 
-			expect( button ).not.toHaveAttribute( 'disabled' );
+			expect( button ).toBeEnabled();
 			expect( button ).toHaveAttribute( 'aria-disabled' );
 		} );
 

package/src/combobox-control/index.js

@@ -247,11 +247,6 @@ function ComboboxControl( {
 								instanceId={ instanceId }
 								ref={ inputContainer }
 								value={ isExpanded ? inputValue : currentLabel }
-								aria-label={
-									currentLabel
-										? `${ currentLabel }, ${ label }`
-										: null
-								}
 								onFocus={ onFocus }
 								onBlur={ onBlur }
 								isExpanded={ isExpanded }

package/src/combobox-control/test/index.js

@@ -271,7 +271,7 @@ describe.each( [
 
 		// No options are rendered if no match is found
 		await user.keyboard( unmatchedString );
-		expect( screen.queryByRole( 'option' ) ).toBeNull();
+		expect( screen.queryByRole( 'option' ) ).not.toBeInTheDocument();
 
 		// Clearing the input renders all options again
 		await user.clear( input );

package/src/confirm-dialog/types.ts

@@ -3,7 +3,13 @@
  */
 import type { MouseEvent, KeyboardEvent, ReactNode } from 'react';
 
+/**
+ * Internal dependencies
+ */
+import type { ModalProps } from '../modal/types';
+
 export type DialogInputEvent =
+	| Parameters< ModalProps[ 'onRequestClose' ] >[ 0 ]
 	| KeyboardEvent< HTMLDivElement >
 	| MouseEvent< HTMLButtonElement >;
 

package/src/custom-select-control/index.js

@@ -1,3 +1,4 @@
+// @ts-nocheck
 /**
  * External dependencies
  */
@@ -15,7 +16,7 @@ import deprecated from '@wordpress/deprecated';
 /**
  * Internal dependencies
  */
-import { VisuallyHidden } from '../';
+import { VisuallyHidden } from '../visually-hidden';
 import { Select as SelectControlSelect } from '../select-control/styles/select-control-styles';
 import SelectControlChevronDown from '../select-control/chevron-down';
 import { InputBaseWithBackCompatMinWidth } from './styles';

package/src/date-time/time/test/index.tsx

@@ -303,12 +303,8 @@ describe( 'TimePicker', () => {
 		 * This is not ideal, but best of we can do for now until we refactor
 		 * AM/PM into accessible elements, like radio buttons.
 		 */
-		expect(
-			screen.getByText( 'AM' ).classList.contains( 'is-primary' )
-		).toBe( false );
-		expect(
-			screen.getByText( 'PM' ).classList.contains( 'is-primary' )
-		).toBe( true );
+		expect( screen.getByText( 'AM' ) ).not.toHaveClass( 'is-primary' );
+		expect( screen.getByText( 'PM' ) ).toHaveClass( 'is-primary' );
 	} );
 
 	it( 'should have different layouts/orders for 12/24 hour formats', () => {

package/src/disabled/index.tsx

@@ -1,13 +1,7 @@
-/**
- * External dependencies
- */
-import type { HTMLProps } from 'react';
-
 /**
  * WordPress dependencies
  */
-import { useDisabled } from '@wordpress/compose';
-import { createContext, forwardRef } from '@wordpress/element';
+import { createContext } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -20,15 +14,6 @@ import { useCx } from '../utils';
 const Context = createContext< boolean >( false );
 const { Consumer, Provider } = Context;
 
-// Extracting this ContentWrapper component in order to make it more explicit
-// the same 'ContentWrapper' component is needed so that React can reconcile
-// the dom correctly when switching between disabled/non-disabled (instead
-// of thrashing the previous DOM and therefore losing the form fields values).
-const ContentWrapper = forwardRef<
-	HTMLDivElement,
-	HTMLProps< HTMLDivElement >
->( ( props, ref ) => <div { ...props } ref={ ref } /> );
-
 /**
  * `Disabled` is a component which disables descendant tabbable elements and prevents pointer interaction.
  *
@@ -65,29 +50,22 @@ function Disabled( {
 	isDisabled = true,
 	...props
 }: WordPressComponentProps< DisabledProps, 'div' > ) {
-	const ref = useDisabled();
 	const cx = useCx();
-	if ( ! isDisabled ) {
-		return (
-			<Provider value={ false }>
-				<ContentWrapper>{ children }</ContentWrapper>
-			</Provider>
-		);
-	}
 
 	return (
-		<Provider value={ true }>
-			<ContentWrapper
-				ref={ ref }
-				className={ cx(
-					disabledStyles,
-					className,
-					'components-disabled'
-				) }
+		<Provider value={ isDisabled }>
+			<div
+				// @ts-ignore Reason: inert is a recent HTML attribute
+				inert={ isDisabled ? 'true' : undefined }
+				className={
+					isDisabled
+						? cx( disabledStyles, className, 'components-disabled' )
+						: undefined
+				}
 				{ ...props }
 			>
 				{ children }
-			</ContentWrapper>
+			</div>
 		</Provider>
 	);
 }