Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

PaletteEdit: Fix order numbers #52212

Merged
merged 6 commits into from
Mar 18, 2024
Merged

PaletteEdit: Fix order numbers #52212

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
5c7b6b1
rebase from trunk
megane9988 Mar 7, 2024
fcc6d9d
fix test
megane9988 Mar 7, 2024
6635428
Response to reviews
megane9988 Mar 7, 2024
ad75176
Apply suggestions from code review
megane9988 Mar 18, 2024
0a8653f
Update CHANGELOG.md
megane9988 Mar 18, 2024
99903e0
fix doc format
megane9988 Mar 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions packages/components/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,11 @@

- `Button`: Keep deprecated props in type definitions ([#59913](https://github.com/WordPress/gutenberg/pull/59913)).

### Bug Fix
- `PaletteEdit`: Fix number incrementing of default names for new colors added in non-en-US locales ([#52212](https://github.com/WordPress/gutenberg/pull/52212)).



## 27.1.0 (2024-03-06)

### Bug Fix
Expand Down
40 changes: 20 additions & 20 deletions packages/components/src/palette-edit/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,17 +74,17 @@ function NameInput( { value, onChange, label }: NameInputProps ) {
}

/**
* Returns a name for a palette item in the format "Color + id".
* Returns a name and slug for a palette item. The name takes the format "Color + id".
* To ensure there are no duplicate ids, this function checks all slugs.
* 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.
*
* @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 name and slug for the new palette item.
*/
export function getNameForPosition(
export function getNameAndSlugForPosition(
elements: PaletteElement[],
slugPrefix: string
) {
Expand All @@ -102,11 +102,14 @@ export function getNameForPosition(
return previousValue;
}, 1 );

return sprintf(
/* translators: %s: is an id for a custom color */
__( 'Color %s' ),
position
);
return {
name: sprintf(
/* translators: %s: is an id for a custom color */
__( 'Color %s' ),
position
),
slug: `${ slugPrefix }color-${ position }`,
};
}

function ColorPickerPopover< T extends Color | Gradient >( {
Expand Down Expand Up @@ -434,31 +437,28 @@ export function PaletteEdit( {
: __( 'Add color' )
}
onClick={ () => {
const optionName = getNameForPosition(
elements,
slugPrefix
);
const { name, slug } =
getNameAndSlugForPosition(
elements,
slugPrefix
);

if ( !! gradients ) {
onChange( [
...gradients,
{
gradient: DEFAULT_GRADIENT,
name: optionName,
slug:
slugPrefix +
kebabCase( optionName ),
name,
slug,
},
] );
} else {
onChange( [
...colors,
{
color: DEFAULT_COLOR,
name: optionName,
slug:
slugPrefix +
kebabCase( optionName ),
name,
slug,
},
] );
}
Expand Down
38 changes: 21 additions & 17 deletions packages/components/src/palette-edit/test/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import { click, type, press } from '@ariakit/test';
/**
* Internal dependencies
*/
import PaletteEdit, { getNameForPosition } from '..';
import PaletteEdit, { getNameAndSlugForPosition } from '..';
import type { PaletteElement } from '../types';

const noop = () => {};
Expand All @@ -21,17 +21,18 @@ async function clearInput( input: HTMLInputElement ) {
}
}

describe( 'getNameForPosition', () => {
describe( 'getNameAndSlugForPosition', () => {
test( 'should return 1 by default', () => {
const slugPrefix = 'test-';
const elements: PaletteElement[] = [];

expect( getNameForPosition( elements, slugPrefix ) ).toEqual(
'Color 1'
);
expect( getNameAndSlugForPosition( elements, slugPrefix ) ).toEqual( {
name: 'Color 1',
slug: 'test-color-1',
} );
} );

test( 'should return a new color name with an incremented slug id', () => {
test( 'should return a new color name and slug with an incremented slug id', () => {
const slugPrefix = 'test-';
const elements = [
{
Expand All @@ -41,12 +42,13 @@ describe( 'getNameForPosition', () => {
},
];

expect( getNameForPosition( elements, slugPrefix ) ).toEqual(
'Color 2'
);
expect( getNameAndSlugForPosition( elements, slugPrefix ) ).toEqual( {
name: 'Color 2',
slug: 'test-color-2',
} );
} );

test( 'should ignore user-defined color names', () => {
test( 'should ignore user-defined color name and slug', () => {
const slugPrefix = 'test-';
const elements = [
{
Expand All @@ -56,12 +58,13 @@ describe( 'getNameForPosition', () => {
},
];

expect( getNameForPosition( elements, slugPrefix ) ).toEqual(
'Color 1'
);
expect( getNameAndSlugForPosition( elements, slugPrefix ) ).toEqual( {
name: 'Color 1',
slug: 'test-color-1',
} );
} );

test( 'should return a new color name with an incremented slug id one higher than the current highest', () => {
test( 'should return a new color name and slug with an incremented slug id one higher than the current highest', () => {
const slugPrefix = 'test-';
const elements = [
{
Expand All @@ -86,9 +89,10 @@ describe( 'getNameForPosition', () => {
},
];

expect( getNameForPosition( elements, slugPrefix ) ).toEqual(
'Color 151'
);
expect( getNameAndSlugForPosition( elements, slugPrefix ) ).toEqual( {
name: 'Color 151',
slug: 'test-color-151',
} );
} );
} );

Expand Down
Loading