@wordpress/components 19.0.4 → 19.1.2

package/src/gradient-picker/stories/index.js

@@ -84,3 +84,26 @@ export const _default = () => {
 		/>
 	);
 };
+
+export const WithNoExistingGradients = () => {
+	const disableCustomGradients = boolean( 'Disable Custom Gradients', false );
+	const __experimentalHasMultipleOrigins = boolean(
+		'Experimental Has Multiple Origins',
+		true
+	);
+	const clearable = boolean( 'Clearable', true );
+	const className = text( 'Class Name', '' );
+	const gradients = object( 'Gradients', [] );
+
+	return (
+		<GradientPickerWithState
+			__experimentalHasMultipleOrigins={
+				__experimentalHasMultipleOrigins
+			}
+			disableCustomGradients={ disableCustomGradients }
+			gradients={ gradients }
+			clearable={ clearable }
+			className={ className }
+		/>
+	);
+};

package/src/index.js

@@ -36,7 +36,7 @@ export {
 } from './card';
 export { default as CheckboxControl } from './checkbox-control';
 export { default as ClipboardButton } from './clipboard-button';
-export { default as __experimentalColorEdit } from './color-edit';
+export { default as __experimentalPaletteEdit } from './palette-edit';
 export { default as ColorIndicator } from './color-indicator';
 export { default as ColorPalette } from './color-palette';
 export { ColorPicker } from './color-picker';

package/src/mobile/global-styles-context/utils.native.js

@@ -233,10 +233,10 @@ export function parseStylesVariables( styles, mappedValues, customValues ) {
 
 export function getMappedValues( features, palette ) {
 	const typography = features?.typography;
-	const colors = { ...palette?.theme, ...palette?.user };
+	const colors = { ...palette?.theme, ...palette?.custom };
 	const fontSizes = {
 		...typography?.fontSizes?.theme,
-		...typography?.fontSizes?.user,
+		...typography?.fontSizes?.custom,
 	};
 	const mappedValues = {
 		color: {

package/src/navigation/item/index.js

@@ -15,7 +15,7 @@ import { isRTL } from '@wordpress/i18n';
  */
 import Button from '../../button';
 import { useNavigationContext } from '../context';
-import { ItemUI } from '../styles/navigation-styles';
+import { ItemUI, ItemIconUI } from '../styles/navigation-styles';
 import NavigationItemBaseContent from './base-content';
 import NavigationItemBase from './base';
 
@@ -29,6 +29,7 @@ export default function NavigationItem( props ) {
 		navigateToMenu,
 		onClick = noop,
 		title,
+		icon,
 		hideIfTargetMenuEmpty,
 		isText,
 		...restProps
@@ -51,8 +52,10 @@ export default function NavigationItem( props ) {
 		return null;
 	}
 
+	const isActive = item && activeItem === item;
+
 	const classes = classnames( className, {
-		'is-active': item && activeItem === item,
+		'is-active': isActive,
 	} );
 
 	const onItemClick = ( event ) => {
@@ -62,22 +65,34 @@ export default function NavigationItem( props ) {
 
 		onClick( event );
 	};
-	const icon = isRTL() ? chevronLeft : chevronRight;
+	const navigationIcon = isRTL() ? chevronLeft : chevronRight;
 	const baseProps = children ? props : { ...props, onClick: undefined };
 	const itemProps = isText
 		? restProps
-		: { as: Button, href, onClick: onItemClick, ...restProps };
+		: {
+				as: Button,
+				href,
+				onClick: onItemClick,
+				'aria-current': isActive ? 'page' : undefined,
+				...restProps,
+		  };
 
 	return (
 		<NavigationItemBase { ...baseProps } className={ classes }>
 			{ children || (
 				<ItemUI { ...itemProps }>
+					{ icon && (
+						<ItemIconUI>
+							<Icon icon={ icon } />
+						</ItemIconUI>
+					) }
+
 					<NavigationItemBaseContent
 						title={ title }
 						badge={ badge }
 					/>
 
-					{ navigateToMenu && <Icon icon={ icon } /> }
+					{ navigateToMenu && <Icon icon={ navigationIcon } /> }
 				</ItemUI>
 			) }
 		</NavigationItemBase>

package/src/navigation/stories/more-examples.js

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { useEffect, useState } from '@wordpress/element';
-import { Icon, wordpress } from '@wordpress/icons';
+import { Icon, wordpress, home } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -33,6 +33,7 @@ export function MoreExamplesStory() {
 				</NavigationGroup>
 				<NavigationGroup title="Items with Unusual Features">
 					<NavigationItem
+						icon={ home }
 						item="item-sub-menu"
 						navigateToMenu="sub-menu"
 						title="Sub-Menu with Custom Back Label"

package/src/navigation/styles/navigation-styles.js

@@ -184,6 +184,11 @@ export const ItemUI = styled.div`
 	opacity: 0.7;
 `;
 
+export const ItemIconUI = styled.span`
+	display: flex;
+	margin-right: ${ space( 2 ) };
+`;
+
 export const ItemBadgeUI = styled.span`
 	margin-left: ${ () => ( isRTL() ? '0' : space( 2 ) ) };
 	margin-right: ${ () => ( isRTL() ? space( 2 ) : '0' ) };

package/src/palette-edit/index.js

@@ -0,0 +1,398 @@
+/**
+ * External dependencies
+ */
+import { kebabCase } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { useState, useRef, useEffect } from '@wordpress/element';
+import { __, sprintf } 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 elementsLength = elements.length;
+	const hasElements = elementsLength > 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={ () => {
+								const tempOptionName = sprintf(
+									/* translators: %s: is a temporary id for a custom color */
+									__( 'Color %s ' ),
+									elementsLength + 1
+								);
+								onChange( [
+									...elements,
+									{
+										...( isGradient
+											? { gradient: DEFAULT_GRADIENT }
+											: { color: '#000' } ),
+										name: tempOptionName,
+										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,