@wordpress/components 19.6.1 → 19.8.0

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;
+`;

package/src/border-control/styles.ts

@@ -0,0 +1,190 @@
+/**
+ * External dependencies
+ */
+import { css } from '@emotion/react';
+import type { CSSProperties } from 'react';
+
+/**
+ * Internal dependencies
+ */
+import { COLORS, CONFIG, rtl } from '../utils';
+import { space } from '../ui/utils/space';
+import {
+	StyledField,
+	StyledLabel,
+} from '../base-control/styles/base-control-styles';
+import { BackdropUI } from '../input-control/styles/input-control-styles';
+import { Root as UnitControlWrapper } from '../unit-control/styles/unit-control-styles';
+
+import type { Border } from './types';
+
+const labelStyles = css`
+	font-weight: 500;
+`;
+
+export const borderControl = css`
+	position: relative;
+`;
+
+export const innerWrapper = () => css`
+	border: ${ CONFIG.borderWidth } solid ${ COLORS.gray[ 200 ] };
+	border-radius: 2px;
+	flex: 1 0 40%;
+
+	/*
+	 * Needs more thought. Aim is to prevent the border for BorderBoxControl
+	 * showing through the control. Likely needs to take into account
+	 * light/dark themes etc.
+	 */
+	background: #fff;
+
+	/*
+	 * Forces the width control to fill available space given UnitControl
+	 * passes its className directly through to the input.
+	 */
+	${ UnitControlWrapper } {
+		flex: 1;
+		${ rtl( { marginLeft: 0 } )() }
+	}
+`;
+
+export const wrapperWidth = ( width: CSSProperties[ 'width' ] ) => {
+	return css`
+		width: ${ width };
+		flex: 0 0 auto;
+	`;
+};
+
+export const borderControlDropdown = () => css`
+	background: #fff;
+	${ rtl(
+		{
+			borderRadius: `1px 0 0 1px`,
+			borderRight: `${ CONFIG.borderWidth } solid ${ COLORS.gray[ 200 ] }`,
+		},
+		{
+			borderRadius: `0 1px 1px 0`,
+			borderLeft: `${ CONFIG.borderWidth } solid ${ COLORS.gray[ 200 ] }`,
+		}
+	)() }
+
+	&& > button {
+		padding: ${ space( 1 ) };
+		border-radius: inherit;
+	}
+`;
+
+export const colorIndicatorBorder = ( border?: Border ) => {
+	const { color, style } = border || {};
+
+	const fallbackColor =
+		!! style && style !== 'none' ? COLORS.gray[ 300 ] : undefined;
+
+	return css`
+		border-style: ${ style === 'none' ? 'solid' : style };
+		border-color: ${ color || fallbackColor };
+	`;
+};
+
+export const colorIndicatorWrapper = ( border?: Border ) => {
+	const { style } = border || {};
+
+	return css`
+		border-radius: 9999px;
+		border: 2px solid transparent;
+		${ style ? colorIndicatorBorder( border ) : undefined }
+		width: 28px;
+		height: 28px;
+		padding: 2px;
+
+		/*
+		 * ColorIndicator
+		 *
+		 * The transparent colors used here ensure visibility of the indicator
+		 * over the active state of the border control dropdown's toggle button.
+		 */
+		& > span {
+			background: linear-gradient(
+				-45deg,
+				transparent 48%,
+				rgb( 0 0 0 / 20% ) 48%,
+				rgb( 0 0 0 / 20% ) 52%,
+				transparent 52%
+			);
+		}
+	`;
+};
+
+export const borderControlPopover = css`
+	/* Remove padding from content, this will be re-added via inner elements*/
+	&& > div > div {
+		padding: 0;
+	}
+`;
+
+export const borderControlPopoverControls = css`
+	padding: ${ space( 2 ) };
+
+	> div:first-of-type > ${ StyledLabel } {
+		margin-bottom: 0;
+		${ labelStyles }
+	}
+
+	&& ${ StyledLabel } + button:not( .has-text ) {
+		min-width: 24px;
+		padding: 0;
+	}
+`;
+
+export const borderControlPopoverContent = css``;
+export const borderColorIndicator = css``;
+
+export const resetButton = css`
+	justify-content: center;
+	width: 100%;
+
+	/* Override button component styling */
+	&& {
+		border-top: ${ CONFIG.borderWidth } solid ${ COLORS.gray[ 200 ] };
+		height: 46px;
+	}
+`;
+
+export const borderWidthControl = () => css`
+	/* Target the InputControl's backdrop */
+	&&& ${ BackdropUI } {
+		border: none;
+	}
+
+	/* Specificity required to overcome UnitControl padding */
+	/* See packages/components/src/unit-control/styles/unit-control-styles.ts */
+	&&& input {
+		${ rtl( { paddingRight: 0 } )() }
+	}
+`;
+
+export const borderControlStylePicker = css`
+	${ StyledLabel } {
+		${ labelStyles }
+	}
+`;
+
+export const borderStyleButton = css`
+	&&&&& {
+		min-width: 30px;
+		width: 30px;
+		height: 30px;
+		padding: 3px;
+	}
+`;
+
+export const borderSlider = () => css`
+	flex: 1 1 60%;
+	${ rtl( { marginRight: space( 3 ) } )() }
+
+	${ StyledField } {
+		margin-bottom: 0;
+		font-size: 0;
+		display: flex;
+	}
+`;