@wordpress/components 18.0.0 → 19.0.3

package/src/divider/stories/index.js

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

package/src/drop-zone/index.js

@@ -11,7 +11,18 @@ import { __ } from '@wordpress/i18n';
 import { useState } from '@wordpress/element';
 import { upload, Icon } from '@wordpress/icons';
 import { getFilesFromDataTransfer } from '@wordpress/dom';
-import { __experimentalUseDropZone as useDropZone } from '@wordpress/compose';
+import {
+	__experimentalUseDropZone as useDropZone,
+	useReducedMotion,
+} from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import {
+	__unstableMotion as motion,
+	__unstableAnimatePresence as AnimatePresence,
+} from '../animation';
 
 export default function DropZoneComponent( {
 	className,
@@ -65,20 +76,57 @@ export default function DropZoneComponent( {
 			setIsDraggingOverElement( false );
 		},
 	} );
+	const disableMotion = useReducedMotion();
 
 	let children;
 
+	const backdrop = {
+		hidden: { scaleY: 0, opacity: 0 },
+		show: {
+			scaleY: 1,
+			opacity: 1,
+			transition: {
+				type: 'tween',
+				duration: 0.2,
+				delay: 0.1,
+				delayChildren: 0.2,
+			},
+		},
+		exit: {
+			scaleY: 1,
+			opacity: 0,
+			transition: {
+				duration: 0.3,
+				delayChildren: 0,
+			},
+		},
+	};
+
+	const foreground = {
+		hidden: { opacity: 0, scale: 0.75 },
+		show: { opacity: 1, scale: 1 },
+		exit: { opacity: 0, scale: 0.9 },
+	};
+
 	if ( isDraggingOverElement ) {
 		children = (
-			<div className="components-drop-zone__content">
-				<Icon
-					icon={ upload }
-					className="components-drop-zone__content-icon"
-				/>
-				<span className="components-drop-zone__content-text">
-					{ label ? label : __( 'Drop files to upload' ) }
-				</span>
-			</div>
+			<motion.div
+				variants={ backdrop }
+				initial={ disableMotion ? 'show' : 'hidden' }
+				animate="show"
+				exit={ disableMotion ? 'show' : 'exit' }
+				className="components-drop-zone__content"
+			>
+				<motion.div variants={ foreground }>
+					<Icon
+						icon={ upload }
+						className="components-drop-zone__content-icon"
+					/>
+					<span className="components-drop-zone__content-text">
+						{ label ? label : __( 'Drop files to upload' ) }
+					</span>
+				</motion.div>
+			</motion.div>
 		);
 	}
 
@@ -95,7 +143,11 @@ export default function DropZoneComponent( {
 
 	return (
 		<div ref={ ref } className={ classes }>
-			{ children }
+			{ disableMotion ? (
+				children
+			) : (
+				<AnimatePresence>{ children }</AnimatePresence>
+			) }
 		</div>
 	);
 }

package/src/drop-zone/style.scss

@@ -7,39 +7,29 @@
 	z-index: z-index(".components-drop-zone");
 	visibility: hidden;
 	opacity: 0;
-	transition: 0.3s opacity, 0.3s background-color, 0s visibility 0.3s;
-	@include reduce-motion("transition");
-	border: 2px solid var(--wp-admin-theme-color);
-	border-radius: 2px;
+	border-radius: $radius-block-ui;
 
 	&.is-active {
 		opacity: 1;
 		visibility: visible;
-		transition: 0.3s opacity, 0.3s background-color;
-		@include reduce-motion("transition");
-	}
-
-	&.is-dragging-over-element {
-		background-color: var(--wp-admin-theme-color);
 	}
 }
 
 .components-drop-zone__content {
 	position: absolute;
-	top: 50%;
+	top: 0;
+	bottom: 0;
 	left: 0;
 	right: 0;
-	z-index: z-index(".components-drop-zone__content");
-	transform: translateY(-50%);
+	height: 100%;
 	width: 100%;
+	display: flex;
+	background-color: var(--wp-admin-theme-color);
+	align-items: center;
+	justify-content: center;
+	z-index: z-index(".components-drop-zone__content");
 	text-align: center;
 	color: $white;
-	transition: transform 0.2s ease-in-out;
-	@include reduce-motion("transition");
-}
-
-.components-drop-zone.is-dragging-over-element .components-drop-zone__content {
-	transform: translateY(-50%) scale(1.05);
 }
 
 .components-drop-zone__content-icon,
@@ -51,9 +41,10 @@
 	margin: 0 auto;
 	line-height: 0;
 	fill: currentColor;
+	pointer-events: none;
 }
 
-
 .components-drop-zone__content-text {
 	font-family: $default-font;
+	font-size: $default-font-size;
 }

package/src/dropdown-menu/stories/index.js

@@ -13,7 +13,13 @@ import DropdownMenu from '../';
  */
 import { menu, arrowUp, arrowDown } from '@wordpress/icons';
 
-export default { title: 'Components/DropdownMenu', component: DropdownMenu };
+export default {
+	title: 'Components/DropdownMenu',
+	component: DropdownMenu,
+	parameters: {
+		knobs: { disabled: false },
+	},
+};
 
 export const _default = () => {
 	const label = text( 'Label', 'Select a direction.' );

package/src/duotone-picker/custom-duotone-bar.js

@@ -19,7 +19,6 @@ export default function CustomDuotoneBar( { value, onChange } ) {
 	return (
 		<CustomGradientBar
 			disableInserter
-			disableAlpha
 			background={ background }
 			hasGradient={ hasGradient }
 			value={ controlPoints }

package/src/duotone-picker/duotone-picker.js

@@ -85,6 +85,7 @@ function DuotonePicker( {
 					colors={ colorPalette }
 					value={ value }
 					disableCustomColors={ disableCustomColors }
+					enableAlpha
 					onChange={ ( newColors ) => {
 						if ( ! newColors[ 0 ] ) {
 							newColors[ 0 ] = defaultDark;

package/src/elevation/stories/index.js

@@ -25,6 +25,9 @@ import { useCallback } from '@wordpress/element';
 export default {
 	component: Elevation,
 	title: 'Components (Experimental)/Elevation',
+	parameters: {
+		knobs: { disabled: false },
+	},
 };
 
 const ElevationWrapper = ( { children } ) => (

package/src/external-link/stories/index.js

@@ -7,7 +7,13 @@ import { text } from '@storybook/addon-knobs';
  */
 import ExternalLink from '../';
 
-export default { title: 'Components/ExternalLink', component: ExternalLink };
+export default {
+	title: 'Components/ExternalLink',
+	component: ExternalLink,
+	parameters: {
+		knobs: { disabled: false },
+	},
+};
 
 export const _default = () => {
 	const title = text( 'children', 'WordPress' );

package/src/flyout/test/__snapshots__/index.js.snap

@@ -86,7 +86,7 @@ exports[`props should render correctly 1`] = `
 }
 
 <div
-  class="components-surface components-card components-card emotion-0 emotion-1 emotion-2"
+  class="components-surface components-card emotion-0 emotion-1 emotion-2"
   data-wp-c16t="true"
   data-wp-component="Card"
 >

package/src/font-size-picker/README.md

@@ -97,3 +97,12 @@ If `true`, the UI will contain a slider, instead of a numeric text input field.
 -   Type: `Boolean`
 -   Required: no
 -   Default: `false`
+
+### withReset
+
+If `true`, a reset button will be displayed alongside the predefined and custom
+font size fields.
+
+-   Type: `Boolean`
+-   Required: no
+-   Default: `true`

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

@@ -1,56 +1,30 @@
-/**
- * External dependencies
- */
-import { isNumber, isString } from 'lodash';
-
 /**
  * WordPress dependencies
  */
 import { __, sprintf } from '@wordpress/i18n';
-import { textColor } from '@wordpress/icons';
-import { useMemo, forwardRef } from '@wordpress/element';
+import { settings } from '@wordpress/icons';
+import { useState, useMemo, forwardRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import Button from '../button';
 import RangeControl from '../range-control';
+import { Flex, FlexItem } from '../flex';
 import { default as UnitControl, useCustomUnits } from '../unit-control';
 import CustomSelectControl from '../custom-select-control';
 import { VisuallyHidden } from '../visually-hidden';
-
-const DEFAULT_FONT_SIZE = 'default';
-const CUSTOM_FONT_SIZE = 'custom';
-const MAX_FONT_SIZE_DISPLAY = '25px';
-
-function getSelectValueFromFontSize( fontSizes, value ) {
-	if ( value ) {
-		const fontSizeValue = fontSizes.find( ( font ) => font.size === value );
-		return fontSizeValue ? fontSizeValue.slug : CUSTOM_FONT_SIZE;
-	}
-	return DEFAULT_FONT_SIZE;
-}
-
-function getSelectOptions( optionsArray, disableCustomFontSizes ) {
-	if ( disableCustomFontSizes && ! optionsArray.length ) {
-		return null;
-	}
-	optionsArray = [
-		{ slug: DEFAULT_FONT_SIZE, name: __( 'Default' ) },
-		...optionsArray,
-		...( disableCustomFontSizes
-			? []
-			: [ { slug: CUSTOM_FONT_SIZE, name: __( 'Custom' ) } ] ),
-	];
-	return optionsArray.map( ( option ) => ( {
-		key: option.slug,
-		name: option.name,
-		size: option.size,
-		style: {
-			fontSize: `min( ${ option.size }, ${ MAX_FONT_SIZE_DISPLAY } )`,
-		},
-	} ) );
-}
+import {
+	ToggleGroupControl,
+	ToggleGroupControlOption,
+} from '../toggle-group-control';
+import {
+	getFontSizeOptions,
+	getSelectedOption,
+	splitValueAndUnitFromSize,
+	isSimpleCssValue,
+	CUSTOM_FONT_SIZE,
+} from './utils';
 
 function FontSizePicker(
 	{
@@ -60,104 +34,213 @@ function FontSizePicker(
 		onChange,
 		value,
 		withSlider = false,
+		withReset = true,
 	},
 	ref
 ) {
-	const hasUnits =
-		isString( value ) ||
-		( fontSizes[ 0 ] && isString( fontSizes[ 0 ].size ) );
-
-	let noUnitsValue;
-	if ( ! hasUnits ) {
-		noUnitsValue = value;
-	} else {
-		noUnitsValue = parseInt( value );
-	}
-
-	const isPixelValue =
-		isNumber( value ) || ( isString( value ) && value.endsWith( 'px' ) );
-
+	const hasUnits = [ typeof value, typeof fontSizes?.[ 0 ]?.size ].includes(
+		'string'
+	);
+	const noUnitsValue = ! hasUnits ? value : parseInt( value );
+	const isPixelValue = typeof value === 'number' || value?.endsWith?.( 'px' );
 	const units = useCustomUnits( {
 		availableUnits: [ 'px', 'em', 'rem' ],
 	} );
 
+	// The main font size UI displays a toggle group when the presets are less
+	// than six and a select control when they are more.
+	//
+	// A select control is also used when the value of a preset cannot be
+	// immediately computed (eg. 'calc', 'var').
+	const shouldUseSelectControl =
+		fontSizes.length > 5 ||
+		fontSizes.some( ( { size } ) => ! isSimpleCssValue( size ) );
+
 	const options = useMemo(
-		() => getSelectOptions( fontSizes, disableCustomFontSizes ),
-		[ fontSizes, disableCustomFontSizes ]
+		() =>
+			getFontSizeOptions(
+				shouldUseSelectControl,
+				fontSizes,
+				disableCustomFontSizes
+			),
+		[ shouldUseSelectControl, fontSizes, disableCustomFontSizes ]
 	);
+	const selectedOption = getSelectedOption( fontSizes, value );
+	const isCustomValue = selectedOption.slug === CUSTOM_FONT_SIZE;
+	const [ showCustomValueControl, setShowCustomValueControl ] = useState(
+		! disableCustomFontSizes && isCustomValue
+	);
+	const headerHint = useMemo( () => {
+		if ( showCustomValueControl ) {
+			return `(${ __( 'Custom' ) })`;
+		}
+
+		// If we have a custom value that is not available in the font sizes,
+		// show it as a hint as long as it's a simple CSS value.
+		if ( isCustomValue ) {
+			return isSimpleCssValue( value ) && `(${ value })`;
+		}
+		if ( shouldUseSelectControl ) {
+			return (
+				isSimpleCssValue( selectedOption?.size ) &&
+				`(${ selectedOption?.size })`
+			);
+		}
+		// Calculate the `hint` for toggle group control.
+		let hint = selectedOption.name;
+		if ( typeof selectedOption.size === 'string' ) {
+			const [ , unit ] = splitValueAndUnitFromSize( selectedOption.size );
+			hint += `(${ unit })`;
+		}
+		return hint;
+	}, [ showCustomValueControl, selectedOption?.slug, value, isCustomValue ] );
 
 	if ( ! options ) {
 		return null;
 	}
 
-	const selectedFontSizeSlug = getSelectValueFromFontSize( fontSizes, value );
-
+	// This is used for select control only. We need to add support
+	// for ToggleGroupControl.
 	const currentFontSizeSR = sprintf(
 		// translators: %s: Currently selected font size.
 		__( 'Currently selected font size: %s' ),
-		options.find( ( option ) => option.key === selectedFontSizeSlug ).name
+		selectedOption.name
 	);
-
+	const baseClassName = 'components-font-size-picker';
 	return (
-		<fieldset
-			className="components-font-size-picker"
-			{ ...( ref ? {} : { ref } ) }
-		>
+		<fieldset className={ baseClassName } { ...( ref ? {} : { ref } ) }>
 			<VisuallyHidden as="legend">{ __( 'Font size' ) }</VisuallyHidden>
-			<div className="components-font-size-picker__controls">
-				{ fontSizes.length > 0 && (
-					<CustomSelectControl
-						className={ 'components-font-size-picker__select' }
-						label={ __( 'Font size' ) }
-						describedBy={ currentFontSizeSR }
-						options={ options }
-						value={ options.find(
-							( option ) => option.key === selectedFontSizeSlug
-						) }
-						onChange={ ( { selectedItem } ) => {
-							if ( hasUnits ) {
-								onChange( selectedItem.size );
-							} else {
-								onChange( Number( selectedItem.size ) );
+			<Flex
+				justify="space-between"
+				className={ `${ baseClassName }__header` }
+			>
+				<FlexItem>
+					{ __( 'Size' ) }
+					{ headerHint && (
+						<span className={ `${ baseClassName }__header__hint` }>
+							{ headerHint }
+						</span>
+					) }
+				</FlexItem>
+				{ ! disableCustomFontSizes && (
+					<FlexItem>
+						<Button
+							label={
+								showCustomValueControl
+									? __( 'Use size preset' )
+									: __( 'Set custom size' )
 							}
-						} }
-					/>
+							showTooltip={ false }
+							icon={ settings }
+							onClick={ () => {
+								setShowCustomValueControl(
+									! showCustomValueControl
+								);
+							} }
+							isPressed={ showCustomValueControl }
+							isSmall
+						/>
+					</FlexItem>
 				) }
-				{ ! withSlider && ! disableCustomFontSizes && (
-					<UnitControl
-						label={ __( 'Custom' ) }
-						labelPosition="top"
-						__unstableInputWidth="60px"
-						value={ value }
-						onChange={ ( nextSize ) => {
-							if ( 0 === parseFloat( nextSize ) || ! nextSize ) {
-								onChange( undefined );
-							} else {
+			</Flex>
+			<div className={ `${ baseClassName }__controls` }>
+				{ !! fontSizes.length &&
+					shouldUseSelectControl &&
+					! showCustomValueControl && (
+						<CustomSelectControl
+							className={ `${ baseClassName }__select` }
+							label={ __( 'Font size' ) }
+							hideLabelFromVision
+							describedBy={ currentFontSizeSR }
+							options={ options }
+							value={ options.find(
+								( option ) => option.key === selectedOption.slug
+							) }
+							onChange={ ( { selectedItem } ) => {
 								onChange(
 									hasUnits
-										? nextSize
-										: parseInt( nextSize, 10 )
+										? selectedItem.size
+										: Number( selectedItem.size )
 								);
-							}
+								if ( selectedItem.key === CUSTOM_FONT_SIZE ) {
+									setShowCustomValueControl( true );
+								}
+							} }
+						/>
+					) }
+				{ ! shouldUseSelectControl && ! showCustomValueControl && (
+					<ToggleGroupControl
+						label={ __( 'Font size' ) }
+						hideLabelFromVision
+						value={ value }
+						onChange={ ( newValue ) => {
+							onChange(
+								hasUnits ? newValue : Number( newValue )
+							);
 						} }
-						units={ hasUnits ? units : false }
-					/>
+						isBlock
+					>
+						{ options.map( ( option ) => (
+							<ToggleGroupControlOption
+								key={ option.key }
+								value={ option.value }
+								label={ option.label }
+								aria-label={ option.name }
+							/>
+						) ) }
+					</ToggleGroupControl>
 				) }
-				<Button
-					className="components-color-palette__clear"
-					disabled={ value === undefined }
-					onClick={ () => {
-						onChange( undefined );
-					} }
-					isSmall
-					variant="secondary"
-				>
-					{ __( 'Reset' ) }
-				</Button>
+				{ ! withSlider &&
+					! disableCustomFontSizes &&
+					showCustomValueControl && (
+						<Flex
+							justify="space-between"
+							className={ `${ baseClassName }__custom-size-control` }
+						>
+							<FlexItem isBlock>
+								<UnitControl
+									label={ __( 'Custom' ) }
+									labelPosition="top"
+									hideLabelFromVision
+									value={ value }
+									onChange={ ( nextSize ) => {
+										if (
+											0 === parseFloat( nextSize ) ||
+											! nextSize
+										) {
+											onChange( undefined );
+										} else {
+											onChange(
+												hasUnits
+													? nextSize
+													: parseInt( nextSize, 10 )
+											);
+										}
+									} }
+									units={ hasUnits ? units : false }
+								/>
+							</FlexItem>
+							{ withReset && (
+								<FlexItem isBlock>
+									<Button
+										className="components-color-palette__clear"
+										disabled={ value === undefined }
+										onClick={ () => {
+											onChange( undefined );
+										} }
+										isSmall
+										variant="secondary"
+									>
+										{ __( 'Reset' ) }
+									</Button>
+								</FlexItem>
+							) }
+						</Flex>
+					) }
 			</div>
 			{ withSlider && (
 				<RangeControl
-					className="components-font-size-picker__custom-input"
+					className={ `${ baseClassName }__custom-input` }
 					label={ __( 'Custom Size' ) }
 					value={ ( isPixelValue && noUnitsValue ) || '' }
 					initialPosition={ fallbackFontSize }
@@ -166,8 +249,6 @@ function FontSizePicker(
 					} }
 					min={ 12 }
 					max={ 100 }
-					beforeIcon={ textColor }
-					afterIcon={ textColor }
 				/>
 			) }
 		</fieldset>

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { number, object } from '@storybook/addon-knobs';
+import { number, object, boolean } from '@storybook/addon-knobs';
 
 /**
  * WordPress dependencies
@@ -16,10 +16,13 @@ import FontSizePicker from '../';
 export default {
 	title: 'Components/FontSizePicker',
 	component: FontSizePicker,
+	parameters: {
+		knobs: { disabled: false },
+	},
 };
 
-const FontSizePickerWithState = ( { ...props } ) => {
-	const [ fontSize, setFontSize ] = useState( 16 );
+const FontSizePickerWithState = ( { initialValue, ...props } ) => {
+	const [ fontSize, setFontSize ] = useState( initialValue || 16 );
 
 	return (
 		<FontSizePicker
@@ -104,3 +107,52 @@ export const withoutCustomSizes = () => {
 		/>
 	);
 };
+
+export const differentControlBySize = () => {
+	const options = [
+		{
+			name: 'Tiny',
+			slug: 'tiny',
+			size: 8,
+		},
+		{
+			name: 'Small',
+			slug: 'small',
+			size: 12,
+		},
+		{
+			name: 'Normal',
+			slug: 'normal',
+			size: 16,
+		},
+		{
+			name: 'Big',
+			slug: 'big',
+			size: 26,
+		},
+		{
+			name: 'Bigger',
+			slug: 'bigger',
+			size: 30,
+		},
+		{
+			name: 'Huge',
+			slug: 'huge',
+			size: 36,
+		},
+	];
+	const optionsWithUnits = options.map( ( option ) => ( {
+		...option,
+		size: `${ option.size }px`,
+	} ) );
+	const showMoreFontSizes = boolean( 'Add more font sizes', false );
+	const addUnitsToSizes = boolean( 'Add units to font sizes', false );
+	const _options = addUnitsToSizes ? optionsWithUnits : options;
+	const fontSizes = _options.slice(
+		0,
+		showMoreFontSizes ? _options.length : 4
+	);
+	return (
+		<FontSizePickerWithState fontSizes={ fontSizes } initialValue={ 8 } />
+	);
+};