ColorPalette, BorderBox, BorderBoxControl: polish and DRY prop …

…types, add default values (#45463)

* BorderControl and BorderBoxControl: re-use `size` prop type instead of re-declaring it

* BorderControl: move default value assignment to hook, reuse type declarations

* BorderBoxControl: move default value assignment to hook, reuse type declarations

* Reuse color types from ColorPalette

* ColorPalette: re-use type defs for `onChange` prop

* ColorPalette: improve type for popoverProps prop

* BorderControl: re-use type def for `colors` from `ColorPalette` component

* BorderControl: re-use type def for `enableAplha` from `ColorPalette` component

* BorderControl: re-use type def for `__experimentalHasMultipleOrigins` and `__experimentalIsRenderedInSidebar` from `ColorPalette` component

* BorderBoxControl: update `colors` and `__experimental*` props default values to follow the type

* Add `false` default value for `enableAlpha` prop

* Update READMEs

* CHANGELOG

* Apply suggestions from Aaron

packages/components/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### Enhancements
+
+-   `ColorPalette`, `BorderBox`, `BorderBoxControl`: polish and DRY prop types, add default values ([#45463](https://github.com/WordPress/gutenberg/pull/45463)).
+
 ## 22.0.0 (2022-11-02)
 
 ### Breaking Changes

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

@@ -17,7 +17,12 @@ export function useBorderBoxControlSplitControls(
 ) {
 	const {
 		className,
+		colors = [],
+		enableAlpha = false,
+		enableStyle = true,
 		size = 'default',
+		__experimentalHasMultipleOrigins = false,
+		__experimentalIsRenderedInSidebar = false,
 		...otherProps
 	} = useContextSystem( props, 'BorderBoxControlSplitControls' );
 
@@ -39,7 +44,12 @@ export function useBorderBoxControlSplitControls(
 		...otherProps,
 		centeredClassName,
 		className: classes,
+		colors,
+		enableAlpha,
+		enableStyle,
 		rightAlignedClassName,
 		size,
+		__experimentalHasMultipleOrigins,
+		__experimentalIsRenderedInSidebar,
 	};
 }

packages/components/src/border-box-control/border-box-control/README.md

@@ -68,14 +68,15 @@ a `SlotFillProvider` overall.
 
 ## Props
 
-### `colors`: `Array`
+### `colors`: `( PaletteObject | ColorObject )[]`
 
 An array of color definitions. This may also be a multi-dimensional array where
 colors are organized by multiple origins.
 
 Each color may be an object containing a `name` and `color` value.
 
 - Required: No
+- Default: `[]`
 
 ### `disableCustomColors`: `boolean`
 
@@ -89,6 +90,7 @@ This controls whether the alpha channel will be offered when selecting
 custom colors.
 
 - Required: No
+- Default: `false`
 
 ### `enableStyle`: `boolean`
 
@@ -124,7 +126,7 @@ _Note: The will be `undefined` if a user clears all borders._
 
 ### `popoverPlacement`: `string`
 
-The position of the color popover relative to the control wrapper.
+The position of the color popovers relative to the control wrapper.
 
 By default, popovers are displayed relative to the button that initiated the popover. By supplying a popover placement, you force the popover to display in a specific location.
 
@@ -134,7 +136,7 @@ The available base placements are 'top', 'right', 'bottom', 'left'. Each of thes
 
 ### `popoverOffset`: `number`
 
-Works in conjunctions with `popoverPlacement` and allows leaving a space between the color popover and the control wrapper.
+The space between the popover and the control wrapper.
 
 - Required: No
 
@@ -166,17 +168,3 @@ const splitBorders = {
 ```
 
 - Required: No
-
-### `__experimentalHasMultipleOrigins`: `boolean`
-
-This is passed on to the color related sub-components which need to be made
-aware of whether the colors prop contains multiple origins.
-
-- Required: No
-
-### `__experimentalIsRenderedInSidebar`: `boolean`
-
-This is passed on to the color related sub-components so they may render more
-effectively when used within a sidebar.
-
-- Required: No

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

@@ -58,7 +58,7 @@ const UnconnectedBorderBoxControl = (
 		onSplitChange,
 		popoverPlacement,
 		popoverOffset,
-		size = 'default',
+		size,
 		splitValue,
 		toggleLinked,
 		wrapperClassName,

packages/components/src/border-box-control/border-box-control/hook.ts

@@ -25,10 +25,18 @@ import type { Borders, BorderSide, BorderBoxControlProps } from '../types';
 export function useBorderBoxControl(
 	props: WordPressComponentProps< BorderBoxControlProps, 'div' >
 ) {
-	const { className, onChange, value, ...otherProps } = useContextSystem(
-		props,
-		'BorderBoxControl'
-	);
+	const {
+		className,
+		colors = [],
+		onChange,
+		enableAlpha = false,
+		enableStyle = true,
+		size = 'default',
+		value,
+		__experimentalHasMultipleOrigins = false,
+		__experimentalIsRenderedInSidebar = false,
+		...otherProps
+	} = useContextSystem( props, 'BorderBoxControl' );
 
 	const mixedBorders = hasMixedBorders( value );
 	const splitBorders = hasSplitBorders( value );
@@ -114,15 +122,21 @@ export function useBorderBoxControl(
 	return {
 		...otherProps,
 		className: classes,
+		colors,
 		disableUnits: mixedBorders && ! hasWidthValue,
+		enableAlpha,
+		enableStyle,
 		hasMixedBorders: mixedBorders,
 		isLinked,
 		linkedControlClassName,
 		onLinkedChange,
 		onSplitChange,
 		toggleLinked,
 		linkedValue,
+		size,
 		splitValue,
 		wrapperClassName,
+		__experimentalHasMultipleOrigins,
+		__experimentalIsRenderedInSidebar,
 	};
 }

packages/components/src/border-box-control/types.ts

@@ -1,7 +1,12 @@
 /**
  * Internal dependencies
  */
-import type { Border, ColorProps, LabelProps } from '../border-control/types';
+import type {
+	Border,
+	ColorProps,
+	LabelProps,
+	BorderControlProps,
+} from '../border-control/types';
 import type { PopoverProps } from '../popover/types';
 
 export type Borders = {
@@ -16,11 +21,8 @@ export type BorderProp = keyof Border;
 export type BorderSide = keyof Borders;
 
 export type BorderBoxControlProps = ColorProps &
-	LabelProps & {
-		/**
-		 * This controls whether to support border style selections.
-		 */
-		enableStyle?: boolean;
+	LabelProps &
+	Pick< BorderControlProps, 'enableStyle' | 'size' > & {
 		/**
 		 * A callback function invoked when any border value is changed. The value
 		 * received may be a "flat" border object, one that has properties defining
@@ -43,15 +45,9 @@ export type BorderBoxControlProps = ColorProps &
 		 * properties but for each side; `top`, `right`, `bottom`, and `left`.
 		 */
 		value: AnyBorder;
-		/**
-		 * Size of the control.
-		 *
-		 * @default 'default'
-		 */
-		size?: 'default' | '__unstable-large';
 	};
 
-export type LinkedButtonProps = {
+export type LinkedButtonProps = Pick< BorderBoxControlProps, 'size' > & {
 	/**
 	 * This prop allows the `LinkedButton` to reflect whether the parent
 	 * `BorderBoxControl` is currently displaying "linked" or "unlinked"
@@ -64,58 +60,36 @@ export type LinkedButtonProps = {
 	 * `BorderBoxControl`.
 	 */
 	onClick: () => void;
-	/**
-	 * Size of the control.
-	 *
-	 * @default 'default'
-	 */
-	size?: 'default' | '__unstable-large';
 };
 
-export type VisualizerProps = {
+export type VisualizerProps = Pick< BorderBoxControlProps, 'size' > & {
 	/**
 	 * An object representing the current border configuration. It contains
 	 * properties for each side, with each side an object reflecting the border
 	 * color, style, and width.
 	 */
 	value?: Borders;
-	/**
-	 * Size of the control.
-	 *
-	 * @default 'default'
-	 */
-	size?: 'default' | '__unstable-large';
 };
 
-export type SplitControlsProps = ColorProps & {
-	/**
-	 * This controls whether to include border style options within the
-	 * individual `BorderControl` components.
-	 */
-	enableStyle?: boolean;
-	/**
-	 * A callback that is invoked whenever an individual side's border has
-	 * changed.
-	 */
-	onChange: ( value: Border | undefined, side: BorderSide ) => void;
-	/**
-	 * The position of the color popovers compared to the control wrapper.
-	 */
-	popoverPlacement?: PopoverProps[ 'placement' ];
-	/**
-	 * The space between the popover and the control wrapper.
-	 */
-	popoverOffset?: PopoverProps[ 'offset' ];
-	/**
-	 * An object representing the current border configuration. It contains
-	 * properties for each side, with each side an object reflecting the border
-	 * color, style, and width.
-	 */
-	value?: Borders;
-	/**
-	 * Size of the control.
-	 *
-	 * @default 'default'
-	 */
-	size?: 'default' | '__unstable-large';
-};
+export type SplitControlsProps = ColorProps &
+	Pick< BorderBoxControlProps, 'enableStyle' | 'size' > & {
+		/**
+		 * A callback that is invoked whenever an individual side's border has
+		 * changed.
+		 */
+		onChange: ( value: Border | undefined, side: BorderSide ) => void;
+		/**
+		 * The position of the color popovers compared to the control wrapper.
+		 */
+		popoverPlacement?: PopoverProps[ 'placement' ];
+		/**
+		 * The space between the popover and the control wrapper.
+		 */
+		popoverOffset?: PopoverProps[ 'offset' ];
+		/**
+		 * An object representing the current border configuration. It contains
+		 * properties for each side, with each side an object reflecting the border
+		 * color, style, and width.
+		 */
+		value?: Borders;
+	};

packages/components/src/border-control/border-control-dropdown/component.tsx

@@ -24,12 +24,13 @@ import { useBorderControlDropdown } from './hook';
 import { StyledLabel } from '../../base-control/styles/base-control-styles';
 import DropdownContentWrapper from '../../dropdown/dropdown-content-wrapper';
 
-import type { Color, ColorOrigin, Colors, DropdownProps } from '../types';
+import type { ColorObject, PaletteObject } from '../../color-palette/types';
+import type { ColorProps, DropdownProps } from '../types';
 
 const noop = () => undefined;
 const getColorObject = (
 	colorValue: CSSProperties[ 'borderColor' ],
-	colors: Colors | undefined,
+	colors: ColorProps[ 'colors' ] | undefined,
 	hasMultipleColorOrigins: boolean
 ) => {
 	if ( ! colorValue || ! colors ) {
@@ -39,7 +40,7 @@ const getColorObject = (
 	if ( hasMultipleColorOrigins ) {
 		let matchedColor;
 
-		( colors as ColorOrigin[] ).some( ( origin ) =>
+		( colors as PaletteObject[] ).some( ( origin ) =>
 			origin.colors.some( ( color ) => {
 				if ( color.color === colorValue ) {
 					matchedColor = color;
@@ -53,14 +54,14 @@ const getColorObject = (
 		return matchedColor;
 	}
 
-	return ( colors as Color[] ).find(
+	return ( colors as ColorObject[] ).find(
 		( color ) => color.color === colorValue
 	);
 };
 
 const getToggleAriaLabel = (
 	colorValue: CSSProperties[ 'borderColor' ],
-	colorObject: Color | undefined,
+	colorObject: ColorObject | undefined,
 	style: CSSProperties[ 'borderStyle' ],
 	isStyleEnabled: boolean
 ) => {
@@ -131,6 +132,7 @@ const BorderControlDropdown = (
 		colors,
 		disableCustomColors,
 		enableAlpha,
+		enableStyle,
 		indicatorClassName,
 		indicatorWrapperClassName,
 		onReset,
@@ -140,7 +142,6 @@ const BorderControlDropdown = (
 		popoverControlsClassName,
 		resetButtonClassName,
 		showDropdownHeader,
-		enableStyle = true,
 		__unstablePopoverProps,
 		...otherProps
 	} = useBorderControlDropdown( props );

packages/components/src/border-control/border-control-dropdown/hook.ts

@@ -19,10 +19,14 @@ export function useBorderControlDropdown(
 	const {
 		border,
 		className,
-		colors,
+		colors = [],
+		enableAlpha = false,
+		enableStyle = true,
 		onChange,
 		previousStyleSelection,
 		size = 'default',
+		__experimentalHasMultipleOrigins = false,
+		__experimentalIsRenderedInSidebar = false,
 		...otherProps
 	} = useContextSystem( props, 'BorderControlDropdown' );
 
@@ -81,6 +85,8 @@ export function useBorderControlDropdown(
 		border,
 		className: classes,
 		colors,
+		enableAlpha,
+		enableStyle,
 		indicatorClassName,
 		indicatorWrapperClassName,
 		onColorChange,
@@ -89,5 +95,7 @@ export function useBorderControlDropdown(
 		popoverContentClassName,
 		popoverControlsClassName,
 		resetButtonClassName,
+		__experimentalHasMultipleOrigins,
+		__experimentalIsRenderedInSidebar,
 	};
 }