@wordpress/components 18.0.0 → 19.0.3

package/src/font-size-picker/style.scss

@@ -1,13 +1,24 @@
+.components-font-size-picker__header {
+	&__hint {
+		margin-left: $grid-unit-05;
+		color: $gray-700;
+	}
+
+	// This button is inheriting padding and min-width.
+	// @todo: we should refactor it to not need to unset this.
+	.components-button.is-small.has-icon:not(.has-text) {
+		min-width: $icon-size;
+		padding: 0;
+	}
+}
+
 .components-font-size-picker__controls {
 	max-width: $sidebar-width - ( 2 * $grid-unit-20 );
-	display: flex;
-	flex-wrap: wrap;
 	align-items: center;
+	margin-top: $grid-unit-10;
 	margin-bottom: $grid-unit-30;
 
 	.components-unit-control-wrapper {
-		margin-right: $grid-unit-10;
-
 		.components-input-control__label {
 			font-weight: 300;
 			padding-bottom: 0 !important;
@@ -16,7 +27,7 @@
 	}
 
 	.components-custom-select-control__button {
-		min-width: 120px;
+		width: 100%;
 	}
 
 	// Apply the same height as the isSmall Reset button.
@@ -44,14 +55,8 @@
 		}
 	}
 
-	// Allow the font-size picker dropdown to grow in width.
-	.components-font-size-picker__select {
-		margin-right: $grid-unit-10;
-	}
-
 	.components-color-palette__clear {
 		height: 30px;
-		margin-top: 26px;
 	}
 }
 

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

@@ -13,6 +13,12 @@ const getUnitSelect = () =>
 const getUnitLabel = () =>
 	document.body.querySelector( '.components-unit-control__unit-label' );
 
+const toggleCustomInput = ( showCustomInput ) => {
+	const label = showCustomInput ? 'Set custom size' : 'Use size preset';
+	const toggleCustom = screen.getByLabelText( label, { selector: 'button' } );
+	fireEvent.click( toggleCustom );
+};
+
 describe( 'FontSizePicker', () => {
 	describe( 'onChange values', () => {
 		it( 'should not use units when the initial value is a number', () => {
@@ -84,6 +90,7 @@ describe( 'FontSizePicker', () => {
 				/>
 			);
 
+			toggleCustomInput( true );
 			const unitSelect = getUnitSelect();
 			const unitLabel = getUnitLabel();
 			const input = screen.getByLabelText( 'Custom', {
@@ -119,6 +126,7 @@ describe( 'FontSizePicker', () => {
 				/>
 			);
 
+			toggleCustomInput( true );
 			const unitSelect = getUnitSelect();
 			const unitLabel = getUnitLabel();
 			const input = screen.getByLabelText( 'Custom', {

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

@@ -0,0 +1,101 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+const DEFAULT_FONT_SIZE = 'default';
+const DEFAULT_FONT_SIZE_OPTION = {
+	slug: DEFAULT_FONT_SIZE,
+	name: __( 'Default' ),
+};
+export const CUSTOM_FONT_SIZE = 'custom';
+const CUSTOM_FONT_SIZE_OPTION = {
+	slug: CUSTOM_FONT_SIZE,
+	name: __( 'Custom' ),
+};
+
+/**
+ * Helper util to split a font size to its numeric value
+ * and its `unit`, if exists.
+ *
+ * @param {string|number} size Font size.
+ * @return {[number, string]} An array with the numeric value and the unit if exists.
+ */
+export function splitValueAndUnitFromSize( size ) {
+	/**
+	 * The first matched result is ignored as it's the left
+	 * hand side of the capturing group in the regex.
+	 */
+	const [ , numericValue, unit ] = size.split( /(\d+)/ );
+	return [ numericValue, unit ];
+}
+
+/**
+ * Some themes use css vars for their font sizes, so until we
+ * have the way of calculating them don't display them.
+ *
+ * @param {string|number} value The value that is checked.
+ * @return {boolean} Whether the value is a simple css value.
+ */
+export function isSimpleCssValue( value ) {
+	const sizeRegex = /^(?!0)\d+(px|em|rem|vw|vh|%)?$/i;
+	return sizeRegex.test( value );
+}
+
+/**
+ * Return font size options in the proper format depending
+ * on the currently used control (select, toggle group).
+ *
+ * @param {boolean}  useSelectControl       Whether to use a select control.
+ * @param {Object[]} optionsArray           Array of available font sizes objects.
+ * @param {*}        disableCustomFontSizes Flag that indicates if custom font sizes are disabled.
+ * @return {Object[]|null} Array of font sizes in proper format for the used control.
+ */
+export function getFontSizeOptions(
+	useSelectControl,
+	optionsArray,
+	disableCustomFontSizes
+) {
+	if ( disableCustomFontSizes && ! optionsArray.length ) {
+		return null;
+	}
+	return useSelectControl
+		? getSelectOptions( optionsArray, disableCustomFontSizes )
+		: getToggleGroupOptions( optionsArray );
+}
+
+function getSelectOptions( optionsArray, disableCustomFontSizes ) {
+	const options = [
+		DEFAULT_FONT_SIZE_OPTION,
+		...optionsArray,
+		...( disableCustomFontSizes ? [] : [ CUSTOM_FONT_SIZE_OPTION ] ),
+	];
+	return options.map( ( { slug, name, size } ) => ( {
+		key: slug,
+		name,
+		size,
+		__experimentalHint:
+			size && isSimpleCssValue( size ) && parseInt( size ),
+	} ) );
+}
+
+function getToggleGroupOptions( optionsArray ) {
+	return optionsArray.map( ( { slug, size, name } ) => {
+		let label = size;
+		if ( typeof size === 'string' ) {
+			const [ numericValue ] = splitValueAndUnitFromSize( size );
+			label = numericValue;
+		}
+		return { key: slug, value: size, label, name };
+	} );
+}
+
+export function getSelectedOption( fontSizes, value ) {
+	if ( ! value ) {
+		return DEFAULT_FONT_SIZE_OPTION;
+	}
+	return (
+		fontSizes.find( ( font ) => font.size === value ) ||
+		CUSTOM_FONT_SIZE_OPTION
+	);
+}

package/src/form-token-field/stories/index.js

@@ -16,6 +16,9 @@ import FormTokenField from '../';
 export default {
 	title: 'Components/FormTokenField',
 	component: FormTokenField,
+	parameters: {
+		knobs: { disabled: false },
+	},
 };
 
 const continents = [

package/src/gradient-picker/index.js

@@ -14,18 +14,18 @@ import { useCallback, useMemo } from '@wordpress/element';
  */
 import CircularOptionPicker from '../circular-option-picker';
 import CustomGradientPicker from '../custom-gradient-picker';
+import { VStack } from '../v-stack';
+import { ColorHeading } from '../color-palette/styles';
 
-export default function GradientPicker( {
+function SingleOrigin( {
 	className,
+	clearGradient,
 	gradients,
 	onChange,
 	value,
-	clearable = true,
-	disableCustomGradients = false,
+	actions,
+	content,
 } ) {
-	const clearGradient = useCallback( () => onChange( undefined ), [
-		onChange,
-	] );
 	const gradientOptions = useMemo( () => {
 		return map( gradients, ( { gradient, name } ) => (
 			<CircularOptionPicker.Option
@@ -57,6 +57,70 @@ export default function GradientPicker( {
 		<CircularOptionPicker
 			className={ className }
 			options={ gradientOptions }
+			actions={ actions }
+		>
+			{ content }
+		</CircularOptionPicker>
+	);
+}
+
+function MultipleOrigin( {
+	className,
+	clearGradient,
+	gradients,
+	onChange,
+	value,
+	actions,
+	content,
+} ) {
+	return (
+		<VStack spacing={ 3 } className={ className }>
+			{ gradients.map( ( { name, gradients: gradientSet }, index ) => {
+				return (
+					<VStack spacing={ 2 } key={ index }>
+						<ColorHeading>{ name }</ColorHeading>
+						<SingleOrigin
+							clearGradient={ clearGradient }
+							gradients={ gradientSet }
+							onChange={ onChange }
+							value={ value }
+							{ ...( gradients.length === index + 1
+								? {
+										actions,
+										content,
+								  }
+								: {} ) }
+						/>
+					</VStack>
+				);
+			} ) }
+		</VStack>
+	);
+}
+
+export default function GradientPicker( {
+	className,
+	gradients,
+	onChange,
+	value,
+	clearable = true,
+	disableCustomGradients = false,
+	__experimentalHasMultipleOrigins,
+} ) {
+	const clearGradient = useCallback( () => onChange( undefined ), [
+		onChange,
+	] );
+	const Component = __experimentalHasMultipleOrigins
+		? MultipleOrigin
+		: SingleOrigin;
+	return (
+		<Component
+			className={ className }
+			clearable={ clearable }
+			clearGradient={ clearGradient }
+			gradients={ gradients }
+			onChange={ onChange }
+			value={ value }
 			actions={
 				clearable && (
 					<CircularOptionPicker.ButtonAction
@@ -66,10 +130,14 @@ export default function GradientPicker( {
 					</CircularOptionPicker.ButtonAction>
 				)
 			}
-		>
-			{ ! disableCustomGradients && (
-				<CustomGradientPicker value={ value } onChange={ onChange } />
-			) }
-		</CircularOptionPicker>
+			content={
+				! disableCustomGradients && (
+					<CustomGradientPicker
+						value={ value }
+						onChange={ onChange }
+					/>
+				)
+			}
+		/>
 	);
 }

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

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

package/src/grid/stories/index.js

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

package/src/guide/stories/index.js

@@ -15,7 +15,13 @@ import { useState } from '@wordpress/element';
 import Button from '../../button';
 import Guide from '../';
 
-export default { title: 'Components/Guide', component: Guide };
+export default {
+	title: 'Components/Guide',
+	component: Guide,
+	parameters: {
+		knobs: { disabled: false },
+	},
+};
 
 const ModalExample = ( { numberOfPages, ...props } ) => {
 	const [ isOpen, setOpen ] = useState( false );

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

@@ -2,7 +2,7 @@
 
 exports[`props should render correctly 1`] = `
 .emotion-0 {
-  color: #000;
+  color: #1e1e1e;
   line-height: 1.2;
   margin: 0;
   color: #050505;

package/src/icon/stories/index.js

@@ -14,7 +14,13 @@ import { wordpress } from '@wordpress/icons';
  */
 import Icon from '../';
 
-export default { title: 'Components/Icon', component: Icon };
+export default {
+	title: 'Components/Icon',
+	component: Icon,
+	parameters: {
+		knobs: { disabled: false },
+	},
+};
 
 const IconSizeLabel = ( { size } ) => (
 	<div style={ { fontSize: 12 } }>{ size }px</div>

package/src/index.js

@@ -39,7 +39,7 @@ export { default as ClipboardButton } from './clipboard-button';
 export { default as __experimentalColorEdit } from './color-edit';
 export { default as ColorIndicator } from './color-indicator';
 export { default as ColorPalette } from './color-palette';
-export { default as ColorPicker } from './color-picker';
+export { ColorPicker } from './color-picker';
 export { default as ComboboxControl } from './combobox-control';
 export {
 	Composite as __unstableComposite,

package/src/index.native.js

@@ -10,7 +10,7 @@ export {
 } from '@wordpress/primitives';
 export { default as ColorIndicator } from './color-indicator';
 export { default as ColorPalette } from './color-palette';
-export { default as ColorPicker } from './color-picker';
+export { ColorPicker } from './color-picker';
 export { default as Dashicon } from './dashicon';
 export { default as Dropdown } from './dropdown';
 export { default as DropdownMenu } from './dropdown-menu';
@@ -103,6 +103,7 @@ export { default as LinkPickerScreen } from './mobile/link-picker/link-picker-sc
 export { default as LinkSettings } from './mobile/link-settings';
 export { default as LinkSettingsScreen } from './mobile/link-settings/link-settings-screen';
 export { default as LinkSettingsNavigation } from './mobile/link-settings/link-settings-navigation';
+export { default as ImageLinkDestinationsScreen } from './mobile/link-settings/image-link-destinations-screen';
 export { default as SegmentedControl } from './mobile/segmented-control';
 export { default as Image, IMAGE_DEFAULT_FOCAL_POINT } from './mobile/image';
 export { default as ImageEditingButton } from './mobile/image/image-editing-button';

package/src/input-control/stories/index.js

@@ -16,6 +16,9 @@ import InputControl from '../';
 export default {
 	title: 'Components/InputControl',
 	component: InputControl,
+	parameters: {
+		knobs: { disabled: false },
+	},
 };
 
 function Example() {

package/src/input-control/types.ts

@@ -31,15 +31,17 @@ interface BaseProps {
 	size?: 'default' | 'small';
 }
 
+export type InputChangeCallback<
+	E = ChangeEvent< HTMLInputElement >,
+	P = {}
+> = ( nextValue: string | undefined, extra: { event: E } & P ) => void;
+
 export interface InputFieldProps extends BaseProps {
 	dragDirection?: DragDirection;
 	dragThreshold?: number;
 	isDragEnabled?: boolean;
 	isPressEnterToChange?: boolean;
-	onChange?: (
-		nextValue: string | undefined,
-		extra: { event: ChangeEvent< HTMLInputElement > }
-	) => void;
+	onChange?: InputChangeCallback;
 	onValidate?: (
 		nextValue: string,
 		event?: SyntheticEvent< HTMLInputElement >

package/src/item-group/stories/index.js

@@ -26,6 +26,9 @@ import { ZStack } from '../../z-stack';
 export default {
 	component: ItemGroup,
 	title: 'Components (Experimental)/ItemGroup',
+	parameters: {
+		knobs: { disabled: false },
+	},
 };
 
 // Using `unset` instead of `undefined` as Storybook seems to sometimes pass an

package/src/mobile/bottom-sheet/bottom-sheet-navigation/navigation-container.native.js

@@ -16,6 +16,7 @@ import {
 	Children,
 	useRef,
 	cloneElement,
+	Platform,
 } from '@wordpress/element';
 
 import { usePreferredColorSchemeStyle } from '@wordpress/compose';
@@ -59,7 +60,13 @@ const options = {
 
 const ANIMATION_DURATION = 190;
 
-function BottomSheetNavigationContainer( { children, animate, main, theme } ) {
+function BottomSheetNavigationContainer( {
+	children,
+	animate,
+	main,
+	theme,
+	style,
+} ) {
 	const Stack = useRef( createStackNavigator() ).current;
 	const context = useContext( BottomSheetNavigationContext );
 	const [ currentHeight, setCurrentHeight ] = useState(
@@ -87,7 +94,14 @@ function BottomSheetNavigationContainer( { children, animate, main, theme } ) {
 					typeof height !== 'string' ) ||
 				typeof height === 'string'
 			) {
-				performLayoutAnimation( ANIMATION_DURATION );
+				// Animating the opacity for the initial modal results in the backdrop
+				// provided by react-native-modal to never transition from transparent
+				// to partially opaque black. The core issue was not idenfited, but it
+				// may relate to the experimental state of LayoutAnimation for Android.
+				// https://reactnative.dev/docs/layoutanimation
+				if ( ! Platform.isAndroid || currentHeight !== 1 ) {
+					performLayoutAnimation( ANIMATION_DURATION );
+				}
 				setCurrentHeight( height );
 
 				return;
@@ -129,11 +143,7 @@ function BottomSheetNavigationContainer( { children, animate, main, theme } ) {
 
 	return useMemo( () => {
 		return (
-			<View
-				style={ {
-					height: currentHeight,
-				} }
-			>
+			<View style={ [ style, { height: currentHeight } ] }>
 				<BottomSheetNavigationProvider
 					value={ {
 						setHeight,

package/src/mobile/bottom-sheet/cell.native.js

@@ -106,6 +106,7 @@ class BottomSheetCell extends Component {
 			valuePlaceholder = '',
 			icon,
 			leftAlign,
+			iconStyle = {},
 			labelStyle = {},
 			valueStyle = {},
 			cellContainerStyle = {},
@@ -307,7 +308,7 @@ class BottomSheetCell extends Component {
 				  );
 		};
 
-		const iconStyle = getStylesFromColorScheme(
+		const iconStyleBase = getStylesFromColorScheme(
 			styles.icon,
 			styles.iconDark
 		);
@@ -362,7 +363,11 @@ class BottomSheetCell extends Component {
 									<Icon
 										icon={ icon }
 										size={ 24 }
-										fill={ iconStyle.color }
+										fill={
+											iconStyle.color ||
+											iconStyleBase.color
+										}
+										style={ iconStyle }
 										isPressed={ false }
 									/>
 									<View

package/src/mobile/bottom-sheet/cellStyles.android.scss

@@ -7,5 +7,9 @@
 }
 
 .isSelected {
-	color: $blue-wordpress;
+	color: $blue-50;
+}
+
+.isSelectedDark {
+	color: $blue-30;
 }

package/src/mobile/bottom-sheet/cellStyles.ios.scss

@@ -7,7 +7,11 @@
 }
 
 .isSelected {
-	color: $blue-wordpress;
+	color: $blue-50;
+}
+
+.isSelectedDark {
+	color: $blue-30;
 }
 
 .activeOpacity {

package/src/mobile/bottom-sheet/link-cell.native.js

@@ -12,14 +12,21 @@ import styles from './styles.scss';
 
 const { placeholderColor } = styles;
 
-export default function LinkCell( { value, onPress, showIcon = true } ) {
+export default function LinkCell( {
+	value,
+	valueMask,
+	onPress,
+	showIcon = true,
+} ) {
 	return (
 		<Cell
 			icon={ showIcon && link }
 			label={ __( 'Link to' ) }
 			// since this is not actually editable, we treat value as a placeholder
-			value={ value || __( 'Search or type URL' ) }
-			valueStyle={ !! value ? undefined : placeholderColor }
+			value={ valueMask || value || __( 'Search or type URL' ) }
+			valueStyle={
+				!! ( value || valueMask ) ? undefined : placeholderColor
+			}
 			onPress={ onPress }
 		>
 			<Icon icon={ chevronRight }></Icon>

package/src/mobile/color-settings/picker-screen.native.js

@@ -12,7 +12,7 @@ import { BottomSheetContext } from '@wordpress/components';
 /**
  * Internal dependencies
  */
-import ColorPicker from '../../color-picker';
+import { ColorPicker } from '../../color-picker';
 
 const PickerScreen = () => {
 	const route = useRoute();

package/src/mobile/html-text-input/index.native.js

@@ -73,15 +73,22 @@ export class HTMLTextInput extends Component {
 	}
 
 	render() {
-		const { getStylesFromColorScheme } = this.props;
-		const htmlStyle = getStylesFromColorScheme(
-			styles.htmlView,
-			styles.htmlViewDark
-		);
-		const placeholderStyle = getStylesFromColorScheme(
-			styles.placeholder,
-			styles.placeholderDark
-		);
+		const { getStylesFromColorScheme, style } = this.props;
+		const titleStyle = [
+			styles.htmlViewTitle,
+			style?.text && { color: style.text },
+		];
+		const htmlStyle = [
+			getStylesFromColorScheme( styles.htmlView, styles.htmlViewDark ),
+			style?.text && { color: style.text },
+		];
+		const placeholderStyle = {
+			...getStylesFromColorScheme(
+				styles.placeholder,
+				styles.placeholderDark
+			),
+			...( style?.text && { color: style.text } ),
+		};
 		return (
 			<HTMLInputContainer parentHeight={ this.props.parentHeight }>
 				<TextInput
@@ -89,7 +96,7 @@ export class HTMLTextInput extends Component {
 					accessibilityLabel="html-view-title"
 					textAlignVertical="center"
 					numberOfLines={ 1 }
-					style={ styles.htmlViewTitle }
+					style={ titleStyle }
 					value={ this.props.title }
 					placeholder={ __( 'Add title' ) }
 					placeholderTextColor={ placeholderStyle.color }