@wordpress/components 19.15.0 → 20.0.0

package/src/color-palette/index.js

@@ -2,7 +2,6 @@
 /**
  * External dependencies
  */
-import { map } from 'lodash';
 import { colord, extend } from 'colord';
 import namesPlugin from 'colord/plugins/names';
 import a11yPlugin from 'colord/plugins/a11y';
@@ -35,15 +34,16 @@ function SinglePalette( {
 	actions,
 } ) {
 	const colorOptions = useMemo( () => {
-		return map( colors, ( { color, name } ) => {
+		return colors.map( ( { color, name }, index ) => {
 			const colordColor = colord( color );
+			const isSelected = value === color;
 
 			return (
 				<CircularOptionPicker.Option
-					key={ color }
-					isSelected={ value === color }
+					key={ `${ color }-${ index }` }
+					isSelected={ isSelected }
 					selectedIconProps={
-						value === color
+						isSelected
 							? {
 									fill:
 										colordColor.contrast() >
@@ -60,7 +60,7 @@ function SinglePalette( {
 					}
 					style={ { backgroundColor: color, color } }
 					onClick={
-						value === color ? clearColor : () => onChange( color )
+						isSelected ? clearColor : () => onChange( color )
 					}
 					aria-label={
 						name
@@ -112,19 +112,35 @@ function MultiplePalettes( {
 	);
 }
 
-export function CustomColorPickerDropdown( { isRenderedInSidebar, ...props } ) {
+export function CustomColorPickerDropdown( {
+	isRenderedInSidebar,
+	popoverProps: receivedPopoverProps,
+	...props
+} ) {
+	const popoverProps = useMemo(
+		() => ( {
+			__unstableShift: true,
+			...( isRenderedInSidebar
+				? {
+						// When in the sidebar: open to the left (stacking),
+						// leaving the same gap as the parent popover.
+						placement: 'left-start',
+						offset: 34,
+				  }
+				: {
+						// Default behavior: open below the anchor
+						placement: 'bottom',
+						offset: 8,
+				  } ),
+			...receivedPopoverProps,
+		} ),
+		[ isRenderedInSidebar, receivedPopoverProps ]
+	);
+
 	return (
 		<Dropdown
 			contentClassName="components-color-palette__custom-color-dropdown-content"
-			popoverProps={
-				isRenderedInSidebar
-					? {
-							placement: 'left-start',
-							offset: 20,
-							__unstableShift: true,
-					  }
-					: undefined
-			}
+			popoverProps={ popoverProps }
 			{ ...props }
 		/>
 	);
@@ -162,6 +178,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 +251,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/index.native.js

@@ -11,7 +11,7 @@ import {
 	Platform,
 	Text,
 } from 'react-native';
-import { map, uniq } from 'lodash';
+import { map } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -63,11 +63,15 @@ function ColorPalette( {
 	const scale = useRef( new Animated.Value( 1 ) ).current;
 	const opacity = useRef( new Animated.Value( 1 ) ).current;
 
-	const defaultColors = uniq( map( defaultSettings.colors, 'color' ) );
-	const mergedColors = uniq( map( defaultSettings.allColors, 'color' ) );
-	const defaultGradientColors = uniq(
-		map( defaultSettings.gradients, 'gradient' )
-	);
+	const defaultColors = [
+		...new Set( map( defaultSettings.colors, 'color' ) ),
+	];
+	const mergedColors = [
+		...new Set( map( defaultSettings.allColors, 'color' ) ),
+	];
+	const defaultGradientColors = [
+		...new Set( map( defaultSettings.gradients, 'gradient' ) ),
+	];
 	const colors = isGradientSegment ? defaultGradientColors : defaultColors;
 
 	const customIndicatorColor = isGradientSegment

package/src/color-palette/stories/index.js

@@ -82,7 +82,7 @@ MultipleOrigins.args = {
 			],
 		},
 		{
-			name: 'Primary colors',
+			name: 'Secondary colors',
 			colors: [
 				{ name: 'Orange', color: '#f60' },
 				{ name: 'Green', color: '#0f0' },

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/__snapshots__/index.js.snap

@@ -357,6 +357,13 @@ exports[`ColorPalette Dropdown should render it correctly 1`] = `
 
 <Dropdown
   contentClassName="components-color-palette__custom-color-dropdown-content"
+  popoverProps={
+    Object {
+      "__unstableShift": true,
+      "offset": 8,
+      "placement": "bottom",
+    }
+  }
   renderContent={[Function]}
   renderToggle={[Function]}
 >
@@ -728,6 +735,13 @@ exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
         >
           <Dropdown
             contentClassName="components-color-palette__custom-color-dropdown-content"
+            popoverProps={
+              Object {
+                "__unstableShift": true,
+                "offset": 8,
+                "placement": "bottom",
+              }
+            }
             renderContent={[Function]}
             renderToggle={[Function]}
           >
@@ -957,7 +971,7 @@ exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
                 <Option
                   aria-label="Color: red"
                   isSelected={true}
-                  key="#f00"
+                  key="#f00-0"
                   onClick={[Function]}
                   selectedIconProps={
                     Object {
@@ -1060,7 +1074,7 @@ exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
                 <Option
                   aria-label="Color: white"
                   isSelected={false}
-                  key="#fff"
+                  key="#fff-1"
                   onClick={[Function]}
                   selectedIconProps={Object {}}
                   style={
@@ -1120,7 +1134,7 @@ exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
                 <Option
                   aria-label="Color: blue"
                   isSelected={false}
-                  key="#00f"
+                  key="#00f-2"
                   onClick={[Function]}
                   selectedIconProps={Object {}}
                   style={

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

@@ -53,7 +53,7 @@ export const HexInput = ( { color, onChange, enableAlpha }: HexInputProps ) => {
 			prefix={
 				<Spacer
 					as={ Text }
-					marginLeft={ space( 3.5 ) }
+					marginLeft={ space( 4 ) }
 					color={ COLORS.ui.theme }
 					lineHeight={ 1 }
 				>
@@ -65,6 +65,7 @@ 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/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 }

package/src/color-picker/styles.ts

@@ -11,13 +11,13 @@ 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 CONFIG from '../utils/config-values';
 
@@ -44,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 {
@@ -79,6 +71,8 @@ export const ColorInputWrapper = styled( Flex )`
 `;
 
 export const ColorfulWrapper = styled.div`
+	${ boxSizingReset };
+
 	width: 216px;
 
 	.react-colorful {
@@ -125,8 +119,6 @@ export const ColorfulWrapper = styled.div`
 	${ StyledField } {
 		margin-bottom: 0;
 	}
-
-	${ inputHeightStyle }
 `;
 
 export const CopyButton = styled( Button )`

package/src/combobox-control/README.md

@@ -116,6 +116,13 @@ The current value of the input.
 -   Type: `mixed`
 -   Required: Yes
 
+#### __experimentalRenderItem
+
+Custom renderer invoked for each option in the suggestion list. The render prop receives as its argument an object containing, under the `item` key, the single option's data (directly from the array of data passed to the `options` prop).
+
+-   Type: `Function` - `( args: { item: object } ) => ReactNode`
+-   Required: No
+
 ## Related components
 
 -   Like this component, but without a search input, the `CustomSelectControl` component.

package/src/combobox-control/index.js

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import removeAccents from 'remove-accents';
 
 /**
  * WordPress dependencies
@@ -16,7 +15,6 @@ import {
 	useEffect,
 } from '@wordpress/element';
 import { useInstanceId } from '@wordpress/compose';
-import { ENTER, UP, DOWN, ESCAPE } from '@wordpress/keycodes';
 import { speak } from '@wordpress/a11y';
 import { closeSmall } from '@wordpress/icons';
 
@@ -30,6 +28,8 @@ import BaseControl from '../base-control';
 import Button from '../button';
 import { FlexBlock, FlexItem } from '../flex';
 import withFocusOutside from '../higher-order/with-focus-outside';
+import { useControlledValue } from '../utils/hooks';
+import { normalizeTextString } from '../utils/strings';
 
 const noop = () => {};
 
@@ -46,11 +46,13 @@ const DetectOutside = withFocusOutside(
 );
 
 function ComboboxControl( {
+	/** Start opting into the new margin-free styles that will become the default in a future version. */
+	__nextHasNoMarginBottom = false,
 	__next36pxDefaultSize,
-	value,
+	value: valueProp,
 	label,
 	options,
-	onChange,
+	onChange: onChangeProp,
 	onFilterValueChange = noop,
 	hideLabelFromVision,
 	help,
@@ -59,7 +61,13 @@ function ComboboxControl( {
 	messages = {
 		selected: __( 'Item selected.' ),
 	},
+	__experimentalRenderItem,
 } ) {
+	const [ value, setValue ] = useControlledValue( {
+		value: valueProp,
+		onChange: onChangeProp,
+	} );
+
 	const currentOption = options.find( ( option ) => option.value === value );
 	const currentLabel = currentOption?.label ?? '';
 	// Use a custom prefix when generating the `instanceId` to avoid having
@@ -77,11 +85,9 @@ function ComboboxControl( {
 	const matchingSuggestions = useMemo( () => {
 		const startsWithMatch = [];
 		const containsMatch = [];
-		const match = removeAccents( inputValue.toLocaleLowerCase() );
+		const match = normalizeTextString( inputValue );
 		options.forEach( ( option ) => {
-			const index = removeAccents( option.label )
-				.toLocaleLowerCase()
-				.indexOf( match );
+			const index = normalizeTextString( option.label ).indexOf( match );
 			if ( index === 0 ) {
 				startsWithMatch.push( option );
 			} else if ( index > 0 ) {
@@ -93,7 +99,7 @@ function ComboboxControl( {
 	}, [ inputValue, options, value ] );
 
 	const onSuggestionSelected = ( newSelectedSuggestion ) => {
-		onChange( newSelectedSuggestion.value );
+		setValue( newSelectedSuggestion.value );
 		speak( messages.selected, 'assertive' );
 		setSelectedSuggestion( newSelectedSuggestion );
 		setInputValue( '' );
@@ -119,22 +125,22 @@ function ComboboxControl( {
 			return;
 		}
 
-		switch ( event.keyCode ) {
-			case ENTER:
+		switch ( event.code ) {
+			case 'Enter':
 				if ( selectedSuggestion ) {
 					onSuggestionSelected( selectedSuggestion );
 					preventDefault = true;
 				}
 				break;
-			case UP:
+			case 'ArrowUp':
 				handleArrowNavigation( -1 );
 				preventDefault = true;
 				break;
-			case DOWN:
+			case 'ArrowDown':
 				handleArrowNavigation( 1 );
 				preventDefault = true;
 				break;
-			case ESCAPE:
+			case 'Escape':
 				setIsExpanded( false );
 				setSelectedSuggestion( null );
 				preventDefault = true;
@@ -173,7 +179,7 @@ function ComboboxControl( {
 	};
 
 	const handleOnReset = () => {
-		onChange( null );
+		setValue( null );
 		inputContainer.current.focus();
 	};
 
@@ -216,6 +222,7 @@ function ComboboxControl( {
 	return (
 		<DetectOutside onFocusOutside={ onFocusOutside }>
 			<BaseControl
+				__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
 				className={ classnames(
 					className,
 					'components-combobox-control'
@@ -280,6 +287,9 @@ function ComboboxControl( {
 							onHover={ setSelectedSuggestion }
 							onSelect={ onSuggestionSelected }
 							scrollIntoView
+							__experimentalRenderItem={
+								__experimentalRenderItem
+							}
 						/>
 					) }
 				</div>

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

@@ -257,6 +257,10 @@ const countries = [
 export default {
 	title: 'Components/ComboboxControl',
 	component: ComboboxControl,
+	argTypes: {
+		__nextHasNoMarginBottom: { control: { type: 'boolean' } },
+		onChange: { action: 'onChange' },
+	},
 };
 
 const mapCountryOption = ( country ) => ( {
@@ -266,7 +270,7 @@ const mapCountryOption = ( country ) => ( {
 
 const countryOptions = countries.map( mapCountryOption );
 
-function CountryCodeComboboxControl( args ) {
+function Template( { onChange, ...args } ) {
 	const [ value, setValue ] = useState( null );
 
 	return (
@@ -274,16 +278,62 @@ function CountryCodeComboboxControl( args ) {
 			<ComboboxControl
 				{ ...args }
 				value={ value }
-				onChange={ setValue }
-				label="Select a country"
-				options={ countryOptions }
+				onChange={ ( ...changeArgs ) => {
+					setValue( ...changeArgs );
+					onChange?.( ...changeArgs );
+				} }
 			/>
-			<p>Value: { value }</p>
 		</>
 	);
 }
-export const _default = CountryCodeComboboxControl.bind( {} );
-_default.args = {
+export const Default = Template.bind( {} );
+Default.args = {
 	__next36pxDefaultSize: false,
 	allowReset: false,
+	label: 'Select a country',
+	options: countryOptions,
+};
+
+const authorOptions = [
+	{
+		value: 'parsley',
+		label: 'Parsley Montana',
+		age: 48,
+		country: 'Germany',
+	},
+	{
+		value: 'cabbage',
+		label: 'Cabbage New York',
+		age: 44,
+		country: 'France',
+	},
+	{
+		value: 'jake',
+		label: 'Jake Weary',
+		age: 41,
+		country: 'United Kingdom',
+	},
+];
+
+/**
+ * The rendered output of each suggestion can be customized by passing a
+ * render function to the `__experimentalRenderItem` prop. (This is still an experimental feature
+ * and is subject to change.)
+ */
+export const WithCustomRenderItem = Template.bind( {} );
+WithCustomRenderItem.args = {
+	...Default.args,
+	label: 'Select an author',
+	options: authorOptions,
+	__experimentalRenderItem: ( { item } ) => {
+		const { label, age, country } = item;
+		return (
+			<div>
+				<div style={ { marginBottom: '0.2rem' } }>{ label }</div>
+				<small>
+					Age: { age }, Country: { country }
+				</small>
+			</div>
+		);
+	},
 };

package/src/combobox-control/style.scss

@@ -31,7 +31,6 @@ input.components-combobox-control__input[type="text"] {
 	flex-wrap: wrap;
 	align-items: flex-start;
 	width: 100%;
-	margin: 0 0 $grid-unit-10 0;
 	padding: 0;
 
 	&:focus-within {

package/src/confirm-dialog/README.md

@@ -17,7 +17,7 @@ The dialog is confirmed by clicking the _confirm_ button or by pressing the `Ent
 Allows the component to be used standalone, just by declaring it as part of another React's component render method:
 
 -   It will be automatically open (displayed) upon mounting;
--   It will be automatically closed when when clicking the _cancel_ button, by pressing the `ESC` key, or by clicking outside the dialog focus (i.e, the overlay);
+-   It will be automatically closed when clicking the _cancel_ button, by pressing the `ESC` key, or by clicking outside the dialog focus (i.e, the overlay);
 -   `onCancel` is not mandatory but can be passed. Even if passed, the dialog will still be able to close itself.
 
 Activating this mode is as simple as omitting the `isOpen` prop. The only mandatory prop, in this case, is the `onConfirm` callback. The message is passed as the `children`. You can pass any JSX you'd like, which allows to further format the message or include sub-component if you'd like: