@wordpress/components 19.7.0 → 19.9.0

package/src/border-control/border-control-dropdown/component.tsx

@@ -0,0 +1,252 @@
+/**
+ * External dependencies
+ */
+import type { CSSProperties } from 'react';
+
+/**
+ * WordPress dependencies
+ */
+import { __, sprintf } from '@wordpress/i18n';
+import { closeSmall } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import BorderControlStylePicker from '../border-control-style-picker';
+import Button from '../../button';
+import ColorIndicator from '../../color-indicator';
+import ColorPalette from '../../color-palette';
+import Dropdown from '../../dropdown';
+import { HStack } from '../../h-stack';
+import { VStack } from '../../v-stack';
+import { contextConnect, WordPressComponentProps } from '../../ui/context';
+import { useBorderControlDropdown } from './hook';
+import { StyledLabel } from '../../base-control/styles/base-control-styles';
+
+import type {
+	Color,
+	ColorOrigin,
+	Colors,
+	DropdownProps,
+	PopoverProps,
+} from '../types';
+
+const noop = () => undefined;
+const getColorObject = (
+	colorValue: CSSProperties[ 'borderColor' ],
+	colors: Colors | undefined,
+	hasMultipleColorOrigins: boolean
+) => {
+	if ( ! colorValue || ! colors ) {
+		return;
+	}
+
+	if ( hasMultipleColorOrigins ) {
+		let matchedColor;
+
+		( colors as ColorOrigin[] ).some( ( origin ) =>
+			origin.colors.some( ( color ) => {
+				if ( color.color === colorValue ) {
+					matchedColor = color;
+					return true;
+				}
+
+				return false;
+			} )
+		);
+
+		return matchedColor;
+	}
+
+	return ( colors as Color[] ).find(
+		( color ) => color.color === colorValue
+	);
+};
+
+const getToggleAriaLabel = (
+	colorValue: CSSProperties[ 'borderColor' ],
+	colorObject: Color | undefined,
+	style: CSSProperties[ 'borderStyle' ],
+	isStyleEnabled: boolean
+) => {
+	if ( isStyleEnabled ) {
+		if ( colorObject ) {
+			return style
+				? sprintf(
+						// translators: %1$s: The name of the color e.g. "vivid red". %2$s: The color's hex code e.g.: "#f00:". %3$s: The current border style selection e.g. "solid".
+						'Border color and style picker. The currently selected color is called "%1$s" and has a value of "%2$s". The currently selected style is "%3$s".',
+						colorObject.name,
+						colorObject.color,
+						style
+				  )
+				: sprintf(
+						// translators: %1$s: The name of the color e.g. "vivid red". %2$s: The color's hex code e.g.: "#f00:".
+						'Border color and style picker. The currently selected color is called "%1$s" and has a value of "%2$s".',
+						colorObject.name,
+						colorObject.color
+				  );
+		}
+
+		if ( colorValue ) {
+			return style
+				? sprintf(
+						// translators: %1$s: The color's hex code e.g.: "#f00:". %2$s: The current border style selection e.g. "solid".
+						'Border color and style picker. The currently selected color has a value of "%1$s". The currently selected style is "%2$s".',
+						colorValue,
+						style
+				  )
+				: sprintf(
+						// translators: %1$s: The color's hex code e.g.: "#f00:".
+						'Border color and style picker. The currently selected color has a value of "%1$s".',
+						colorValue
+				  );
+		}
+
+		return __( 'Border color and style picker.' );
+	}
+
+	if ( colorObject ) {
+		return sprintf(
+			// translators: %1$s: The name of the color e.g. "vivid red". %2$s: The color's hex code e.g.: "#f00:".
+			'Border color picker. The currently selected color is called "%1$s" and has a value of "%2$s".',
+			colorObject.name,
+			colorObject.color
+		);
+	}
+
+	if ( colorValue ) {
+		return sprintf(
+			// translators: %1$s: The color's hex code e.g.: "#f00:".
+			'Border color picker. The currently selected color has a value of "%1$s".',
+			colorValue
+		);
+	}
+
+	return __( 'Border color picker.' );
+};
+
+const BorderControlDropdown = (
+	props: WordPressComponentProps< DropdownProps, 'div' >,
+	forwardedRef: React.ForwardedRef< any >
+) => {
+	const {
+		__experimentalHasMultipleOrigins,
+		__experimentalIsRenderedInSidebar,
+		border,
+		colors,
+		disableCustomColors,
+		enableAlpha,
+		indicatorClassName,
+		indicatorWrapperClassName,
+		onReset,
+		onColorChange,
+		onStyleChange,
+		popoverClassName,
+		popoverContentClassName,
+		popoverControlsClassName,
+		resetButtonClassName,
+		showDropdownHeader,
+		enableStyle = true,
+		...otherProps
+	} = useBorderControlDropdown( props );
+
+	const { color, style } = border || {};
+	const colorObject = getColorObject(
+		color,
+		colors,
+		!! __experimentalHasMultipleOrigins
+	);
+
+	const toggleAriaLabel = getToggleAriaLabel(
+		color,
+		colorObject,
+		style,
+		enableStyle
+	);
+
+	const dropdownPosition = __experimentalIsRenderedInSidebar
+		? 'bottom left'
+		: undefined;
+
+	const renderToggle = ( { onToggle = noop } ) => (
+		<Button
+			onClick={ onToggle }
+			variant="tertiary"
+			aria-label={ toggleAriaLabel }
+			position={ dropdownPosition }
+		>
+			<span className={ indicatorWrapperClassName }>
+				<ColorIndicator
+					className={ indicatorClassName }
+					colorValue={ color }
+				/>
+			</span>
+		</Button>
+	);
+
+	const renderContent = ( { onClose }: PopoverProps ) => (
+		<>
+			<VStack className={ popoverControlsClassName } spacing={ 6 }>
+				{ showDropdownHeader ? (
+					<HStack>
+						<StyledLabel>{ __( 'Border color' ) }</StyledLabel>
+						<Button
+							isSmall
+							label={ __( 'Close border color' ) }
+							icon={ closeSmall }
+							onClick={ onClose }
+						/>
+					</HStack>
+				) : undefined }
+				<ColorPalette
+					className={ popoverContentClassName }
+					value={ color }
+					onChange={ onColorChange }
+					{ ...{ colors, disableCustomColors } }
+					__experimentalHasMultipleOrigins={
+						__experimentalHasMultipleOrigins
+					}
+					__experimentalIsRenderedInSidebar={
+						__experimentalIsRenderedInSidebar
+					}
+					clearable={ false }
+					enableAlpha={ enableAlpha }
+				/>
+				{ enableStyle && (
+					<BorderControlStylePicker
+						label={ __( 'Style' ) }
+						value={ style }
+						onChange={ onStyleChange }
+					/>
+				) }
+			</VStack>
+			<Button
+				className={ resetButtonClassName }
+				variant="tertiary"
+				onClick={ () => {
+					onReset();
+					onClose();
+				} }
+			>
+				{ __( 'Reset to default' ) }
+			</Button>
+		</>
+	);
+
+	return (
+		<Dropdown
+			renderToggle={ renderToggle }
+			renderContent={ renderContent }
+			contentClassName={ popoverClassName }
+			{ ...otherProps }
+			ref={ forwardedRef }
+		/>
+	);
+};
+
+const ConnectedBorderControlDropdown = contextConnect(
+	BorderControlDropdown,
+	'BorderControlDropdown'
+);
+
+export default ConnectedBorderControlDropdown;

package/src/border-control/border-control-dropdown/hook.ts

@@ -0,0 +1,98 @@
+/**
+ * WordPress dependencies
+ */
+import { useMemo } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import * as styles from '../styles';
+import { parseQuantityAndUnitFromRawValue } from '../../unit-control/utils';
+import { useContextSystem, WordPressComponentProps } from '../../ui/context';
+import { useCx } from '../../utils/hooks/use-cx';
+
+import type { DropdownProps } from '../types';
+
+export function useBorderControlDropdown(
+	props: WordPressComponentProps< DropdownProps, 'div' >
+) {
+	const {
+		border,
+		className,
+		colors,
+		contentClassName,
+		onChange,
+		previousStyleSelection,
+		...otherProps
+	} = useContextSystem( props, 'BorderControlDropdown' );
+
+	const [ widthValue ] = parseQuantityAndUnitFromRawValue( border?.width );
+	const hasZeroWidth = widthValue === 0;
+
+	const onColorChange = ( color?: string ) => {
+		const style =
+			border?.style === 'none' ? previousStyleSelection : border?.style;
+		const width = hasZeroWidth && !! color ? '1px' : border?.width;
+
+		onChange( { color, style, width } );
+	};
+
+	const onStyleChange = ( style?: string ) => {
+		const width = hasZeroWidth && !! style ? '1px' : border?.width;
+		onChange( { ...border, style, width } );
+	};
+
+	const onReset = () => {
+		onChange( {
+			...border,
+			color: undefined,
+			style: undefined,
+		} );
+	};
+
+	// Generate class names.
+	const cx = useCx();
+	const classes = useMemo( () => {
+		return cx( styles.borderControlDropdown(), className );
+	}, [ className, cx ] );
+
+	const indicatorClassName = useMemo( () => {
+		return cx( styles.borderColorIndicator );
+	}, [ cx ] );
+
+	const indicatorWrapperClassName = useMemo( () => {
+		return cx( styles.colorIndicatorWrapper( border ) );
+	}, [ border, cx ] );
+
+	const popoverClassName = useMemo( () => {
+		return cx( styles.borderControlPopover, contentClassName );
+	}, [ cx, contentClassName ] );
+
+	const popoverControlsClassName = useMemo( () => {
+		return cx( styles.borderControlPopoverControls );
+	}, [ cx ] );
+
+	const popoverContentClassName = useMemo( () => {
+		return cx( styles.borderControlPopoverContent );
+	}, [ cx ] );
+
+	const resetButtonClassName = useMemo( () => {
+		return cx( styles.resetButton );
+	}, [ cx ] );
+
+	return {
+		...otherProps,
+		border,
+		className: classes,
+		colors,
+		indicatorClassName,
+		indicatorWrapperClassName,
+		onColorChange,
+		onStyleChange,
+		onReset,
+		popoverClassName,
+		popoverContentClassName,
+		popoverControlsClassName,
+		resetButtonClassName,
+	};
+}

package/src/border-control/border-control-dropdown/index.ts

@@ -0,0 +1 @@
+export { default } from './component';

package/src/border-control/border-control-style-picker/component.tsx

@@ -0,0 +1,89 @@
+/**
+ * WordPress dependencies
+ */
+import { lineDashed, lineDotted, lineSolid } from '@wordpress/icons';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import Button from '../../button';
+import { StyledLabel } from '../../base-control/styles/base-control-styles';
+import { View } from '../../view';
+import { Flex } from '../../flex';
+import { VisuallyHidden } from '../../visually-hidden';
+import { contextConnect, WordPressComponentProps } from '../../ui/context';
+import { useBorderControlStylePicker } from './hook';
+
+import type { LabelProps, StylePickerProps } from '../types';
+
+const BORDER_STYLES = [
+	{ label: __( 'Solid' ), icon: lineSolid, value: 'solid' },
+	{ label: __( 'Dashed' ), icon: lineDashed, value: 'dashed' },
+	{ label: __( 'Dotted' ), icon: lineDotted, value: 'dotted' },
+];
+
+const Label = ( props: LabelProps ) => {
+	const { label, hideLabelFromVision } = props;
+
+	if ( ! label ) {
+		return null;
+	}
+
+	return hideLabelFromVision ? (
+		<VisuallyHidden as="label">{ label }</VisuallyHidden>
+	) : (
+		<StyledLabel>{ label }</StyledLabel>
+	);
+};
+
+const BorderControlStylePicker = (
+	props: WordPressComponentProps< StylePickerProps, 'div' >,
+	forwardedRef: React.ForwardedRef< any >
+) => {
+	const {
+		buttonClassName,
+		hideLabelFromVision,
+		label,
+		onChange,
+		value,
+		...otherProps
+	} = useBorderControlStylePicker( props );
+
+	return (
+		<View { ...otherProps } ref={ forwardedRef }>
+			<Label
+				label={ label }
+				hideLabelFromVision={ hideLabelFromVision }
+			/>
+			<Flex justify="flex-start" gap={ 1 }>
+				{ BORDER_STYLES.map( ( borderStyle ) => (
+					<Button
+						key={ borderStyle.value }
+						className={ buttonClassName }
+						icon={ borderStyle.icon }
+						isSmall
+						isPressed={ borderStyle.value === value }
+						onClick={ () =>
+							onChange(
+								borderStyle.value === value
+									? undefined
+									: borderStyle.value
+							)
+						}
+						aria-label={ borderStyle.label }
+						label={ borderStyle.label }
+						showTooltip={ true }
+					/>
+				) ) }
+			</Flex>
+		</View>
+	);
+};
+
+const ConnectedBorderControlStylePicker = contextConnect(
+	BorderControlStylePicker,
+	'BorderControlStylePicker'
+);
+
+export default ConnectedBorderControlStylePicker;

package/src/border-control/border-control-style-picker/hook.ts

@@ -0,0 +1,34 @@
+/**
+ * WordPress dependencies
+ */
+import { useMemo } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import * as styles from '../styles';
+import { useContextSystem, WordPressComponentProps } from '../../ui/context';
+import { useCx } from '../../utils/hooks/use-cx';
+
+import type { StylePickerProps } from '../types';
+
+export function useBorderControlStylePicker(
+	props: WordPressComponentProps< StylePickerProps, 'div' >
+) {
+	const { className, ...otherProps } = useContextSystem(
+		props,
+		'BorderControlStylePicker'
+	);
+
+	// Generate class names.
+	const cx = useCx();
+	const classes = useMemo( () => {
+		return cx( styles.borderControlStylePicker, className );
+	}, [ className, cx ] );
+
+	const buttonClassName = useMemo( () => {
+		return cx( styles.borderStyleButton );
+	}, [ cx ] );
+
+	return { ...otherProps, className: classes, buttonClassName };
+}

package/src/border-control/border-control-style-picker/index.ts

@@ -0,0 +1 @@
+export { default } from './component';

package/src/border-control/index.ts

@@ -0,0 +1,2 @@
+export { default as BorderControl } from './border-control/component';
+export { useBorderControl } from './border-control/hook';

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

@@ -0,0 +1,118 @@
+/**
+ * External dependencies
+ */
+import styled from '@emotion/styled';
+
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { BorderControl } from '../';
+import { Provider as SlotFillProvider } from '../../slot-fill';
+import Popover from '../../popover';
+
+export default {
+	title: 'Components (Experimental)/BorderControl',
+	component: BorderControl,
+};
+
+// Available border colors.
+const colors = [
+	{ name: 'Gray 0', color: '#f6f7f7' },
+	{ name: 'Gray 5', color: '#dcdcde' },
+	{ name: 'Gray 20', color: '#a7aaad' },
+	{ name: 'Gray 70', color: '#3c434a' },
+	{ name: 'Gray 100', color: '#101517' },
+	{ name: 'Blue 20', color: '#72aee6' },
+	{ name: 'Blue 40', color: '#3582c4' },
+	{ name: 'Blue 70', color: '#0a4b78' },
+	{ name: 'Red 40', color: '#e65054' },
+	{ name: 'Red 70', color: '#8a2424' },
+	{ name: 'Green 10', color: '#68de7c' },
+	{ name: 'Green 40', color: '#00a32a' },
+	{ name: 'Green 60', color: '#007017' },
+	{ name: 'Yellow 10', color: '#f2d675' },
+	{ name: 'Yellow 40', color: '#bd8600' },
+];
+
+// Multiple origin colors.
+const multipleOriginColors = [
+	{
+		name: 'Default',
+		colors: [
+			{ name: 'Gray 0', color: '#f6f7f7' },
+			{ name: 'Gray 5', color: '#dcdcde' },
+			{ name: 'Gray 20', color: '#a7aaad' },
+			{ name: 'Gray 70', color: '#3c434a' },
+			{ name: 'Gray 100', color: '#101517' },
+		],
+	},
+	{
+		name: 'Theme',
+		colors: [
+			{ name: 'Blue 20', color: '#72aee6' },
+			{ name: 'Blue 40', color: '#3582c4' },
+			{ name: 'Blue 70', color: '#0a4b78' },
+			{ name: 'Red 40', color: '#e65054' },
+			{ name: 'Red 70', color: '#8a2424' },
+		],
+	},
+	{
+		name: 'User',
+		colors: [
+			{ name: 'Green 10', color: '#68de7c' },
+			{ name: 'Green 40', color: '#00a32a' },
+			{ name: 'Green 60', color: '#007017' },
+			{ name: 'Yellow 10', color: '#f2d675' },
+			{ name: 'Yellow 40', color: '#bd8600' },
+		],
+	},
+];
+
+const _default = ( props ) => {
+	const [ border, setBorder ] = useState();
+	const onChange = ( newBorder ) => setBorder( newBorder );
+	const { __experimentalHasMultipleOrigins } = props;
+
+	return (
+		<SlotFillProvider>
+			<WrapperView>
+				<BorderControl
+					{ ...props }
+					colors={
+						__experimentalHasMultipleOrigins
+							? multipleOriginColors
+							: colors
+					}
+					label="Border"
+					onChange={ onChange }
+					value={ border }
+					width={ ! props.isCompact && props.width }
+				/>
+			</WrapperView>
+			<Popover.Slot />
+		</SlotFillProvider>
+	);
+};
+
+export const Default = _default.bind( {} );
+Default.args = {
+	disableCustomColors: false,
+	enableAlpha: true,
+	enableStyle: true,
+	isCompact: true,
+	shouldSanitizeBorder: true,
+	showDropdownHeader: false,
+	width: '110px',
+	withSlider: true,
+	__experimentalIsRenderedInSidebar: false,
+	__experimentalHasMultipleOrigins: false,
+};
+
+const WrapperView = styled.div`
+	max-width: 280px;
+`;