@wordpress/components 19.0.0 → 19.0.1

package/src/circular-option-picker/style.scss

@@ -11,10 +11,10 @@ $color-palette-circle-spacing: 12px;
 		justify-content: flex-end;
 	}
 
-	// Effectively negates the end swatch spacing to keep the swatches
-	// from wrapping before necessary.
 	.components-circular-option-picker__swatches {
-		margin-right: -$color-palette-circle-spacing;
+		display: flex;
+		flex-wrap: wrap;
+		gap: $color-palette-circle-spacing;
 	}
 }
 
@@ -22,8 +22,6 @@ $color-palette-circle-spacing: 12px;
 	display: inline-block;
 	height: $color-palette-circle-size;
 	width: $color-palette-circle-size;
-	margin-right: $color-palette-circle-spacing;
-	margin-bottom: $color-palette-circle-spacing;
 	vertical-align: top;
 	transform: scale(1);
 	transition: 100ms transform ease;

package/src/color-edit/index.js

@@ -1,326 +1,300 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
-import { isEmpty, kebabCase } from 'lodash';
+import kebabCase from 'lodash';
 
 /**
  * WordPress dependencies
  */
-import { __, sprintf } from '@wordpress/i18n';
-import { useEffect, useState } from '@wordpress/element';
-import { edit, close, chevronDown, chevronUp, plus } from '@wordpress/icons';
+import { useState, useRef, useEffect } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { lineSolid, moreVertical, plus } from '@wordpress/icons';
+import { __experimentalUseFocusOutside as useFocusOutside } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
-import Dropdown from '../dropdown';
-import CircularOptionPicker from '../circular-option-picker';
-import { ColorPicker } from '../color-picker';
 import Button from '../button';
-import TextControl from '../text-control';
-import BaseControl from '../base-control';
+import { ColorPicker } from '../color-picker';
+import { FlexItem } from '../flex';
+import { HStack } from '../h-stack';
+import { ItemGroup } from '../item-group';
+import { VStack } from '../v-stack';
+import ColorPalette from '../color-palette';
+import DropdownMenu from '../dropdown-menu';
+import Popover from '../popover';
+import {
+	ColorActionsContainer,
+	ColorEditStyles,
+	ColorHeading,
+	ColorHStackHeader,
+	ColorIndicatorStyled,
+	ColorItem,
+	ColorNameContainer,
+	ColorNameInputControl,
+	DoneButton,
+	RemoveButton,
+} from './styles';
+import { NavigableMenu } from '../navigable-container';
 
-function DropdownOpenOnMount( { shouldOpen, isOpen, onToggle } ) {
-	useEffect( () => {
-		if ( shouldOpen && ! isOpen ) {
-			onToggle();
-		}
-	}, [] );
-	return null;
+function ColorNameInput( { value, onChange } ) {
+	return (
+		<ColorNameInputControl
+			label={ __( 'Color name' ) }
+			hideLabelFromVision
+			value={ value }
+			onChange={ onChange }
+		/>
+	);
 }
 
 function ColorOption( {
 	color,
-	name,
-	slug,
 	onChange,
+	isEditing,
+	onStartEditing,
 	onRemove,
-	onConfirm,
-	confirmLabel = __( 'OK' ),
-	isEditingNameOnMount = false,
-	isEditingColorOnMount = false,
-	onCancel,
-	immutableColorSlugs = [],
+	onStopEditing,
 } ) {
-	const [ isHover, setIsHover ] = useState( false );
-	const [ isFocused, setIsFocused ] = useState( false );
-	const [ isEditingName, setIsEditingName ] = useState(
-		isEditingNameOnMount
-	);
-	const [ isShowingAdvancedPanel, setIsShowingAdvancedPanel ] = useState(
-		false
-	);
-
-	const isShowingControls =
-		( isHover || isFocused || isEditingName || isShowingAdvancedPanel ) &&
-		! immutableColorSlugs.includes( slug );
-
+	const focusOutsideProps = useFocusOutside( onStopEditing );
 	return (
-		<div
-			tabIndex={ 0 }
-			className={ classnames( 'components-color-edit__color-option', {
-				'is-hover':
-					isHover && ! isEditingName && ! isShowingAdvancedPanel,
-			} ) }
-			onMouseEnter={ () => setIsHover( true ) }
-			onMouseLeave={ () => setIsHover( false ) }
-			onFocus={ () => setIsFocused( true ) }
-			onBlur={ () => setIsFocused( false ) }
-			aria-label={
-				name
-					? // translators: %s: The name of the color e.g: "vivid red".
-					  sprintf( __( 'Color: %s' ), name )
-					: // translators: %s: color hex code e.g: "#f00".
-					  sprintf( __( 'Color code: %s' ), color )
-			}
+		<ColorItem
+			as="div"
+			onClick={ onStartEditing }
+			{ ...( isEditing ? focusOutsideProps : {} ) }
 		>
-			<div className="components-color-edit__color-option-main-area">
-				<Dropdown
-					renderToggle={ ( { isOpen, onToggle } ) => (
-						<>
-							<DropdownOpenOnMount
-								shouldOpen={ isEditingColorOnMount }
-								isOpen={ isOpen }
-								onToggle={ onToggle }
-							/>
-							<CircularOptionPicker.Option
-								style={ { backgroundColor: color, color } }
-								aria-expanded={ isOpen }
-								aria-haspopup="true"
-								onClick={ onToggle }
-								aria-label={ __( 'Edit color value' ) }
-							/>
-						</>
-					) }
-					renderContent={ () => (
-						<ColorPicker
-							color={ color }
-							onChange={ ( newColor ) =>
+			<HStack justify="flex-start">
+				<FlexItem>
+					<ColorIndicatorStyled colorValue={ color.color } />
+				</FlexItem>
+				<FlexItem>
+					{ isEditing ? (
+						<ColorNameInput
+							value={ color.name }
+							onChange={ ( nextName ) =>
 								onChange( {
-									color: newColor,
-									slug,
-									name,
+									...color,
+									name: nextName,
+									slug: kebabCase( nextName ),
 								} )
 							}
 						/>
+					) : (
+						<ColorNameContainer>{ color.name }</ColorNameContainer>
 					) }
-				/>
-				{ ! isEditingName && (
-					<div className="components-color-edit__color-option-color-name">
-						{ name }
-					</div>
-				) }
-				{ isEditingName && (
-					<>
-						<TextControl
-							className="components-color-edit__color-option-color-name-input"
-							hideLabelFromVision
-							onChange={ ( newColorName ) =>
-								onChange( {
-									color,
-									slug: kebabCase( newColorName ),
-									name: newColorName,
-								} )
-							}
-							label={ __( 'Color name' ) }
-							placeholder={ __( 'Name' ) }
-							value={ name }
-						/>
-						<Button
-							onClick={ () => {
-								setIsEditingName( false );
-								setIsFocused( false );
-								if ( onConfirm ) {
-									onConfirm();
-								}
-							} }
-							variant="primary"
-						>
-							{ confirmLabel }
-						</Button>
-					</>
-				) }
-				{ ! isEditingName && (
-					<>
-						<Button
-							className={ classnames( {
-								'components-color-edit__hidden-control': ! isShowingControls,
-							} ) }
-							icon={ edit }
-							label={ __( 'Edit color name' ) }
-							onClick={ () => setIsEditingName( true ) }
-						/>
-						<Button
-							className={ classnames( {
-								'components-color-edit__hidden-control': ! isShowingControls,
-							} ) }
-							icon={ close }
+				</FlexItem>
+				{ isEditing && (
+					<FlexItem>
+						<RemoveButton
+							isSmall
+							icon={ lineSolid }
 							label={ __( 'Remove color' ) }
 							onClick={ onRemove }
 						/>
-					</>
+					</FlexItem>
 				) }
-				<Button
-					className={ classnames( {
-						'components-color-edit__hidden-control': ! isShowingControls,
-					} ) }
-					icon={ isShowingAdvancedPanel ? chevronUp : chevronDown }
-					label={ __( 'Additional color settings' ) }
-					onClick={ () => {
-						if ( isShowingAdvancedPanel ) {
-							setIsFocused( false );
-						}
-						setIsShowingAdvancedPanel( ! isShowingAdvancedPanel );
-					} }
-					aria-expanded={ isShowingAdvancedPanel }
-				/>
-			</div>
-			{ onCancel && (
-				<Button
-					className="components-color-edit__cancel-button"
-					onClick={ onCancel }
+			</HStack>
+			{ isEditing && (
+				<Popover
+					position="bottom left"
+					className="components-color-edit__color-popover"
 				>
-					{ __( 'Cancel' ) }
-				</Button>
-			) }
-			{ isShowingAdvancedPanel && (
-				<TextControl
-					className="components-color-edit__slug-input"
-					onChange={ ( newSlug ) =>
-						onChange( {
-							color,
-							slug: newSlug,
-							name,
-						} )
-					}
-					label={ __( 'Slug' ) }
-					value={ slug }
-				/>
+					<ColorPicker
+						color={ color.color }
+						onChange={ ( newColor ) =>
+							onChange( {
+								...color,
+								color: newColor,
+							} )
+						}
+					/>
+				</Popover>
 			) }
-		</div>
+		</ColorItem>
 	);
 }
 
-function ColorInserter( { onInsert, onCancel } ) {
-	const [ color, setColor ] = useState( {
-		color: '#fff',
-		name: '',
-		slug: '',
-	} );
+function ColorPaletteEditListView( {
+	colors,
+	onChange,
+	editingColor,
+	setEditingColor,
+} ) {
+	// When unmounting the component if there are empty colors (the user did not complete the insertion) clean them.
+	const colorReference = useRef();
+	useEffect( () => {
+		colorReference.current = colors;
+	}, [ colors ] );
+	useEffect( () => {
+		return () => {
+			if ( colorReference.current.some( ( { slug } ) => ! slug ) ) {
+				const newColors = colorReference.current.filter(
+					( { slug } ) => slug
+				);
+				onChange( newColors.length ? newColors : undefined );
+			}
+		};
+	}, [] );
 	return (
-		<ColorOption
-			color={ color.color }
-			name={ color.name }
-			slug={ color.slug }
-			onChange={ setColor }
-			confirmLabel={ __( 'Save' ) }
-			onConfirm={ () => onInsert( color ) }
-			isEditingNameOnMount
-			isEditingColorOnMount
-			onCancel={ onCancel }
-		/>
+		<VStack spacing={ 3 }>
+			<ItemGroup isBordered isSeparated>
+				{ colors.map( ( color, index ) => (
+					<ColorOption
+						key={ index }
+						color={ color }
+						onStartEditing={ () => {
+							if ( editingColor !== index ) {
+								setEditingColor( index );
+							}
+						} }
+						onChange={ ( newColor ) => {
+							onChange(
+								colors.map( ( currentColor, currentIndex ) => {
+									if ( currentIndex === index ) {
+										return newColor;
+									}
+									return currentColor;
+								} )
+							);
+						} }
+						onRemove={ () => {
+							setEditingColor( null );
+							const newColors = colors.filter(
+								( _currentColor, currentIndex ) => {
+									if ( currentIndex === index ) {
+										return false;
+									}
+									return true;
+								}
+							);
+							onChange(
+								newColors.length ? newColors : undefined
+							);
+						} }
+						isEditing={ index === editingColor }
+						onStopEditing={ () => {
+							if ( index === editingColor ) {
+								setEditingColor( null );
+							}
+						} }
+					/>
+				) ) }
+			</ItemGroup>
+		</VStack>
 	);
 }
 
-export default function ColorEdit( {
-	colors,
-	onChange,
-	emptyUI,
-	immutableColorSlugs,
-	canReset = true,
-} ) {
-	const [ isInsertingColor, setIsInsertingColor ] = useState( false );
+const EMPTY_ARRAY = [];
+
+export default function ColorEdit( { colors = EMPTY_ARRAY, onChange } ) {
+	const [ isEditing, setIsEditing ] = useState( false );
+	const [ editingColor, setEditingColor ] = useState( null );
+	const isAdding =
+		isEditing &&
+		editingColor &&
+		colors[ editingColor ] &&
+		! colors[ editingColor ].slug;
+
+	const hasColors = colors.length > 0;
+
 	return (
-		<BaseControl>
-			<fieldset>
-				<div className="components-color-edit__label-and-insert-container">
-					<legend>
-						<div>
-							<BaseControl.VisualLabel>
-								{ __( 'Color palette' ) }
-							</BaseControl.VisualLabel>
-						</div>
-					</legend>
-					{ ! isInsertingColor && (
+		<ColorEditStyles>
+			<ColorHStackHeader>
+				<ColorHeading>{ __( 'Custom' ) }</ColorHeading>
+				<ColorActionsContainer>
+					{ isEditing && (
+						<DoneButton
+							isSmall
+							onClick={ () => {
+								setIsEditing( false );
+								setEditingColor( null );
+							} }
+						>
+							{ __( 'Done' ) }
+						</DoneButton>
+					) }
+					<Button
+						isSmall
+						isPressed={ isAdding }
+						icon={ plus }
+						label={ __( 'Add custom color' ) }
+						onClick={ () => {
+							onChange( [
+								...colors,
+								{
+									color: '#000',
+									name: '',
+									slug: '',
+								},
+							] );
+							setIsEditing( true );
+							setEditingColor( colors.length );
+						} }
+					/>
+					{ ! isEditing && (
 						<Button
+							disabled={ ! hasColors }
+							isSmall
+							icon={ moreVertical }
+							label={ __( 'Edit colors' ) }
 							onClick={ () => {
-								setIsInsertingColor( true );
+								setIsEditing( true );
 							} }
-							className="components-color-edit__insert-button"
-							icon={ plus }
 						/>
 					) }
-				</div>
-				<div>
-					{ ! isEmpty( colors ) &&
-						colors.map( ( color, index ) => {
-							return (
-								<ColorOption
-									key={ index }
-									color={ color.color }
-									name={ color.name }
-									slug={ color.slug }
-									immutableColorSlugs={ immutableColorSlugs }
-									onChange={ ( newColor ) => {
-										onChange(
-											colors.map(
-												(
-													currentColor,
-													currentIndex
-												) => {
-													if (
-														currentIndex === index
-													) {
-														return newColor;
-													}
-													return currentColor;
-												}
-											)
-										);
-									} }
-									onRemove={ () => {
-										onChange(
-											colors.filter(
-												(
-													_currentColor,
-													currentIndex
-												) => {
-													if (
-														currentIndex === index
-													) {
-														return false;
-													}
-													return true;
-												}
-											)
-										);
-									} }
-								/>
-							);
-						} ) }
-					{ isInsertingColor && (
-						<ColorInserter
-							onInsert={ ( newColor ) => {
-								setIsInsertingColor( false );
-								onChange( [ ...( colors || [] ), newColor ] );
+					{ isEditing && (
+						<DropdownMenu
+							icon={ moreVertical }
+							label={ __( 'Custom color options' ) }
+							toggleProps={ {
+								isSmall: true,
 							} }
-							onCancel={ () => setIsInsertingColor( false ) }
+						>
+							{ ( { onClose } ) => (
+								<>
+									<NavigableMenu role="menu">
+										<Button
+											variant="tertiary"
+											onClick={ () => {
+												setEditingColor( null );
+												setIsEditing( false );
+												onChange();
+												onClose();
+											} }
+										>
+											{ __( 'Remove all custom colors' ) }
+										</Button>
+									</NavigableMenu>
+								</>
+							) }
+						</DropdownMenu>
+					) }
+				</ColorActionsContainer>
+			</ColorHStackHeader>
+			{ hasColors && (
+				<>
+					{ isEditing && (
+						<ColorPaletteEditListView
+							colors={ colors }
+							onChange={ onChange }
+							editingColor={ editingColor }
+							setEditingColor={ setEditingColor }
 						/>
 					) }
-					{ ! isInsertingColor && isEmpty( colors ) && emptyUI }
-				</div>
-				{ !! canReset && (
-					<Button
-						isSmall
-						variant="secondary"
-						className="components-color-edit__reset-button"
-						onClick={ () => onChange() }
-					>
-						{ __( 'Reset' ) }
-					</Button>
+					{ ! isEditing && (
+						<ColorPalette
+							colors={ colors }
+							onChange={ () => {} }
+							clearable={ false }
+							disableCustomColors={ true }
+						/>
+					) }
+				</>
+			) }
+			{ ! hasColors &&
+				__(
+					'Custom colors are empty! Add some colors to create your own color palette.'
 				) }
-			</fieldset>
-		</BaseControl>
+		</ColorEditStyles>
 	);
 }

package/src/color-edit/style.scss

@@ -1,47 +1,6 @@
-.components-color-edit__color-option-main-area {
-	display: flex;
-	align-items: center;
-	div.components-circular-option-picker__option-wrapper {
-		display: block;
-		margin: $grid-unit-10;
+@include break-medium() {
+	.components-color-edit__color-popover.components-popover .components-popover__content.components-popover__content.components-popover__content {
+		margin-right: #{ math.div($sidebar-width, 2) + $grid-unit-20 };
+		margin-top: #{ -($grid-unit-60 + $border-width) };
 	}
 }
-
-.components-color-edit__color-option.is-hover {
-	background: $gray-200;
-}
-
-.components-color-edit__cancel-button {
-	float: right;
-}
-
-.components-color-edit__color-option-color-name {
-	width: 100%;
-}
-.components-color-edit__label-and-insert-container {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-}
-
-.components-color-edit__insert-button {
-	margin-top: -$grid-unit-10;
-}
-
-.components-color-edit__hidden-control {
-	position: relative;
-	left: -9999px;
-}
-
-.components-color-edit__color-option-color-name-input .components-base-control__field {
-	margin-bottom: 0;
-	margin-right: $grid-unit-10;
-}
-
-.components-color-edit__slug-input {
-	margin-left: $grid-unit-10;
-}
-
-.components-color-edit__reset-button {
-	float: right;
-}