@wordpress/components 19.17.0 → 20.0.1-next.d6164808d3.0

package/src/button/test/index.js

@@ -1,8 +1,8 @@
 /**
  * External dependencies
  */
-import { shallow } from 'enzyme';
-import TestUtils from 'react-dom/test-utils';
+import { render, screen } from '@testing-library/react';
+
 /**
  * WordPress dependencies
  */
@@ -12,172 +12,188 @@ import { plusCircle } from '@wordpress/icons';
 /**
  * Internal dependencies
  */
-import ButtonWithForwardedRef, { Button } from '../';
-import { VisuallyHidden } from '../../visually-hidden';
+import Button from '../';
+
+jest.mock( '../../icon', () => () => <div data-testid="test-icon" /> );
 
 describe( 'Button', () => {
 	describe( 'basic rendering', () => {
 		it( 'should render a button element with only one class', () => {
-			const button = shallow( <Button /> ).find( 'button' );
-			expect( button.hasClass( 'components-button' ) ).toBe( true );
-			expect( button.hasClass( 'is-large' ) ).toBe( false );
-			expect( button.hasClass( 'is-primary' ) ).toBe( false );
-			expect( button.hasClass( 'is-pressed' ) ).toBe( false );
-			expect( button.prop( 'disabled' ) ).toBeUndefined();
-			expect( button.prop( 'aria-disabled' ) ).toBeUndefined();
-			expect( button.prop( 'type' ) ).toBe( 'button' );
-			expect( button.type() ).toBe( 'button' );
+			render( <Button /> );
+			const button = screen.getByRole( 'button' );
+
+			expect( button ).toHaveClass( 'components-button' );
+			expect( button ).not.toHaveClass( 'is-large' );
+			expect( button ).not.toHaveClass( 'is-primary' );
+			expect( button ).not.toHaveClass( 'is-pressed' );
+			expect( button ).not.toHaveAttribute( 'disabled' );
+			expect( button ).not.toHaveAttribute( 'aria-disabled' );
+			expect( button ).toHaveAttribute( 'type', 'button' );
 		} );
 
 		it( 'should render a button element with is-primary class', () => {
-			const button = shallow( <Button variant="primary" /> ).find(
-				'button'
-			);
-			expect( button.hasClass( 'is-large' ) ).toBe( false );
-			expect( button.hasClass( 'is-primary' ) ).toBe( true );
+			render( <Button variant="primary" /> );
+			const button = screen.getByRole( 'button' );
+
+			expect( button ).not.toHaveClass( 'is-large' );
+			expect( button ).toHaveClass( 'is-primary' );
 		} );
 
 		it( 'should render a button element with is-secondary and is-small class', () => {
-			const button = shallow(
-				<Button variant="secondary" isSmall />
-			).find( 'button' );
-			expect( button.hasClass( 'is-secondary' ) ).toBe( true );
-			expect( button.hasClass( 'is-large' ) ).toBe( false );
-			expect( button.hasClass( 'is-small' ) ).toBe( true );
-			expect( button.hasClass( 'is-primary' ) ).toBe( false );
+			render( <Button variant="secondary" isSmall /> );
+			const button = screen.getByRole( 'button' );
+
+			expect( button ).toHaveClass( 'is-secondary' );
+			expect( button ).not.toHaveClass( 'is-large' );
+			expect( button ).toHaveClass( 'is-small' );
+			expect( button ).not.toHaveClass( 'is-primary' );
 		} );
 
 		it( 'should render a button element with is-tertiary class', () => {
-			const button = shallow( <Button variant="tertiary" /> ).find(
-				'button'
-			);
-			expect( button.hasClass( 'is-large' ) ).toBe( false );
-			expect( button.hasClass( 'is-primary' ) ).toBe( false );
-			expect( button.hasClass( 'is-secondary' ) ).toBe( false );
-			expect( button.hasClass( 'is-tertiary' ) ).toBe( true );
+			render( <Button variant="tertiary" /> );
+			const button = screen.getByRole( 'button' );
+
+			expect( button ).not.toHaveClass( 'is-large' );
+			expect( button ).not.toHaveClass( 'is-primary' );
+			expect( button ).not.toHaveClass( 'is-secondary' );
+			expect( button ).toHaveClass( 'is-tertiary' );
 		} );
 
 		it( 'should render a button element with is-link class', () => {
-			const button = shallow( <Button variant="link" /> ).find(
-				'button'
-			);
-			expect( button.hasClass( 'is-primary' ) ).toBe( false );
-			expect( button.hasClass( 'is-secondary' ) ).toBe( false );
-			expect( button.hasClass( 'is-tertiary' ) ).toBe( false );
-			expect( button.hasClass( 'is-link' ) ).toBe( true );
+			render( <Button variant="link" /> );
+			const button = screen.getByRole( 'button' );
+
+			expect( button ).not.toHaveClass( 'is-primary' );
+			expect( button ).not.toHaveClass( 'is-secondary' );
+			expect( button ).not.toHaveClass( 'is-tertiary' );
+			expect( button ).toHaveClass( 'is-link' );
 		} );
 
 		it( 'should render a button element with is-pressed without button class', () => {
-			const button = shallow( <Button isPressed /> ).find( 'button' );
-			expect( button.hasClass( 'is-pressed' ) ).toBe( true );
+			render( <Button isPressed /> );
+
+			expect( screen.getByRole( 'button' ) ).toHaveClass( 'is-pressed' );
 		} );
 
 		it( 'should add a disabled prop to the button', () => {
-			const button = shallow( <Button disabled /> ).find( 'button' );
-			expect( button.prop( 'disabled' ) ).toBe( true );
+			render( <Button disabled /> );
+
+			expect( screen.getByRole( 'button' ) ).toHaveAttribute(
+				'disabled'
+			);
 		} );
 
 		it( 'should add only aria-disabled attribute when disabled and isFocusable are true', () => {
-			const button = shallow(
-				<Button disabled __experimentalIsFocusable />
-			).find( 'button' );
-			expect( button.prop( 'disabled' ) ).toBe( false );
-			expect( button.prop( 'aria-disabled' ) ).toBe( true );
+			render( <Button disabled __experimentalIsFocusable /> );
+			const button = screen.getByRole( 'button' );
+
+			expect( button ).not.toHaveAttribute( 'disabled' );
+			expect( button ).toHaveAttribute( 'aria-disabled' );
 		} );
 
-		it( 'should not poss the prop target into the element', () => {
-			const button = shallow( <Button target="_blank" /> ).find(
-				'button'
+		it( 'should not pass the prop target into the element', () => {
+			render( <Button target="_blank" /> );
+
+			expect( screen.getByRole( 'button' ) ).not.toHaveAttribute(
+				'target'
 			);
-			expect( button.prop( 'target' ) ).toBeUndefined();
 		} );
 
 		it( 'should render with an additional className', () => {
-			const button = shallow( <Button className="gutenberg" /> ).find(
-				'button'
-			);
+			render( <Button className="gutenberg" /> );
 
-			expect( button.hasClass( 'gutenberg' ) ).toBe( true );
+			expect( screen.getByRole( 'button' ) ).toHaveClass( 'gutenberg' );
 		} );
 
-		it( 'should render and additional WordPress prop of value awesome', () => {
-			const button = shallow( <Button WordPress="awesome" /> ).find(
-				'button'
-			);
+		it( 'should render an additional WordPress prop of value awesome', () => {
+			render( <Button WordPress="awesome" /> );
 
-			expect( button.prop( 'WordPress' ) ).toBe( 'awesome' );
+			expect( console ).toHaveErrored();
+			expect( screen.getByRole( 'button' ) ).toHaveAttribute(
+				'wordpress',
+				'awesome'
+			);
 		} );
 
 		it( 'should render an icon button', () => {
-			const iconButton = shallow( <Button icon={ plusCircle } /> ).find(
-				'button'
-			);
-			expect( iconButton.hasClass( 'has-icon' ) ).toBe( true );
-			expect( iconButton.prop( 'aria-label' ) ).toBeUndefined();
+			render( <Button icon={ plusCircle } /> );
+			const button = screen.getByRole( 'button' );
+
+			expect( button ).toHaveClass( 'has-icon' );
+			expect( button ).not.toHaveAttribute( 'aria-label' );
 		} );
 
 		it( 'should render a Dashicon component matching the wordpress icon', () => {
-			const iconButton = shallow( <Button icon={ plusCircle } /> ).find(
-				'button'
+			render( <Button icon={ plusCircle } /> );
+
+			expect( screen.getByRole( 'button' ) ).toContainElement(
+				screen.getByTestId( 'test-icon' )
 			);
-			expect( iconButton.find( 'Icon' ).dive() ).not.toBeNull();
 		} );
 
 		it( 'should render child elements and icon', () => {
-			const iconButton = shallow(
+			render(
 				<Button
 					icon={ plusCircle }
 					children={ <p className="test">Test</p> }
 				/>
-			).find( 'button' );
-			expect( iconButton.find( 'Icon' ).dive() ).not.toBeNull();
-			expect( iconButton.find( '.test' ).shallow().text() ).toBe(
-				'Test'
 			);
-		} );
 
-		it( 'should add an aria-label when the label property is used, with Tooltip wrapper', () => {
-			const iconButton = shallow(
-				<Button icon={ plusCircle } label="WordPress" />
-			).find( 'Tooltip' );
-			expect( iconButton.name() ).toBe( 'Tooltip' );
-			expect( iconButton.prop( 'text' ) ).toBe( 'WordPress' );
-			expect( iconButton.find( 'button' ).prop( 'aria-label' ) ).toBe(
-				'WordPress'
+			expect( screen.getByRole( 'button' ) ).toContainElement(
+				screen.getByTestId( 'test-icon' )
 			);
+
+			const paragraph = screen.getByText( 'Test' );
+			expect( paragraph ).toBeVisible();
+			expect( paragraph ).toHaveClass( 'test' );
+		} );
+
+		it( 'should add an aria-label when the label property is used, with Tooltip wrapper', async () => {
+			render( <Button icon={ plusCircle } label="WordPress" /> );
+
+			expect( screen.queryByText( 'WordPress' ) ).not.toBeInTheDocument();
+
+			await screen.getByRole( 'button', { name: 'WordPress' } ).focus();
+
+			expect( screen.getByText( 'WordPress' ) ).toBeVisible();
 		} );
 
 		it( 'should support explicit aria-label override', () => {
-			const iconButton = shallow( <Button aria-label="Custom" /> ).find(
-				'button'
+			render( <Button aria-label="Custom" /> );
+
+			expect( screen.getByRole( 'button' ) ).toHaveAttribute(
+				'aria-label',
+				'Custom'
 			);
-			expect( iconButton.prop( 'aria-label' ) ).toBe( 'Custom' );
 		} );
 
 		it( 'should support adding aria-describedby text', () => {
-			const buttonDescription = shallow(
-				<Button describedBy="Description text" />
-			)
-				.find( VisuallyHidden )
-				.shallow()
-				.text();
-			expect( buttonDescription ).toBe( 'Description text' );
+			render( <Button describedBy="Description text" /> );
+			expect(
+				screen.getByRole( 'button', {
+					description: 'Description text',
+				} )
+			).toBeVisible();
 		} );
 
-		it( 'should populate tooltip with label content for buttons without visible labels (no children)', () => {
-			const buttonTooltip = shallow(
+		it( 'should populate tooltip with label content for buttons without visible labels (no children)', async () => {
+			render(
 				<Button
 					describedBy="Description text"
 					label="Label"
 					icon={ plusCircle }
 				/>
-			).find( 'Tooltip' );
+			);
+
+			expect( screen.queryByText( 'Label' ) ).not.toBeInTheDocument();
 
-			expect( buttonTooltip.prop( 'text' ) ).toBe( 'Label' );
+			await screen.getByRole( 'button', { name: 'Label' } ).focus();
+
+			expect( screen.getByText( 'Label' ) ).toBeVisible();
 		} );
 
 		it( 'should populate tooltip with description content for buttons with visible labels (buttons with children)', () => {
-			const buttonTooltip = shallow(
+			render(
 				<Button
 					label="Label"
 					describedBy="Description text"
@@ -186,74 +202,98 @@ describe( 'Button', () => {
 				>
 					Children
 				</Button>
-			).find( 'Tooltip' );
+			);
 
-			expect( buttonTooltip.prop( 'text' ) ).toBe( 'Description text' );
+			expect(
+				screen.getByRole( 'button', {
+					description: 'Description text',
+				} )
+			).toBeVisible();
 		} );
 
-		it( 'should allow tooltip disable', () => {
-			const iconButton = shallow(
+		it( 'should allow tooltip disable', async () => {
+			render(
 				<Button
 					icon={ plusCircle }
 					label="WordPress"
 					showTooltip={ false }
 				/>
-			).find( 'button' );
-			expect( iconButton.name() ).toBe( 'button' );
-			expect( iconButton.prop( 'aria-label' ) ).toBe( 'WordPress' );
+			);
+			const button = screen.getByRole( 'button', { name: 'WordPress' } );
+
+			expect( button ).toHaveAttribute( 'aria-label', 'WordPress' );
+
+			expect( screen.queryByText( 'WordPress' ) ).not.toBeInTheDocument();
+
+			await button.focus();
+
+			expect( screen.queryByText( 'WordPress' ) ).not.toBeInTheDocument();
 		} );
 
-		it( 'should show the tooltip for empty children', () => {
-			const iconButton = shallow(
+		it( 'should show the tooltip for empty children', async () => {
+			render(
 				<Button icon={ plusCircle } label="WordPress" children={ [] } />
-			).find( 'Tooltip' );
-			expect( iconButton.name() ).toBe( 'Tooltip' );
-			expect( iconButton.prop( 'text' ) ).toBe( 'WordPress' );
+			);
+
+			expect( screen.queryByText( 'WordPress' ) ).not.toBeInTheDocument();
+
+			await screen.getByRole( 'button', { name: 'WordPress' } ).focus();
+
+			expect( screen.getByText( 'WordPress' ) ).toBeVisible();
 		} );
 
-		it( 'should not show the tooltip when icon and children defined', () => {
-			const iconButton = shallow(
+		it( 'should not show the tooltip when icon and children defined', async () => {
+			render(
 				<Button icon={ plusCircle } label="WordPress">
 					Children
 				</Button>
-			).find( 'button' );
-			expect( iconButton.name() ).toBe( 'button' );
+			);
+
+			expect( screen.queryByText( 'WordPress' ) ).not.toBeInTheDocument();
+
+			await screen.getByRole( 'button', { name: 'WordPress' } ).focus();
+
+			expect( screen.queryByText( 'WordPress' ) ).not.toBeInTheDocument();
 		} );
 
-		it( 'should force showing the tooltip even if icon and children defined', () => {
-			const iconButton = shallow(
+		it( 'should force showing the tooltip even if icon and children defined', async () => {
+			render(
 				<Button icon={ plusCircle } label="WordPress" showTooltip>
 					Children
 				</Button>
-			).find( 'Tooltip' );
-			expect( iconButton.name() ).toBe( 'Tooltip' );
+			);
+
+			expect( screen.queryByText( 'WordPress' ) ).not.toBeInTheDocument();
+
+			await screen.getByRole( 'button', { name: 'WordPress' } ).focus();
+
+			expect( screen.getByText( 'WordPress' ) ).toBeVisible();
 		} );
 	} );
 
 	describe( 'with href property', () => {
 		it( 'should render a link instead of a button with href prop', () => {
-			const button = shallow(
-				<Button href="https://wordpress.org/" />
-			).find( 'a' );
+			render( <Button href="https://wordpress.org/" /> );
 
-			expect( button.type() ).toBe( 'a' );
-			expect( button.prop( 'href' ) ).toBe( 'https://wordpress.org/' );
+			expect( screen.getByRole( 'link' ) ).toHaveAttribute(
+				'href',
+				'https://wordpress.org/'
+			);
 		} );
 
 		it( 'should allow for the passing of the target prop when a link is created', () => {
-			const button = shallow(
-				<Button href="https://wordpress.org/" target="_blank" />
-			).find( 'a' );
+			render( <Button href="https://wordpress.org/" target="_blank" /> );
 
-			expect( button.prop( 'target' ) ).toBe( '_blank' );
+			expect( screen.getByRole( 'link' ) ).toHaveAttribute(
+				'target',
+				'_blank'
+			);
 		} );
 
 		it( 'should become a button again when disabled is supplied', () => {
-			const button = shallow(
-				<Button href="https://wordpress.org/" disabled />
-			).find( 'button' );
+			render( <Button href="https://wordpress.org/" disabled /> );
 
-			expect( button.type() ).toBe( 'button' );
+			expect( screen.getByRole( 'button' ) ).toBeVisible();
 		} );
 	} );
 
@@ -261,38 +301,40 @@ describe( 'Button', () => {
 		it( 'should enable access to DOM element', () => {
 			const ref = createRef();
 
-			TestUtils.renderIntoDocument(
-				<ButtonWithForwardedRef ref={ ref } />
-			);
-			expect( ref.current.type ).toBe( 'button' );
+			render( <Button ref={ ref } /> );
+
+			expect( ref.current ).toBe( screen.getByRole( 'button' ) );
 		} );
 	} );
 
 	describe( 'deprecated props', () => {
 		it( 'should not break when the legacy isPrimary prop is passed', () => {
-			const button = shallow( <Button isPrimary /> ).find( 'button' );
-			expect( button.hasClass( 'is-primary' ) ).toBe( true );
+			render( <Button isPrimary /> );
+			expect( screen.getByRole( 'button' ) ).toHaveClass( 'is-primary' );
 		} );
 
 		it( 'should not break when the legacy isSecondary prop is passed', () => {
-			const button = shallow( <Button isSecondary /> ).find( 'button' );
-			expect( button.hasClass( 'is-secondary' ) ).toBe( true );
+			render( <Button isSecondary /> );
+			expect( screen.getByRole( 'button' ) ).toHaveClass(
+				'is-secondary'
+			);
 		} );
 
 		it( 'should not break when the legacy isTertiary prop is passed', () => {
-			const button = shallow( <Button isTertiary /> ).find( 'button' );
-			expect( button.hasClass( 'is-tertiary' ) ).toBe( true );
+			render( <Button isTertiary /> );
+			expect( screen.getByRole( 'button' ) ).toHaveClass( 'is-tertiary' );
 		} );
 
 		it( 'should not break when the legacy isLink prop is passed', () => {
-			const button = shallow( <Button isLink /> ).find( 'button' );
-			expect( button.hasClass( 'is-link' ) ).toBe( true );
+			render( <Button isLink /> );
+			expect( screen.getByRole( 'button' ) ).toHaveClass( 'is-link' );
 		} );
 
 		it( 'should warn when the isDefault prop is passed', () => {
-			const button = shallow( <Button isDefault /> ).find( 'button' );
-			expect( button.hasClass( 'is-secondary' ) ).toBe( true );
-
+			render( <Button isDefault /> );
+			expect( screen.getByRole( 'button' ) ).toHaveClass(
+				'is-secondary'
+			);
 			expect( console ).toHaveWarned();
 		} );
 	} );

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

@@ -2,13 +2,16 @@
  * WordPress dependencies
  */
 import { useState } from '@wordpress/element';
+import { swatch } from '@wordpress/icons';
 
 /**
  * Internal dependencies
  */
 import Button from '../button';
 import ColorPalette from '../color-palette';
-import Swatch from '../swatch';
+import ColorIndicator from '../color-indicator';
+import Icon from '../icon';
+import { HStack } from '../h-stack';
 
 function ColorOption( {
 	label,
@@ -23,10 +26,19 @@ function ColorOption( {
 		<>
 			<Button
 				className="components-color-list-picker__swatch-button"
-				icon={ <Swatch fill={ value } /> }
 				onClick={ () => setIsOpen( ( prev ) => ! prev ) }
 			>
-				{ label }
+				<HStack justify="flex-start" spacing={ 2 }>
+					{ value ? (
+						<ColorIndicator
+							colorValue={ value }
+							className="components-color-list-picker__swatch-color"
+						/>
+					) : (
+						<Icon icon={ swatch } />
+					) }
+					<span>{ label }</span>
+				</HStack>
 			</Button>
 			{ isOpen && (
 				<ColorPalette

package/src/color-list-picker/style.scss

@@ -6,3 +6,14 @@
 .components-color-list-picker__color-picker {
 	margin: $grid-unit-10 0;
 }
+
+.components-color-list-picker__swatch-button {
+	// Used to simulate styles as a .button.has-icon (which this component can't
+	// opt into, because it has to show more than a simple SVG as the "icon")
+	padding: 6px;
+}
+
+.components-color-list-picker__swatch-color {
+	// Match the 24px size of the `swatch` icon (used when no color is set)
+	margin: 2px;
+}

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 }
 		/>
 	);

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' },