@wordpress/components 17.0.0 → 19.0.2

package/src/color-edit/styles.js

@@ -0,0 +1,97 @@
+/**
+ * External dependencies
+ */
+import styled from '@emotion/styled';
+
+/**
+ * Internal dependencies
+ */
+import Button from '../button';
+import { Heading } from '../heading';
+import { HStack } from '../h-stack';
+import { space } from '../ui/utils/space';
+import { COLORS, CONFIG } from '../utils';
+import { View } from '../view';
+import ColorIndicator from '../color-indicator';
+import InputControl from '../input-control';
+import Item from '../item-group/item';
+import {
+	Container as InputControlContainer,
+	Input,
+	BackdropUI as InputBackdropUI,
+} from '../input-control/styles/input-control-styles';
+
+export const ColorIndicatorStyled = styled( ColorIndicator )`
+	&& {
+		display: block;
+		border-radius: 50%;
+		border: 0;
+		height: ${ space( 6 ) };
+		width: ${ space( 6 ) };
+		margin-left: 0;
+		padding: 0;
+	}
+`;
+
+export const ColorNameInputControl = styled( InputControl )`
+	${ InputControlContainer } {
+		background: ${ COLORS.gray[ 100 ] };
+		border-radius: 2px;
+		${ Input }${ Input }${ Input }${ Input } {
+			height: ${ space( 8 ) };
+		}
+		${ InputBackdropUI }${ InputBackdropUI }${ InputBackdropUI } {
+			border-color: transparent;
+			box-shadow: none;
+		}
+	}
+`;
+
+export const ColorItem = styled( Item )`
+	padding: 3px 0 3px ${ space( 3 ) };
+	height: calc( 40px - ${ CONFIG.borderWidth } );
+`;
+
+export const ColorNameContainer = styled.span`
+	line-height: ${ space( 8 ) };
+	margin-left: ${ space( 2 ) };
+`;
+
+export const ColorHeading = styled( Heading )`
+	text-transform: uppercase;
+	line-height: ${ space( 6 ) };
+	font-weight: 500;
+	&&& {
+		font-size: 11px;
+		margin-bottom: 0;
+	}
+`;
+
+export const ColorActionsContainer = styled( View )`
+	height: ${ space( 6 ) };
+	display: flex;
+`;
+
+export const ColorHStackHeader = styled( HStack )`
+	margin-bottom: ${ space( 2 ) };
+`;
+
+export const ColorEditStyles = styled( View )`
+	&&& {
+		.components-button.has-icon {
+		min-width: 0;
+		padding: 0;
+	}
+`;
+
+export const DoneButton = styled( Button )`
+	&& {
+		color: ${ COLORS.ui.theme };
+	}
+`;
+
+export const RemoveButton = styled( Button )`
+	&& {
+		margin-top: ${ space( 1 ) };
+	}
+`;

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

@@ -11,6 +11,9 @@ import ColorIndicator from '../';
 export default {
 	title: 'Components/ColorIndicator',
 	component: ColorIndicator,
+	parameters: {
+		knobs: { disabled: false },
+	},
 };
 
 export const _default = () => {

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

@@ -15,6 +15,7 @@ function ColorOption( {
 	value,
 	colors,
 	disableCustomColors,
+	enableAlpha,
 	onChange,
 } ) {
 	const [ isOpen, setIsOpen ] = useState( false );
@@ -29,11 +30,13 @@ function ColorOption( {
 			</Button>
 			{ isOpen && (
 				<ColorPalette
+					className="components-color-list-picker__color-picker"
 					colors={ colors }
 					value={ value }
 					clearable={ false }
 					onChange={ onChange }
 					disableCustomColors={ disableCustomColors }
+					enableAlpha={ enableAlpha }
 				/>
 			) }
 		</>
@@ -45,6 +48,7 @@ function ColorListPicker( {
 	labels,
 	value = [],
 	disableCustomColors,
+	enableAlpha,
 	onChange,
 } ) {
 	return (
@@ -56,6 +60,7 @@ function ColorListPicker( {
 					value={ value[ index ] }
 					colors={ colors }
 					disableCustomColors={ disableCustomColors }
+					enableAlpha={ enableAlpha }
 					onChange={ ( newColor ) => {
 						const newColors = value.slice();
 						newColors[ index ] = newColor;

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

@@ -2,3 +2,7 @@
 .components-color-list-picker__swatch-button {
 	width: 100%;
 }
+
+.components-color-list-picker__color-picker {
+	margin: $grid-unit-10 0;
+}

package/src/color-palette/index.js

@@ -2,7 +2,9 @@
  * External dependencies
  */
 import { map } from 'lodash';
-import tinycolor from 'tinycolor2';
+import { colord, extend } from 'colord';
+import namesPlugin from 'colord/plugins/names';
+import a11yPlugin from 'colord/plugins/a11y';
 
 /**
  * WordPress dependencies
@@ -13,87 +15,157 @@ import { useCallback, useMemo } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import ColorPicker from '../color-picker';
+import Dropdown from '../dropdown';
+import { ColorPicker } from '../color-picker';
 import CircularOptionPicker from '../circular-option-picker';
+import { VStack } from '../v-stack';
+import { ColorHeading } from './styles';
+
+extend( [ namesPlugin, a11yPlugin ] );
+
+function SinglePalette( {
+	className,
+	clearColor,
+	colors,
+	onChange,
+	value,
+	actions,
+} ) {
+	const colorOptions = useMemo( () => {
+		return map( colors, ( { color, name } ) => {
+			const colordColor = colord( color );
+			return (
+				<CircularOptionPicker.Option
+					key={ color }
+					isSelected={ value === color }
+					selectedIconProps={
+						value === color
+							? {
+									fill:
+										colordColor.contrast() >
+										colordColor.contrast( '#000' )
+											? '#fff'
+											: '#000',
+							  }
+							: {}
+					}
+					tooltipText={
+						name ||
+						// translators: %s: color hex code e.g: "#f00".
+						sprintf( __( 'Color code: %s' ), color )
+					}
+					style={ { backgroundColor: color, color } }
+					onClick={
+						value === color ? clearColor : () => onChange( color )
+					}
+					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 )
+					}
+				/>
+			);
+		} );
+	}, [ colors, value, onChange, clearColor ] );
+	return (
+		<CircularOptionPicker
+			className={ className }
+			options={ colorOptions }
+			actions={ actions }
+		/>
+	);
+}
+
+function MultiplePalettes( {
+	className,
+	clearColor,
+	colors,
+	onChange,
+	value,
+	actions,
+} ) {
+	return (
+		<VStack spacing={ 3 } className={ className }>
+			{ colors.map( ( { name, colors: colorPalette }, index ) => {
+				return (
+					<VStack spacing={ 2 } key={ index }>
+						<ColorHeading>{ name }</ColorHeading>
+						<SinglePalette
+							clearColor={ clearColor }
+							colors={ colorPalette }
+							onChange={ onChange }
+							value={ value }
+							actions={
+								colors.length === index + 1 ? actions : null
+							}
+						/>
+					</VStack>
+				);
+			} ) }
+		</VStack>
+	);
+}
 
 export default function ColorPalette( {
 	clearable = true,
 	className,
 	colors,
 	disableCustomColors = false,
+	enableAlpha,
 	onChange,
 	value,
+	__experimentalHasMultipleOrigins = false,
 } ) {
 	const clearColor = useCallback( () => onChange( undefined ), [ onChange ] );
-	const colorOptions = useMemo( () => {
-		return map( colors, ( { color, name } ) => (
-			<CircularOptionPicker.Option
-				key={ color }
-				isSelected={ value === color }
-				selectedIconProps={
-					value === color
-						? {
-								fill: tinycolor
-									.mostReadable( color, [ '#000', '#fff' ] )
-									.toHexString(),
-						  }
-						: {}
-				}
-				tooltipText={
-					name ||
-					// translators: %s: color hex code e.g: "#f00".
-					sprintf( __( 'Color code: %s' ), color )
-				}
-				style={ { backgroundColor: color, color } }
-				onClick={
-					value === color ? clearColor : () => onChange( color )
-				}
-				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 )
-				}
-			/>
-		) );
-	}, [ colors, value, onChange, clearColor ] );
+	const Component = __experimentalHasMultipleOrigins
+		? MultiplePalettes
+		: SinglePalette;
+
 	const renderCustomColorPicker = () => (
 		<ColorPicker
 			color={ value }
-			onChangeComplete={ ( color ) => onChange( color.hex ) }
-			disableAlpha
+			onChange={ ( color ) => onChange( color ) }
+			enableAlpha={ enableAlpha }
 		/>
 	);
 
 	return (
-		<CircularOptionPicker
-			className={ className }
-			options={ colorOptions }
-			actions={
-				<>
-					{ ! disableCustomColors && (
-						<CircularOptionPicker.DropdownLinkAction
-							dropdownProps={ {
-								renderContent: renderCustomColorPicker,
-								contentClassName:
-									'components-color-palette__picker',
-							} }
-							buttonProps={ {
-								'aria-label': __( 'Custom color picker' ),
-							} }
-							linkText={ __( 'Custom color' ) }
-						/>
+		<VStack spacing={ 3 } className={ className }>
+			{ ! disableCustomColors && (
+				<Dropdown
+					renderContent={ renderCustomColorPicker }
+					renderToggle={ ( { isOpen, onToggle } ) => (
+						<button
+							className="components-color-palette__custom-color"
+							aria-expanded={ isOpen }
+							aria-haspopup="true"
+							onClick={ onToggle }
+							aria-label={ __( 'Custom color picker' ) }
+							style={ { background: value } }
+						>
+							{ value }
+						</button>
 					) }
-					{ !! clearable && (
+				/>
+			) }
+			<Component
+				clearable={ clearable }
+				clearColor={ clearColor }
+				colors={ colors }
+				onChange={ onChange }
+				value={ value }
+				actions={
+					!! clearable && (
 						<CircularOptionPicker.ButtonAction
 							onClick={ clearColor }
 						>
 							{ __( 'Clear' ) }
 						</CircularOptionPicker.ButtonAction>
-					) }
-				</>
-			}
-		/>
+					)
+				}
+			/>
+		</VStack>
 	);
 }

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

@@ -13,7 +13,13 @@ import { useState } from '@wordpress/element';
  */
 import ColorPalette from '../';
 
-export default { title: 'Components/ColorPalette', component: ColorPalette };
+export default {
+	title: 'Components/ColorPalette',
+	component: ColorPalette,
+	parameters: {
+		knobs: { disabled: false },
+	},
+};
 
 const ColorPaletteWithState = ( props ) => {
 	const [ color, setColor ] = useState( '#F00' );

package/src/color-palette/style.scss

@@ -0,0 +1,18 @@
+.components-color-palette__custom-color {
+	border: none;
+	background: none;
+	outline: 0;
+	display: block;
+	border-radius: $radius-block-ui;
+	height: $grid-unit-60;
+	text-align: right;
+	width: 100%;
+	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;
+	background-size: calc(2 * 25px) calc(2 * 25px);
+	box-sizing: border-box;
+	color: $white;
+	cursor: pointer;
+}

package/src/color-palette/styles.js

@@ -0,0 +1,19 @@
+/**
+ * External dependencies
+ */
+import styled from '@emotion/styled';
+
+/**
+ * Internal dependencies
+ */
+import { Heading } from '../heading';
+
+export const ColorHeading = styled( Heading )`
+	text-transform: uppercase;
+	line-height: 24px;
+	font-weight: 500;
+	&&& {
+		font-size: 11px;
+		margin-bottom: 0;
+	}
+`;