@wordpress/components 19.0.3 → 19.1.1

package/src/palette-edit/index.js

@@ -0,0 +1,392 @@
+/**
+ * External dependencies
+ */
+import { kebabCase } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+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 Button from '../button';
+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 GradientPicker from '../gradient-picker';
+import ColorPalette from '../color-palette';
+import DropdownMenu from '../dropdown-menu';
+import Popover from '../popover';
+import {
+	PaletteActionsContainer,
+	PaletteEditStyles,
+	PaletteHeading,
+	PaletteHStackHeader,
+	IndicatorStyled,
+	PaletteItem,
+	NameContainer,
+	NameInputControl,
+	DoneButton,
+	RemoveButton,
+} from './styles';
+import { NavigableMenu } from '../navigable-container';
+import { DEFAULT_GRADIENT } from '../custom-gradient-picker/constants';
+import CustomGradientPicker from '../custom-gradient-picker';
+
+function NameInput( { value, onChange, label } ) {
+	return (
+		<NameInputControl
+			label={ label }
+			hideLabelFromVision
+			value={ value }
+			onChange={ onChange }
+		/>
+	);
+}
+
+function Option( {
+	canOnlyChangeValues,
+	element,
+	onChange,
+	isEditing,
+	onStartEditing,
+	onRemove,
+	onStopEditing,
+	slugPrefix,
+	isGradient,
+} ) {
+	const focusOutsideProps = useFocusOutside( onStopEditing );
+	const value = isGradient ? element.gradient : element.color;
+	return (
+		<PaletteItem
+			as="div"
+			onClick={ onStartEditing }
+			{ ...( isEditing ? focusOutsideProps : {} ) }
+		>
+			<HStack justify="flex-start">
+				<FlexItem>
+					<IndicatorStyled
+						style={ { background: value, color: 'transparent' } }
+					/>
+				</FlexItem>
+				<FlexItem>
+					{ isEditing && ! canOnlyChangeValues ? (
+						<NameInput
+							label={
+								isGradient
+									? __( 'Gradient name' )
+									: __( 'Color name' )
+							}
+							value={ element.name }
+							onChange={ ( nextName ) =>
+								onChange( {
+									...element,
+									name: nextName,
+									slug: slugPrefix + kebabCase( nextName ),
+								} )
+							}
+						/>
+					) : (
+						<NameContainer>{ element.name }</NameContainer>
+					) }
+				</FlexItem>
+				{ isEditing && ! canOnlyChangeValues && (
+					<FlexItem>
+						<RemoveButton
+							isSmall
+							icon={ lineSolid }
+							label={ __( 'Remove color' ) }
+							onClick={ onRemove }
+						/>
+					</FlexItem>
+				) }
+			</HStack>
+			{ isEditing && (
+				<Popover
+					position="bottom left"
+					className="components-palette-edit__popover"
+				>
+					{ ! isGradient && (
+						<ColorPicker
+							color={ value }
+							onChange={ ( newColor ) =>
+								onChange( {
+									...element,
+									color: newColor,
+								} )
+							}
+						/>
+					) }
+					{ isGradient && (
+						<CustomGradientPicker
+							value={ value }
+							onChange={ ( newGradient ) =>
+								onChange( {
+									...element,
+									gradient: newGradient,
+								} )
+							}
+						/>
+					) }
+				</Popover>
+			) }
+		</PaletteItem>
+	);
+}
+
+function PaletteEditListView( {
+	elements,
+	onChange,
+	editingElement,
+	setEditingElement,
+	canOnlyChangeValues,
+	slugPrefix,
+	isGradient,
+} ) {
+	// When unmounting the component if there are empty elements (the user did not complete the insertion) clean them.
+	const elementsReference = useRef();
+	useEffect( () => {
+		elementsReference.current = elements;
+	}, [ elements ] );
+	useEffect( () => {
+		return () => {
+			if ( elementsReference.current.some( ( { slug } ) => ! slug ) ) {
+				const newElements = elementsReference.current.filter(
+					( { slug } ) => slug
+				);
+				onChange( newElements.length ? newElements : undefined );
+			}
+		};
+	}, [] );
+	return (
+		<VStack spacing={ 3 }>
+			<ItemGroup isBordered isSeparated>
+				{ elements.map( ( element, index ) => (
+					<Option
+						isGradient={ isGradient }
+						canOnlyChangeValues={ canOnlyChangeValues }
+						key={ index }
+						element={ element }
+						onStartEditing={ () => {
+							if ( editingElement !== index ) {
+								setEditingElement( index );
+							}
+						} }
+						onChange={ ( newElement ) => {
+							onChange(
+								elements.map(
+									( currentElement, currentIndex ) => {
+										if ( currentIndex === index ) {
+											return newElement;
+										}
+										return currentElement;
+									}
+								)
+							);
+						} }
+						onRemove={ () => {
+							setEditingElement( null );
+							const newElements = elements.filter(
+								( _currentElement, currentIndex ) => {
+									if ( currentIndex === index ) {
+										return false;
+									}
+									return true;
+								}
+							);
+							onChange(
+								newElements.length ? newElements : undefined
+							);
+						} }
+						isEditing={ index === editingElement }
+						onStopEditing={ () => {
+							if ( index === editingElement ) {
+								setEditingElement( null );
+							}
+						} }
+						slugPrefix={ slugPrefix }
+					/>
+				) ) }
+			</ItemGroup>
+		</VStack>
+	);
+}
+
+const EMPTY_ARRAY = [];
+
+export default function PaletteEdit( {
+	gradients,
+	colors = EMPTY_ARRAY,
+	onChange,
+	paletteLabel,
+	emptyMessage,
+	canOnlyChangeValues,
+	canReset,
+	slugPrefix = '',
+} ) {
+	const isGradient = !! gradients;
+	const elements = isGradient ? gradients : colors;
+	const [ isEditing, setIsEditing ] = useState( false );
+	const [ editingElement, setEditingElement ] = useState( null );
+	const isAdding =
+		isEditing &&
+		editingElement &&
+		elements[ editingElement ] &&
+		! elements[ editingElement ].slug;
+
+	const hasElements = elements.length > 0;
+
+	return (
+		<PaletteEditStyles>
+			<PaletteHStackHeader>
+				<PaletteHeading>{ paletteLabel }</PaletteHeading>
+				<PaletteActionsContainer>
+					{ isEditing && (
+						<DoneButton
+							isSmall
+							onClick={ () => {
+								setIsEditing( false );
+								setEditingElement( null );
+							} }
+						>
+							{ __( 'Done' ) }
+						</DoneButton>
+					) }
+					{ ! canOnlyChangeValues && (
+						<Button
+							isSmall
+							isPressed={ isAdding }
+							icon={ plus }
+							label={
+								isGradient
+									? __( 'Add gradient' )
+									: __( 'Add color' )
+							}
+							onClick={ () => {
+								onChange( [
+									...elements,
+									{
+										...( isGradient
+											? { gradient: DEFAULT_GRADIENT }
+											: { color: '#000' } ),
+										name: '',
+										slug: '',
+									},
+								] );
+								setIsEditing( true );
+								setEditingElement( elements.length );
+							} }
+						/>
+					) }
+					{ ! isEditing && (
+						<Button
+							disabled={ ! hasElements }
+							isSmall
+							icon={ moreVertical }
+							label={
+								isGradient
+									? __( 'Edit gradients' )
+									: __( 'Edit colors' )
+							}
+							onClick={ () => {
+								setIsEditing( true );
+							} }
+						/>
+					) }
+					{ isEditing && ( canReset || ! canOnlyChangeValues ) && (
+						<DropdownMenu
+							icon={ moreVertical }
+							label={
+								isGradient
+									? __( 'Gradient options' )
+									: __( 'Color options' )
+							}
+							toggleProps={ {
+								isSmall: true,
+							} }
+						>
+							{ ( { onClose } ) => (
+								<>
+									<NavigableMenu role="menu">
+										{ ! canOnlyChangeValues && (
+											<Button
+												variant="tertiary"
+												onClick={ () => {
+													setEditingElement( null );
+													setIsEditing( false );
+													onChange();
+													onClose();
+												} }
+											>
+												{ isGradient
+													? __(
+															'Remove all gradients'
+													  )
+													: __(
+															'Remove all colors'
+													  ) }
+											</Button>
+										) }
+										{ canReset && (
+											<Button
+												variant="tertiary"
+												onClick={ () => {
+													setEditingElement( null );
+													onChange();
+													onClose();
+												} }
+											>
+												{ isGradient
+													? __( 'Reset gradient' )
+													: __( 'Reset colors' ) }
+											</Button>
+										) }
+									</NavigableMenu>
+								</>
+							) }
+						</DropdownMenu>
+					) }
+				</PaletteActionsContainer>
+			</PaletteHStackHeader>
+			{ hasElements && (
+				<>
+					{ isEditing && (
+						<PaletteEditListView
+							canOnlyChangeValues={ canOnlyChangeValues }
+							elements={ elements }
+							onChange={ onChange }
+							editingElement={ editingElement }
+							setEditingElement={ setEditingElement }
+							slugPrefix={ slugPrefix }
+							isGradient={ isGradient }
+						/>
+					) }
+					{ ! isEditing &&
+						( isGradient ? (
+							<GradientPicker
+								gradients={ gradients }
+								onChange={ () => {} }
+								clearable={ false }
+								disableCustomGradients={ true }
+							/>
+						) : (
+							<ColorPalette
+								colors={ colors }
+								onChange={ () => {} }
+								clearable={ false }
+								disableCustomColors={ true }
+							/>
+						) ) }
+				</>
+			) }
+			{ ! hasElements && emptyMessage }
+		</PaletteEditStyles>
+	);
+}

package/src/palette-edit/style.scss

@@ -0,0 +1,19 @@
+@include break-medium() {
+	.components-palette-edit__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-palette-edit__popover {
+	.components-custom-gradient-picker__gradient-bar {
+		margin-top: 0;
+	}
+	.components-custom-gradient-picker__ui-line {
+		margin-bottom: 0;
+	}
+	.components-custom-gradient-picker {
+		width: 280px;
+		padding: 8px;
+	}
+}

package/src/{color-edit → palette-edit}/styles.js

@@ -12,7 +12,6 @@ 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 {
@@ -20,20 +19,15 @@ import {
 	Input,
 	BackdropUI as InputBackdropUI,
 } from '../input-control/styles/input-control-styles';
+import CircularOptionPicker from '../circular-option-picker';
 
-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 IndicatorStyled = styled( CircularOptionPicker.Option )`
+	width: ${ space( 6 ) };
+	height: ${ space( 6 ) };
+	pointer-events: none;
 `;
 
-export const ColorNameInputControl = styled( InputControl )`
+export const NameInputControl = styled( InputControl )`
 	${ InputControlContainer } {
 		background: ${ COLORS.gray[ 100 ] };
 		border-radius: 2px;
@@ -47,17 +41,20 @@ export const ColorNameInputControl = styled( InputControl )`
 	}
 `;
 
-export const ColorItem = styled( Item )`
+export const PaletteItem = styled( Item )`
 	padding: 3px 0 3px ${ space( 3 ) };
 	height: calc( 40px - ${ CONFIG.borderWidth } );
 `;
 
-export const ColorNameContainer = styled.span`
+export const NameContainer = styled.div`
 	line-height: ${ space( 8 ) };
 	margin-left: ${ space( 2 ) };
+	margin-right: ${ space( 2 ) };
+	white-space: nowrap;
+	overflow: hidden;
 `;
 
-export const ColorHeading = styled( Heading )`
+export const PaletteHeading = styled( Heading )`
 	text-transform: uppercase;
 	line-height: ${ space( 6 ) };
 	font-weight: 500;
@@ -67,16 +64,16 @@ export const ColorHeading = styled( Heading )`
 	}
 `;
 
-export const ColorActionsContainer = styled( View )`
+export const PaletteActionsContainer = styled( View )`
 	height: ${ space( 6 ) };
 	display: flex;
 `;
 
-export const ColorHStackHeader = styled( HStack )`
+export const PaletteHStackHeader = styled( HStack )`
 	margin-bottom: ${ space( 2 ) };
 `;
 
-export const ColorEditStyles = styled( View )`
+export const PaletteEditStyles = styled( View )`
 	&&& {
 		.components-button.has-icon {
 		min-width: 0;

package/src/popover/index.js

@@ -131,7 +131,11 @@ function computeAnchorRect(
 	}
 
 	const { parentNode } = anchorRefFallback.current;
-	const rect = parentNode.getBoundingClientRect();
+	const rect = offsetIframe(
+		parentNode.getBoundingClientRect(),
+		parentNode.ownerDocument,
+		container
+	);
 
 	if ( shouldAnchorIncludePadding ) {
 		return rect;

package/src/style.scss

@@ -4,7 +4,7 @@
 @import "./button/style.scss";
 @import "./checkbox-control/style.scss";
 @import "./circular-option-picker/style.scss";
-@import "./color-edit/style.scss";
+@import "./palette-edit/style.scss";
 @import "./color-indicator/style.scss";
 @import "./combobox-control/style.scss";
 @import "./color-list-picker/style.scss";

package/src/toggle-group-control/stories/index.js

@@ -71,6 +71,11 @@ const _default = ( { options } ) => {
 				opt[ 'aria-label' ],
 				`${ KNOBS_GROUPS.ToggleGroupControlOption }-${ index + 1 }`
 			) }
+			showTooltip={ boolean(
+				`${ KNOBS_GROUPS.ToggleGroupControlOption }: showTooltip`,
+				opt.showTooltip,
+				`${ KNOBS_GROUPS.ToggleGroupControlOption }-${ index + 1 }`
+			) }
 		/>
 	) );
 
@@ -101,6 +106,16 @@ Default.args = {
 	],
 };
 
+export const WithTooltip = _default.bind( {} );
+WithTooltip.args = {
+	...Default.args,
+	options: [
+		{ value: 1, label: '1', showTooltip: true, 'aria-label': 'One' },
+		{ value: 2, label: '2', showTooltip: true, 'aria-label': 'Two' },
+		{ value: 3, label: '3', showTooltip: true, 'aria-label': 'Three' },
+	],
+};
+
 export const WithAriaLabel = _default.bind( {} );
 WithAriaLabel.args = {
 	...Default.args,

package/src/toggle-group-control/test/index.js

@@ -15,16 +15,35 @@ describe( 'ToggleGroupControl', () => {
 			<ToggleGroupControlOption value="jack" label="J" />
 		</>
 	);
+	const optionsWithTooltip = (
+		<>
+			<ToggleGroupControlOption
+				value="gnocchi"
+				label="Delicious Gnocchi"
+				aria-label="Click for Delicious Gnocchi"
+				showTooltip={ true }
+			/>
+			<ToggleGroupControlOption
+				value="caponata"
+				label="Sumptuous Caponata"
+				aria-label="Click for Sumptuous Caponata"
+			/>
+		</>
+	);
+
 	it( 'should render correctly', () => {
 		const { container } = render(
 			<ToggleGroupControl label="Test Toggle Group Control">
 				{ options }
 			</ToggleGroupControl>
 		);
+
 		expect( container.firstChild ).toMatchSnapshot();
 	} );
+
 	it( 'should call onChange with proper value', () => {
 		const mockOnChange = jest.fn();
+
 		render(
 			<ToggleGroupControl
 				value="jack"
@@ -34,8 +53,46 @@ describe( 'ToggleGroupControl', () => {
 				{ options }
 			</ToggleGroupControl>
 		);
+
 		const firstRadio = screen.getByRole( 'radio', { name: 'R' } );
+
 		fireEvent.click( firstRadio );
+
 		expect( mockOnChange ).toHaveBeenCalledWith( 'rigas' );
 	} );
+	it( 'should render tooltip where `showTooltip` === `true`', () => {
+		render(
+			<ToggleGroupControl label="Test Toggle Group Control">
+				{ optionsWithTooltip }
+			</ToggleGroupControl>
+		);
+
+		const firstRadio = screen.getByLabelText(
+			'Click for Delicious Gnocchi'
+		);
+
+		fireEvent.focus( firstRadio );
+
+		expect(
+			screen.getByText( 'Click for Delicious Gnocchi' )
+		).toBeInTheDocument();
+	} );
+
+	it( 'should not render tooltip', () => {
+		render(
+			<ToggleGroupControl label="Test Toggle Group Control">
+				{ optionsWithTooltip }
+			</ToggleGroupControl>
+		);
+
+		const secondRadio = screen.getByLabelText(
+			'Click for Sumptuous Caponata'
+		);
+
+		fireEvent.focus( secondRadio );
+
+		expect(
+			screen.queryByText( 'Click for Sumptuous Caponata' )
+		).not.toBeInTheDocument();
+	} );
 } );

package/src/toggle-group-control/toggle-group-control-option/README.md

@@ -18,7 +18,7 @@ import {
 function Example() {
 	return (
 		<ToggleGroupControl label="my label" value="vertical" isBlock>
-			<ToggleGroupControlOption value="horizontal" label="Horizontal" />
+			<ToggleGroupControlOption value="horizontal" label="Horizontal" showTooltip={ true } />
 			<ToggleGroupControlOption value="vertical" label="Vertical" />
 		</ToggleGroupControl>
 	);
@@ -38,3 +38,10 @@ Label for the option. If needed, the `aria-label` prop can be used in addition t
 The value of the `ToggleGroupControlOption`.
 
 - Required: Yes
+
+### `showTooltip`: `boolean`
+
+Whether to show a tooltip when hovering over the option. The tooltip will attempt to use the `aria-label` prop text first, then the `label` prop text if no `aria-label` prop is found.
+
+- Required: No
+