Skip to content

Commit d2363e7

Browse files
jorgefilipecostajorgefilipecosta
authored
Fix some issues on the color picker component; Remove tinycolor2; (#35562)
1 parent 2d3d0f3 commit d2363e7

16 files changed

Lines changed: 173 additions & 196 deletions

File tree

‎package-lock.json‎

Lines changed: 0 additions & 7 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -117,7 +117,6 @@
117117
"@types/requestidlecallback": "0.3.4",
118118
"@types/semver": "7.3.8",
119119
"@types/sprintf-js": "1.1.2",
120-
"@types/tinycolor2": "1.4.3",
121120
"@types/uuid": "8.3.1",
122121
"@wordpress/babel-plugin-import-jsx-pragma": "file:packages/babel-plugin-import-jsx-pragma",
123122
"@wordpress/babel-plugin-makepot": "file:packages/babel-plugin-makepot",

‎packages/components/CHANGELOG.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,18 @@
99
### Enhancements
1010

1111
- Removed the separator shown between `ToggleGroupControl` items ([#35497](https://github.com/WordPress/gutenberg/pull/35497)).
12+
- The `ColorPicker` component property `onChangeComplete`, a function accepting a color object, was replaced with the property `onChange`, a function accepting a string on ([#35220](https://github.com/WordPress/gutenberg/pull/35220)).
13+
- The property `disableAlpha`, was removed from the `ColorPicker` component. Use the new opposite property `enableAlpha` instead ([#35220](https://github.com/WordPress/gutenberg/pull/35220)).
1214

1315
### Experimental
1416

1517
- Removed the `fieldset` wrapper from the `FontAppearanceControl` component ([35461](https://github.com/WordPress/gutenberg/pull/35461)).
1618
- Refactored the `ToggleGroupControl` component's structure and embedded `ToggleGroupControlButton` directly into `ToggleGroupControlOption` ([#35600](https://github.com/WordPress/gutenberg/pull/35600)).
1719

20+
### Breaking Changes
21+
22+
- The `color` property a `tinycolor2` color object passed on `onChangeComplete` property of the `ColorPicker` component was removed. Please use the new `onChange` property that accepts a string color representation ([#35562](https://github.com/WordPress/gutenberg/pull/35562)).
23+
1824
## 18.0.0 (2021-10-12)
1925

2026
### Breaking Changes

‎packages/components/package.json‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,6 @@
6666
"react-use-gesture": "^9.0.0",
6767
"reakit": "^1.3.8",
6868
"rememo": "^3.0.0",
69-
"tinycolor2": "^1.4.2",
7069
"uuid": "^8.3.0"
7170
},
7271
"peerDependencies": {

‎packages/components/src/color-palette/test/__snapshots__/index.js.snap‎

Lines changed: 1 addition & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,7 @@
22

33
exports[`ColorPalette Dropdown .renderContent should render dropdown content 1`] = `
44
<ColorPicker
5-
color={
6-
Object {
7-
"a": 1,
8-
"h": 0,
9-
"l": 0.5,
10-
"s": 1,
11-
}
12-
}
5+
color="#f00"
136
enableAlpha={false}
147
onChange={[Function]}
158
/>

‎packages/components/src/color-picker/color-display.tsx‎

Lines changed: 13 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/**
22
* External dependencies
33
*/
4-
import colorize, { ColorFormats } from 'tinycolor2';
4+
import { colord, extend, Colord } from 'colord';
55

66
/**
77
* WordPress dependencies
@@ -20,13 +20,13 @@ import type { ColorType } from './types';
2020
import { space } from '../ui/utils/space';
2121

2222
interface ColorDisplayProps {
23-
color: ColorFormats.HSLA;
23+
color: Colord;
2424
colorType: ColorType;
2525
enableAlpha: boolean;
2626
}
2727

2828
interface DisplayProps {
29-
color: ColorFormats.HSLA;
29+
color: Colord;
3030
enableAlpha: boolean;
3131
}
3232

@@ -50,7 +50,7 @@ const ValueDisplay = ( { values }: ValueDisplayProps ) => (
5050
);
5151

5252
const HslDisplay = ( { color, enableAlpha }: DisplayProps ) => {
53-
const { h, s, l, a } = colorize( color ).toHsl();
53+
const { h, s, l, a } = color.toHsl();
5454

5555
const values: Values = [
5656
[ Math.floor( h ), 'H' ],
@@ -65,7 +65,7 @@ const HslDisplay = ( { color, enableAlpha }: DisplayProps ) => {
6565
};
6666

6767
const RgbDisplay = ( { color, enableAlpha }: DisplayProps ) => {
68-
const { r, g, b, a } = colorize( color ).toRgb();
68+
const { r, g, b, a } = color.toRgb();
6969

7070
const values: Values = [
7171
[ r, 'R' ],
@@ -80,14 +80,8 @@ const RgbDisplay = ( { color, enableAlpha }: DisplayProps ) => {
8080
return <ValueDisplay values={ values } />;
8181
};
8282

83-
const HexDisplay = ( { color, enableAlpha }: DisplayProps ) => {
84-
const colorized = colorize( color );
85-
const colorWithoutHash = ( enableAlpha
86-
? colorized.toHex8String()
87-
: colorized.toHexString()
88-
)
89-
.slice( 1 )
90-
.toUpperCase();
83+
const HexDisplay = ( { color }: DisplayProps ) => {
84+
const colorWithoutHash = color.toHex().slice( 1 ).toUpperCase();
9185
return (
9286
<FlexItem>
9387
<Text color="blue">#</Text>
@@ -114,32 +108,29 @@ export const ColorDisplay = ( {
114108
enableAlpha,
115109
}: ColorDisplayProps ) => {
116110
const [ copiedColor, setCopiedColor ] = useState< string | null >( null );
117-
const copyTimer = useRef< number | undefined >();
111+
const copyTimer = useRef< ReturnType< typeof setTimeout > | undefined >();
118112
const props = { color, enableAlpha };
119113
const Component = getComponent( colorType );
120114
const copyRef = useCopyToClipboard< HTMLDivElement >(
121115
() => {
122116
switch ( colorType ) {
123117
case 'hsl': {
124-
return colorize( color ).toHslString();
118+
return color.toHslString();
125119
}
126120
case 'rgb': {
127-
return colorize( color ).toRgbString();
121+
return color.toRgbString();
128122
}
129123
default:
130124
case 'hex': {
131-
const colorized = colorize( color );
132-
return enableAlpha
133-
? colorized.toHex8String()
134-
: colorized.toHexString();
125+
return color.toHex();
135126
}
136127
}
137128
},
138129
() => {
139130
if ( copyTimer.current ) {
140131
clearTimeout( copyTimer.current );
141132
}
142-
setCopiedColor( colorize( color ).toHex8String() );
133+
setCopiedColor( color.toHex() );
143134
copyTimer.current = setTimeout( () => {
144135
setCopiedColor( null );
145136
copyTimer.current = undefined;
@@ -158,7 +149,7 @@ export const ColorDisplay = ( {
158149
<Tooltip
159150
content={
160151
<Text color="white">
161-
{ copiedColor === colorize( color ).toHex8String()
152+
{ copiedColor === color.toHex()
162153
? __( 'Copied!' )
163154
: __( 'Copy' ) }
164155
</Text>

‎packages/components/src/color-picker/color-input.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/**
22
* External dependencies
33
*/
4-
import type { ColorFormats } from 'tinycolor2';
4+
import { colord, extend, Colord } from 'colord';
55

66
/**
77
* Internal dependencies
@@ -12,8 +12,8 @@ import { HexInput } from './hex-input';
1212

1313
interface ColorInputProps {
1414
colorType: 'hsl' | 'hex' | 'rgb';
15-
color: ColorFormats.HSLA;
16-
onChange: ( value: ColorFormats.HSLA ) => void;
15+
color: Colord;
16+
onChange: ( nextColor: Colord ) => void;
1717
enableAlpha: boolean;
1818
}
1919

‎packages/components/src/color-picker/component.tsx‎

Lines changed: 23 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,14 @@
22
* External dependencies
33
*/
44
// eslint-disable-next-line no-restricted-imports
5-
import type { Ref } from 'react';
6-
import type { ColorFormats } from 'tinycolor2';
5+
import { Ref, useCallback } from 'react';
6+
import { colord, extend, Colord } from 'colord';
7+
import namesPlugin from 'colord/plugins/names';
78

89
/**
910
* WordPress dependencies
1011
*/
11-
import { useState } from '@wordpress/element';
12+
import { useState, useMemo } from '@wordpress/element';
1213
import { settings } from '@wordpress/icons';
1314
import { useDebounce } from '@wordpress/compose';
1415
import { __ } from '@wordpress/i18n';
@@ -36,11 +37,13 @@ import { useControlledValue } from '../utils/hooks';
3637

3738
import type { ColorType } from './types';
3839

40+
extend( [ namesPlugin ] );
41+
3942
export interface ColorPickerProps {
4043
enableAlpha?: boolean;
41-
color?: ColorFormats.HSL | ColorFormats.HSLA;
42-
onChange?: ( color: ColorFormats.HSL | ColorFormats.HSLA ) => void;
43-
defaultValue?: ColorFormats.HSL | ColorFormats.HSLA;
44+
color?: string;
45+
onChange?: ( color: string ) => void;
46+
defaultValue?: string;
4447
copyFormat?: ColorType;
4548
}
4649

@@ -50,12 +53,6 @@ const options = [
5053
{ label: 'Hex', value: 'hex' as const },
5154
];
5255

53-
const getSafeColor = (
54-
color: ColorFormats.HSL | ColorFormats.HSLA | undefined
55-
): ColorFormats.HSLA => {
56-
return color ? { a: 1, ...color } : { h: 0, s: 0, l: 100, a: 1 };
57-
};
58-
5956
const ColorPicker = (
6057
props: WordPressComponentProps< ColorPickerProps, 'div', false >,
6158
forwardedRef: Ref< any >
@@ -75,17 +72,20 @@ const ColorPicker = (
7572
defaultValue,
7673
} );
7774

75+
// Use a safe default value for the color and remove the possibility of `undefined`.
76+
const safeColordColor = useMemo( () => {
77+
return color ? colord( color ) : colord( '#fff' );
78+
}, [ color ] );
79+
7880
// Debounce to prevent rapid changes from conflicting with one another.
7981
const debouncedSetColor = useDebounce( setColor );
8082

81-
const handleChange = (
82-
nextValue: ColorFormats.HSLA | ColorFormats.HSL
83-
) => {
84-
debouncedSetColor( nextValue );
85-
};
86-
87-
// Use a safe default value for the color and remove the possibility of `undefined`.
88-
const safeColor = getSafeColor( color );
83+
const handleChange = useCallback(
84+
( nextValue: Colord ) => {
85+
debouncedSetColor( nextValue.toHex() );
86+
},
87+
[ debouncedSetColor ]
88+
);
8989

9090
const [ showInputs, setShowInputs ] = useState< boolean >( false );
9191
const [ colorType, setColorType ] = useState< ColorType >(
@@ -96,7 +96,7 @@ const ColorPicker = (
9696
<ColorfulWrapper ref={ forwardedRef } { ...divProps }>
9797
<Picker
9898
onChange={ handleChange }
99-
color={ safeColor }
99+
color={ safeColordColor }
100100
enableAlpha={ enableAlpha }
101101
/>
102102
<AuxiliaryColorArtefactWrapper>
@@ -113,7 +113,7 @@ const ColorPicker = (
113113
/>
114114
) : (
115115
<ColorDisplay
116-
color={ safeColor }
116+
color={ safeColordColor }
117117
colorType={ copyFormat || colorType }
118118
enableAlpha={ enableAlpha }
119119
/>
@@ -134,7 +134,7 @@ const ColorPicker = (
134134
{ showInputs && (
135135
<ColorInput
136136
colorType={ colorType }
137-
color={ safeColor }
137+
color={ safeColordColor }
138138
onChange={ handleChange }
139139
enableAlpha={ enableAlpha }
140140
/>

‎packages/components/src/color-picker/hex-input.tsx‎

Lines changed: 8 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/**
22
* External dependencies
33
*/
4-
import colorize, { ColorFormats } from 'tinycolor2';
4+
import { colord, Colord } from 'colord';
55

66
/**
77
* WordPress dependencies
@@ -17,23 +17,18 @@ import { space } from '../ui/utils/space';
1717
import { ColorHexInputControl } from './styles';
1818

1919
interface HexInputProps {
20-
color: ColorFormats.HSLA;
21-
onChange: ( value: ColorFormats.HSLA ) => void;
20+
color: Colord;
21+
onChange: ( nextColor: Colord ) => void;
2222
enableAlpha: boolean;
2323
}
2424

2525
export const HexInput = ( { color, onChange, enableAlpha }: HexInputProps ) => {
2626
const handleValidate = ( value: string ) => {
27-
if ( ! colorize( value ).isValid() ) {
27+
if ( ! colord( '#' + value ).isValid() ) {
2828
throw new Error( 'Invalid hex color input' );
2929
}
3030
};
3131

32-
const colorized = colorize( color );
33-
const value = enableAlpha
34-
? colorized.toHex8String()
35-
: colorized.toHexString();
36-
3732
return (
3833
<ColorHexInputControl
3934
prefix={
@@ -46,10 +41,10 @@ export const HexInput = ( { color, onChange, enableAlpha }: HexInputProps ) => {
4641
#
4742
</Spacer>
4843
}
49-
value={ value.slice( 1 ).toUpperCase() }
50-
onChange={ ( nextValue ) =>
51-
onChange( colorize( nextValue ).toHsl() )
52-
}
44+
value={ color.toHex().slice( 1 ).toUpperCase() }
45+
onChange={ ( nextValue ) => {
46+
onChange( colord( '#' + nextValue ) );
47+
} }
5348
onValidate={ handleValidate }
5449
maxLength={ enableAlpha ? 8 : 6 }
5550
label={ __( 'Hex color' ) }

0 commit comments

Comments
 (0)