From 5bcc0356242d493bfabc8ef4e71c5108e333e45a Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Tue, 1 Nov 2022 16:56:59 +0100 Subject: [PATCH 01/14] BorderControl and BorderBoxControl: re-use `size` prop type instead of re-declaring it --- .../border-box-control/component.tsx | 2 +- .../border-box-control/hook.ts | 12 ++- .../src/border-box-control/types.ts | 91 ++++++++----------- .../border-control/component.tsx | 2 +- .../components/src/border-control/types.ts | 75 +++++++-------- 5 files changed, 82 insertions(+), 100 deletions(-) diff --git a/packages/components/src/border-box-control/border-box-control/component.tsx b/packages/components/src/border-box-control/border-box-control/component.tsx index 4918abafebfce3..bbb2b1e05afc08 100644 --- a/packages/components/src/border-box-control/border-box-control/component.tsx +++ b/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, diff --git a/packages/components/src/border-box-control/border-box-control/hook.ts b/packages/components/src/border-box-control/border-box-control/hook.ts index fed695d182b42e..a261c1cad2fa58 100644 --- a/packages/components/src/border-box-control/border-box-control/hook.ts +++ b/packages/components/src/border-box-control/border-box-control/hook.ts @@ -25,10 +25,13 @@ import type { Borders, BorderSide, BorderBoxControlProps } from '../types'; export function useBorderBoxControl( props: WordPressComponentProps< BorderBoxControlProps, 'div' > ) { - const { className, onChange, value, ...otherProps } = useContextSystem( - props, - 'BorderBoxControl' - ); + const { + className, + onChange, + size = 'default', + value, + ...otherProps + } = useContextSystem( props, 'BorderBoxControl' ); const mixedBorders = hasMixedBorders( value ); const splitBorders = hasSplitBorders( value ); @@ -122,6 +125,7 @@ export function useBorderBoxControl( onSplitChange, toggleLinked, linkedValue, + size, splitValue, wrapperClassName, }; diff --git a/packages/components/src/border-box-control/types.ts b/packages/components/src/border-box-control/types.ts index 8e88e0b958c568..1d9a1bcb3050da 100644 --- a/packages/components/src/border-box-control/types.ts +++ b/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,7 +21,8 @@ export type BorderProp = keyof Border; export type BorderSide = keyof Borders; export type BorderBoxControlProps = ColorProps & - LabelProps & { + LabelProps & + Pick< BorderControlProps, 'size' > & { /** * This controls whether to support border style selections. */ @@ -43,15 +49,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 +64,41 @@ 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, 'size' > & { + /** + * 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; + }; diff --git a/packages/components/src/border-control/border-control/component.tsx b/packages/components/src/border-control/border-control/component.tsx index bf0beb85085465..46f48b62c77d44 100644 --- a/packages/components/src/border-control/border-control/component.tsx +++ b/packages/components/src/border-control/border-control/component.tsx @@ -53,7 +53,7 @@ const UnconnectedBorderControl = ( __unstablePopoverProps, previousStyleSelection, showDropdownHeader, - size = 'default', + size, sliderClassName, value: border, widthUnit, diff --git a/packages/components/src/border-control/types.ts b/packages/components/src/border-control/types.ts index 7710fb47054934..8a6e5e87d206f3 100644 --- a/packages/components/src/border-control/types.ts +++ b/packages/components/src/border-control/types.ts @@ -130,46 +130,41 @@ export type BorderControlProps = ColorProps & size?: 'default' | '__unstable-large'; }; -export type DropdownProps = ColorProps & { - /** - * An object representing a border or `undefined`. This component will - * extract the border color and style selections from this object to use as - * values for its popover controls. - */ - border?: Border; - /** - * An internal prop used to control the visibility of the dropdown. - */ - __unstablePopoverProps?: Omit< PopoverProps, 'children' >; - /** - * This controls whether to render border style options. - * - * @default true - */ - enableStyle?: boolean; - /** - * A callback invoked when the border color or style selections change. - */ - onChange: ( newBorder?: Border ) => void; - /** - * Any previous style selection made by the user. This can be used to - * reapply that previous selection when, for example, a zero border width is - * to a non-zero value. - */ - previousStyleSelection?: string; - /** - * Whether or not to render a header for the border color and style picker - * dropdown. The header includes a label for the color picker and a - * close button. - */ - showDropdownHeader?: boolean; - /** - * Size of the control. - * - * @default 'default' - */ - size?: 'default' | '__unstable-large'; -}; +export type DropdownProps = ColorProps & + Pick< BorderControlProps, 'size' > & { + /** + * An object representing a border or `undefined`. This component will + * extract the border color and style selections from this object to use as + * values for its popover controls. + */ + border?: Border; + /** + * An internal prop used to control the visibility of the dropdown. + */ + __unstablePopoverProps?: Omit< PopoverProps, 'children' >; + /** + * This controls whether to render border style options. + * + * @default true + */ + enableStyle?: boolean; + /** + * A callback invoked when the border color or style selections change. + */ + onChange: ( newBorder?: Border ) => void; + /** + * Any previous style selection made by the user. This can be used to + * reapply that previous selection when, for example, a zero border width is + * to a non-zero value. + */ + previousStyleSelection?: string; + /** + * Whether or not to render a header for the border color and style picker + * dropdown. The header includes a label for the color picker and a + * close button. + */ + showDropdownHeader?: boolean; + }; export type StylePickerProps = LabelProps & { /** From 02cdac030461ac6052eff52f59fdcc4aa03a1215 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Tue, 1 Nov 2022 17:09:21 +0100 Subject: [PATCH 02/14] BorderControl: move default value assignment to hook, reuse type declarations --- .../border-control-dropdown/component.tsx | 2 +- .../border-control/border-control-dropdown/hook.ts | 2 ++ .../src/border-control/border-control/component.tsx | 2 +- .../src/border-control/border-control/hook.ts | 2 ++ packages/components/src/border-control/types.ts | 11 ++--------- 5 files changed, 8 insertions(+), 11 deletions(-) diff --git a/packages/components/src/border-control/border-control-dropdown/component.tsx b/packages/components/src/border-control/border-control-dropdown/component.tsx index bfe442f4c65b29..4922a97d7c79e0 100644 --- a/packages/components/src/border-control/border-control-dropdown/component.tsx +++ b/packages/components/src/border-control/border-control-dropdown/component.tsx @@ -131,6 +131,7 @@ const BorderControlDropdown = ( colors, disableCustomColors, enableAlpha, + enableStyle, indicatorClassName, indicatorWrapperClassName, onReset, @@ -140,7 +141,6 @@ const BorderControlDropdown = ( popoverControlsClassName, resetButtonClassName, showDropdownHeader, - enableStyle = true, __unstablePopoverProps, ...otherProps } = useBorderControlDropdown( props ); diff --git a/packages/components/src/border-control/border-control-dropdown/hook.ts b/packages/components/src/border-control/border-control-dropdown/hook.ts index a50ad72150054e..b4c125ace68cfb 100644 --- a/packages/components/src/border-control/border-control-dropdown/hook.ts +++ b/packages/components/src/border-control/border-control-dropdown/hook.ts @@ -20,6 +20,7 @@ export function useBorderControlDropdown( border, className, colors, + enableStyle = true, onChange, previousStyleSelection, size = 'default', @@ -81,6 +82,7 @@ export function useBorderControlDropdown( border, className: classes, colors, + enableStyle, indicatorClassName, indicatorWrapperClassName, onColorChange, diff --git a/packages/components/src/border-control/border-control/component.tsx b/packages/components/src/border-control/border-control/component.tsx index 46f48b62c77d44..942adc4e95b477 100644 --- a/packages/components/src/border-control/border-control/component.tsx +++ b/packages/components/src/border-control/border-control/component.tsx @@ -41,7 +41,7 @@ const UnconnectedBorderControl = ( disableCustomColors, disableUnits, enableAlpha, - enableStyle = true, + enableStyle, hideLabelFromVision, innerWrapperClassName, inputWidth, diff --git a/packages/components/src/border-control/border-control/hook.ts b/packages/components/src/border-control/border-control/hook.ts index dec43fe7a1454e..3d7fb65242de83 100644 --- a/packages/components/src/border-control/border-control/hook.ts +++ b/packages/components/src/border-control/border-control/hook.ts @@ -32,6 +32,7 @@ export function useBorderControl( className, isCompact, onChange, + enableStyle = true, shouldSanitizeBorder = true, size = 'default', value: border, @@ -137,6 +138,7 @@ export function useBorderControl( return { ...otherProps, className: classes, + enableStyle, innerWrapperClassName, inputWidth: wrapperWidth, onBorderChange, diff --git a/packages/components/src/border-control/types.ts b/packages/components/src/border-control/types.ts index 8a6e5e87d206f3..ea205b7dacb2d0 100644 --- a/packages/components/src/border-control/types.ts +++ b/packages/components/src/border-control/types.ts @@ -72,8 +72,7 @@ export type BorderControlProps = ColorProps & */ disableUnits?: boolean; /** - * This controls whether to include border style options within the - * `BorderDropdown` sub-component. + * This controls whether to support border style selection. * * @default true */ @@ -131,7 +130,7 @@ export type BorderControlProps = ColorProps & }; export type DropdownProps = ColorProps & - Pick< BorderControlProps, 'size' > & { + Pick< BorderControlProps, 'enableStyle' | 'size' > & { /** * An object representing a border or `undefined`. This component will * extract the border color and style selections from this object to use as @@ -142,12 +141,6 @@ export type DropdownProps = ColorProps & * An internal prop used to control the visibility of the dropdown. */ __unstablePopoverProps?: Omit< PopoverProps, 'children' >; - /** - * This controls whether to render border style options. - * - * @default true - */ - enableStyle?: boolean; /** * A callback invoked when the border color or style selections change. */ From 583daa1011d4e940896219ef6e1fbb1917206b8b Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Tue, 1 Nov 2022 17:09:59 +0100 Subject: [PATCH 03/14] BorderBoxControl: move default value assignment to hook, reuse type declarations --- .../border-box-control-split-controls/hook.ts | 2 ++ .../border-box-control/border-box-control/hook.ts | 2 ++ packages/components/src/border-box-control/types.ts | 13 ++----------- 3 files changed, 6 insertions(+), 11 deletions(-) diff --git a/packages/components/src/border-box-control/border-box-control-split-controls/hook.ts b/packages/components/src/border-box-control/border-box-control-split-controls/hook.ts index 1ecc201e5618a6..92dea6213d0432 100644 --- a/packages/components/src/border-box-control/border-box-control-split-controls/hook.ts +++ b/packages/components/src/border-box-control/border-box-control-split-controls/hook.ts @@ -17,6 +17,7 @@ export function useBorderBoxControlSplitControls( ) { const { className, + enableStyle = true, size = 'default', ...otherProps } = useContextSystem( props, 'BorderBoxControlSplitControls' ); @@ -39,6 +40,7 @@ export function useBorderBoxControlSplitControls( ...otherProps, centeredClassName, className: classes, + enableStyle, rightAlignedClassName, size, }; diff --git a/packages/components/src/border-box-control/border-box-control/hook.ts b/packages/components/src/border-box-control/border-box-control/hook.ts index a261c1cad2fa58..309a92bc0ca706 100644 --- a/packages/components/src/border-box-control/border-box-control/hook.ts +++ b/packages/components/src/border-box-control/border-box-control/hook.ts @@ -28,6 +28,7 @@ export function useBorderBoxControl( const { className, onChange, + enableStyle = true, size = 'default', value, ...otherProps @@ -118,6 +119,7 @@ export function useBorderBoxControl( ...otherProps, className: classes, disableUnits: mixedBorders && ! hasWidthValue, + enableStyle, hasMixedBorders: mixedBorders, isLinked, linkedControlClassName, diff --git a/packages/components/src/border-box-control/types.ts b/packages/components/src/border-box-control/types.ts index 1d9a1bcb3050da..0b454d8ed09292 100644 --- a/packages/components/src/border-box-control/types.ts +++ b/packages/components/src/border-box-control/types.ts @@ -22,11 +22,7 @@ export type BorderSide = keyof Borders; export type BorderBoxControlProps = ColorProps & LabelProps & - Pick< BorderControlProps, 'size' > & { - /** - * This controls whether to support border style selections. - */ - enableStyle?: boolean; + 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 @@ -76,12 +72,7 @@ export type VisualizerProps = Pick< BorderBoxControlProps, 'size' > & { }; export type SplitControlsProps = ColorProps & - Pick< BorderBoxControlProps, 'size' > & { - /** - * This controls whether to include border style options within the - * individual `BorderControl` components. - */ - enableStyle?: boolean; + Pick< BorderBoxControlProps, 'enableStyle' | 'size' > & { /** * A callback that is invoked whenever an individual side's border has * changed. From c544869dc52c10bfc25e97d6dbc64aa04edf0ddd Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Tue, 1 Nov 2022 17:28:33 +0100 Subject: [PATCH 04/14] Reuse color types from ColorPalette --- .../border-control-dropdown/component.tsx | 11 ++++++----- packages/components/src/border-control/types.ts | 15 ++------------- 2 files changed, 8 insertions(+), 18 deletions(-) diff --git a/packages/components/src/border-control/border-control-dropdown/component.tsx b/packages/components/src/border-control/border-control-dropdown/component.tsx index 4922a97d7c79e0..20fe8d41f8142e 100644 --- a/packages/components/src/border-control/border-control-dropdown/component.tsx +++ b/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 ) => { diff --git a/packages/components/src/border-control/types.ts b/packages/components/src/border-control/types.ts index ea205b7dacb2d0..9c6cca201c7c0f 100644 --- a/packages/components/src/border-control/types.ts +++ b/packages/components/src/border-control/types.ts @@ -6,6 +6,7 @@ import type { CSSProperties } from 'react'; /** * Internal dependencies */ +import type { ColorPaletteProps } from '../color-palette/types'; import type { PopoverProps } from '../popover/types'; export type Border = { @@ -14,24 +15,12 @@ export type Border = { width?: CSSProperties[ 'borderWidth' ]; }; -export type Color = { - name: string; - color: NonNullable< CSSProperties[ 'color' ] >; -}; - -export type ColorOrigin = { - name: string; - colors: Color[]; -}; - -export type Colors = ColorOrigin[] | Color[]; - export type ColorProps = { /** * An array of color definitions. This may also be a multi-dimensional array * where colors are organized by multiple origins. */ - colors?: Colors; + colors?: ColorPaletteProps[ 'colors' ]; /** * This toggles the ability to choose custom colors. */ From 18f32ef9352dd28181f6920ba32cd0fb2b096430 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Tue, 1 Nov 2022 17:32:49 +0100 Subject: [PATCH 05/14] ColorPalette: re-use type defs for `onChange` prop --- packages/components/src/color-palette/types.ts | 13 +++++-------- 1 file changed, 5 insertions(+), 8 deletions(-) diff --git a/packages/components/src/color-palette/types.ts b/packages/components/src/color-palette/types.ts index 2b498351f132d2..2fd4e83bcd784a 100644 --- a/packages/components/src/color-palette/types.ts +++ b/packages/components/src/color-palette/types.ts @@ -3,8 +3,6 @@ */ import type { CSSProperties, MouseEventHandler, ReactNode } from 'react'; -type OnColorChange = ( newColor?: string ) => void; - export type ColorObject = { name: string; color: NonNullable< CSSProperties[ 'color' ] >; @@ -18,7 +16,10 @@ export type PaletteObject = { type PaletteProps = { className?: string; clearColor: () => void; - onChange: OnColorChange; + /** + * Callback called when a color is selected. + */ + onChange: ( newColor?: string ) => void; value?: string; actions?: ReactNode; }; @@ -42,7 +43,7 @@ export type CustomColorPickerDropdownProps = { } ) => ReactNode; }; -export type ColorPaletteProps = { +export type ColorPaletteProps = Pick< PaletteProps, 'onChange' > & { /** * Whether the palette should have a clearing button. * @@ -69,10 +70,6 @@ export type ColorPaletteProps = { * both in the bottom inputs as well as in the color picker itself. */ enableAlpha?: boolean; - /** - * Callback called when a color is selected. - */ - onChange: OnColorChange; /** * Currently active value. */ From 5881baccc578fcbf09b7543df6735da3f26032ae Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Tue, 1 Nov 2022 17:34:02 +0100 Subject: [PATCH 06/14] ColorPalette: improve type for popoverProps prop --- packages/components/src/color-palette/types.ts | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/packages/components/src/color-palette/types.ts b/packages/components/src/color-palette/types.ts index 2fd4e83bcd784a..ed03d9357f5872 100644 --- a/packages/components/src/color-palette/types.ts +++ b/packages/components/src/color-palette/types.ts @@ -3,6 +3,11 @@ */ import type { CSSProperties, MouseEventHandler, ReactNode } from 'react'; +/** + * Internal dependencies + */ +import type { PopoverProps } from '../popover/types'; + export type ColorObject = { name: string; color: NonNullable< CSSProperties[ 'color' ] >; @@ -36,7 +41,7 @@ export type MultiplePalettesProps = PaletteProps & { export type CustomColorPickerDropdownProps = { isRenderedInSidebar: boolean; renderContent: () => ReactNode; - popoverProps?: string[]; + popoverProps?: Omit< PopoverProps, 'children' >; renderToggle: ( props: { isOpen: boolean; onToggle: MouseEventHandler< HTMLButtonElement >; From 26f88aea7268edca952f866eb99e3e762b167941 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Tue, 1 Nov 2022 17:43:30 +0100 Subject: [PATCH 07/14] BorderControl: re-use type def for `colors` from `ColorPalette` component --- .../src/border-control/border-control-dropdown/hook.ts | 2 +- .../components/src/border-control/border-control/hook.ts | 2 ++ packages/components/src/border-control/types.ts | 7 +------ 3 files changed, 4 insertions(+), 7 deletions(-) diff --git a/packages/components/src/border-control/border-control-dropdown/hook.ts b/packages/components/src/border-control/border-control-dropdown/hook.ts index b4c125ace68cfb..aa5bb99060170f 100644 --- a/packages/components/src/border-control/border-control-dropdown/hook.ts +++ b/packages/components/src/border-control/border-control-dropdown/hook.ts @@ -19,7 +19,7 @@ export function useBorderControlDropdown( const { border, className, - colors, + colors = [], enableStyle = true, onChange, previousStyleSelection, diff --git a/packages/components/src/border-control/border-control/hook.ts b/packages/components/src/border-control/border-control/hook.ts index 3d7fb65242de83..110583e7fbda62 100644 --- a/packages/components/src/border-control/border-control/hook.ts +++ b/packages/components/src/border-control/border-control/hook.ts @@ -30,6 +30,7 @@ export function useBorderControl( ) { const { className, + colors = [], isCompact, onChange, enableStyle = true, @@ -138,6 +139,7 @@ export function useBorderControl( return { ...otherProps, className: classes, + colors, enableStyle, innerWrapperClassName, inputWidth: wrapperWidth, diff --git a/packages/components/src/border-control/types.ts b/packages/components/src/border-control/types.ts index 9c6cca201c7c0f..e28dabab9c708f 100644 --- a/packages/components/src/border-control/types.ts +++ b/packages/components/src/border-control/types.ts @@ -15,12 +15,7 @@ export type Border = { width?: CSSProperties[ 'borderWidth' ]; }; -export type ColorProps = { - /** - * An array of color definitions. This may also be a multi-dimensional array - * where colors are organized by multiple origins. - */ - colors?: ColorPaletteProps[ 'colors' ]; +export type ColorProps = Pick< ColorPaletteProps, 'colors' > & { /** * This toggles the ability to choose custom colors. */ From d9de1dc15f63170ee4afb314586e06debb711b9b Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Tue, 1 Nov 2022 17:44:17 +0100 Subject: [PATCH 08/14] BorderControl: re-use type def for `enableAplha` from `ColorPalette` component --- packages/components/src/border-control/types.ts | 7 +------ packages/components/src/color-palette/types.ts | 4 ++-- 2 files changed, 3 insertions(+), 8 deletions(-) diff --git a/packages/components/src/border-control/types.ts b/packages/components/src/border-control/types.ts index e28dabab9c708f..042d86bd5c8dac 100644 --- a/packages/components/src/border-control/types.ts +++ b/packages/components/src/border-control/types.ts @@ -15,16 +15,11 @@ export type Border = { width?: CSSProperties[ 'borderWidth' ]; }; -export type ColorProps = Pick< ColorPaletteProps, 'colors' > & { +export type ColorProps = Pick< ColorPaletteProps, 'colors' | 'enableAlpha' > & { /** * This toggles the ability to choose custom colors. */ disableCustomColors?: boolean; - /** - * This controls whether the alpha channel will be offered when selecting - * custom colors. - */ - enableAlpha?: 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. diff --git a/packages/components/src/color-palette/types.ts b/packages/components/src/color-palette/types.ts index ed03d9357f5872..1e63bb832bf876 100644 --- a/packages/components/src/color-palette/types.ts +++ b/packages/components/src/color-palette/types.ts @@ -71,8 +71,8 @@ export type ColorPaletteProps = Pick< PaletteProps, 'onChange' > & { */ disableCustomColors?: boolean; /** - * Whether the color picker should display the alpha channel - * both in the bottom inputs as well as in the color picker itself. + * This controls whether the alpha channel will be offered when selecting + * custom colors. */ enableAlpha?: boolean; /** From 2f146270d0a3a145102ccab54cc76cb662862c50 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Tue, 1 Nov 2022 17:44:42 +0100 Subject: [PATCH 09/14] BorderControl: re-use type def for `__experimentalHasMultipleOrigins` and `__experimentalIsRenderedInSidebar` from `ColorPalette` component --- .../border-control-dropdown/hook.ts | 4 ++++ .../src/border-control/border-control/hook.ts | 4 ++++ .../components/src/border-control/types.ts | 18 +++++++----------- 3 files changed, 15 insertions(+), 11 deletions(-) diff --git a/packages/components/src/border-control/border-control-dropdown/hook.ts b/packages/components/src/border-control/border-control-dropdown/hook.ts index aa5bb99060170f..ad60ca633993be 100644 --- a/packages/components/src/border-control/border-control-dropdown/hook.ts +++ b/packages/components/src/border-control/border-control-dropdown/hook.ts @@ -24,6 +24,8 @@ export function useBorderControlDropdown( onChange, previousStyleSelection, size = 'default', + __experimentalHasMultipleOrigins = false, + __experimentalIsRenderedInSidebar = false, ...otherProps } = useContextSystem( props, 'BorderControlDropdown' ); @@ -91,5 +93,7 @@ export function useBorderControlDropdown( popoverContentClassName, popoverControlsClassName, resetButtonClassName, + __experimentalHasMultipleOrigins, + __experimentalIsRenderedInSidebar, }; } diff --git a/packages/components/src/border-control/border-control/hook.ts b/packages/components/src/border-control/border-control/hook.ts index 110583e7fbda62..74cf7401145446 100644 --- a/packages/components/src/border-control/border-control/hook.ts +++ b/packages/components/src/border-control/border-control/hook.ts @@ -38,6 +38,8 @@ export function useBorderControl( size = 'default', value: border, width, + __experimentalHasMultipleOrigins = false, + __experimentalIsRenderedInSidebar = false, ...otherProps } = useContextSystem( props, 'BorderControl' ); @@ -152,5 +154,7 @@ export function useBorderControl( widthUnit, widthValue, size, + __experimentalHasMultipleOrigins, + __experimentalIsRenderedInSidebar, }; } diff --git a/packages/components/src/border-control/types.ts b/packages/components/src/border-control/types.ts index 042d86bd5c8dac..ba1fb86f72fbc4 100644 --- a/packages/components/src/border-control/types.ts +++ b/packages/components/src/border-control/types.ts @@ -15,21 +15,17 @@ export type Border = { width?: CSSProperties[ 'borderWidth' ]; }; -export type ColorProps = Pick< ColorPaletteProps, 'colors' | 'enableAlpha' > & { +export type ColorProps = Pick< + ColorPaletteProps, + | 'colors' + | 'enableAlpha' + | '__experimentalHasMultipleOrigins' + | '__experimentalIsRenderedInSidebar' +> & { /** * This toggles the ability to choose custom colors. */ disableCustomColors?: 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. - */ - __experimentalHasMultipleOrigins?: boolean; - /** - * This is passed on to the color related sub-components so they may render - * more effectively when used within a sidebar. - */ - __experimentalIsRenderedInSidebar?: boolean; }; export type LabelProps = { From b9c18ca63a550edd99b1cbd328207160f59ac401 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Tue, 1 Nov 2022 17:55:07 +0100 Subject: [PATCH 10/14] BorderBoxControl: update `colors` and `__experimental*` props default values to follow the type --- .../border-box-control-split-controls/hook.ts | 6 ++++++ .../src/border-box-control/border-box-control/hook.ts | 6 ++++++ 2 files changed, 12 insertions(+) diff --git a/packages/components/src/border-box-control/border-box-control-split-controls/hook.ts b/packages/components/src/border-box-control/border-box-control-split-controls/hook.ts index 92dea6213d0432..3646cacce1afcf 100644 --- a/packages/components/src/border-box-control/border-box-control-split-controls/hook.ts +++ b/packages/components/src/border-box-control/border-box-control-split-controls/hook.ts @@ -17,8 +17,11 @@ export function useBorderBoxControlSplitControls( ) { const { className, + colors = [], enableStyle = true, size = 'default', + __experimentalHasMultipleOrigins = false, + __experimentalIsRenderedInSidebar = false, ...otherProps } = useContextSystem( props, 'BorderBoxControlSplitControls' ); @@ -40,8 +43,11 @@ export function useBorderBoxControlSplitControls( ...otherProps, centeredClassName, className: classes, + colors, enableStyle, rightAlignedClassName, size, + __experimentalHasMultipleOrigins, + __experimentalIsRenderedInSidebar, }; } diff --git a/packages/components/src/border-box-control/border-box-control/hook.ts b/packages/components/src/border-box-control/border-box-control/hook.ts index 309a92bc0ca706..33468dc7da9189 100644 --- a/packages/components/src/border-box-control/border-box-control/hook.ts +++ b/packages/components/src/border-box-control/border-box-control/hook.ts @@ -27,10 +27,13 @@ export function useBorderBoxControl( ) { const { className, + colors = [], onChange, enableStyle = true, size = 'default', value, + __experimentalHasMultipleOrigins = false, + __experimentalIsRenderedInSidebar = false, ...otherProps } = useContextSystem( props, 'BorderBoxControl' ); @@ -118,6 +121,7 @@ export function useBorderBoxControl( return { ...otherProps, className: classes, + colors, disableUnits: mixedBorders && ! hasWidthValue, enableStyle, hasMixedBorders: mixedBorders, @@ -130,5 +134,7 @@ export function useBorderBoxControl( size, splitValue, wrapperClassName, + __experimentalHasMultipleOrigins, + __experimentalIsRenderedInSidebar, }; } From 0a805ad9110c58eea991cdcc276cbeab715bf125 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Tue, 1 Nov 2022 18:01:39 +0100 Subject: [PATCH 11/14] Add `false` default value for `enableAlpha` prop --- .../border-box-control-split-controls/hook.ts | 2 ++ .../src/border-box-control/border-box-control/hook.ts | 2 ++ .../src/border-control/border-control-dropdown/hook.ts | 2 ++ packages/components/src/border-control/border-control/hook.ts | 2 ++ packages/components/src/color-palette/index.tsx | 2 +- packages/components/src/color-palette/types.ts | 2 ++ 6 files changed, 11 insertions(+), 1 deletion(-) diff --git a/packages/components/src/border-box-control/border-box-control-split-controls/hook.ts b/packages/components/src/border-box-control/border-box-control-split-controls/hook.ts index 3646cacce1afcf..46e9f7b78ff956 100644 --- a/packages/components/src/border-box-control/border-box-control-split-controls/hook.ts +++ b/packages/components/src/border-box-control/border-box-control-split-controls/hook.ts @@ -18,6 +18,7 @@ export function useBorderBoxControlSplitControls( const { className, colors = [], + enableAlpha = false, enableStyle = true, size = 'default', __experimentalHasMultipleOrigins = false, @@ -44,6 +45,7 @@ export function useBorderBoxControlSplitControls( centeredClassName, className: classes, colors, + enableAlpha, enableStyle, rightAlignedClassName, size, diff --git a/packages/components/src/border-box-control/border-box-control/hook.ts b/packages/components/src/border-box-control/border-box-control/hook.ts index 33468dc7da9189..fc3214efbcd569 100644 --- a/packages/components/src/border-box-control/border-box-control/hook.ts +++ b/packages/components/src/border-box-control/border-box-control/hook.ts @@ -29,6 +29,7 @@ export function useBorderBoxControl( className, colors = [], onChange, + enableAlpha = false, enableStyle = true, size = 'default', value, @@ -123,6 +124,7 @@ export function useBorderBoxControl( className: classes, colors, disableUnits: mixedBorders && ! hasWidthValue, + enableAlpha, enableStyle, hasMixedBorders: mixedBorders, isLinked, diff --git a/packages/components/src/border-control/border-control-dropdown/hook.ts b/packages/components/src/border-control/border-control-dropdown/hook.ts index ad60ca633993be..d7fef513a74eb0 100644 --- a/packages/components/src/border-control/border-control-dropdown/hook.ts +++ b/packages/components/src/border-control/border-control-dropdown/hook.ts @@ -20,6 +20,7 @@ export function useBorderControlDropdown( border, className, colors = [], + enableAlpha = false, enableStyle = true, onChange, previousStyleSelection, @@ -84,6 +85,7 @@ export function useBorderControlDropdown( border, className: classes, colors, + enableAlpha, enableStyle, indicatorClassName, indicatorWrapperClassName, diff --git a/packages/components/src/border-control/border-control/hook.ts b/packages/components/src/border-control/border-control/hook.ts index 74cf7401145446..72b8ca0ec93c8a 100644 --- a/packages/components/src/border-control/border-control/hook.ts +++ b/packages/components/src/border-control/border-control/hook.ts @@ -33,6 +33,7 @@ export function useBorderControl( colors = [], isCompact, onChange, + enableAlpha = true, enableStyle = true, shouldSanitizeBorder = true, size = 'default', @@ -142,6 +143,7 @@ export function useBorderControl( ...otherProps, className: classes, colors, + enableAlpha, enableStyle, innerWrapperClassName, inputWidth: wrapperWidth, diff --git a/packages/components/src/color-palette/index.tsx b/packages/components/src/color-palette/index.tsx index 492d0f40709cda..8a403d75192064 100644 --- a/packages/components/src/color-palette/index.tsx +++ b/packages/components/src/color-palette/index.tsx @@ -223,7 +223,7 @@ function UnforwardedColorPalette( clearable = true, colors = [], disableCustomColors = false, - enableAlpha, + enableAlpha = false, onChange, value, __experimentalHasMultipleOrigins = false, diff --git a/packages/components/src/color-palette/types.ts b/packages/components/src/color-palette/types.ts index 1e63bb832bf876..f9356634d3ef89 100644 --- a/packages/components/src/color-palette/types.ts +++ b/packages/components/src/color-palette/types.ts @@ -73,6 +73,8 @@ export type ColorPaletteProps = Pick< PaletteProps, 'onChange' > & { /** * This controls whether the alpha channel will be offered when selecting * custom colors. + * + * @default false */ enableAlpha?: boolean; /** From 9d856329c7f0433512fdc8bf7df04d989c35a035 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Tue, 1 Nov 2022 18:20:03 +0100 Subject: [PATCH 12/14] Update READMEs --- .../border-box-control/README.md | 18 +++--------------- .../border-control/border-control/README.md | 18 +++--------------- 2 files changed, 6 insertions(+), 30 deletions(-) diff --git a/packages/components/src/border-box-control/border-box-control/README.md b/packages/components/src/border-box-control/border-box-control/README.md index 86492a4f4136a1..7bd5989db0b7ca 100644 --- a/packages/components/src/border-box-control/border-box-control/README.md +++ b/packages/components/src/border-box-control/border-box-control/README.md @@ -68,7 +68,7 @@ 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. @@ -76,6 +76,7 @@ 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` @@ -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 diff --git a/packages/components/src/border-control/border-control/README.md b/packages/components/src/border-control/border-control/README.md index 83bf939b979615..82dbdf18d1bd39 100644 --- a/packages/components/src/border-control/border-control/README.md +++ b/packages/components/src/border-control/border-control/README.md @@ -51,7 +51,7 @@ for the `BorderControl`'s color and style options, by rendering your ## 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. @@ -59,6 +59,7 @@ colors are organized by multiple origins. Each color may be an object containing a `name` and `color` value. - Required: No +- Default: `[]` ### `disableCustomColors`: `boolean` @@ -78,6 +79,7 @@ This controls whether the alpha channel will be offered when selecting custom colors. - Required: No +- Default: `false` ### `enableStyle`: `boolean` @@ -172,17 +174,3 @@ Flags whether this `BorderControl` should also render a `RangeControl` for additional control over a border's width. - 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 From e12105163cf943306364181e0f916066475704ec Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Tue, 1 Nov 2022 18:21:09 +0100 Subject: [PATCH 13/14] CHANGELOG --- packages/components/CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index e5290611a93e2c..9e3025bb2e14ef 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -24,6 +24,7 @@ - `UnitControl`: Remove outer wrapper to normalize className placement ([#41860](https://github.com/WordPress/gutenberg/pull/41860)). - `ColorPalette`: Fix transparent checkered background pattern ([#45295](https://github.com/WordPress/gutenberg/pull/45295)). - `ToggleGroupControl`: Add `isDeselectable` prop to allow deselecting the selected option ([#45123](https://github.com/WordPress/gutenberg/pull/45123)). +- `ColorPalette`, `BorderBox`, `BorderBoxControl`: polish and DRY prop types, add default values ([#45463](https://github.com/WordPress/gutenberg/pull/45463)). ### Bug Fix From a62f997b87d280b0b91984d329f6302ef899fbae Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Wed, 2 Nov 2022 13:26:42 +0100 Subject: [PATCH 14/14] Apply suggestions from Aaron --- .../border-box-control/README.md | 4 +-- .../border-control/border-control/README.md | 3 +- .../components/src/border-control/types.ts | 12 ++++---- .../components/src/color-palette/README.md | 28 ++++++++----------- 4 files changed, 21 insertions(+), 26 deletions(-) diff --git a/packages/components/src/border-box-control/border-box-control/README.md b/packages/components/src/border-box-control/border-box-control/README.md index 7bd5989db0b7ca..ce0c3a9ebc7054 100644 --- a/packages/components/src/border-box-control/border-box-control/README.md +++ b/packages/components/src/border-box-control/border-box-control/README.md @@ -126,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. @@ -136,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 diff --git a/packages/components/src/border-control/border-control/README.md b/packages/components/src/border-control/border-control/README.md index 82dbdf18d1bd39..901859df2395e9 100644 --- a/packages/components/src/border-control/border-control/README.md +++ b/packages/components/src/border-control/border-control/README.md @@ -83,8 +83,7 @@ custom colors. ### `enableStyle`: `boolean` -This controls whether to include border style options within the -`BorderDropdown` sub-component. +This controls whether to support border style selection. - Required: No - Default: `true` diff --git a/packages/components/src/border-control/types.ts b/packages/components/src/border-control/types.ts index ba1fb86f72fbc4..290618fbff8cf9 100644 --- a/packages/components/src/border-control/types.ts +++ b/packages/components/src/border-control/types.ts @@ -81,6 +81,12 @@ export type BorderControlProps = ColorProps & * and a close button. */ showDropdownHeader?: boolean; + /** + * Size of the control. + * + * @default 'default' + */ + size?: 'default' | '__unstable-large'; /** * An object representing a border or `undefined`. Used to set the * current border configuration for this component. @@ -96,12 +102,6 @@ export type BorderControlProps = ColorProps & * `RangeControl` for additional control over a border's width. */ withSlider?: boolean; - /** - * Size of the control. - * - * @default 'default' - */ - size?: 'default' | '__unstable-large'; }; export type DropdownProps = ColorProps & diff --git a/packages/components/src/color-palette/README.md b/packages/components/src/color-palette/README.md index 78db82c391b90f..f5689cb0af0364 100644 --- a/packages/components/src/color-palette/README.md +++ b/packages/components/src/color-palette/README.md @@ -36,6 +36,13 @@ for the `ColorPalette`'s color swatches, by rendering your `ColorPalette` with a The component accepts the following props. +### `clearable`: `boolean` + +Whether the palette should have a clearing button. + +- Required: No +- Default: `true` + ### `colors`: `( PaletteObject | ColorObject )[]` Array with the colors to be shown. When displaying multiple color palettes to choose from, the format of the array changes from an array of colors objects, to an array of color palettes. @@ -45,21 +52,23 @@ Array with the colors to be shown. When displaying multiple color palettes to ch ### `disableCustomColors`: `boolean` -Whether to allow the user to pick a custom color on top of the predefined choices (defined via the `colors` prop). +Whether to allow the user to pick a custom color on top of the predefined +choices (defined via the `colors` prop). - Required: No - Default: `false` ### `enableAlpha`: `boolean` -Whether the color picker should display the alpha channel both in the bottom inputs as well as in the color picker itself. +This controls whether the alpha channel will be offered when selecting custom +colors. - Required: No - Default: `false` ### `value`: `string` -currently active value +Currently active value. - Required: No @@ -68,16 +77,3 @@ currently active value Callback called when a color is selected. - Required: Yes - -### `className`: `string` - -classes to be applied to the container. - -- Required: No - -### `clearable`: `boolean` - -Whether the palette should have a clearing button. - -- Required: No -- Default: `true`