@wordpress/components 39.0.0 → 40.1.1-next.v.202608281122.0

package/src/base-control/styles/base-control-styles.tsx

@@ -0,0 +1,115 @@
+import clsx from 'clsx';
+import type {
+	ElementType,
+	ForwardedRef,
+	ReactElement,
+	ReactNode,
+	ComponentProps,
+} from 'react';
+import { forwardRef } from '@wordpress/element';
+import type { WordPressComponentProps } from '../../context';
+import { PolymorphicElement } from '../../utils/polymorphic-element';
+import styles from './style.module.scss';
+
+type StyledElementProps< T extends ElementType > = WordPressComponentProps<
+	{ children?: ReactNode },
+	T
+>;
+
+function UnforwardedWrapper< T extends ElementType = 'div' >(
+	{ className, ...props }: StyledElementProps< T >,
+	ref: ForwardedRef< any >
+) {
+	return (
+		<PolymorphicElement
+			ref={ ref }
+			{ ...props }
+			className={ clsx( styles.wrapper, className ) }
+		/>
+	);
+}
+
+function UnforwardedStyledField< T extends ElementType = 'div' >(
+	{ className, ...props }: StyledElementProps< T >,
+	ref: ForwardedRef< any >
+) {
+	return (
+		<PolymorphicElement
+			ref={ ref }
+			{ ...props }
+			className={ clsx( styles.field, className ) }
+		/>
+	);
+}
+
+function UnforwardedStyledLabel< T extends ElementType = 'label' >(
+	{ as, className, ...props }: StyledElementProps< T >,
+	ref: ForwardedRef< any >
+) {
+	return (
+		<PolymorphicElement< T >
+			as={ ( as ?? 'label' ) as T }
+			ref={ ref }
+			{ ...( props as ComponentProps< T > ) }
+			className={ clsx( styles.label, className ) }
+		/>
+	);
+}
+
+function UnforwardedStyledHelp< T extends ElementType = 'p' >(
+	{ as, className, ...props }: StyledElementProps< T >,
+	ref: ForwardedRef< any >
+) {
+	return (
+		<PolymorphicElement< T >
+			as={ ( as ?? 'p' ) as T }
+			ref={ ref }
+			{ ...( props as ComponentProps< T > ) }
+			className={ clsx( styles.help, className ) }
+		/>
+	);
+}
+
+function UnforwardedStyledVisualLabel< T extends ElementType = 'span' >(
+	{ as, className, ...props }: StyledElementProps< T >,
+	ref: ForwardedRef< any >
+) {
+	return (
+		<PolymorphicElement< T >
+			as={ ( as ?? 'span' ) as T }
+			ref={ ref }
+			{ ...( props as ComponentProps< T > ) }
+			className={ clsx( styles.label, className ) }
+		/>
+	);
+}
+
+export const Wrapper = forwardRef( UnforwardedWrapper ) as <
+	T extends ElementType = 'div',
+>(
+	props: StyledElementProps< T > & { ref?: ForwardedRef< any > }
+) => ReactElement | null;
+
+export const StyledField = forwardRef( UnforwardedStyledField ) as <
+	T extends ElementType = 'div',
+>(
+	props: StyledElementProps< T > & { ref?: ForwardedRef< any > }
+) => ReactElement | null;
+
+export const StyledLabel = forwardRef( UnforwardedStyledLabel ) as <
+	T extends ElementType = 'label',
+>(
+	props: StyledElementProps< T > & { ref?: ForwardedRef< any > }
+) => ReactElement | null;
+
+export const StyledHelp = forwardRef( UnforwardedStyledHelp ) as <
+	T extends ElementType = 'p',
+>(
+	props: StyledElementProps< T > & { ref?: ForwardedRef< any > }
+) => ReactElement | null;
+
+export const StyledVisualLabel = forwardRef( UnforwardedStyledVisualLabel ) as <
+	T extends ElementType = 'span',
+>(
+	props: StyledElementProps< T > & { ref?: ForwardedRef< any > }
+) => ReactElement | null;

package/src/base-control/styles/style.module.scss

@@ -0,0 +1,39 @@
+@use "@wordpress/base-styles/variables" as *;
+@use "../../utils/theme-variables" as *;
+
+.wrapper {
+	box-sizing: border-box;
+	font-family: $font-family-body;
+	font-size: 13px;
+
+	*,
+	*::before,
+	*::after {
+		box-sizing: inherit;
+	}
+}
+
+.field {
+	:global(.components-panel__row) & {
+		margin-bottom: inherit;
+	}
+}
+
+.label {
+	display: block;
+	margin-bottom: 8px;
+	padding: 0;
+	font-size: 11px;
+	font-weight: var(--wpds-typography-font-weight-emphasis);
+	line-height: 1.4;
+	text-transform: uppercase;
+}
+
+.help {
+	margin-top: 8px;
+	margin-bottom: 0;
+	font-size: 12px;
+	font-style: normal;
+	color: $components-color-gray-700;
+	text-wrap: pretty;
+}

package/src/border-box-control/border-box-control/README.md

@@ -130,9 +130,9 @@ The available base placements are 'top', 'right', 'bottom', 'left'. Each of thes
 
 -   Required: No
 
-### `popoverOffset`: `number`
+### `popoverOffset`: `number | { mainAxis?: number; crossAxis?: number }`
 
-The space between the popover and the control wrapper.
+The space between the popover and the control wrapper. A number displaces the popover along its main axis; pass an object to also displace it along its cross axis.
 
 -   Required: No
 

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

@@ -1,5 +1,5 @@
-import { useMemo, useState } from '@wordpress/element';
-import * as styles from '../styles';
+import { useState } from '@wordpress/element';
+import styles from '../style.module.scss';
 import {
 	getBorderDiff,
 	getCommonBorder,
@@ -11,7 +11,6 @@ import {
 } from '../utils';
 import type { WordPressComponentProps } from '../../context';
 import { useContextSystem } from '../../context';
-import { useCx } from '../../utils/hooks/use-cx';
 import type { Border } from '../../border-control/types';
 import type { Borders, BorderSide, BorderBoxControlProps } from '../types';
 
@@ -100,22 +99,12 @@ export function useBorderBoxControl(
 		}
 	};
 
-	const cx = useCx();
-	const classes = useMemo( () => {
-		return cx( styles.borderBoxControl, className );
-	}, [ cx, className ] );
-
-	const linkedControlClassName = useMemo( () => {
-		return cx( styles.linkedBorderControl() );
-	}, [ cx ] );
-
-	const wrapperClassName = useMemo( () => {
-		return cx( styles.wrapper );
-	}, [ cx ] );
+	const linkedControlClassName = styles[ 'linked-border-control' ];
+	const wrapperClassName = styles.wrapper;
 
 	return {
 		...otherProps,
-		className: classes,
+		className,
 		colors,
 		disableUnits: mixedBorders && ! hasWidthValue,
 		enableAlpha,

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

@@ -1,8 +1,7 @@
-import { useMemo } from '@wordpress/element';
-import * as styles from '../styles';
+import clsx from 'clsx';
+import styles from '../style.module.scss';
 import type { WordPressComponentProps } from '../../context';
 import { useContextSystem } from '../../context';
-import { useCx } from '../../utils/hooks/use-cx';
 import type { LinkedButtonProps } from '../types';
 
 export function useBorderBoxControlLinkedButton(
@@ -13,11 +12,8 @@ export function useBorderBoxControlLinkedButton(
 		'BorderBoxControlLinkedButton'
 	);
 
-	// Generate class names.
-	const cx = useCx();
-	const classes = useMemo( () => {
-		return cx( styles.borderBoxControlLinkedButton, className );
-	}, [ className, cx ] );
-
-	return { ...otherProps, className: classes };
+	return {
+		...otherProps,
+		className: clsx( styles[ 'linked-button' ], className ),
+	};
 }

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

@@ -1,8 +1,7 @@
-import { useMemo } from '@wordpress/element';
-import * as styles from '../styles';
+import clsx from 'clsx';
+import styles from '../style.module.scss';
 import type { WordPressComponentProps } from '../../context';
 import { useContextSystem } from '../../context';
-import { useCx } from '../../utils/';
 import type { SplitControlsProps } from '../types';
 
 export function useBorderBoxControlSplitControls(
@@ -17,28 +16,20 @@ export function useBorderBoxControlSplitControls(
 		...otherProps
 	} = useContextSystem( props, 'BorderBoxControlSplitControls' );
 
-	// Generate class names.
-	const cx = useCx();
-	const classes = useMemo( () => {
-		return cx( styles.borderBoxControlSplitControls, className );
-	}, [ cx, className ] );
-
-	const centeredClassName = useMemo( () => {
-		return cx( styles.centeredBorderControl, className );
-	}, [ cx, className ] );
-
-	const rightAlignedClassName = useMemo( () => {
-		return cx( styles.rightBorderControl(), className );
-	}, [ cx, className ] );
-
 	return {
 		...otherProps,
-		centeredClassName,
-		className: classes,
+		centeredClassName: clsx(
+			styles[ 'centered-border-control' ],
+			className
+		),
+		className: clsx( styles[ 'split-controls' ], className ),
 		colors,
 		enableAlpha,
 		enableStyle,
-		rightAlignedClassName,
+		rightAlignedClassName: clsx(
+			styles[ 'right-border-control' ],
+			className
+		),
 		__experimentalIsRenderedInSidebar,
 	};
 }

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

@@ -1,23 +1,49 @@
-import { useMemo } from '@wordpress/element';
-import * as styles from '../styles';
+import clsx from 'clsx';
+import styles from '../style.module.scss';
+import { COLORS, CONFIG } from '../../utils';
 import type { WordPressComponentProps } from '../../context';
 import { useContextSystem } from '../../context';
-import { useCx } from '../../utils';
+import type { Border } from '../../border-control/types';
 import type { VisualizerProps } from '../types';
 
+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 function useBorderBoxControlVisualizer(
 	props: WordPressComponentProps< VisualizerProps, 'div' >
 ) {
-	const { className, value, ...otherProps } = useContextSystem(
+	const { className, style, value, ...otherProps } = useContextSystem(
 		props,
 		'BorderBoxControlVisualizer'
 	);
 
-	// Generate class names.
-	const cx = useCx();
-	const classes = useMemo( () => {
-		return cx( styles.borderBoxControlVisualizer( value ), className );
-	}, [ cx, className, value ] );
-
-	return { ...otherProps, className: classes, value };
+	return {
+		...otherProps,
+		className: clsx( styles.visualizer, className ),
+		style: {
+			...style,
+			'--wp-components-border-box-visualizer-top':
+				borderBoxStyleWithFallback( value?.top ),
+			'--wp-components-border-box-visualizer-bottom':
+				borderBoxStyleWithFallback( value?.bottom ),
+			// Logical properties map left/right to inline start/end for RTL.
+			'--wp-components-border-box-visualizer-start':
+				borderBoxStyleWithFallback( value?.left ),
+			'--wp-components-border-box-visualizer-end':
+				borderBoxStyleWithFallback( value?.right ),
+		},
+		value,
+	};
 }

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

@@ -58,7 +58,7 @@ const Template: StoryFn< typeof BorderBoxControl > = ( props ) => {
 					borderBottom: 'none',
 				} }
 			/>
-			<p style={ { color: '#aaa', fontSize: '0.9em' } }>
+			<p style={ { color: '#6c6c6c', 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.

package/src/border-box-control/style.module.scss

@@ -0,0 +1,43 @@
+.linked-border-control {
+	/* Preserve the original `&&` specificity so this beats BorderControl's margin reset. */
+	&#{&} {
+		flex: 1;
+		margin-inline-end: 24px;
+	}
+}
+
+.wrapper {
+	position: relative;
+}
+
+.linked-button {
+	position: absolute;
+	top: 8px;
+	inset-inline-end: 0;
+	line-height: 0;
+}
+
+.visualizer {
+	position: absolute;
+	top: 20px;
+	bottom: 20px;
+	inset-inline: 39px;
+	border-top: var(--wp-components-border-box-visualizer-top);
+	border-bottom: var(--wp-components-border-box-visualizer-bottom);
+	border-inline-start: var(--wp-components-border-box-visualizer-start);
+	border-inline-end: var(--wp-components-border-box-visualizer-end);
+}
+
+.split-controls {
+	position: relative;
+	flex: 1;
+}
+
+.centered-border-control {
+	grid-column: span 2;
+	margin: 0 auto;
+}
+
+.right-border-control {
+	margin-inline-start: auto;
+}

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

@@ -34,7 +34,9 @@ export type BorderBoxControlProps = ColorProps &
 		 */
 		popoverPlacement?: PopoverProps[ 'placement' ];
 		/**
-		 * The space between the popover and the control wrapper.
+		 * The space between the popover and the control wrapper. A number
+		 * displaces the popover along its main axis; pass an object to also
+		 * displace it along its cross axis.
 		 */
 		popoverOffset?: PopoverProps[ 'offset' ];
 		/**
@@ -83,7 +85,9 @@ export type SplitControlsProps = ColorProps &
 		 */
 		popoverPlacement?: PopoverProps[ 'placement' ];
 		/**
-		 * The space between the popover and the control wrapper.
+		 * The space between the popover and the control wrapper. A number
+		 * displaces the popover along its main axis; pass an object to also
+		 * displace it along its cross axis.
 		 */
 		popoverOffset?: PopoverProps[ 'offset' ];
 		/**

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

@@ -1,9 +1,9 @@
-import { useCallback, useMemo, useState } from '@wordpress/element';
-import * as styles from '../styles';
+import clsx from 'clsx';
+import { useCallback, useState } from '@wordpress/element';
 import { parseQuantityAndUnitFromRawValue } from '../../unit-control/utils';
 import type { WordPressComponentProps } from '../../context';
 import { useContextSystem } from '../../context';
-import { useCx } from '../../utils/hooks/use-cx';
+import styles from '../style.module.scss';
 import type { Border, BorderControlProps } from '../types';
 
 // If either width or color are defined, the border is considered valid
@@ -110,11 +110,7 @@ export function useBorderControl(
 		[ onWidthChange, widthUnit ]
 	);
 
-	// Generate class names.
-	const cx = useCx();
-	const classes = useMemo( () => {
-		return cx( styles.borderControl, className );
-	}, [ className, cx ] );
+	const classes = clsx( styles[ 'border-control' ], className );
 
 	let wrapperWidth = width;
 	if ( isCompact ) {
@@ -122,17 +118,12 @@ export function useBorderControl(
 		// Taller controls contain greater internal padding, thus greater width.
 		wrapperWidth = '116px';
 	}
-	const innerWrapperClassName = useMemo( () => {
-		return cx(
-			styles.getInnerWrapperStyles( {
-				hasWidth: !! wrapperWidth,
-			} )
-		);
-	}, [ wrapperWidth, cx ] );
-
-	const sliderClassName = useMemo( () => {
-		return cx( styles.borderSlider() );
-	}, [ cx ] );
+	const innerWrapperClassName = clsx(
+		styles[ 'inner-wrapper' ],
+		!! wrapperWidth && styles[ 'inner-wrapper-has-width' ]
+	);
+
+	const sliderClassName = styles.slider;
 
 	return {
 		...otherProps,

package/src/border-control/border-control-dropdown/component.tsx

@@ -137,13 +137,12 @@ const BorderControlDropdown = (
 		disableCustomColors,
 		enableAlpha,
 		enableStyle,
-		indicatorClassName,
 		indicatorWrapperClassName,
+		indicatorWrapperStyle,
 		isStyleSettable,
 		onReset,
 		onColorChange,
 		onStyleChange,
-		popoverContentClassName,
 		popoverControlsClassName,
 		resetButtonWrapperClassName,
 		__unstablePopoverProps,
@@ -177,11 +176,11 @@ const BorderControlDropdown = (
 			showTooltip
 			__next40pxDefaultSize
 		>
-			<span className={ indicatorWrapperClassName }>
-				<ColorIndicator
-					className={ indicatorClassName }
-					colorValue={ color }
-				/>
+			<span
+				className={ indicatorWrapperClassName }
+				style={ indicatorWrapperStyle }
+			>
+				<ColorIndicator colorValue={ color } />
 			</span>
 		</Button>
 	);
@@ -191,7 +190,6 @@ const BorderControlDropdown = (
 			<DropdownContentWrapper paddingSize="medium">
 				<VStack className={ popoverControlsClassName } spacing={ 6 }>
 					<ColorPalette
-						className={ popoverContentClassName }
 						value={ color }
 						onChange={ onColorChange }
 						{ ...{ colors, disableCustomColors } }

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

@@ -1,9 +1,9 @@
-import { useMemo } from '@wordpress/element';
-import * as styles from '../styles';
+import clsx from 'clsx';
 import { parseQuantityAndUnitFromRawValue } from '../../unit-control/utils';
 import type { WordPressComponentProps } from '../../context';
 import { useContextSystem } from '../../context';
-import { useCx } from '../../utils/hooks/use-cx';
+import { COLORS } from '../../utils';
+import styles from '../style.module.scss';
 import type { DropdownProps } from '../types';
 
 export function useBorderControlDropdown(
@@ -45,31 +45,9 @@ export function useBorderControlDropdown(
 		} );
 	};
 
-	// Generate class names.
-	const cx = useCx();
-	const classes = useMemo( () => {
-		return cx( styles.borderControlDropdown, className );
-	}, [ className, cx ] );
+	const classes = clsx( styles.dropdown, className );
 
-	const indicatorClassName = useMemo( () => {
-		return cx( styles.borderColorIndicator );
-	}, [ cx ] );
-
-	const indicatorWrapperClassName = useMemo( () => {
-		return cx( styles.colorIndicatorWrapper( border ) );
-	}, [ border, cx ] );
-
-	const popoverControlsClassName = useMemo( () => {
-		return cx( styles.borderControlPopoverControls );
-	}, [ cx ] );
-
-	const popoverContentClassName = useMemo( () => {
-		return cx( styles.borderControlPopoverContent );
-	}, [ cx ] );
-
-	const resetButtonWrapperClassName = useMemo( () => {
-		return cx( styles.resetButtonWrapper );
-	}, [ cx ] );
+	const { color: indicatorColor, style: indicatorStyle } = border || {};
 
 	return {
 		...otherProps,
@@ -78,14 +56,27 @@ export function useBorderControlDropdown(
 		colors,
 		enableAlpha,
 		enableStyle,
-		indicatorClassName,
-		indicatorWrapperClassName,
+		indicatorWrapperClassName: styles[ 'color-indicator-wrapper' ],
+		// Applied inline so CSS-wide values (e.g. `inherit`) and the `||` color
+		// fallback pass straight through to `border-style`/`border-color`. Style
+		// `none` previews as `solid`; a style without a color falls back to
+		// gray-300.
+		indicatorWrapperStyle: indicatorStyle
+			? {
+					borderStyle:
+						indicatorStyle === 'none' ? 'solid' : indicatorStyle,
+					borderColor:
+						indicatorColor ||
+						( indicatorStyle !== 'none'
+							? COLORS.gray[ 300 ]
+							: undefined ),
+			  }
+			: undefined,
 		onColorChange,
 		onStyleChange,
 		onReset,
-		popoverContentClassName,
-		popoverControlsClassName,
-		resetButtonWrapperClassName,
+		popoverControlsClassName: styles[ 'popover-controls' ],
+		resetButtonWrapperClassName: styles[ 'reset-button-wrapper' ],
 		__experimentalIsRenderedInSidebar,
 	};
 }

package/src/border-control/style.module.scss

@@ -0,0 +1,93 @@
+@use "@wordpress/base-styles/variables" as *;
+@use "../utils/theme-variables" as *;
+
+.border-control {
+	border: 0;
+	padding: 0;
+	margin: 0;
+	box-sizing: border-box;
+
+	*,
+	*::before,
+	*::after {
+		box-sizing: inherit;
+	}
+}
+.inner-wrapper {
+	height: 40px;
+
+	:global(.components-unit-control) {
+		flex: 1 1 40%;
+	}
+
+	/* Raised specificity to beat UnitSelect's runtime-injected Emotion min-height. */
+	&#{&}
+	:global(.components-unit-control__select):global(.components-unit-control__select) {
+		min-height: 0;
+	}
+}
+
+/* Forces a set UnitControl width instead of the default 40/60 split with RangeControl. */
+.inner-wrapper-has-width {
+	:global(.components-unit-control) {
+		flex: 0 0 auto;
+	}
+}
+
+.dropdown {
+	background: #fff;
+
+	/* Raised specificity to stay ahead of the Emotion Button base styles. */
+	&#{&} > button {
+		aspect-ratio: 1;
+		padding: 0;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		border-start-start-radius: $radius-small;
+		border-end-start-radius: $radius-small;
+		border-start-end-radius: 0;
+		border-end-end-radius: 0;
+		border: $border-width solid $components-color-border;
+
+		&:focus,
+		&:hover:not(:disabled) {
+			box-shadow: inset 0 0 0 0.5px $components-color-accent;
+			border-color: $components-color-accent;
+			z-index: 1;
+			position: relative;
+		}
+	}
+}
+
+.color-indicator-wrapper {
+	border-radius: $radius-full;
+	border: 2px solid transparent;
+	/* border-style / border-color are applied inline by the dropdown hook. */
+	width: 24px;
+	height: 24px;
+	padding: 2px;
+
+	/* Transparent gradient keeps the indicator visible over the active toggle. */
+	& > span {
+		height: $grid-unit-20;
+		width: $grid-unit-20;
+		background: linear-gradient(-45deg, transparent 48%, rgb(0 0 0 / 20%) 48%, rgb(0 0 0 / 20%) 52%, transparent 52%);
+	}
+}
+
+.popover-controls {
+	/* $swatch-size * 6 + $swatch-gap * 5, matching $color-palette-circle-size. */
+	width: 228px;
+}
+
+.reset-button-wrapper {
+	display: flex;
+	justify-content: flex-end;
+	margin-block-start: $grid-unit-15;
+}
+
+.slider {
+	flex: 1 1 60%;
+	margin-inline-end: $grid-unit-15;
+}