@wordpress/components 19.14.0 → 19.17.0

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

@@ -58,8 +58,15 @@ const clickButton = ( name ) => {
 	fireEvent.click( getButton( name ) );
 };
 
+const getSliderInput = () => {
+	return screen.getByRole( 'slider', { name: 'Border width' } );
+};
+
+const getWidthInput = () => {
+	return screen.getByRole( 'spinbutton', { name: 'Border width' } );
+};
 const setWidthInput = ( value ) => {
-	const widthInput = screen.getByRole( 'spinbutton' );
+	const widthInput = getWidthInput();
 	widthInput.focus();
 	fireEvent.change( widthInput, { target: { value } } );
 };
@@ -73,9 +80,13 @@ describe( 'BorderControl', () => {
 
 			const label = screen.getByText( props.label );
 			const colorButton = screen.getByLabelText( toggleLabelRegex );
-			const widthInput = screen.getByRole( 'spinbutton' );
-			const unitSelect = screen.getByRole( 'combobox' );
-			const slider = screen.queryByRole( 'slider' );
+			const widthInput = getWidthInput();
+			const unitSelect = screen.getByRole( 'combobox', {
+				name: 'Select unit',
+			} );
+			const slider = screen.queryByRole( 'slider', {
+				name: 'Border width',
+			} );
 
 			expect( label ).toBeInTheDocument();
 			expect( colorButton ).toBeInTheDocument();
@@ -100,13 +111,13 @@ describe( 'BorderControl', () => {
 		it( 'should render with slider', () => {
 			renderBorderControl( { withSlider: true } );
 
-			const slider = screen.getByRole( 'slider' );
+			const slider = getSliderInput();
 			expect( slider ).toBeInTheDocument();
 		} );
 
 		it( 'should render placeholder in UnitControl', () => {
 			renderBorderControl( { placeholder: 'Mixed' } );
-			const widthInput = screen.getByRole( 'spinbutton' );
+			const widthInput = getWidthInput();
 
 			expect( widthInput ).toHaveAttribute( 'placeholder', 'Mixed' );
 		} );
@@ -262,7 +273,7 @@ describe( 'BorderControl', () => {
 		it( 'should update width with slider value', () => {
 			const { rerender } = renderBorderControl( { withSlider: true } );
 
-			const slider = screen.getByRole( 'slider' );
+			const slider = getSliderInput();
 			fireEvent.change( slider, { target: { value: '5' } } );
 
 			expect( props.onChange ).toHaveBeenNthCalledWith( 1, {
@@ -271,7 +282,7 @@ describe( 'BorderControl', () => {
 			} );
 
 			rerenderBorderControl( rerender, { withSlider: true } );
-			const widthInput = screen.getByRole( 'spinbutton' );
+			const widthInput = getWidthInput();
 
 			expect( widthInput.value ).toEqual( '5' );
 		} );

package/src/box-control/all-input-control.js

@@ -3,8 +3,8 @@
  */
 import UnitControl from './unit-control';
 import {
-	ALL_SIDES,
 	LABELS,
+	applyValueToSides,
 	getAllValue,
 	isValuesMixed,
 	isValuesDefined,
@@ -32,34 +32,10 @@ export default function AllInputControl( {
 		onFocus( event, { side: 'all' } );
 	};
 
-	// Applies a value to an object representing top, right, bottom and left
-	// sides while taking into account any custom side configuration.
-	const applyValueToSides = ( currentValues, newValue ) => {
-		const newValues = { ...currentValues };
-
-		if ( sides?.length ) {
-			sides.forEach( ( side ) => {
-				if ( side === 'vertical' ) {
-					newValues.top = newValue;
-					newValues.bottom = newValue;
-				} else if ( side === 'horizontal' ) {
-					newValues.left = newValue;
-					newValues.right = newValue;
-				} else {
-					newValues[ side ] = newValue;
-				}
-			} );
-		} else {
-			ALL_SIDES.forEach( ( side ) => ( newValues[ side ] = newValue ) );
-		}
-
-		return newValues;
-	};
-
 	const handleOnChange = ( next ) => {
 		const isNumeric = ! isNaN( parseFloat( next ) );
 		const nextValue = isNumeric ? next : undefined;
-		const nextValues = applyValueToSides( values, nextValue );
+		const nextValues = applyValueToSides( values, nextValue, sides );
 
 		onChange( nextValues );
 	};
@@ -67,7 +43,7 @@ export default function AllInputControl( {
 	// Set selected unit so it can be used as fallback by unlinked controls
 	// when individual sides do not have a value containing a unit.
 	const handleOnUnitChange = ( unit ) => {
-		const newUnits = applyValueToSides( selectedUnits, unit );
+		const newUnits = applyValueToSides( selectedUnits, unit, sides );
 		setSelectedUnits( newUnits );
 	};
 

package/src/box-control/axial-input-controls.js

@@ -106,7 +106,7 @@ export default function AxialInputControls( {
 
 	const first = filteredSides[ 0 ];
 	const last = filteredSides[ filteredSides.length - 1 ];
-	const only = first === last;
+	const only = first === last && first;
 
 	return (
 		<Layout

package/src/box-control/index.js

@@ -8,13 +8,13 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
+import { BaseControl } from '../base-control';
 import Button from '../button';
 import { FlexItem, FlexBlock } from '../flex';
 import AllInputControl from './all-input-control';
 import InputControls from './input-controls';
 import AxialInputControls from './axial-input-controls';
 import BoxControlIcon from './icon';
-import { Text } from '../text';
 import LinkedButton from './linked-button';
 import {
 	Root,
@@ -117,15 +117,12 @@ export default function BoxControl( {
 	};
 
 	return (
-		<Root id={ id } role="region" aria-labelledby={ headingId }>
+		<Root id={ id } role="group" aria-labelledby={ headingId }>
 			<Header className="component-box-control__header">
 				<FlexItem>
-					<Text
-						id={ headingId }
-						className="component-box-control__label"
-					>
+					<BaseControl.VisualLabel id={ headingId }>
 						{ label }
-					</Text>
+					</BaseControl.VisualLabel>
 				</FlexItem>
 				{ allowReset && (
 					<FlexItem>
@@ -173,3 +170,5 @@ export default function BoxControl( {
 		</Root>
 	);
 }
+
+export { applyValueToSides } from './utils';

package/src/box-control/styles/box-control-styles.js

@@ -8,7 +8,7 @@ import styled from '@emotion/styled';
  */
 import { Flex } from '../../flex';
 import BaseUnitControl from '../../unit-control';
-import { COLORS, rtl } from '../../utils';
+import { rtl } from '../../utils';
 
 export const Root = styled.div`
 	box-sizing: border-box;
@@ -18,7 +18,6 @@ export const Root = styled.div`
 `;
 
 export const Header = styled( Flex )`
-	color: ${ COLORS.ui.label };
 	margin-bottom: 8px;
 `;
 

package/src/box-control/utils.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { isEmpty } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -145,14 +140,12 @@ export function isValuesMixed( values = {}, selectedUnits, sides = ALL_SIDES ) {
 export function isValuesDefined( values ) {
 	return (
 		values !== undefined &&
-		! isEmpty(
-			Object.values( values ).filter(
-				// Switching units when input is empty causes values only
-				// containing units. This gives false positive on mixed values
-				// unless filtered.
-				( value ) => !! value && /\d/.test( value )
-			)
-		)
+		Object.values( values ).filter(
+			// Switching units when input is empty causes values only
+			// containing units. This gives false positive on mixed values
+			// unless filtered.
+			( value ) => !! value && /\d/.test( value )
+		).length > 0
 	);
 }
 
@@ -201,3 +194,35 @@ export function normalizeSides( sides ) {
 
 	return filteredSides;
 }
+
+/**
+ * Applies a value to an object representing top, right, bottom and left sides
+ * while taking into account any custom side configuration.
+ *
+ * @param {Object}        currentValues The current values for each side.
+ * @param {string|number} newValue      The value to apply to the sides object.
+ * @param {string[]}      sides         Array defining valid sides.
+ *
+ * @return {Object} Object containing the updated values for each side.
+ */
+export function applyValueToSides( currentValues, newValue, sides ) {
+	const newValues = { ...currentValues };
+
+	if ( sides?.length ) {
+		sides.forEach( ( side ) => {
+			if ( side === 'vertical' ) {
+				newValues.top = newValue;
+				newValues.bottom = newValue;
+			} else if ( side === 'horizontal' ) {
+				newValues.left = newValue;
+				newValues.right = newValue;
+			} else {
+				newValues[ side ] = newValue;
+			}
+		} );
+	} else {
+		ALL_SIDES.forEach( ( side ) => ( newValues[ side ] = newValue ) );
+	}
+
+	return newValues;
+}

package/src/button/README.md

@@ -62,7 +62,7 @@ Since a high-emphasis button commands the most attention, a layout should contai
 
 #### Text label
 
-All button types use text labels to describe the action that happens when a user taps a button. If there’s no text label, there should be an icon to signify what the button does.
+All button types use text labels to describe the action that happens when a user taps a button. If there’s no text label, there needs to be a [label](#label) added and an icon to signify what the button does.
 
 ![](https://make.wordpress.org/design/files/2019/03/do-link-button.png)
 

package/src/card/test/__snapshots__/index.js.snap

@@ -373,7 +373,7 @@ Object {
   will-change: box-shadow;
   border-radius: inherit;
   bottom: 0;
-  box-shadow: 0 0px 0px 0 rgba(0 ,0, 0, 0);
+  box-shadow: 0 0px 0px 0 rgba(0, 0, 0, 0);
   opacity: 1;
   left: 0;
   right: 0;
@@ -629,7 +629,7 @@ Object {
   will-change: box-shadow;
   border-radius: inherit;
   bottom: 0;
-  box-shadow: 0 0px 0px 0 rgba(0 ,0, 0, 0);
+  box-shadow: 0 0px 0px 0 rgba(0, 0, 0, 0);
   opacity: 1;
   left: 0;
   right: 0;
@@ -786,15 +786,15 @@ Snapshot Diff:
     </div>
     <div
       aria-hidden="true"
--     class="components-elevation css-1b4rkmt-View-Elevation-sx-Base-elevationClassName em57xhy0"
-+     class="components-elevation css-91yjwm-View-Elevation-sx-Base-elevationClassName em57xhy0"
+-     class="components-elevation css-1lsfy80-View-Elevation-sx-Base-elevationClassName em57xhy0"
++     class="components-elevation css-15t1t3g-View-Elevation-sx-Base-elevationClassName em57xhy0"
       data-wp-c16t="true"
       data-wp-component="Elevation"
     />
     <div
       aria-hidden="true"
--     class="components-elevation css-o8otup-View-Elevation-sx-Base-elevationClassName em57xhy0"
-+     class="components-elevation css-91yjwm-View-Elevation-sx-Base-elevationClassName em57xhy0"
+-     class="components-elevation css-18cl04p-View-Elevation-sx-Base-elevationClassName em57xhy0"
++     class="components-elevation css-15t1t3g-View-Elevation-sx-Base-elevationClassName em57xhy0"
       data-wp-c16t="true"
       data-wp-component="Elevation"
     />
@@ -829,7 +829,7 @@ exports[`Card Card component should warn when the isElevated prop is passed 1`]
   will-change: box-shadow;
   border-radius: inherit;
   bottom: 0;
-  box-shadow: 0 1px 2px 0 rgba(0 ,0, 0, 0.05);
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
   opacity: 1;
   left: 0;
   right: 0;
@@ -854,7 +854,7 @@ exports[`Card Card component should warn when the isElevated prop is passed 1`]
   will-change: box-shadow;
   border-radius: inherit;
   bottom: 0;
-  box-shadow: 0 2px 4px 0 rgba(0 ,0, 0, 0.1);
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
   opacity: 1;
   left: 0;
   right: 0;

package/src/color-palette/index.js

@@ -162,6 +162,13 @@ export const extractColorNameFromCurrentValue = (
 	return __( 'Custom' );
 };
 
+export const showTransparentBackground = ( currentValue ) => {
+	if ( typeof currentValue === 'undefined' ) {
+		return true;
+	}
+	return colord( currentValue ).alpha() === 0;
+};
+
 export default function ColorPalette( {
 	clearable = true,
 	className,
@@ -228,14 +235,18 @@ export default function ColorPalette( {
 							aria-haspopup="true"
 							onClick={ onToggle }
 							aria-label={ customColorAccessibleLabel }
-							style={ {
-								background: value,
-								color:
-									colordColor.contrast() >
-									colordColor.contrast( '#000' )
-										? '#fff'
-										: '#000',
-							} }
+							style={
+								showTransparentBackground( value )
+									? { color: '#000' }
+									: {
+											background: value,
+											color:
+												colordColor.contrast() >
+												colordColor.contrast( '#000' )
+													? '#fff'
+													: '#000',
+									  }
+							}
 						>
 							<FlexItem
 								isBlock

package/src/color-palette/style.scss

@@ -7,10 +7,15 @@
 	padding: $grid-unit-15;
 	font-family: inherit;
 	width: 100%;
+	// The background image creates a checkerboard pattern. Ignore rtlcss to
+	// make it work both in LTR and RTL.
+	// See https://github.com/WordPress/gutenberg/pull/42510
+	/*rtl:begin:ignore*/
 	background-image:
 		repeating-linear-gradient(45deg, $gray-200 25%, transparent 25%, transparent 75%, $gray-200 75%, $gray-200),
 		repeating-linear-gradient(45deg, $gray-200 25%, transparent 25%, transparent 75%, $gray-200 75%, $gray-200);
 	background-position: 0 0, 25px 25px;
+	/*rtl:end:ignore*/
 	background-size: calc(2 * 25px) calc(2 * 25px);
 	box-sizing: border-box;
 	color: $white;

package/src/color-palette/test/utils.ts

@@ -1,7 +1,10 @@
 /**
  * Internal dependencies
  */
-import { extractColorNameFromCurrentValue } from '../';
+import {
+	extractColorNameFromCurrentValue,
+	showTransparentBackground,
+} from '../';
 
 describe( 'ColorPalette: Utils', () => {
 	describe( 'extractColorNameFromCurrentValue', () => {
@@ -21,4 +24,19 @@ describe( 'ColorPalette: Utils', () => {
 			expect( result ).toBe( 'Blue' );
 		} );
 	} );
+	describe( 'showTransparentBackground', () => {
+		test( 'should return true for undefined color values', () => {
+			expect( showTransparentBackground( undefined ) ).toBe( true );
+		} );
+		test( 'should return true for transparent colors', () => {
+			expect( showTransparentBackground( 'transparent' ) ).toBe( true );
+			expect( showTransparentBackground( '#75757500' ) ).toBe( true );
+		} );
+
+		test( 'should return false for non-transparent colors', () => {
+			expect( showTransparentBackground( '#FFF' ) ).toBe( false );
+			expect( showTransparentBackground( '#757575' ) ).toBe( false );
+			expect( showTransparentBackground( '#f5f5f524' ) ).toBe( false ); // 0.14 alpha.
+		} );
+	} );
 } );

package/src/color-picker/hex-input.tsx

@@ -11,10 +11,10 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
+import { InputControl } from '../input-control';
 import { Text } from '../text';
 import { Spacer } from '../spacer';
 import { space } from '../ui/utils/space';
-import { ColorHexInputControl } from './styles';
 import { COLORS } from '../utils/colors-values';
 import type { StateReducer } from '../input-control/reducer/state';
 
@@ -49,11 +49,11 @@ export const HexInput = ( { color, onChange, enableAlpha }: HexInputProps ) => {
 	};
 
 	return (
-		<ColorHexInputControl
+		<InputControl
 			prefix={
 				<Spacer
 					as={ Text }
-					marginLeft={ space( 3.5 ) }
+					marginLeft={ space( 4 ) }
 					color={ COLORS.ui.theme }
 					lineHeight={ 1 }
 				>
@@ -65,7 +65,9 @@ export const HexInput = ( { color, onChange, enableAlpha }: HexInputProps ) => {
 			maxLength={ enableAlpha ? 9 : 7 }
 			label={ __( 'Hex color' ) }
 			hideLabelFromVision
+			size="__unstable-large"
 			__unstableStateReducer={ stateReducer }
+			__unstableInputWidth="9em"
 		/>
 	);
 };

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

@@ -8,7 +8,7 @@ import namesPlugin from 'colord/plugins/names';
 /**
  * WordPress dependencies
  */
-import { useState, useEffect, useRef } from '@wordpress/element';
+import { useState, useEffect } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { BottomSheet } from '@wordpress/components';
 import { usePreferredColorSchemeStyle } from '@wordpress/compose';
@@ -33,7 +33,6 @@ function ColorPicker( {
 	onHandleHardwareButtonPress,
 	bottomLabelText,
 } ) {
-	const didMount = useRef( false );
 	const isIOS = Platform.OS === 'ios';
 	const hitSlop = { top: 22, bottom: 22, left: 22, right: 22 };
 	const {
@@ -77,19 +76,17 @@ function ColorPicker( {
 		styles.footerDark
 	);
 
-	const currentColor = colord( {
-		h: hue,
-		s: sat * 100,
-		v: val * 100,
-	} ).toHex();
+	const combineToHex = ( h = hue, s = sat, v = val ) =>
+		colord( { h, s: s * 100, v: v * 100 } ).toHex();
 
-	useEffect( () => {
-		if ( ! didMount.current ) {
-			didMount.current = true;
-			return;
-		}
-		setColor( currentColor );
-	}, [ currentColor ] );
+	const currentColor = combineToHex();
+
+	const updateColor = ( { hue: h, saturation: s, value: v } ) => {
+		if ( h !== undefined ) setHue( h );
+		if ( s !== undefined ) setSaturation( s );
+		if ( v !== undefined ) setValue( v );
+		setColor( combineToHex( h, s, v ) );
+	};
 
 	useEffect( () => {
 		shouldEnableBottomSheetMaxHeight( false );
@@ -104,17 +101,13 @@ function ColorPicker( {
 		if ( onHandleHardwareButtonPress ) {
 			onHandleHardwareButtonPress( onButtonPress );
 		}
+		// TODO: Revisit this to discover if there's a good reason for omitting
+		// the hook’s dependencies and running it a single time. Ideally there
+		// may be a way to refactor and obviate the disabled lint rule. If not,
+		// this comment should be replaced by one that explains the reasoning.
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [] );
 
-	function onHuePickerChange( { hue: h } ) {
-		setHue( h );
-	}
-
-	function onSatValPickerChange( { saturation: s, value: v } ) {
-		setSaturation( s );
-		setValue( v );
-	}
-
 	function onButtonPress( action ) {
 		onNavigationBack();
 		onHandleClosingBottomSheet( null );
@@ -129,16 +122,16 @@ function ColorPicker( {
 		<>
 			<HsvColorPicker
 				huePickerHue={ hue }
-				onHuePickerDragMove={ onHuePickerChange }
+				onHuePickerDragMove={ updateColor }
 				onHuePickerPress={
-					! isBottomSheetContentScrolling && onHuePickerChange
+					! isBottomSheetContentScrolling && updateColor
 				}
 				satValPickerHue={ hue }
 				satValPickerSaturation={ sat }
 				satValPickerValue={ val }
-				onSatValPickerDragMove={ onSatValPickerChange }
+				onSatValPickerDragMove={ updateColor }
 				onSatValPickerPress={
-					! isBottomSheetContentScrolling && onSatValPickerChange
+					! isBottomSheetContentScrolling && updateColor
 				}
 				onSatValPickerDragStart={ () => {
 					shouldEnableBottomSheetScroll( false );

package/src/color-picker/input-with-slider.tsx

@@ -37,7 +37,7 @@ export const InputWithSlider = ( {
 				prefix={
 					<Spacer
 						as={ Text }
-						paddingLeft={ space( 3.5 ) }
+						paddingLeft={ space( 4 ) }
 						color={ COLORS.ui.theme }
 						lineHeight={ 1 }
 					>
@@ -45,6 +45,7 @@ export const InputWithSlider = ( {
 					</Spacer>
 				}
 				hideHTMLArrows
+				size="__unstable-large"
 			/>
 			<RangeControl
 				label={ label }
@@ -52,6 +53,8 @@ export const InputWithSlider = ( {
 				min={ min }
 				max={ max }
 				value={ value }
+				// @ts-expect-error
+				// See: https://github.com/WordPress/gutenberg/pull/40535#issuecomment-1172418185
 				onChange={ onChange }
 				withInputField={ false }
 			/>

package/src/color-picker/styles.ts

@@ -11,15 +11,14 @@ import InnerSelectControl from '../select-control';
 import InnerRangeControl from '../range-control';
 import { StyledField } from '../base-control/styles/base-control-styles';
 import { space } from '../ui/utils/space';
+import { boxSizingReset } from '../utils';
 import Button from '../button';
 import { Flex } from '../flex';
 import { HStack } from '../h-stack';
 import {
 	BackdropUI,
 	Container as InputControlContainer,
-	Input,
 } from '../input-control/styles/input-control-styles';
-import InputControl from '../input-control';
 import CONFIG from '../utils/config-values';
 
 export const NumberControlWrapper = styled( NumberControl )`
@@ -45,14 +44,6 @@ export const RangeControl = styled( InnerRangeControl )`
 	}
 `;
 
-// All inputs should be the same height so this should be changed at the component level.
-// That involves changing heights of multiple input types probably buttons too etc.
-// So until that is done we are already using the new height on the color picker so it matches the mockups.
-const inputHeightStyle = `
-&&& ${ Input } {
-	height: 40px;
-}`;
-
 // Make the Hue circle picker not go out of the bar.
 const interactiveHueStyles = `
 .react-colorful__interactive {
@@ -80,6 +71,8 @@ export const ColorInputWrapper = styled( Flex )`
 `;
 
 export const ColorfulWrapper = styled.div`
+	${ boxSizingReset };
+
 	width: 216px;
 
 	.react-colorful {
@@ -126,8 +119,6 @@ export const ColorfulWrapper = styled.div`
 	${ StyledField } {
 		margin-bottom: 0;
 	}
-
-	${ inputHeightStyle }
 `;
 
 export const CopyButton = styled( Button )`
@@ -140,7 +131,3 @@ export const CopyButton = styled( Button )`
 		}
 	}
 `;
-
-export const ColorHexInputControl = styled( InputControl )`
-	width: 8em;
-`;