@wordpress/components 19.7.0 → 19.8.2

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