@wordpress/components 19.7.0 → 19.9.0

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

@@ -0,0 +1,119 @@
+/**
+ * WordPress dependencies
+ */
+import { useMemo, useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import * as styles from '../styles';
+import {
+	getBorderDiff,
+	getCommonBorder,
+	getSplitBorders,
+	hasMixedBorders,
+	hasSplitBorders,
+	isCompleteBorder,
+	isEmptyBorder,
+} from '../utils';
+import { useContextSystem, WordPressComponentProps } from '../../ui/context';
+import { useCx } from '../../utils/hooks/use-cx';
+
+import type { Border } from '../../border-control/types';
+import type { Borders, BorderSide, BorderBoxControlProps } from '../types';
+
+export function useBorderBoxControl(
+	props: WordPressComponentProps< BorderBoxControlProps, 'div' >
+) {
+	const { className, onChange, value, ...otherProps } = useContextSystem(
+		props,
+		'BorderBoxControl'
+	);
+
+	const mixedBorders = hasMixedBorders( value );
+	const splitBorders = hasSplitBorders( value );
+
+	const linkedValue = splitBorders
+		? getCommonBorder( value as Borders | undefined )
+		: ( value as Border );
+
+	const splitValue = splitBorders
+		? ( value as Borders )
+		: getSplitBorders( value as Border | undefined );
+
+	const [ isLinked, setIsLinked ] = useState( ! mixedBorders );
+	const toggleLinked = () => setIsLinked( ! isLinked );
+
+	const onLinkedChange = ( newBorder?: Border ) => {
+		if ( ! newBorder ) {
+			return onChange( undefined );
+		}
+
+		// If we have all props defined on the new border apply it.
+		if ( ! mixedBorders || isCompleteBorder( newBorder ) ) {
+			return onChange(
+				isEmptyBorder( newBorder ) ? undefined : newBorder
+			);
+		}
+
+		// If we had mixed borders we might have had some shared border props
+		// that we need to maintain. For example; we could have mixed borders
+		// with all the same color but different widths. Then from the linked
+		// control we change the color. We should keep the separate  widths.
+		const changes = getBorderDiff(
+			linkedValue as Border,
+			newBorder as Border
+		);
+		const updatedBorders = {
+			top: { ...( value as Borders )?.top, ...changes },
+			right: { ...( value as Borders )?.right, ...changes },
+			bottom: { ...( value as Borders )?.bottom, ...changes },
+			left: { ...( value as Borders )?.left, ...changes },
+		};
+
+		if ( hasMixedBorders( updatedBorders ) ) {
+			return onChange( updatedBorders );
+		}
+
+		const filteredResult = isEmptyBorder( updatedBorders.top )
+			? undefined
+			: updatedBorders.top;
+
+		onChange( filteredResult );
+	};
+
+	const onSplitChange = (
+		newBorder: Border | undefined,
+		side: BorderSide
+	) => {
+		const updatedBorders = { ...splitValue, [ side ]: newBorder };
+
+		if ( hasMixedBorders( updatedBorders ) ) {
+			onChange( updatedBorders );
+		} else {
+			onChange( newBorder );
+		}
+	};
+
+	const cx = useCx();
+	const classes = useMemo( () => {
+		return cx( styles.BorderBoxControl, className );
+	}, [ className ] );
+
+	const linkedControlClassName = useMemo( () => {
+		return cx( styles.LinkedBorderControl );
+	}, [] );
+
+	return {
+		...otherProps,
+		className: classes,
+		hasMixedBorders: mixedBorders,
+		isLinked,
+		linkedControlClassName,
+		onLinkedChange,
+		onSplitChange,
+		toggleLinked,
+		linkedValue,
+		splitValue,
+	};
+}

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

@@ -0,0 +1,2 @@
+export { default as BorderBoxControl } from './component';
+export { useBorderBoxControl } from './hook';

package/src/border-box-control/border-box-control-linked-button/component.tsx

@@ -0,0 +1,50 @@
+/**
+ * WordPress dependencies
+ */
+import { link, linkOff } from '@wordpress/icons';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import Button from '../../button';
+import Tooltip from '../../tooltip';
+import { View } from '../../view';
+import { contextConnect, WordPressComponentProps } from '../../ui/context';
+import { useBorderBoxControlLinkedButton } from './hook';
+
+import type { LinkedButtonProps } from '../types';
+
+const BorderBoxControlLinkedButton = (
+	props: WordPressComponentProps< LinkedButtonProps, 'div' >,
+	forwardedRef: React.ForwardedRef< any >
+) => {
+	const {
+		className,
+		isLinked,
+		...buttonProps
+	} = useBorderBoxControlLinkedButton( props );
+	const label = isLinked ? __( 'Unlink sides' ) : __( 'Link sides' );
+
+	return (
+		<Tooltip text={ label }>
+			<View className={ className }>
+				<Button
+					{ ...buttonProps }
+					variant={ isLinked ? 'primary' : 'secondary' }
+					isSmall
+					icon={ isLinked ? link : linkOff }
+					iconSize={ 16 }
+					aria-label={ label }
+					ref={ forwardedRef }
+				/>
+			</View>
+		</Tooltip>
+	);
+};
+
+const ConnectedBorderBoxControlLinkedButton = contextConnect(
+	BorderBoxControlLinkedButton,
+	'BorderBoxControlLinkedButton'
+);
+export default ConnectedBorderBoxControlLinkedButton;

package/src/border-box-control/border-box-control-linked-button/hook.ts

@@ -0,0 +1,30 @@
+/**
+ * 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 { LinkedButtonProps } from '../types';
+
+export function useBorderBoxControlLinkedButton(
+	props: WordPressComponentProps< LinkedButtonProps, 'div' >
+) {
+	const { className, ...otherProps } = useContextSystem(
+		props,
+		'BorderBoxControlLinkedButton'
+	);
+
+	// Generate class names.
+	const cx = useCx();
+	const classes = useMemo( () => {
+		return cx( styles.BorderBoxControlLinkedButton, className );
+	}, [ className ] );
+
+	return { ...otherProps, className: classes };
+}

package/src/border-box-control/border-box-control-linked-button/index.ts

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

package/src/border-box-control/border-box-control-split-controls/component.tsx

@@ -0,0 +1,90 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import BorderBoxControlVisualizer from '../border-box-control-visualizer';
+import { BorderControl } from '../../border-control';
+import { Grid } from '../../grid';
+import { contextConnect, WordPressComponentProps } from '../../ui/context';
+import { useBorderBoxControlSplitControls } from './hook';
+
+import type { SplitControlsProps } from '../types';
+
+const BorderBoxControlSplitControls = (
+	props: WordPressComponentProps< SplitControlsProps, 'div' >,
+	forwardedRef: React.ForwardedRef< any >
+) => {
+	const {
+		centeredClassName,
+		colors,
+		disableCustomColors,
+		enableAlpha,
+		enableStyle,
+		onChange,
+		popoverClassNames,
+		value,
+		__experimentalHasMultipleOrigins,
+		__experimentalIsRenderedInSidebar,
+		...otherProps
+	} = useBorderBoxControlSplitControls( props );
+
+	const sharedBorderControlProps = {
+		colors,
+		disableCustomColors,
+		enableAlpha,
+		enableStyle,
+		isCompact: true,
+		__experimentalHasMultipleOrigins,
+		__experimentalIsRenderedInSidebar,
+	};
+
+	return (
+		<Grid { ...otherProps } ref={ forwardedRef } gap={ 4 }>
+			<BorderBoxControlVisualizer value={ value } />
+			<BorderControl
+				className={ centeredClassName }
+				hideLabelFromVision={ true }
+				label={ __( 'Top border' ) }
+				onChange={ ( newBorder ) => onChange( newBorder, 'top' ) }
+				popoverContentClassName={ popoverClassNames?.top }
+				value={ value?.top }
+				{ ...sharedBorderControlProps }
+			/>
+			<BorderControl
+				hideLabelFromVision={ true }
+				label={ __( 'Left border' ) }
+				onChange={ ( newBorder ) => onChange( newBorder, 'left' ) }
+				popoverContentClassName={ popoverClassNames?.left }
+				value={ value?.left }
+				{ ...sharedBorderControlProps }
+			/>
+			<BorderControl
+				hideLabelFromVision={ true }
+				label={ __( 'Right border' ) }
+				onChange={ ( newBorder ) => onChange( newBorder, 'right' ) }
+				popoverContentClassName={ popoverClassNames?.right }
+				value={ value?.right }
+				{ ...sharedBorderControlProps }
+			/>
+			<BorderControl
+				className={ centeredClassName }
+				hideLabelFromVision={ true }
+				label={ __( 'Bottom border' ) }
+				onChange={ ( newBorder ) => onChange( newBorder, 'bottom' ) }
+				popoverContentClassName={ popoverClassNames?.bottom }
+				value={ value?.bottom }
+				{ ...sharedBorderControlProps }
+			/>
+		</Grid>
+	);
+};
+
+const ConnectedBorderBoxControlSplitControls = contextConnect(
+	BorderBoxControlSplitControls,
+	'BorderBoxControlSplitControls'
+);
+export default ConnectedBorderBoxControlSplitControls;

package/src/border-box-control/border-box-control-split-controls/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, rtl } from '../../utils/';
+
+import type { SplitControlsProps } from '../types';
+
+export function useBorderBoxControlSplitControls(
+	props: WordPressComponentProps< SplitControlsProps, 'div' >
+) {
+	const { className, ...otherProps } = useContextSystem(
+		props,
+		'BorderBoxControlSplitControls'
+	);
+
+	// Generate class names.
+	const cx = useCx();
+	const classes = useMemo( () => {
+		return cx( styles.BorderBoxControlSplitControls, className );
+	}, [ className, rtl.watch() ] );
+
+	const centeredClassName = useMemo( () => {
+		return cx( styles.CenteredBorderControl, className );
+	}, [] );
+
+	return { ...otherProps, centeredClassName, className: classes };
+}

package/src/border-box-control/border-box-control-split-controls/index.ts

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

package/src/border-box-control/border-box-control-visualizer/component.tsx

@@ -0,0 +1,28 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { View } from '../../view';
+import { contextConnect, WordPressComponentProps } from '../../ui/context';
+import { useBorderBoxControlVisualizer } from './hook';
+
+import type { VisualizerProps } from '../types';
+
+const BorderBoxControlVisualizer = (
+	props: WordPressComponentProps< VisualizerProps, 'div' >,
+	forwardedRef: React.ForwardedRef< any >
+) => {
+	const { value, ...otherProps } = useBorderBoxControlVisualizer( props );
+
+	return <View { ...otherProps } ref={ forwardedRef } />;
+};
+
+const ConnectedBorderBoxControlVisualizer = contextConnect(
+	BorderBoxControlVisualizer,
+	'BorderBoxControlVisualizer'
+);
+export default ConnectedBorderBoxControlVisualizer;

package/src/border-box-control/border-box-control-visualizer/hook.ts

@@ -0,0 +1,30 @@
+/**
+ * WordPress dependencies
+ */
+import { useMemo } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import * as styles from '../styles';
+import { useContextSystem, WordPressComponentProps } from '../../ui/context';
+import { useCx, rtl } from '../../utils';
+
+import type { VisualizerProps } from '../types';
+
+export function useBorderBoxControlVisualizer(
+	props: WordPressComponentProps< VisualizerProps, 'div' >
+) {
+	const { className, value, ...otherProps } = useContextSystem(
+		props,
+		'BorderBoxControlVisualizer'
+	);
+
+	// Generate class names.
+	const cx = useCx();
+	const classes = useMemo( () => {
+		return cx( styles.BorderBoxControlVisualizer( value ), className );
+	}, [ className, value, rtl.watch() ] );
+
+	return { ...otherProps, className: classes, value };
+}

package/src/border-box-control/border-box-control-visualizer/index.ts

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

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

@@ -0,0 +1,3 @@
+export { default as BorderBoxControl } from './border-box-control/component';
+export { useBorderBoxControl } from './border-box-control/hook';
+export { hasSplitBorders, isEmptyBorder, isDefinedBorder } from './utils';

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

@@ -0,0 +1,104 @@
+/**
+ * External dependencies
+ */
+import styled from '@emotion/styled';
+
+/**
+ * WordPress dependencies
+ */
+import { useEffect, useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import Button from '../../button';
+import Popover from '../../popover';
+import { BorderBoxControl } from '../';
+import { Provider as SlotFillProvider } from '../../slot-fill';
+
+// 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' },
+];
+
+export default {
+	title: 'Components (Experimental)/BorderBoxControl',
+	component: BorderBoxControl,
+	parameters: {
+		knobs: { disable: false },
+	},
+};
+
+const _default = ( props ) => {
+	const { defaultBorder } = props;
+	const [ borders, setBorders ] = useState( defaultBorder );
+
+	useEffect( () => setBorders( defaultBorder ), [ defaultBorder ] );
+
+	return (
+		<SlotFillProvider>
+			<WrapperView>
+				<BorderBoxControl
+					colors={ colors }
+					label="Borders"
+					onChange={ ( newBorders ) => setBorders( newBorders ) }
+					value={ borders }
+					{ ...props }
+				/>
+			</WrapperView>
+			<Separator />
+			<HelpText>
+				The BorderBoxControl is intended to be used within a component
+				that will provide reset controls. The button below is only for
+				convenience.
+			</HelpText>
+			<Button variant="primary" onClick={ () => setBorders( undefined ) }>
+				Reset
+			</Button>
+			<Popover.Slot />
+		</SlotFillProvider>
+	);
+};
+
+export const Default = _default.bind( {} );
+Default.args = {
+	disableCustomColors: false,
+	enableAlpha: true,
+	enableStyle: true,
+	defaultBorder: {
+		color: '#72aee6',
+		style: 'dashed',
+		width: '1px',
+	},
+};
+
+const WrapperView = styled.div`
+	max-width: 280px;
+	padding: 16px;
+`;
+
+const Separator = styled.hr`
+	margin-top: 100px;
+	border-color: #ddd;
+	border-style: solid;
+	border-bottom: none;
+`;
+
+const HelpText = styled.p`
+	color: #aaa;
+	font-size: 0.9em;
+`;

package/src/border-box-control/styles.ts

@@ -0,0 +1,69 @@
+/**
+ * External dependencies
+ */
+import { css } from '@emotion/react';
+
+/**
+ * Internal dependencies
+ */
+import { COLORS, CONFIG, rtl } from '../utils';
+import { space } from '../ui/utils/space';
+
+import type { Border } from '../border-control/types';
+import type { Borders } from './types';
+
+export const BorderBoxControl = css``;
+
+export const LinkedBorderControl = css`
+	flex: 1;
+`;
+
+export const BorderBoxControlLinkedButton = css`
+	flex: 0;
+	flex-basis: 36px;
+	margin-top: 7px;
+`;
+
+const BorderBoxStyleWithFallback = ( border?: Border ) => {
+	const {
+		color = COLORS.gray[ 200 ],
+		style = 'solid',
+		width = CONFIG.borderWidth,
+	} = border || {};
+
+	const clampedWidth =
+		width !== CONFIG.borderWidth ? `clamp(1px, ${ width }, 10px)` : width;
+	const hasVisibleBorder = ( !! width && width !== '0' ) || !! color;
+	const borderStyle = hasVisibleBorder ? style || 'solid' : style;
+
+	return `${ color } ${ borderStyle } ${ clampedWidth }`;
+};
+
+export const BorderBoxControlVisualizer = ( borders?: Borders ) => {
+	return css`
+		position: absolute;
+		top: 20px;
+		right: 30px;
+		bottom: 20px;
+		left: 30px;
+		border-top: ${ BorderBoxStyleWithFallback( borders?.top ) };
+		border-bottom: ${ BorderBoxStyleWithFallback( borders?.bottom ) };
+		${ rtl( {
+			borderLeft: BorderBoxStyleWithFallback( borders?.left ),
+		} )() }
+		${ rtl( {
+			borderRight: BorderBoxStyleWithFallback( borders?.right ),
+		} )() }
+	`;
+};
+
+export const BorderBoxControlSplitControls = css`
+	position: relative;
+	flex: 1;
+	${ rtl( { marginRight: space( 3 ) }, { marginLeft: space( 3 ) } )() }
+`;
+
+export const CenteredBorderControl = css`
+	grid-column: span 2;
+	margin: 0 auto;
+`;