@wordpress/components 19.14.0 → 19.17.0

package/build-types/visually-hidden/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/visually-hidden/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,oBAAY,mBAAmB,GAAG;IACjC;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACpB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/components",
-	"version": "19.14.0",
+	"version": "19.17.0",
 	"description": "UI components for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -38,21 +38,21 @@
 		"@emotion/utils": "1.0.0",
 		"@floating-ui/react-dom": "0.6.3",
 		"@use-gesture/react": "^10.2.6",
-		"@wordpress/a11y": "^3.12.0",
-		"@wordpress/compose": "^5.10.0",
-		"@wordpress/date": "^4.12.0",
-		"@wordpress/deprecated": "^3.12.0",
-		"@wordpress/dom": "^3.12.0",
-		"@wordpress/element": "^4.10.0",
-		"@wordpress/escape-html": "^2.12.0",
-		"@wordpress/hooks": "^3.12.0",
-		"@wordpress/i18n": "^4.12.0",
-		"@wordpress/icons": "^9.3.0",
-		"@wordpress/is-shallow-equal": "^4.12.0",
-		"@wordpress/keycodes": "^3.12.0",
-		"@wordpress/primitives": "^3.10.0",
-		"@wordpress/rich-text": "^5.10.0",
-		"@wordpress/warning": "^2.12.0",
+		"@wordpress/a11y": "^3.15.0",
+		"@wordpress/compose": "^5.13.0",
+		"@wordpress/date": "^4.15.0",
+		"@wordpress/deprecated": "^3.15.0",
+		"@wordpress/dom": "^3.15.0",
+		"@wordpress/element": "^4.13.0",
+		"@wordpress/escape-html": "^2.15.0",
+		"@wordpress/hooks": "^3.15.0",
+		"@wordpress/i18n": "^4.15.0",
+		"@wordpress/icons": "^9.6.0",
+		"@wordpress/is-shallow-equal": "^4.15.0",
+		"@wordpress/keycodes": "^3.15.0",
+		"@wordpress/primitives": "^3.13.0",
+		"@wordpress/rich-text": "^5.13.0",
+		"@wordpress/warning": "^2.15.0",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
 		"dom-scroll-into-view": "^1.2.1",
@@ -77,5 +77,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "a80eeb62ec7cb1418b9915c277e084a29d6665e3"
+	"gitHead": "08358f53b627a15148c3a3e433cdf58cf8714aa4"
 }

package/src/angle-picker-control/index.js

@@ -34,7 +34,7 @@ export default function AnglePickerControl( {
 	const classes = classnames( 'components-angle-picker-control', className );
 
 	return (
-		<Root className={ classes }>
+		<Root className={ classes } gap={ 4 }>
 			<FlexBlock>
 				<NumberControl
 					label={ label }
@@ -62,7 +62,6 @@ export default function AnglePickerControl( {
 			</FlexBlock>
 			<FlexItem
 				style={ {
-					marginLeft: space( 4 ),
 					marginBottom: space( 1 ),
 					marginTop: 'auto',
 				} }

package/src/autocomplete/get-default-use-items.js

@@ -1,7 +1,8 @@
 /**
  * External dependencies
  */
-import { debounce, deburr, escapeRegExp } from 'lodash';
+import { debounce, escapeRegExp } from 'lodash';
+import removeAccents from 'remove-accents';
 
 /**
  * WordPress dependencies
@@ -20,7 +21,7 @@ function filterOptions( search, options = [], maxResults = 10 ) {
 		}
 
 		const isMatch = keywords.some( ( keyword ) =>
-			search.test( deburr( keyword ) )
+			search.test( removeAccents( keyword ) )
 		);
 		if ( ! isMatch ) {
 			continue;

package/src/autocomplete/index.js

@@ -1,7 +1,8 @@
 /**
  * External dependencies
  */
-import { escapeRegExp, find, deburr } from 'lodash';
+import { escapeRegExp, find } from 'lodash';
+import removeAccents from 'remove-accents';
 
 /**
  * WordPress dependencies
@@ -284,7 +285,7 @@ function useAutocomplete( {
 			return;
 		}
 
-		const text = deburr( textContent );
+		const text = removeAccents( textContent );
 		const textAfterSelection = getTextContent(
 			slice( record, undefined, getTextContent( record ).length )
 		);

package/src/base-control/index.tsx

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import type { FunctionComponent } from 'react';
 
 /**
  * Internal dependencies
@@ -16,6 +15,7 @@ import {
 	StyledHelp,
 	StyledVisualLabel,
 } from './styles/base-control-styles';
+import type { WordPressComponentProps } from '../ui/context';
 
 /**
  * `BaseControl` is a component used to generate labels and help text for components handling user inputs.
@@ -104,12 +104,14 @@ export const BaseControl = ( {
  * 	</BaseControl>
  * );
  */
-export const VisualLabel: FunctionComponent< BaseControlVisualLabelProps > = ( {
+export const VisualLabel = ( {
 	className,
 	children,
-} ) => {
+	...props
+}: WordPressComponentProps< BaseControlVisualLabelProps, 'span' > ) => {
 	return (
 		<StyledVisualLabel
+			{ ...props }
 			className={ classnames(
 				'components-base-control__label',
 				className

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

@@ -60,6 +60,7 @@ WithHelpText.args = {
 export const WithVisualLabel: ComponentStory< typeof BaseControl > = (
 	props
 ) => {
+	// @ts-expect-error - Unclear how to fix, see also https://github.com/WordPress/gutenberg/pull/39468#discussion_r827150516
 	BaseControl.VisualLabel.displayName = 'BaseControl.VisualLabel';
 
 	return (

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

@@ -7,12 +7,14 @@ import { css } from '@emotion/react';
 /**
  * Internal dependencies
  */
-import { font, COLORS } from '../../utils';
+import { baseLabelTypography, boxSizingReset, font, COLORS } from '../../utils';
 import { space } from '../../ui/utils/space';
 
 export const Wrapper = styled.div`
 	font-family: ${ font( 'default.fontFamily' ) };
 	font-size: ${ font( 'default.fontSize' ) };
+
+	${ boxSizingReset }
 `;
 
 const deprecatedMarginField = ( { __nextHasNoMarginBottom = false } ) => {
@@ -33,8 +35,15 @@ export const StyledField = styled.div`
 `;
 
 const labelStyles = css`
+	${ baseLabelTypography };
+
 	display: inline-block;
 	margin-bottom: ${ space( 2 ) };
+	/**
+	 * Removes Chrome/Safari/Firefox user agent stylesheet padding from
+	 * StyledLabel when it is rendered as a legend.
+	 */
+	padding: 0;
 `;
 
 export const StyledLabel = styled.label`

package/src/base-control/types.ts

@@ -37,6 +37,5 @@ export type BaseControlProps = {
 };
 
 export type BaseControlVisualLabelProps = {
-	className?: string;
 	children: ReactNode;
 };

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

@@ -1,3 +1,8 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
 /**
  * Internal dependencies
  */
@@ -21,9 +26,9 @@ const BorderLabel = ( props: LabelProps ) => {
 	}
 
 	return hideLabelFromVision ? (
-		<VisuallyHidden as="label">{ label }</VisuallyHidden>
+		<VisuallyHidden as="legend">{ label }</VisuallyHidden>
 	) : (
-		<StyledLabel>{ label }</StyledLabel>
+		<StyledLabel as="legend">{ label }</StyledLabel>
 	);
 };
 
@@ -38,6 +43,7 @@ const UnconnectedBorderControl = (
 		enableStyle = true,
 		hideLabelFromVision,
 		innerWrapperClassName,
+		inputWidth,
 		label,
 		onBorderChange,
 		onSliderChange,
@@ -48,7 +54,6 @@ const UnconnectedBorderControl = (
 		showDropdownHeader,
 		sliderClassName,
 		value: border,
-		widthControlClassName,
 		widthUnit,
 		widthValue,
 		withSlider,
@@ -59,41 +64,45 @@ const UnconnectedBorderControl = (
 	} = useBorderControl( props );
 
 	return (
-		<View { ...otherProps } ref={ forwardedRef }>
+		<View as="fieldset" { ...otherProps } ref={ forwardedRef }>
 			<BorderLabel
 				label={ label }
 				hideLabelFromVision={ hideLabelFromVision }
 			/>
-			<HStack spacing={ 3 }>
-				<HStack className={ innerWrapperClassName } alignment="stretch">
-					<BorderControlDropdown
-						border={ border }
-						colors={ colors }
-						__unstablePopoverProps={ __unstablePopoverProps }
-						disableCustomColors={ disableCustomColors }
-						enableAlpha={ enableAlpha }
-						enableStyle={ enableStyle }
-						onChange={ onBorderChange }
-						previousStyleSelection={ previousStyleSelection }
-						showDropdownHeader={ showDropdownHeader }
-						__experimentalHasMultipleOrigins={
-							__experimentalHasMultipleOrigins
-						}
-						__experimentalIsRenderedInSidebar={
-							__experimentalIsRenderedInSidebar
-						}
-						__next36pxDefaultSize={ __next36pxDefaultSize }
-					/>
-					<UnitControl
-						className={ widthControlClassName }
-						min={ 0 }
-						onChange={ onWidthChange }
-						value={ border?.width || '' }
-						placeholder={ placeholder }
-					/>
-				</HStack>
+			<HStack spacing={ 3 } className={ innerWrapperClassName }>
+				<UnitControl
+					prefix={
+						<BorderControlDropdown
+							border={ border }
+							colors={ colors }
+							__unstablePopoverProps={ __unstablePopoverProps }
+							disableCustomColors={ disableCustomColors }
+							enableAlpha={ enableAlpha }
+							enableStyle={ enableStyle }
+							onChange={ onBorderChange }
+							previousStyleSelection={ previousStyleSelection }
+							showDropdownHeader={ showDropdownHeader }
+							__experimentalHasMultipleOrigins={
+								__experimentalHasMultipleOrigins
+							}
+							__experimentalIsRenderedInSidebar={
+								__experimentalIsRenderedInSidebar
+							}
+							__next36pxDefaultSize={ __next36pxDefaultSize }
+						/>
+					}
+					label={ __( 'Border width' ) }
+					hideLabelFromVision
+					min={ 0 }
+					onChange={ onWidthChange }
+					value={ border?.width || '' }
+					placeholder={ placeholder }
+					__unstableInputWidth={ inputWidth }
+				/>
 				{ withSlider && (
 					<RangeControl
+						label={ __( 'Border width' ) }
+						hideLabelFromVision
 						className={ sliderClassName }
 						initialPosition={ 0 }
 						max={ 100 }

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

@@ -106,7 +106,7 @@ export function useBorderControl(
 	);
 
 	const onSliderChange = useCallback(
-		( value: string ) => {
+		( value?: number ) => {
 			onWidthChange( `${ value }${ widthUnit }` );
 		},
 		[ onWidthChange, widthUnit ]
@@ -118,18 +118,13 @@ export function useBorderControl(
 		return cx( styles.borderControl, className );
 	}, [ className, cx ] );
 
+	const wrapperWidth = isCompact ? '90px' : width;
 	const innerWrapperClassName = useMemo( () => {
-		const wrapperWidth = isCompact ? '90px' : width;
-		const widthStyle =
-			!! wrapperWidth && styles.wrapperWidth( wrapperWidth );
+		const widthStyle = !! wrapperWidth && styles.wrapperWidth;
 		const heightStyle = styles.wrapperHeight( __next36pxDefaultSize );
 
 		return cx( styles.innerWrapper(), widthStyle, heightStyle );
-	}, [ isCompact, width, cx, __next36pxDefaultSize ] );
-
-	const widthControlClassName = useMemo( () => {
-		return cx( styles.borderWidthControl() );
-	}, [ cx ] );
+	}, [ wrapperWidth, cx, __next36pxDefaultSize ] );
 
 	const sliderClassName = useMemo( () => {
 		return cx( styles.borderSlider() );
@@ -139,13 +134,13 @@ export function useBorderControl(
 		...otherProps,
 		className: classes,
 		innerWrapperClassName,
+		inputWidth: wrapperWidth,
 		onBorderChange,
 		onSliderChange,
 		onWidthChange,
 		previousStyleSelection: styleSelection,
 		sliderClassName,
 		value: border,
-		widthControlClassName,
 		widthUnit,
 		widthValue,
 		__next36pxDefaultSize,

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

@@ -39,6 +39,9 @@ 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.

package/src/border-control/styles.ts

@@ -2,18 +2,16 @@
  * External dependencies
  */
 import { css } from '@emotion/react';
-import type { CSSProperties } from 'react';
 
 /**
  * Internal dependencies
  */
-import { COLORS, CONFIG, rtl } from '../utils';
+import { COLORS, CONFIG, boxSizingReset, rtl } from '../utils';
 import { space } from '../ui/utils/space';
 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,33 @@ const focusBoxShadow = css`
 `;
 
 export const borderControl = css`
-	position: relative;
+	border: 0;
+	padding: 0;
+	margin: 0;
+	${ boxSizingReset }
 `;
 
 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 +72,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 +81,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 +143,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 +172,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 }