@wordpress/components 19.0.5 → 19.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/components",
-	"version": "19.0.5",
+	"version": "19.1.0",
 	"description": "UI components for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -74,5 +74,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "518e7a279a0f596612232c55c83a351460f8816d"
+	"gitHead": "6d3bd917064b4b194677233ee426f5988fa441b9"
 }

package/src/circular-option-picker/index.js

@@ -25,15 +25,17 @@ function Option( {
 	const optionButton = (
 		<Button
 			isPressed={ isSelected }
-			className={ classnames(
-				className,
-				'components-circular-option-picker__option'
-			) }
+			className="components-circular-option-picker__option"
 			{ ...additionalProps }
 		/>
 	);
 	return (
-		<div className="components-circular-option-picker__option-wrapper">
+		<div
+			className={ classnames(
+				className,
+				'components-circular-option-picker__option-wrapper'
+			) }
+		>
 			{ tooltipText ? (
 				<Tooltip text={ tooltipText }>{ optionButton }</Tooltip>
 			) : (

package/src/date-time/test/time.js

@@ -47,13 +47,13 @@ describe( 'TimePicker', () => {
 		fireEvent.change( hoursInput, { target: { value: '12' } } );
 		fireEvent.blur( hoursInput );
 
-		expect( onChangeSpy ).toHaveBeenCalledWith( '2018-12-22T12:00:00' );
+		expect( onChangeSpy ).toHaveBeenCalledWith( '2018-12-22T00:00:00' );
 		onChangeSpy.mockClear();
 
 		fireEvent.change( minutesInput, { target: { value: '35' } } );
 		fireEvent.blur( minutesInput );
 
-		expect( onChangeSpy ).toHaveBeenCalledWith( '2018-12-22T12:35:00' );
+		expect( onChangeSpy ).toHaveBeenCalledWith( '2018-12-22T00:35:00' );
 		onChangeSpy.mockClear();
 	} );
 
@@ -169,6 +169,36 @@ describe( 'TimePicker', () => {
 		expect( onChangeSpy ).toHaveBeenCalledWith( '1986-10-18T11:00:00' );
 	} );
 
+	it( 'should allow to set the time correctly when the PM period is selected', () => {
+		const onChangeSpy = jest.fn();
+
+		render(
+			<TimePicker
+				currentTime="1986-10-18T11:00:00"
+				onChange={ onChangeSpy }
+				is12Hour
+			/>
+		);
+
+		const pmButton = screen.getByText( 'PM' );
+		fireEvent.click( pmButton );
+
+		const hoursInput = screen.getByLabelText( 'Hours' );
+		fireEvent.change( hoursInput, { target: { value: '6' } } );
+		fireEvent.blur( hoursInput );
+
+		// When clicking on 'PM', we expect the time to be 11pm
+		expect( onChangeSpy ).toHaveBeenNthCalledWith(
+			1,
+			'1986-10-18T23:00:00'
+		);
+		// When changing the hours to '6', we expect the time to be 6pm
+		expect( onChangeSpy ).toHaveBeenNthCalledWith(
+			2,
+			'1986-10-18T18:00:00'
+		);
+	} );
+
 	it( 'should truncate at the minutes on change', () => {
 		const onChangeSpy = jest.fn();
 

package/src/date-time/time.js

@@ -28,6 +28,10 @@ import TimeZone from './timezone';
  */
 const TIMEZONELESS_FORMAT = 'YYYY-MM-DDTHH:mm:ss';
 
+function from12hTo24h( hours, isPm ) {
+	return isPm ? ( ( hours % 12 ) + 12 ) % 24 : hours % 12;
+}
+
 /**
  * <UpdateOnBlurAsIntegerField>
  * A shared component to parse, validate, and handle remounting of the underlying form field element like <input> and <select>.
@@ -117,8 +121,16 @@ export function TimePicker( { is12Hour, currentTime, onChange } ) {
 	}
 
 	function update( name, value ) {
+		// If the 12-hour format is being used and the 'PM' period is selected, then
+		// the incoming value (which ranges 1-12) should be increased by 12 to match
+		// the expected 24-hour format.
+		let adjustedValue = value;
+		if ( name === 'hours' && is12Hour ) {
+			adjustedValue = from12hTo24h( value, am === 'PM' );
+		}
+
 		// Clone the date and call the specific setter function according to `name`.
-		const newDate = date.clone()[ name ]( value );
+		const newDate = date.clone()[ name ]( adjustedValue );
 		changeDate( newDate );
 	}
 
@@ -132,11 +144,7 @@ export function TimePicker( { is12Hour, currentTime, onChange } ) {
 
 			const newDate = date
 				.clone()
-				.hours(
-					value === 'PM'
-						? ( ( parsedHours % 12 ) + 12 ) % 24
-						: parsedHours % 12
-				);
+				.hours( from12hTo24h( parsedHours, value === 'PM' ) );
 
 			changeDate( newDate );
 		};

package/src/font-size-picker/index.js

@@ -186,6 +186,7 @@ function FontSizePicker(
 								value={ option.value }
 								label={ option.label }
 								aria-label={ option.name }
+								showTooltip={ true }
 							/>
 						) ) }
 					</ToggleGroupControl>

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
@@ -62,7 +63,7 @@ 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
@@ -72,12 +73,18 @@ export default function NavigationItem( props ) {
 		<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,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;
+	}
+}