@wordpress/components 21.3.0 → 22.1.0

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

@@ -8,7 +8,7 @@ import { useMemo } from '@wordpress/element';
  */
 import * as styles from '../styles';
 import { useContextSystem, WordPressComponentProps } from '../../ui/context';
-import { useCx, rtl } from '../../utils';
+import { useCx } from '../../utils';
 
 import type { VisualizerProps } from '../types';
 
@@ -18,21 +18,18 @@ export function useBorderBoxControlVisualizer(
 	const {
 		className,
 		value,
-		__next36pxDefaultSize = false,
+		size = 'default',
 		...otherProps
 	} = useContextSystem( props, 'BorderBoxControlVisualizer' );
 
 	// Generate class names.
 	const cx = useCx();
-	const rtlWatchResult = rtl.watch();
 	const classes = useMemo( () => {
 		return cx(
-			styles.borderBoxControlVisualizer( value, __next36pxDefaultSize ),
+			styles.borderBoxControlVisualizer( value, size ),
 			className
 		);
-		// rtlWatchResult is needed to refresh styles when the writing direction changes
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [ cx, className, value, __next36pxDefaultSize, rtlWatchResult ] );
+	}, [ cx, className, value, size ] );
 
 	return { ...otherProps, className: classes, value };
 }

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

@@ -0,0 +1,90 @@
+/**
+ * External dependencies
+ */
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { ComponentProps } from 'react';
+
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import Button from '../../button';
+import Popover from '../../popover';
+import { BorderBoxControl } from '../';
+import { Provider as SlotFillProvider } from '../../slot-fill';
+
+const meta: ComponentMeta< typeof BorderBoxControl > = {
+	title: 'Components (Experimental)/BorderBoxControl',
+	component: BorderBoxControl,
+	argTypes: {
+		onChange: { action: 'onChange' },
+		value: { control: { type: null } },
+	},
+	parameters: {
+		controls: { expanded: true },
+		docs: { source: { state: 'open' } },
+	},
+};
+export default meta;
+
+// Available border colors.
+const colors = [
+	{ name: 'Blue 20', color: '#72aee6' },
+	{ name: 'Blue 40', color: '#3582c4' },
+	{ name: 'Red 40', color: '#e65054' },
+	{ name: 'Red 70', color: '#8a2424' },
+	{ name: 'Yellow 10', color: '#f2d675' },
+	{ name: 'Yellow 40', color: '#bd8600' },
+];
+
+const Template: ComponentStory< typeof BorderBoxControl > = ( props ) => {
+	const { onChange, ...otherProps } = props;
+	const [ borders, setBorders ] = useState< typeof props[ 'value' ] >();
+
+	const onChangeMerged: ComponentProps<
+		typeof BorderBoxControl
+	>[ 'onChange' ] = ( newBorders ) => {
+		setBorders( newBorders );
+		onChange( newBorders );
+	};
+
+	return (
+		<SlotFillProvider>
+			<BorderBoxControl
+				{ ...otherProps }
+				onChange={ onChangeMerged }
+				value={ borders }
+			/>
+			<hr
+				style={ {
+					marginTop: '100px',
+					borderColor: '#ddd',
+					borderStyle: 'solid',
+					borderBottom: 'none',
+				} }
+			/>
+			<p style={ { color: '#aaa', fontSize: '0.9em' } }>
+				The BorderBoxControl is intended to be used within a component
+				that will provide reset controls. The button below is only for
+				convenience.
+			</p>
+			<Button
+				variant="primary"
+				onClick={ () => onChangeMerged( undefined ) }
+			>
+				Reset
+			</Button>
+			{ /* @ts-expect-error Ignore until Popover.Slot is converted to TS */ }
+			<Popover.Slot />
+		</SlotFillProvider>
+	);
+};
+export const Default = Template.bind( {} );
+Default.args = {
+	colors,
+	label: 'Borders',
+};

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

@@ -7,29 +7,33 @@ 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 borderBoxControl = css``;
 
-export const LinkedBorderControl = css`
+export const linkedBorderControl = () => css`
 	flex: 1;
+	${ rtl( { marginRight: '24px' } )() }
 `;
 
-export const BorderBoxControlLinkedButton = (
-	__next36pxDefaultSize?: boolean
+export const wrapper = css`
+	position: relative;
+`;
+
+export const borderBoxControlLinkedButton = (
+	size?: 'default' | '__unstable-large'
 ) => {
 	return css`
-		flex: 0;
-		flex-basis: 24px;
+		position: absolute;
+		top: ${ size === '__unstable-large' ? '8px' : '3px' };
+		${ rtl( { right: 0 } )() }
 		line-height: 0;
-		margin-top: ${ __next36pxDefaultSize ? '6px' : '3px' };
 	`;
 };
 
-const BorderBoxStyleWithFallback = ( border?: Border ) => {
+const borderBoxStyleWithFallback = ( border?: Border ) => {
 	const {
 		color = COLORS.gray[ 200 ],
 		style = 'solid',
@@ -46,36 +50,38 @@ const BorderBoxStyleWithFallback = ( border?: Border ) => {
 
 export const borderBoxControlVisualizer = (
 	borders?: Borders,
-	__next36pxDefaultSize?: boolean
+	size?: 'default' | '__unstable-large'
 ) => {
 	return css`
 		position: absolute;
-		top: ${ __next36pxDefaultSize ? '18px' : '15px' };
-		right: 30px;
-		bottom: ${ __next36pxDefaultSize ? '18px' : '15px' };
-		left: 30px;
-		border-top: ${ BorderBoxStyleWithFallback( borders?.top ) };
-		border-bottom: ${ BorderBoxStyleWithFallback( borders?.bottom ) };
+		top: ${ size === '__unstable-large' ? '20px' : '15px' };
+		right: ${ size === '__unstable-large' ? '39px' : '29px' };
+		bottom: ${ size === '__unstable-large' ? '20px' : '15px' };
+		left: ${ size === '__unstable-large' ? '39px' : '29px' };
+		border-top: ${ borderBoxStyleWithFallback( borders?.top ) };
+		border-bottom: ${ borderBoxStyleWithFallback( borders?.bottom ) };
 		${ rtl( {
-			borderLeft: BorderBoxStyleWithFallback( borders?.left ),
+			borderLeft: borderBoxStyleWithFallback( borders?.left ),
 		} )() }
 		${ rtl( {
-			borderRight: BorderBoxStyleWithFallback( borders?.right ),
+			borderRight: borderBoxStyleWithFallback( borders?.right ),
 		} )() }
 	`;
 };
 
-export const borderBoxControlSplitControls = () => css`
+export const borderBoxControlSplitControls = (
+	size?: 'default' | '__unstable-large'
+) => css`
 	position: relative;
 	flex: 1;
-	${ rtl( { marginRight: space( 3 ) }, { marginLeft: space( 3 ) } )() }
+	width: ${ size === '__unstable-large' ? undefined : '80%' };
 `;
 
-export const CenteredBorderControl = css`
+export const centeredBorderControl = css`
 	grid-column: span 2;
 	margin: 0 auto;
 `;
 
 export const rightBorderControl = () => css`
-	${ rtl( { marginLeft: 'auto' }, { marginRight: 'auto' } )() }
+	${ rtl( { marginLeft: 'auto' } )() }
 `;