From 6eaa25c7359013b53b4a1259e0c0b484e14a4059 Mon Sep 17 00:00:00 2001 From: ramon Date: Mon, 11 Dec 2023 10:55:51 +1100 Subject: [PATCH 1/8] When a user edits a custom color/gradient name by adding digits to `Color n`, e.g., `Color n2` we should class this color as custom and not "Default", and therefore unsaveable. Checking the slug index against position index in accordance with getNameForPosition Renames "temporary" to "default" to be clearer about what the color/gradient is --- packages/components/src/palette-edit/index.tsx | 17 ++++++++++------- 1 file changed, 10 insertions(+), 7 deletions(-) diff --git a/packages/components/src/palette-edit/index.tsx b/packages/components/src/palette-edit/index.tsx index ceadceca1a239d..5329b2b03214ec 100644 --- a/packages/components/src/palette-edit/index.tsx +++ b/packages/components/src/palette-edit/index.tsx @@ -264,15 +264,17 @@ function Option< T extends Color | Gradient >( { /** * Checks if a color or gradient is a temporary element by testing against default values. */ -export function isTemporaryElement( +export function isDefaultElement( slugPrefix: string, - { slug, color, gradient }: Color | Gradient + { slug, color, gradient }: Color | Gradient, + index: number = -1 ): Boolean { const regex = new RegExp( `^${ slugPrefix }color-([\\d]+)$` ); - + const [ , slugIndex ] = slug.match( regex ) || []; + const hasSameIndex = index === ( slugIndex ? Number( slugIndex ) : null ); // If the slug matches the temporary name regex, // check if the color or gradient matches the default value. - if ( regex.test( slug ) ) { + if ( hasSameIndex && regex.test( slug ) ) { // The order is important as gradient elements // contain a color property. if ( !! gradient ) { @@ -305,12 +307,13 @@ function PaletteEditListView< T extends Color | Gradient >( { useEffect( () => { return () => { if ( - elementsReference.current?.some( ( element ) => - isTemporaryElement( slugPrefix, element ) + elementsReference.current?.some( ( element, index ) => + isDefaultElement( slugPrefix, element, index + 1 ) ) ) { const newElements = elementsReference.current.filter( - ( element ) => ! isTemporaryElement( slugPrefix, element ) + ( element, index ) => + ! isDefaultElement( slugPrefix, element, index + 1 ) ); onChange( newElements.length ? newElements : undefined ); } From a0d324b15a0061be6c388535a45580d4ea3fbf9c Mon Sep 17 00:00:00 2001 From: ramon Date: Tue, 12 Dec 2023 16:58:16 +1100 Subject: [PATCH 2/8] update tests --- .../components/src/palette-edit/index.tsx | 3 +- .../src/palette-edit/test/index.tsx | 43 ++++++++++++++----- 2 files changed, 35 insertions(+), 11 deletions(-) diff --git a/packages/components/src/palette-edit/index.tsx b/packages/components/src/palette-edit/index.tsx index 5329b2b03214ec..f6e5ce1e9a9758 100644 --- a/packages/components/src/palette-edit/index.tsx +++ b/packages/components/src/palette-edit/index.tsx @@ -262,7 +262,7 @@ function Option< T extends Color | Gradient >( { } /** - * Checks if a color or gradient is a temporary element by testing against default values. + * Checks if a color or gradient is a default element by testing against default values. */ export function isDefaultElement( slugPrefix: string, @@ -272,6 +272,7 @@ export function isDefaultElement( const regex = new RegExp( `^${ slugPrefix }color-([\\d]+)$` ); const [ , slugIndex ] = slug.match( regex ) || []; const hasSameIndex = index === ( slugIndex ? Number( slugIndex ) : null ); + // If the slug matches the temporary name regex, // check if the color or gradient matches the default value. if ( hasSameIndex && regex.test( slug ) ) { diff --git a/packages/components/src/palette-edit/test/index.tsx b/packages/components/src/palette-edit/test/index.tsx index 1a0b2fdaaab3fb..73929f918d5d19 100644 --- a/packages/components/src/palette-edit/test/index.tsx +++ b/packages/components/src/palette-edit/test/index.tsx @@ -8,7 +8,7 @@ import { render, fireEvent, screen } from '@testing-library/react'; */ import PaletteEdit, { getNameForPosition, - isTemporaryElement, + isDefaultElement, DEFAULT_COLOR, } from '..'; import type { PaletteElement } from '../types'; @@ -85,11 +85,12 @@ describe( 'getNameForPosition', () => { } ); } ); -describe( 'isTemporaryElement', () => { +describe( 'isDefaultElement', () => { [ { - message: 'identifies temporary color', + message: 'identify temporary color', slug: 'test-', + index: 1, obj: { name: '', slug: 'test-color-1', @@ -98,8 +99,9 @@ describe( 'isTemporaryElement', () => { expected: true, }, { - message: 'identifies temporary gradient', + message: 'identify default gradient', slug: 'test-', + index: 1, obj: { name: '', slug: 'test-color-1', @@ -108,7 +110,28 @@ describe( 'isTemporaryElement', () => { expected: true, }, { - message: 'identifies custom color slug', + message: 'not match default color with missing index arg', + slug: 'test-', + obj: { + name: '', + slug: 'test-color-1', + color: DEFAULT_COLOR, + }, + expected: false, + }, + { + message: 'identify custom color with mismatching index in name', + slug: 'test-', + index: 1, + obj: { + name: '', + slug: 'test-color-11', + color: DEFAULT_COLOR, + }, + expected: false, + }, + { + message: 'identify custom color slug', slug: 'test-', obj: { name: '', @@ -118,7 +141,7 @@ describe( 'isTemporaryElement', () => { expected: false, }, { - message: 'identifies custom color value', + message: 'identify custom color value', slug: 'test-', obj: { name: '', @@ -128,7 +151,7 @@ describe( 'isTemporaryElement', () => { expected: false, }, { - message: 'identifies custom gradient slug', + message: 'identify custom gradient slug', slug: 'test-', obj: { name: '', @@ -138,7 +161,7 @@ describe( 'isTemporaryElement', () => { expected: false, }, { - message: 'identifies custom gradient value', + message: 'identify custom gradient value', slug: 'test-', obj: { name: '', @@ -147,9 +170,9 @@ describe( 'isTemporaryElement', () => { }, expected: false, }, - ].forEach( ( { message, slug, obj, expected } ) => { + ].forEach( ( { message, slug, index, obj, expected } ) => { it( `should ${ message }`, () => { - expect( isTemporaryElement( slug, obj ) ).toBe( expected ); + expect( isDefaultElement( slug, obj, index ) ).toBe( expected ); } ); } ); } ); From 748c944dcb58323d5bfab522a75176e58f538572 Mon Sep 17 00:00:00 2001 From: ramon Date: Tue, 12 Dec 2023 16:59:48 +1100 Subject: [PATCH 3/8] CHANGELOG.md --- packages/components/CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index eccd9e639e5f20..f1d39e27b9d715 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -3,7 +3,7 @@ ## Unreleased ### Bug Fix - +- `PaletteEdit`: ensure number changes to custom names are classes as non-default ([#56932](https://github.com/WordPress/gutenberg/pull/56932)). - `FontSizePicker`: Use Button API for keeping focus on reset ([#57221](https://github.com/WordPress/gutenberg/pull/57221)). - `FontSizePicker`: Fix Reset button focus loss ([#57196](https://github.com/WordPress/gutenberg/pull/57196)). - `PaletteEdit`: Consider digits when generating kebab-cased slug ([#56713](https://github.com/WordPress/gutenberg/pull/56713)). From 07d5d14a67d2a96483133fa4ecbfe8d9485da32f Mon Sep 17 00:00:00 2001 From: ramon Date: Wed, 13 Dec 2023 06:14:48 +1100 Subject: [PATCH 4/8] Testing with no color name, and input placeholder. Only when a user clicks "Done" will the name be assigned. --- .../components/src/palette-edit/index.tsx | 78 +++++++++++-------- .../src/palette-edit/test/index.tsx | 45 +++-------- 2 files changed, 55 insertions(+), 68 deletions(-) diff --git a/packages/components/src/palette-edit/index.tsx b/packages/components/src/palette-edit/index.tsx index f6e5ce1e9a9758..6bc0597fb236c7 100644 --- a/packages/components/src/palette-edit/index.tsx +++ b/packages/components/src/palette-edit/index.tsx @@ -69,12 +69,13 @@ function NameInput( { value, onChange, label }: NameInputProps ) { hideLabelFromVision value={ value } onChange={ onChange } + placeholder={ __( 'Enter a name' ) } /> ); } /** - * Returns a temporary name for a palette item in the format "Color + id". + * Returns a temporary id for a palette item in the format "slugPrefix + color- + id". * To ensure there are no duplicate ids, this function checks all slugs for temporary names. * It expects slugs to be in the format: slugPrefix + color- + number. * It then sets the id component of the new name based on the incremented id of the highest existing slug id. @@ -82,11 +83,11 @@ function NameInput( { value, onChange, label }: NameInputProps ) { * @param elements An array of color palette items. * @param slugPrefix The slug prefix used to match the element slug. * - * @return A unique name for a palette item. + * @return A unique id for a palette item. */ -export function getNameForPosition( +export function getIdForPosition( elements: PaletteElement[], - slugPrefix: string + slugPrefix?: string ) { const temporaryNameRegex = new RegExp( `^${ slugPrefix }color-([\\d]+)$` ); const position = elements.reduce( ( previousValue, currentValue ) => { @@ -102,11 +103,7 @@ export function getNameForPosition( return previousValue; }, 1 ); - return sprintf( - /* translators: %s: is a temporary id for a custom color */ - __( 'Color %s' ), - position - ); + return `${ slugPrefix }color-${ position }`; } function ColorPickerPopover< T extends Color | Gradient >( { @@ -209,7 +206,7 @@ function Option< T extends Color | Gradient >( { }, } ) } > - + ( { : __( 'Color name' ) } value={ element.name } - onChange={ ( nextName?: string ) => + onChange={ ( nextName?: string ) => { + if ( ! nextName ) { + return; + } onChange( { ...element, name: nextName, slug: slugPrefix + kebabCase( nextName ?? '' ), - } ) - } + } ); + } } /> ) : ( { element.name } @@ -266,16 +266,13 @@ function Option< T extends Color | Gradient >( { */ export function isDefaultElement( slugPrefix: string, - { slug, color, gradient }: Color | Gradient, - index: number = -1 + { slug, name, color, gradient }: Color | Gradient ): Boolean { const regex = new RegExp( `^${ slugPrefix }color-([\\d]+)$` ); - const [ , slugIndex ] = slug.match( regex ) || []; - const hasSameIndex = index === ( slugIndex ? Number( slugIndex ) : null ); // If the slug matches the temporary name regex, // check if the color or gradient matches the default value. - if ( hasSameIndex && regex.test( slug ) ) { + if ( ! name && regex.test( slug ) ) { // The order is important as gradient elements // contain a color property. if ( !! gradient ) { @@ -305,17 +302,34 @@ function PaletteEditListView< T extends Color | Gradient >( { useEffect( () => { elementsReference.current = elements; }, [ elements ] ); + + // On unmount, remove nameless elements with the default color. useEffect( () => { return () => { + // if there are elements with the default color, remove them. + // if there are elements with non-default color and no name, update name. if ( - elementsReference.current?.some( ( element, index ) => - isDefaultElement( slugPrefix, element, index + 1 ) - ) + elementsReference.current?.some( ( element ) => { + const isDefault = isDefaultElement( slugPrefix, element ); + return isDefault || ( ! element.name && ! isDefault ); + } ) ) { - const newElements = elementsReference.current.filter( - ( element, index ) => - ! isDefaultElement( slugPrefix, element, index + 1 ) - ); + const newElements = elementsReference.current + .filter( + ( element ) => ! isDefaultElement( slugPrefix, element ) + ) + .map( ( element, index, arr ) => { + return { + ...element, + name: + element?.name || + sprintf( + /* translators: %s: is a temporary id for a custom color */ + __( 'Color %s' ), + index + 1 + ), + }; + } ); onChange( newElements.length ? newElements : undefined ); } }; @@ -478,7 +492,7 @@ export function PaletteEdit( { : __( 'Add color' ) } onClick={ () => { - const tempOptionName = getNameForPosition( + const tempOptionId = getIdForPosition( elements, slugPrefix ); @@ -488,10 +502,8 @@ export function PaletteEdit( { ...gradients, { gradient: DEFAULT_GRADIENT, - name: tempOptionName, - slug: - slugPrefix + - kebabCase( tempOptionName ), + name: '', + slug: tempOptionId, }, ] ); } else { @@ -499,10 +511,8 @@ export function PaletteEdit( { ...colors, { color: DEFAULT_COLOR, - name: tempOptionName, - slug: - slugPrefix + - kebabCase( tempOptionName ), + name: '', + slug: tempOptionId, }, ] ); } diff --git a/packages/components/src/palette-edit/test/index.tsx b/packages/components/src/palette-edit/test/index.tsx index 73929f918d5d19..adc1510b398010 100644 --- a/packages/components/src/palette-edit/test/index.tsx +++ b/packages/components/src/palette-edit/test/index.tsx @@ -7,7 +7,7 @@ import { render, fireEvent, screen } from '@testing-library/react'; * Internal dependencies */ import PaletteEdit, { - getNameForPosition, + getIdForPosition, isDefaultElement, DEFAULT_COLOR, } from '..'; @@ -19,8 +19,8 @@ describe( 'getNameForPosition', () => { const slugPrefix = 'test-'; const elements: PaletteElement[] = []; - expect( getNameForPosition( elements, slugPrefix ) ).toEqual( - 'Color 1' + expect( getIdForPosition( elements, slugPrefix ) ).toEqual( + 'test-color-1' ); } ); @@ -34,8 +34,8 @@ describe( 'getNameForPosition', () => { }, ]; - expect( getNameForPosition( elements, slugPrefix ) ).toEqual( - 'Color 2' + expect( getIdForPosition( elements, slugPrefix ) ).toEqual( + 'test-color-2' ); } ); @@ -49,8 +49,8 @@ describe( 'getNameForPosition', () => { }, ]; - expect( getNameForPosition( elements, slugPrefix ) ).toEqual( - 'Color 1' + expect( getIdForPosition( elements, slugPrefix ) ).toEqual( + 'test-color-1' ); } ); @@ -79,8 +79,8 @@ describe( 'getNameForPosition', () => { }, ]; - expect( getNameForPosition( elements, slugPrefix ) ).toEqual( - 'Color 151' + expect( getIdForPosition( elements, slugPrefix ) ).toEqual( + 'test-color-151' ); } ); } ); @@ -90,7 +90,6 @@ describe( 'isDefaultElement', () => { { message: 'identify temporary color', slug: 'test-', - index: 1, obj: { name: '', slug: 'test-color-1', @@ -101,7 +100,6 @@ describe( 'isDefaultElement', () => { { message: 'identify default gradient', slug: 'test-', - index: 1, obj: { name: '', slug: 'test-color-1', @@ -109,27 +107,6 @@ describe( 'isDefaultElement', () => { }, expected: true, }, - { - message: 'not match default color with missing index arg', - slug: 'test-', - obj: { - name: '', - slug: 'test-color-1', - color: DEFAULT_COLOR, - }, - expected: false, - }, - { - message: 'identify custom color with mismatching index in name', - slug: 'test-', - index: 1, - obj: { - name: '', - slug: 'test-color-11', - color: DEFAULT_COLOR, - }, - expected: false, - }, { message: 'identify custom color slug', slug: 'test-', @@ -170,9 +147,9 @@ describe( 'isDefaultElement', () => { }, expected: false, }, - ].forEach( ( { message, slug, index, obj, expected } ) => { + ].forEach( ( { message, slug, obj, expected } ) => { it( `should ${ message }`, () => { - expect( isDefaultElement( slug, obj, index ) ).toBe( expected ); + expect( isDefaultElement( slug, obj ) ).toBe( expected ); } ); } ); } ); From ab98a27b14918d4682ffef0a5105f3ebbdde89b5 Mon Sep 17 00:00:00 2001 From: ramon Date: Wed, 13 Dec 2023 09:17:45 +1100 Subject: [PATCH 5/8] Some typing Fixed style attr linting by creating a new classname --- .../components/src/palette-edit/index.tsx | 56 +++++++++---------- .../components/src/palette-edit/style.scss | 3 + packages/components/src/palette-edit/types.ts | 4 +- 3 files changed, 34 insertions(+), 29 deletions(-) diff --git a/packages/components/src/palette-edit/index.tsx b/packages/components/src/palette-edit/index.tsx index 6bc0597fb236c7..479a434565d3d5 100644 --- a/packages/components/src/palette-edit/index.tsx +++ b/packages/components/src/palette-edit/index.tsx @@ -58,9 +58,11 @@ import type { PaletteEditListViewProps, PaletteEditProps, PaletteElement, + OnChangeDebouncedFunction, } from './types'; export const DEFAULT_COLOR = '#000'; +const EMPTY_ARRAY = []; function NameInput( { value, onChange, label }: NameInputProps ) { return ( @@ -206,7 +208,10 @@ function Option< T extends Color | Gradient >( { }, } ) } > - + ( { export function isDefaultElement( slugPrefix: string, { slug, name, color, gradient }: Color | Gradient -): Boolean { +): boolean { const regex = new RegExp( `^${ slugPrefix }color-([\\d]+)$` ); // If the slug matches the temporary name regex, @@ -306,8 +311,8 @@ function PaletteEditListView< T extends Color | Gradient >( { // On unmount, remove nameless elements with the default color. useEffect( () => { return () => { - // if there are elements with the default color, remove them. - // if there are elements with non-default color and no name, update name. + // If there are elements with the default color, remove them. + // If there are elements with non-default color and no name, update name. if ( elementsReference.current?.some( ( element ) => { const isDefault = isDefaultElement( slugPrefix, element ); @@ -319,16 +324,14 @@ function PaletteEditListView< T extends Color | Gradient >( { ( element ) => ! isDefaultElement( slugPrefix, element ) ) .map( ( element, index, arr ) => { - return { - ...element, - name: - element?.name || - sprintf( - /* translators: %s: is a temporary id for a custom color */ - __( 'Color %s' ), - index + 1 - ), - }; + element.name = + element?.name || + sprintf( + /* translators: %s: is a temporary id for a custom color */ + __( 'Color %s' ), + index + 1 + ); + return element; } ); onChange( newElements.length ? newElements : undefined ); } @@ -337,8 +340,10 @@ function PaletteEditListView< T extends Color | Gradient >( { // a heavier refactor to avoid. See https://github.com/WordPress/gutenberg/pull/43911 // eslint-disable-next-line react-hooks/exhaustive-deps }, [] ); - - const debounceOnChange = useDebounce( onChange, 100 ); + const debounceOnChange: OnChangeDebouncedFunction = useDebounce( + onChange, + 100 + ); return ( @@ -355,16 +360,13 @@ function PaletteEditListView< T extends Color | Gradient >( { } } } onChange={ ( newElement ) => { - debounceOnChange( - elements.map( - ( currentElement, currentIndex ) => { - if ( currentIndex === index ) { - return newElement; - } - return currentElement; - } - ) + const newElements = elements.map( + ( currentElement, currentIndex ) => + currentIndex === index + ? newElement + : currentElement ); + debounceOnChange( newElements ); } } onRemove={ () => { setEditingElement( null ); @@ -395,8 +397,6 @@ function PaletteEditListView< T extends Color | Gradient >( { ); } -const EMPTY_ARRAY: Color[] = []; - /** * Allows editing a palette of colors or gradients. * @@ -493,7 +493,7 @@ export function PaletteEdit( { } onClick={ () => { const tempOptionId = getIdForPosition( - elements, + elements || EMPTY_ARRAY, slugPrefix ); diff --git a/packages/components/src/palette-edit/style.scss b/packages/components/src/palette-edit/style.scss index d73c7ff46cc3c0..5795b102c258f4 100644 --- a/packages/components/src/palette-edit/style.scss +++ b/packages/components/src/palette-edit/style.scss @@ -7,3 +7,6 @@ width: 100%; } } +.components-palette-edit__item-column { + min-height: $grid-unit-20; +} diff --git a/packages/components/src/palette-edit/types.ts b/packages/components/src/palette-edit/types.ts index 1cc0611628c2f4..302a55762ad817 100644 --- a/packages/components/src/palette-edit/types.ts +++ b/packages/components/src/palette-edit/types.ts @@ -127,7 +127,7 @@ export type OptionProps< T extends Color | Gradient > = { export type PaletteEditListViewProps< T extends Color | Gradient > = { elements: T[]; - onChange: ( newElements?: T[] ) => void; + onChange: ( newElements: T[] ) => void; isGradient: T extends Gradient ? true : false; canOnlyChangeValues: PaletteEditProps[ 'canOnlyChangeValues' ]; editingElement?: EditingElement; @@ -135,3 +135,5 @@ export type PaletteEditListViewProps< T extends Color | Gradient > = { setEditingElement: ( newEditingElement?: EditingElement ) => void; slugPrefix: string; }; + +export type OnChangeDebouncedFunction = ( arr: PaletteElement[] ) => void; From 45f9f7e87fe926a7289def3e7ba273a34bdeaf45 Mon Sep 17 00:00:00 2001 From: ramon Date: Wed, 13 Dec 2023 09:25:42 +1100 Subject: [PATCH 6/8] Gradient name instead of color --- packages/components/src/palette-edit/index.tsx | 16 +++++++++++----- 1 file changed, 11 insertions(+), 5 deletions(-) diff --git a/packages/components/src/palette-edit/index.tsx b/packages/components/src/palette-edit/index.tsx index 479a434565d3d5..f4a2aa49989ca6 100644 --- a/packages/components/src/palette-edit/index.tsx +++ b/packages/components/src/palette-edit/index.tsx @@ -326,11 +326,17 @@ function PaletteEditListView< T extends Color | Gradient >( { .map( ( element, index, arr ) => { element.name = element?.name || - sprintf( - /* translators: %s: is a temporary id for a custom color */ - __( 'Color %s' ), - index + 1 - ); + ( !! element.gradient + ? sprintf( + /* translators: %s: is a temporary id for a custom gradient */ + __( 'Gradient %s' ), + index + 1 + ) + : sprintf( + /* translators: %s: is a temporary id for a custom color */ + __( 'Color %s' ), + index + 1 + ) ); return element; } ); onChange( newElements.length ? newElements : undefined ); From eb9be93c37dc85f0e77190524bedcc35304fa1bf Mon Sep 17 00:00:00 2001 From: ramon Date: Wed, 13 Dec 2023 09:59:50 +1100 Subject: [PATCH 7/8] REvert debounced typing --- packages/components/src/palette-edit/index.tsx | 13 +++++-------- packages/components/src/palette-edit/types.ts | 4 +--- 2 files changed, 6 insertions(+), 11 deletions(-) diff --git a/packages/components/src/palette-edit/index.tsx b/packages/components/src/palette-edit/index.tsx index f4a2aa49989ca6..a029586a039f64 100644 --- a/packages/components/src/palette-edit/index.tsx +++ b/packages/components/src/palette-edit/index.tsx @@ -58,11 +58,10 @@ import type { PaletteEditListViewProps, PaletteEditProps, PaletteElement, - OnChangeDebouncedFunction, } from './types'; export const DEFAULT_COLOR = '#000'; -const EMPTY_ARRAY = []; +const EMPTY_ARRAY: Color[] = []; function NameInput( { value, onChange, label }: NameInputProps ) { return ( @@ -323,7 +322,7 @@ function PaletteEditListView< T extends Color | Gradient >( { .filter( ( element ) => ! isDefaultElement( slugPrefix, element ) ) - .map( ( element, index, arr ) => { + .map( ( element, index ) => { element.name = element?.name || ( !! element.gradient @@ -346,10 +345,8 @@ function PaletteEditListView< T extends Color | Gradient >( { // a heavier refactor to avoid. See https://github.com/WordPress/gutenberg/pull/43911 // eslint-disable-next-line react-hooks/exhaustive-deps }, [] ); - const debounceOnChange: OnChangeDebouncedFunction = useDebounce( - onChange, - 100 - ); + + const debounceOnChange = useDebounce( onChange, 100 ); return ( @@ -499,7 +496,7 @@ export function PaletteEdit( { } onClick={ () => { const tempOptionId = getIdForPosition( - elements || EMPTY_ARRAY, + elements || [], slugPrefix ); diff --git a/packages/components/src/palette-edit/types.ts b/packages/components/src/palette-edit/types.ts index 302a55762ad817..3bdb97a43f31d4 100644 --- a/packages/components/src/palette-edit/types.ts +++ b/packages/components/src/palette-edit/types.ts @@ -127,7 +127,7 @@ export type OptionProps< T extends Color | Gradient > = { export type PaletteEditListViewProps< T extends Color | Gradient > = { elements: T[]; - onChange: ( newElements: T[] ) => void; + onChange: ( newElements: T[] | undefined ) => void; isGradient: T extends Gradient ? true : false; canOnlyChangeValues: PaletteEditProps[ 'canOnlyChangeValues' ]; editingElement?: EditingElement; @@ -135,5 +135,3 @@ export type PaletteEditListViewProps< T extends Color | Gradient > = { setEditingElement: ( newEditingElement?: EditingElement ) => void; slugPrefix: string; }; - -export type OnChangeDebouncedFunction = ( arr: PaletteElement[] ) => void; From 707e57b0bd94e897101f53b7a7ecfdd8a10a6bff Mon Sep 17 00:00:00 2001 From: ramon Date: Wed, 20 Dec 2023 14:32:24 +1100 Subject: [PATCH 8/8] Tighten up minimum height so that adding new custom palette items doesn't jump around as much --- packages/components/src/palette-edit/style.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/components/src/palette-edit/style.scss b/packages/components/src/palette-edit/style.scss index 5795b102c258f4..430f384507dc67 100644 --- a/packages/components/src/palette-edit/style.scss +++ b/packages/components/src/palette-edit/style.scss @@ -8,5 +8,6 @@ } } .components-palette-edit__item-column { - min-height: $grid-unit-20; + // Height of PaletteItem component input + padding. + min-height: $grid-unit-30 + 6; }