Borders: Add BorderBoxControl component (#38876)

docs/manifest.json

@@ -611,6 +611,12 @@
 		"markdown_source": "../packages/components/src/base-field/README.md",
 		"parent": "components"
 	},
+	{
+		"title": "BorderBoxControl",
+		"slug": "border-box-control",
+		"markdown_source": "../packages/components/src/border-box-control/border-box-control/README.md",
+		"parent": "components"
+	},
 	{
 		"title": "BorderControl",
 		"slug": "border-control",

packages/components/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;

packages/components/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 };
+}

packages/components/src/border-box-control/border-box-control-linked-button/index.ts

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

packages/components/src/border-box-control/border-box-control-split-controls/component.tsx

@@ -0,0 +1,85 @@
+/**
+ * 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,
+		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' ) }
+				value={ value?.top }
+				{ ...sharedBorderControlProps }
+			/>
+			<BorderControl
+				hideLabelFromVision={ true }
+				label={ __( 'Left border' ) }
+				onChange={ ( newBorder ) => onChange( newBorder, 'left' ) }
+				value={ value?.left }
+				{ ...sharedBorderControlProps }
+			/>
+			<BorderControl
+				hideLabelFromVision={ true }
+				label={ __( 'Right border' ) }
+				onChange={ ( newBorder ) => onChange( newBorder, 'right' ) }
+				value={ value?.right }
+				{ ...sharedBorderControlProps }
+			/>
+			<BorderControl
+				className={ centeredClassName }
+				hideLabelFromVision={ true }
+				label={ __( 'Bottom border' ) }
+				onChange={ ( newBorder ) => onChange( newBorder, 'bottom' ) }
+				value={ value?.bottom }
+				{ ...sharedBorderControlProps }
+			/>
+		</Grid>
+	);
+};
+
+const ConnectedBorderBoxControlSplitControls = contextConnect(
+	BorderBoxControlSplitControls,
+	'BorderBoxControlSplitControls'
+);
+export default ConnectedBorderBoxControlSplitControls;

packages/components/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 };
+}

packages/components/src/border-box-control/border-box-control-split-controls/index.ts

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

packages/components/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;

packages/components/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 };
+}

packages/components/src/border-box-control/border-box-control-visualizer/index.ts

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