@wordpress/components 20.0.2-next.957ca95e4c.0 → 21.0.1

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

@@ -11,9 +11,6 @@ import AnglePickerControl from '../';
 export default {
 	title: 'Components/AnglePickerControl',
 	component: AnglePickerControl,
-	argTypes: {
-		__nextHasNoMarginBottom: { control: { type: 'boolean' } },
-	},
 };
 
 const AnglePickerWithState = ( args ) => {
@@ -24,3 +21,6 @@ const AnglePickerWithState = ( args ) => {
 };
 
 export const Default = AnglePickerWithState.bind( {} );
+Default.args = {
+	__nextHasNoMarginBottom: true,
+};

package/src/autocomplete/autocompleter-ui.js

@@ -8,7 +8,7 @@ import { map } from 'lodash';
  * WordPress dependencies
  */
 import { useLayoutEffect } from '@wordpress/element';
-import { useAnchorRef } from '@wordpress/rich-text';
+import { useAnchor } from '@wordpress/rich-text';
 
 /**
  * Internal dependencies
@@ -35,7 +35,10 @@ export function getAutoCompleterUI( autocompleter ) {
 		contentRef,
 	} ) {
 		const [ items ] = useItems( filterValue );
-		const anchorRef = useAnchorRef( { ref: contentRef, value } );
+		const popoverAnchor = useAnchor( {
+			editableContentElement: contentRef.current,
+			value,
+		} );
 
 		useLayoutEffect( () => {
 			onChangeOptions( items );
@@ -54,7 +57,7 @@ export function getAutoCompleterUI( autocompleter ) {
 				onClose={ onReset }
 				position="top right"
 				className="components-autocomplete__popover"
-				anchorRef={ anchorRef }
+				anchor={ popoverAnchor }
 			>
 				<div
 					id={ listBoxId }

package/src/base-field/test/__snapshots__/index.js.snap

@@ -25,7 +25,7 @@ Snapshot Diff:
 - Received styles
 + Base styles
 
-@@ -14,18 +14,17 @@
+@@ -14,19 +14,18 @@
       "background": "#fff",
       "border": "1px solid",
       "border-color": "#757575",
@@ -36,6 +36,7 @@ Snapshot Diff:
       "flex": "1",
       "flex-direction": "row",
       "font-size": "13px",
+      "gap": "calc(4px * 2)",
       "justify-content": "space-between",
       "outline": "none",
       "padding": "0 8px",
@@ -80,6 +81,7 @@ exports[`base field should render correctly 1`] = `
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
   flex-direction: row;
+  gap: calc(4px * 2);
   -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
   justify-content: space-between;
@@ -105,10 +107,6 @@ exports[`base field should render correctly 1`] = `
   width: 100%;
 }
 
-.emotion-0>*+*:not( marquee ) {
-  margin-left: calc(4px * 2);
-}
-
 .emotion-0>* {
   min-width: 0;
 }

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

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { useRef } from '@wordpress/element';
+import { useMemo, useState } from '@wordpress/element';
 import { useMergeRefs } from '@wordpress/compose';
 
 /**
@@ -19,7 +19,10 @@ import { contextConnect, WordPressComponentProps } from '../../ui/context';
 import { useBorderBoxControl } from './hook';
 
 import type { BorderBoxControlProps } from '../types';
-import type { LabelProps } from '../../border-control/types';
+import type {
+	LabelProps,
+	BorderControlProps,
+} from '../../border-control/types';
 
 const BorderLabel = ( props: LabelProps ) => {
 	const { label, hideLabelFromVision } = props;
@@ -62,16 +65,29 @@ const BorderBoxControl = (
 		__next36pxDefaultSize = false,
 		...otherProps
 	} = useBorderBoxControl( props );
-	const containerRef = useRef();
-	const mergedRef = useMergeRefs( [ containerRef, forwardedRef ] );
-	const popoverProps = popoverPlacement
-		? {
-				placement: popoverPlacement,
-				offset: popoverOffset,
-				anchorRef: containerRef,
-				__unstableShift: true,
-		  }
-		: undefined;
+
+	// Use internal state instead of a ref to make sure that the component
+	// re-renders when the popover's anchor updates.
+	const [ popoverAnchor, setPopoverAnchor ] = useState< Element | null >(
+		null
+	);
+
+	// Memoize popoverProps to avoid returning a new object every time.
+	const popoverProps: BorderControlProps[ '__unstablePopoverProps' ] =
+		useMemo(
+			() =>
+				popoverPlacement
+					? {
+							placement: popoverPlacement,
+							offset: popoverOffset,
+							anchor: popoverAnchor,
+							shift: true,
+					  }
+					: undefined,
+			[ popoverPlacement, popoverOffset, popoverAnchor ]
+		);
+
+	const mergedRef = useMergeRefs( [ setPopoverAnchor, forwardedRef ] );
 
 	return (
 		<View className={ className } { ...otherProps } ref={ mergedRef }>

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

@@ -28,10 +28,9 @@ const BorderBoxControlLinkedButton = (
 			<View className={ className }>
 				<Button
 					{ ...buttonProps }
-					variant={ isLinked ? 'primary' : 'secondary' }
 					isSmall
 					icon={ isLinked ? link : linkOff }
-					iconSize={ 16 }
+					iconSize={ 24 }
 					aria-label={ label }
 					ref={ forwardedRef }
 				/>

package/src/border-box-control/border-box-control-split-controls/component.tsx

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { useRef } from '@wordpress/element';
+import { useMemo, useState } from '@wordpress/element';
 import { useMergeRefs } from '@wordpress/compose';
 
 /**
@@ -14,6 +14,7 @@ import { Grid } from '../../grid';
 import { contextConnect, WordPressComponentProps } from '../../ui/context';
 import { useBorderBoxControlSplitControls } from './hook';
 
+import type { BorderControlProps } from '../../border-control/types';
 import type { SplitControlsProps } from '../types';
 
 const BorderBoxControlSplitControls = (
@@ -36,16 +37,27 @@ const BorderBoxControlSplitControls = (
 		__next36pxDefaultSize,
 		...otherProps
 	} = useBorderBoxControlSplitControls( props );
-	const containerRef = useRef();
-	const mergedRef = useMergeRefs( [ containerRef, forwardedRef ] );
-	const popoverProps = popoverPlacement
-		? {
-				placement: popoverPlacement,
-				offset: popoverOffset,
-				anchorRef: containerRef,
-				__unstableShift: true,
-		  }
-		: undefined;
+
+	// Use internal state instead of a ref to make sure that the component
+	// re-renders when the popover's anchor updates.
+	const [ popoverAnchor, setPopoverAnchor ] = useState< Element | null >(
+		null
+	);
+
+	// Memoize popoverProps to avoid returning a new object every time.
+	const popoverProps: BorderControlProps[ '__unstablePopoverProps' ] =
+		useMemo(
+			() =>
+				popoverPlacement
+					? {
+							placement: popoverPlacement,
+							offset: popoverOffset,
+							anchor: popoverAnchor,
+							shift: true,
+					  }
+					: undefined,
+			[ popoverPlacement, popoverOffset, popoverAnchor ]
+		);
 
 	const sharedBorderControlProps = {
 		colors,
@@ -58,6 +70,8 @@ const BorderBoxControlSplitControls = (
 		__next36pxDefaultSize,
 	};
 
+	const mergedRef = useMergeRefs( [ setPopoverAnchor, forwardedRef ] );
+
 	return (
 		<Grid { ...otherProps } ref={ mergedRef } gap={ 4 }>
 			<BorderBoxControlVisualizer

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

@@ -85,6 +85,7 @@ Default.args = {
 		width: '1px',
 	},
 	__next36pxDefaultSize: false,
+	popoverPlacement: 'right-start',
 };
 
 const WrapperView = styled.div`

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

@@ -23,7 +23,8 @@ export const BorderBoxControlLinkedButton = (
 ) => {
 	return css`
 		flex: 0;
-		flex-basis: 36px;
+		flex-basis: 24px;
+		line-height: 0;
 		margin-top: ${ __next36pxDefaultSize ? '6px' : '3px' };
 	`;
 };

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

@@ -2,6 +2,7 @@
  * Internal dependencies
  */
 import type { Border, ColorProps, LabelProps } from '../border-control/types';
+import type { PopoverProps } from '../popover/types';
 
 export type Borders = {
 	top?: Border;
@@ -29,11 +30,11 @@ export type BorderBoxControlProps = ColorProps &
 		/**
 		 * The position of the color popovers compared to the control wrapper.
 		 */
-		popoverPlacement?: string;
+		popoverPlacement?: PopoverProps[ 'placement' ];
 		/**
 		 * The space between the popover and the control wrapper.
 		 */
-		popoverOffset?: number;
+		popoverOffset?: PopoverProps[ 'offset' ];
 		/**
 		 * An object representing the current border configuration.
 		 *
@@ -103,11 +104,11 @@ export type SplitControlsProps = ColorProps & {
 	/**
 	 * The position of the color popovers compared to the control wrapper.
 	 */
-	popoverPlacement?: string;
+	popoverPlacement?: PopoverProps[ 'placement' ];
 	/**
 	 * The space between the popover and the control wrapper.
 	 */
-	popoverOffset?: number;
+	popoverOffset?: PopoverProps[ 'offset' ];
 	/**
 	 * An object representing the current border configuration. It contains
 	 * properties for each side, with each side an object reflecting the border

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

@@ -24,13 +24,7 @@ import { useBorderControlDropdown } from './hook';
 import { StyledLabel } from '../../base-control/styles/base-control-styles';
 import DropdownContentWrapper from '../../dropdown/dropdown-content-wrapper';
 
-import type {
-	Color,
-	ColorOrigin,
-	Colors,
-	DropdownProps,
-	PopoverProps,
-} from '../types';
+import type { Color, ColorOrigin, Colors, DropdownProps } from '../types';
 
 const noop = () => undefined;
 const getColorObject = (
@@ -188,7 +182,8 @@ const BorderControlDropdown = (
 		</Button>
 	);
 
-	const renderContent = ( { onClose }: PopoverProps ) => (
+	// TODO: update types once Dropdown component is refactored to TypeScript.
+	const renderContent = ( { onClose }: { onClose: () => void } ) => (
 		<>
 			<DropdownContentWrapper paddingSize="medium">
 				<VStack className={ popoverControlsClassName } spacing={ 6 }>

package/src/border-control/types.ts

@@ -3,6 +3,11 @@
  */
 import type { CSSProperties } from 'react';
 
+/**
+ * Internal dependencies
+ */
+import type { PopoverProps } from '../popover/types';
+
 export type Border = {
 	color?: CSSProperties[ 'borderColor' ];
 	style?: CSSProperties[ 'borderStyle' ];
@@ -83,7 +88,7 @@ export type BorderControlProps = ColorProps &
 		/**
 		 * An internal prop used to control the visibility of the dropdown.
 		 */
-		__unstablePopoverProps?: Record< string, unknown >;
+		__unstablePopoverProps?: Omit< PopoverProps, 'children' >;
 		/**
 		 * If opted into, sanitizing the border means that if no width or color
 		 * have been selected, the border style is also cleared and `undefined`
@@ -132,7 +137,7 @@ export type DropdownProps = ColorProps & {
 	/**
 	 * An internal prop used to control the visibility of the dropdown.
 	 */
-	__unstablePopoverProps?: Record< string, unknown >;
+	__unstablePopoverProps?: Omit< PopoverProps, 'children' >;
 	/**
 	 * This controls whether to render border style options.
 	 *
@@ -176,10 +181,3 @@ export type StylePickerProps = LabelProps & {
 	 */
 	value?: string;
 };
-
-export type PopoverProps = {
-	/**
-	 * Callback function to invoke when closing the border dropdown's popover.
-	 */
-	onClose: () => void;
-};

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

@@ -11,18 +11,18 @@ import Button from '../button';
 import Tooltip from '../tooltip';
 
 export default function LinkedButton( { isLinked, ...props } ) {
-	const label = isLinked ? __( 'Unlink Sides' ) : __( 'Link Sides' );
+	const label = isLinked ? __( 'Unlink sides' ) : __( 'Link sides' );
 
+	// TODO: Remove span after merging https://github.com/WordPress/gutenberg/pull/44198
 	return (
 		<Tooltip text={ label }>
 			<span>
 				<Button
 					{ ...props }
 					className="component-box-control__linked-button"
-					variant={ isLinked ? 'primary' : 'secondary' }
 					isSmall
 					icon={ isLinked ? link : linkOff }
-					iconSize={ 16 }
+					iconSize={ 24 }
 					aria-label={ label }
 				/>
 			</span>

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

@@ -162,7 +162,7 @@ describe( 'BoxControl', () => {
 		} );
 	} );
 
-	describe( 'Unlinked Sides', () => {
+	describe( 'Unlinked sides', () => {
 		it( 'should update a single side value when unlinked', async () => {
 			let state = {};
 			const setState = ( newState ) => ( state = newState );
@@ -174,7 +174,7 @@ describe( 'BoxControl', () => {
 				/>
 			);
 			const user = setupUser();
-			const unlink = screen.getByLabelText( /Unlink Sides/ );
+			const unlink = screen.getByLabelText( /Unlink sides/ );
 
 			await user.click( unlink );
 
@@ -207,7 +207,7 @@ describe( 'BoxControl', () => {
 				/>
 			);
 			const user = setupUser();
-			const unlink = screen.getByLabelText( /Unlink Sides/ );
+			const unlink = screen.getByLabelText( /Unlink sides/ );
 
 			await user.click( unlink );
 
@@ -240,7 +240,7 @@ describe( 'BoxControl', () => {
 			await user.selectOptions( allUnitSelect, [ 'em' ] );
 
 			// Unlink the controls.
-			await user.click( screen.getByLabelText( /Unlink Sides/ ) );
+			await user.click( screen.getByLabelText( /Unlink sides/ ) );
 
 			// Confirm that each individual control has the selected unit
 			const unlinkedSelects = screen.getAllByDisplayValue( 'em' );
@@ -257,7 +257,7 @@ describe( 'BoxControl', () => {
 			await user.selectOptions( allUnitSelect, [ 'vw' ] );
 
 			// Unlink the controls.
-			await user.click( screen.getByLabelText( /Unlink Sides/ ) );
+			await user.click( screen.getByLabelText( /Unlink sides/ ) );
 
 			// Confirm that each individual control has the selected unit
 			const unlinkedSelects = screen.getAllByDisplayValue( 'vw' );

package/src/button/style.scss

@@ -288,14 +288,15 @@
 	}
 
 	&.is-small {
-		height: 24px;
+		height: $icon-size;
 		line-height: 22px;
 		padding: 0 8px;
 		font-size: 11px;
 
 		&.has-icon:not(.has-text) {
-			padding: 0 8px;
-			width: 24px;
+			padding: 0;
+			width: $icon-size;
+			min-width: $icon-size;
 		}
 	}
 

package/src/card/styles.ts

@@ -115,5 +115,5 @@ export const cardPaddings = {
 };
 
 export const shady = css`
-	background-color: ${ COLORS.lightGray[ 200 ] };
+	background-color: ${ COLORS.ui.backgroundDisabled };
 `;