@wordpress/components 19.13.0 → 19.16.0

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

@@ -22,6 +22,7 @@ import { VStack } from '../../v-stack';
 import { contextConnect, WordPressComponentProps } from '../../ui/context';
 import { useBorderControlDropdown } from './hook';
 import { StyledLabel } from '../../base-control/styles/base-control-styles';
+import DropdownContentWrapper from '../../dropdown/dropdown-content-wrapper';
 
 import type {
 	Color,
@@ -141,7 +142,6 @@ const BorderControlDropdown = (
 		onReset,
 		onColorChange,
 		onStyleChange,
-		popoverClassName,
 		popoverContentClassName,
 		popoverControlsClassName,
 		resetButtonClassName,
@@ -176,6 +176,8 @@ const BorderControlDropdown = (
 			variant="tertiary"
 			aria-label={ toggleAriaLabel }
 			position={ dropdownPosition }
+			label={ __( 'Border color and style picker' ) }
+			showTooltip={ true }
 		>
 			<span className={ indicatorWrapperClassName }>
 				<ColorIndicator
@@ -188,51 +190,55 @@ const BorderControlDropdown = (
 
 	const renderContent = ( { onClose }: PopoverProps ) => (
 		<>
-			<VStack className={ popoverControlsClassName } spacing={ 6 }>
-				{ showDropdownHeader ? (
-					<HStack>
-						<StyledLabel>{ __( 'Border color' ) }</StyledLabel>
-						<Button
-							isSmall
-							label={ __( 'Close border color' ) }
-							icon={ closeSmall }
-							onClick={ onClose }
-						/>
-					</HStack>
-				) : undefined }
-				<ColorPalette
-					className={ popoverContentClassName }
-					value={ color }
-					onChange={ onColorChange }
-					{ ...{ colors, disableCustomColors } }
-					__experimentalHasMultipleOrigins={
-						__experimentalHasMultipleOrigins
-					}
-					__experimentalIsRenderedInSidebar={
-						__experimentalIsRenderedInSidebar
-					}
-					clearable={ false }
-					enableAlpha={ enableAlpha }
-				/>
-				{ enableStyle && (
-					<BorderControlStylePicker
-						label={ __( 'Style' ) }
-						value={ style }
-						onChange={ onStyleChange }
+			<DropdownContentWrapper paddingSize="medium">
+				<VStack className={ popoverControlsClassName } spacing={ 6 }>
+					{ showDropdownHeader ? (
+						<HStack>
+							<StyledLabel>{ __( 'Border color' ) }</StyledLabel>
+							<Button
+								isSmall
+								label={ __( 'Close border color' ) }
+								icon={ closeSmall }
+								onClick={ onClose }
+							/>
+						</HStack>
+					) : undefined }
+					<ColorPalette
+						className={ popoverContentClassName }
+						value={ color }
+						onChange={ onColorChange }
+						{ ...{ colors, disableCustomColors } }
+						__experimentalHasMultipleOrigins={
+							__experimentalHasMultipleOrigins
+						}
+						__experimentalIsRenderedInSidebar={
+							__experimentalIsRenderedInSidebar
+						}
+						clearable={ false }
+						enableAlpha={ enableAlpha }
 					/>
-				) }
-			</VStack>
+					{ enableStyle && (
+						<BorderControlStylePicker
+							label={ __( 'Style' ) }
+							value={ style }
+							onChange={ onStyleChange }
+						/>
+					) }
+				</VStack>
+			</DropdownContentWrapper>
 			{ showResetButton && (
-				<Button
-					className={ resetButtonClassName }
-					variant="tertiary"
-					onClick={ () => {
-						onReset();
-						onClose();
-					} }
-				>
-					{ __( 'Reset to default' ) }
-				</Button>
+				<DropdownContentWrapper paddingSize="none">
+					<Button
+						className={ resetButtonClassName }
+						variant="tertiary"
+						onClick={ () => {
+							onReset();
+							onClose();
+						} }
+					>
+						{ __( 'Reset to default' ) }
+					</Button>
+				</DropdownContentWrapper>
 			) }
 		</>
 	);
@@ -243,7 +249,6 @@ const BorderControlDropdown = (
 			renderContent={ renderContent }
 			popoverProps={ {
 				...__unstablePopoverProps,
-				className: popoverClassName,
 			} }
 			{ ...otherProps }
 			ref={ forwardedRef }

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

@@ -66,10 +66,6 @@ export function useBorderControlDropdown(
 		);
 	}, [ border, cx, __next36pxDefaultSize ] );
 
-	const popoverClassName = useMemo( () => {
-		return cx( styles.borderControlPopover );
-	}, [ cx ] );
-
 	const popoverControlsClassName = useMemo( () => {
 		return cx( styles.borderControlPopoverControls );
 	}, [ cx ] );
@@ -92,7 +88,6 @@ export function useBorderControlDropdown(
 		onColorChange,
 		onStyleChange,
 		onReset,
-		popoverClassName,
 		popoverContentClassName,
 		popoverControlsClassName,
 		resetButtonClassName,

package/src/border-control/stories/index.tsx

@@ -0,0 +1,153 @@
+/**
+ * External dependencies
+ */
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { ComponentProps } from 'react';
+
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { BorderControl } from '..';
+import { Provider as SlotFillProvider } from '../../slot-fill';
+import Popover from '../../popover';
+import type { Border } from '../types';
+
+const meta: ComponentMeta< typeof BorderControl > = {
+	title: 'Components (Experimental)/BorderControl',
+	component: BorderControl,
+	argTypes: {
+		onChange: {
+			action: 'onChange',
+		},
+		width: { control: { type: 'text' } },
+		value: { control: { type: null } },
+	},
+	parameters: {
+		controls: { expanded: true },
+		docs: { source: { state: 'open' } },
+	},
+};
+export default meta;
+
+// Available border colors.
+const colors = [
+	{ name: 'Blue', color: '#72aee6' },
+	{ name: 'Red', color: '#e65054' },
+	{ name: 'Yellow', color: '#f2d675' },
+	{ name: 'Blue', color: '#72aee6' },
+	{ name: 'Red', color: '#e65054' },
+	{ name: 'Yellow', color: '#f2d675' },
+];
+
+// Multiple origin colors.
+const multipleOriginColors = [
+	{
+		name: 'Default',
+		colors: [
+			{ name: 'Gray 20', color: '#a7aaad' },
+			{ name: 'Gray 70', color: '#3c434a' },
+		],
+	},
+	{
+		name: 'Theme',
+		colors: [
+			{ name: 'Blue 20', color: '#72aee6' },
+			{ name: 'Blue 40', color: '#3582c4' },
+			{ name: 'Blue 70', color: '#0a4b78' },
+		],
+	},
+	{
+		name: 'User',
+		colors: [
+			{ name: 'Green', color: '#00a32a' },
+			{ name: 'Yellow', color: '#f2d675' },
+		],
+	},
+];
+
+const Template: ComponentStory< typeof BorderControl > = ( {
+	onChange,
+	...props
+} ) => {
+	const [ border, setBorder ] = useState< Border >();
+	const onChangeMerged: ComponentProps<
+		typeof BorderControl
+	>[ 'onChange' ] = ( newBorder ) => {
+		setBorder( newBorder );
+		onChange( newBorder );
+	};
+
+	return (
+		<SlotFillProvider>
+			<div style={ { maxWidth: '280px' } }>
+				<BorderControl
+					onChange={ onChangeMerged }
+					value={ border }
+					{ ...props }
+				/>
+			</div>
+			{ /* @ts-expect-error Ignore until Popover is converted to TS */ }
+			<Popover.Slot />
+		</SlotFillProvider>
+	);
+};
+
+export const Default = Template.bind( {} );
+Default.args = {
+	colors,
+	label: 'Border',
+};
+
+/**
+ * Render a slider beside the control.
+ */
+export const WithSlider = Template.bind( {} );
+WithSlider.args = {
+	...Default.args,
+	withSlider: true,
+};
+
+/**
+ * When rendering with a slider, the `width` prop is useful to customize the width of the number input.
+ */
+export const WithSliderCustomWidth = Template.bind( {} );
+WithSliderCustomWidth.args = {
+	...Default.args,
+	withSlider: true,
+	width: '150px',
+};
+WithSliderCustomWidth.storyName = 'With Slider (Custom Width)';
+
+/**
+ * Restrict the width of the control and prevent it from expanding to take up additional space.
+ * When `true`, the `width` prop will be ignored.
+ */
+export const IsCompact = Template.bind( {} );
+IsCompact.args = {
+	...Default.args,
+	isCompact: true,
+};
+
+/**
+ * The `colors` object can contain multiple origins.
+ */
+export const WithMultipleOrigins = Template.bind( {} );
+WithMultipleOrigins.args = {
+	...Default.args,
+	colors: multipleOriginColors,
+	__experimentalHasMultipleOrigins: true,
+};
+
+/**
+ * Allow the alpha channel to be edited on each color.
+ */
+export const WithAlphaEnabled = Template.bind( {} );
+WithAlphaEnabled.args = {
+	...Default.args,
+	enableAlpha: true,
+};

package/src/border-control/styles.ts

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import { css } from '@emotion/react';
-import type { CSSProperties } from 'react';
 
 /**
  * Internal dependencies
@@ -13,7 +12,6 @@ import {
 	StyledField,
 	StyledLabel,
 } from '../base-control/styles/base-control-styles';
-import { BackdropUI } from '../input-control/styles/input-control-styles';
 import {
 	Root as UnitControlWrapper,
 	UnitSelect,
@@ -30,57 +28,32 @@ const focusBoxShadow = css`
 `;
 
 export const borderControl = css`
-	position: relative;
+	border: 0;
+	padding: 0;
+	margin: 0;
 `;
 
 export const innerWrapper = () => css`
-	flex: 1 0 40%;
-
-	/*
-	 * Needs more thought. Aim is to prevent the border for BorderBoxControl
-	 * showing through the control. Likely needs to take into account
-	 * light/dark themes etc.
-	 */
-	background: #fff;
-
-	/*
-	 * Forces the width control to fill available space given UnitControl
-	 * passes its className directly through to the input.
-	 */
 	${ UnitControlWrapper } {
-		flex: 1;
-		${ rtl( { marginLeft: -1 } )() }
+		flex: 1 1 40%;
 	}
-
 	&& ${ UnitSelect } {
-		/* Prevent default styles forcing heights larger than BorderControl */
+		/* Prevent unit select forcing min height larger than its UnitControl */
 		min-height: 0;
-		${ rtl(
-			{
-				borderRadius: '0 1px 1px 0',
-				marginRight: 0,
-			},
-			{
-				borderRadius: '1px 0 0 1px',
-				marginLeft: 0,
-			}
-		)() }
-		transition: box-shadow 0.1s linear, border 0.1s linear;
-
-		&:focus {
-			z-index: 1;
-			${ focusBoxShadow }
-			border: 1px solid ${ COLORS.ui.borderFocus };
-		}
 	}
 `;
 
-export const wrapperWidth = ( width: CSSProperties[ 'width' ] ) => {
-	return css`
-		width: ${ width };
+/*
+ * This style is only applied to the UnitControl wrapper when the border width
+ * field should be a set width. Omitting this allows the UnitControl &
+ * RangeControl to share the available width in a 40/60 split respectively.
+ */
+export const wrapperWidth = css`
+	${ UnitControlWrapper } {
+		/* Force the UnitControl's set width. */
 		flex: 0 0 auto;
-	`;
-};
+	}
+`;
 
 /*
  * When default control height is 36px the following should be removed.
@@ -98,7 +71,7 @@ export const borderControlDropdown = () => css`
 	&& > button {
 		/*
 		 * Override button component height and padding to fit within
-		 * BorderControl
+		 * BorderControl regardless of size.
 		 */
 		height: 100%;
 		padding: ${ space( 0.75 ) };
@@ -107,7 +80,6 @@ export const borderControlDropdown = () => css`
 			{ borderRadius: `0 2px 2px 0` }
 		)() }
 		border: ${ CONFIG.borderWidth } solid ${ COLORS.ui.border };
-		position: relative;
 
 		&:focus,
 		&:hover:not( :disabled ) {
@@ -170,16 +142,13 @@ export const colorIndicatorWrapper = (
 	`;
 };
 
-export const borderControlPopover = css`
-	/* Remove padding from content, this will be re-added via inner elements*/
-	&& .components-popover__content {
-		padding: 0;
-		width: 264px;
-	}
-`;
+// Must equal $color-palette-circle-size from:
+// @wordpress/components/src/circular-option-picker/style.scss
+const swatchSize = 28;
+const swatchGap = 12;
 
 export const borderControlPopoverControls = css`
-	padding: ${ space( 2 ) };
+	width: ${ swatchSize * 6 + swatchGap * 5 }px;
 
 	> div:first-of-type > ${ StyledLabel } {
 		margin-bottom: 0;
@@ -202,27 +171,12 @@ export const resetButton = css`
 	/* Override button component styling */
 	&& {
 		border-top: ${ CONFIG.borderWidth } solid ${ COLORS.gray[ 200 ] };
+		border-top-left-radius: 0;
+		border-top-right-radius: 0;
 		height: 46px;
 	}
 `;
 
-export const borderWidthControl = () => css`
-	/* Target the InputControl's backdrop */
-	&&& ${ BackdropUI } {
-		${ rtl( {
-			borderTopLeftRadius: 0,
-			borderBottomLeftRadius: 0,
-		} )() }
-		transition: box-shadow 0.1s linear;
-	}
-
-	/* Specificity required to overcome UnitControl padding */
-	/* See packages/components/src/unit-control/styles/unit-control-styles.ts */
-	&&& input {
-		${ rtl( { paddingRight: 0 } )() }
-	}
-`;
-
 export const borderControlStylePicker = css`
 	${ StyledLabel } {
 		${ labelStyles }

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/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

@@ -117,7 +117,7 @@ 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

package/src/box-control/utils.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { isEmpty, isNumber } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -82,16 +77,16 @@ export function getAllValue(
 		: '';
 
 	/**
-	 * The isNumber check is important. On reset actions, the incoming value
+	 * The typeof === 'number' check is important. On reset actions, the incoming value
 	 * may be null or an empty string.
 	 *
 	 * Also, the value may also be zero (0), which is considered a valid unit value.
 	 *
-	 * isNumber() is more specific for these cases, rather than relying on a
+	 * typeof === 'number' is more specific for these cases, rather than relying on a
 	 * simple truthy check.
 	 */
 	let commonUnit;
-	if ( isNumber( commonQuantity ) ) {
+	if ( typeof commonQuantity === 'number' ) {
 		commonUnit = mode( allParsedUnits );
 	} else {
 		// Set meaningful unit selection if no commonQuantity and user has previously
@@ -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
 	);
 }
 

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;