Skip to content

Commit ede1887

Browse files
devongovettdevongovett
authored
Fix circular dependency between @react-types/color and @react-stately/color (#1460)
1 parent 7927421 commit ede1887

20 files changed

+252
-292
lines changed

‎packages/@react-aria/color/test/useColorWheel.test.tsx‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,9 @@
1111
*/
1212

1313
import {act, fireEvent, render} from '@testing-library/react';
14-
import {Color, useColorWheelState} from '@react-stately/color';
1514
import {ColorWheelProps} from '@react-types/color';
1615
import {installMouseEvent, installPointerEvent} from '@react-spectrum/test-utils';
16+
import {parseColor, useColorWheelState} from '@react-stately/color';
1717
import React, {useRef} from 'react';
1818
import {useColorWheel} from '../';
1919
import userEvent from '@testing-library/user-event';
@@ -124,7 +124,7 @@ describe('useColorWheel', () => {
124124

125125
describe('keyboard events', () => {
126126
it('left/right works', () => {
127-
let defaultColor = new Color('hsl(0, 100%, 50%)');
127+
let defaultColor = parseColor('hsl(0, 100%, 50%)');
128128
let {getByRole} = render(<ColorWheel defaultValue={defaultColor} onChange={onChangeSpy} />);
129129
let slider = getByRole('slider');
130130
act(() => {slider.focus();});
@@ -138,7 +138,7 @@ describe('useColorWheel', () => {
138138
});
139139

140140
it('up/down works', () => {
141-
let defaultColor = new Color('hsl(0, 100%, 50%)');
141+
let defaultColor = parseColor('hsl(0, 100%, 50%)');
142142
let {getByRole} = render(<ColorWheel defaultValue={defaultColor} onChange={onChangeSpy} />);
143143
let slider = getByRole('slider');
144144
act(() => {slider.focus();});
@@ -152,7 +152,7 @@ describe('useColorWheel', () => {
152152
});
153153

154154
it('doesn\'t work when disabled', () => {
155-
let defaultColor = new Color('hsl(0, 100%, 50%)');
155+
let defaultColor = parseColor('hsl(0, 100%, 50%)');
156156
let {getByRole} = render(<ColorWheel defaultValue={defaultColor} onChange={onChangeSpy} isDisabled />);
157157
let slider = getByRole('slider');
158158
act(() => {slider.focus();});
@@ -164,7 +164,7 @@ describe('useColorWheel', () => {
164164
});
165165

166166
it('wraps around', () => {
167-
let defaultColor = new Color('hsl(0, 100%, 50%)');
167+
let defaultColor = parseColor('hsl(0, 100%, 50%)');
168168
let {getByRole} = render(<ColorWheel defaultValue={defaultColor} onChange={onChangeSpy} />);
169169
let slider = getByRole('slider');
170170
act(() => {slider.focus();});
@@ -175,7 +175,7 @@ describe('useColorWheel', () => {
175175
});
176176

177177
it('respects step', () => {
178-
let defaultColor = new Color('hsl(0, 100%, 50%)');
178+
let defaultColor = parseColor('hsl(0, 100%, 50%)');
179179
let {getByRole} = render(<ColorWheel defaultValue={defaultColor} onChange={onChangeSpy} step={45} />);
180180
let slider = getByRole('slider');
181181
act(() => {slider.focus();});
@@ -189,7 +189,7 @@ describe('useColorWheel', () => {
189189
});
190190

191191
it('can always get back to 0 even with step', () => {
192-
let defaultColor = new Color('hsl(330, 100%, 50%)');
192+
let defaultColor = parseColor('hsl(330, 100%, 50%)');
193193
let {getByRole} = render(<ColorWheel defaultValue={defaultColor} onChange={onChangeSpy} step={110} />);
194194
let slider = getByRole('slider');
195195
act(() => {slider.focus();});
@@ -203,7 +203,7 @@ describe('useColorWheel', () => {
203203
});
204204

205205
it('steps with page up/down', () => {
206-
let defaultColor = new Color('hsl(0, 100%, 50%)');
206+
let defaultColor = parseColor('hsl(0, 100%, 50%)');
207207
let {getByRole} = render(<ColorWheel defaultValue={defaultColor} onChange={onChangeSpy} />);
208208
let slider = getByRole('slider');
209209
act(() => {slider.focus();});
@@ -238,7 +238,7 @@ describe('useColorWheel', () => {
238238
prepare();
239239

240240
it('dragging the thumb works', () => {
241-
let defaultColor = new Color('hsl(0, 100%, 50%)');
241+
let defaultColor = parseColor('hsl(0, 100%, 50%)');
242242
let {getByRole, getByTestId} = render(<ColorWheel defaultValue={defaultColor} onChange={onChangeSpy} />);
243243
let thumb = getByTestId('thumb');
244244
let slider = getByRole('slider');
@@ -261,7 +261,7 @@ describe('useColorWheel', () => {
261261
});
262262

263263
it('dragging the thumb doesn\'t work when disabled', () => {
264-
let defaultColor = new Color('hsl(0, 100%, 50%)');
264+
let defaultColor = parseColor('hsl(0, 100%, 50%)');
265265
let {getByRole, getByTestId} = render(<ColorWheel isDisabled defaultValue={defaultColor} onChange={onChangeSpy} />);
266266
let thumb = getByTestId('thumb');
267267
let slider = getByRole('slider');
@@ -283,7 +283,7 @@ describe('useColorWheel', () => {
283283
});
284284

285285
it('dragging the thumb respects the step', () => {
286-
let defaultColor = new Color('hsl(0, 100%, 50%)');
286+
let defaultColor = parseColor('hsl(0, 100%, 50%)');
287287
let {getByTestId} = render(<ColorWheel defaultValue={defaultColor} onChange={onChangeSpy} step={120} />);
288288
let thumb = getByTestId('thumb');
289289
let container = getByTestId('container');
@@ -299,7 +299,7 @@ describe('useColorWheel', () => {
299299
});
300300

301301
it('clicking and dragging on the track works', () => {
302-
let defaultColor = new Color('hsl(0, 100%, 50%)');
302+
let defaultColor = parseColor('hsl(0, 100%, 50%)');
303303
let {getByRole, getByTestId} = render(<ColorWheel defaultValue={defaultColor} onChange={onChangeSpy} />);
304304
let thumb = getByTestId('thumb');
305305
let slider = getByRole('slider');
@@ -323,7 +323,7 @@ describe('useColorWheel', () => {
323323
});
324324

325325
it('clicking and dragging on the track doesn\'t work when disabled', () => {
326-
let defaultColor = new Color('hsl(0, 100%, 50%)');
326+
let defaultColor = parseColor('hsl(0, 100%, 50%)');
327327
let {getByRole, getByTestId} = render(<ColorWheel defaultValue={defaultColor} onChange={onChangeSpy} isDisabled />);
328328
let slider = getByRole('slider');
329329
let container = getByTestId('container');
@@ -344,7 +344,7 @@ describe('useColorWheel', () => {
344344
});
345345

346346
it('clicking and dragging on the track respects the step', () => {
347-
let defaultColor = new Color('hsl(0, 100%, 50%)');
347+
let defaultColor = parseColor('hsl(0, 100%, 50%)');
348348
let {getByTestId} = render(<ColorWheel defaultValue={defaultColor} onChange={onChangeSpy} step={120} />);
349349
let thumb = getByTestId('thumb');
350350
let container = getByTestId('container');

‎packages/@react-aria/color/test/useHexColorField.test.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
* governing permissions and limitations under the License.
1111
*/
1212

13-
import {Color} from '@react-stately/color';
13+
import {parseColor} from '@react-stately/color';
1414
import React from 'react';
1515
import {renderHook} from '@testing-library/react-hooks';
1616
import {useHexColorField} from '../';
@@ -50,7 +50,7 @@ describe('useHexColorField', function () {
5050
});
5151

5252
it('should return props for colorValue provided', function () {
53-
let colorValue = new Color('#ff88a0');
53+
let colorValue = parseColor('#ff88a0');
5454
let {inputFieldProps} = renderHexColorFieldHook({}, {colorValue});
5555
expect(inputFieldProps['aria-valuenow']).toBe(colorValue.toHexInt());
5656
expect(inputFieldProps['aria-valuetext']).toBe('#FF88A0');
@@ -77,12 +77,12 @@ describe('useHexColorField', function () {
7777
let {inputFieldProps} = renderHexColorFieldHook({validationState: 'invalid'});
7878
expect(inputFieldProps['aria-invalid']).toBe(true);
7979
});
80-
80+
8181
it('should return prop for required', function () {
8282
let {inputFieldProps} = renderHexColorFieldHook({isRequired: true});
8383
expect(inputFieldProps['aria-required']).toBe(true);
8484
});
85-
85+
8686
it('should return prop for readonly', function () {
8787
let {inputFieldProps} = renderHexColorFieldHook({isReadOnly: true});
8888
expect(inputFieldProps['aria-readonly']).toBe(true);

‎packages/@react-spectrum/color/src/ColorThumb.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
*/
1212

1313
import {classNames} from '@react-spectrum/utils';
14-
import {Color} from '@react-stately/color';
14+
import {Color} from '@react-types/color';
1515
import {DOMProps} from '@react-types/shared';
1616
import React, {ReactElement} from 'react';
1717
import stylesHandle from '@adobe/spectrum-css-temp/components/colorhandle/vars.css';

‎packages/@react-spectrum/color/stories/ColorSlider.stories.tsx‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -10,54 +10,54 @@
1010
* governing permissions and limitations under the License.
1111
*/
1212

13-
import {Color} from '@react-stately/color';
1413
import {ColorSlider} from '../';
1514
import {Flex} from '@react-spectrum/layout';
15+
import {parseColor} from '@react-stately/color';
1616
import React, {useState} from 'react';
1717
import {storiesOf} from '@storybook/react';
1818
import {Text} from '@react-spectrum/text';
1919

2020
storiesOf('ColorSlider', module)
2121
.add(
2222
'default',
23-
() => <ColorSlider defaultValue={new Color('#7f0000')} channel={'red'} />
23+
() => <ColorSlider defaultValue="#7f0000" channel={'red'} />
2424
)
2525
.add(
2626
'no label',
27-
() => <ColorSlider defaultValue={new Color('#7f0000')} channel={'red'} label={null} />
27+
() => <ColorSlider defaultValue="#7f0000" channel={'red'} label={null} />
2828
)
2929
.add(
3030
'no value label',
31-
() => <ColorSlider defaultValue={new Color('#7f0000')} channel={'red'} showValueLabel={false} />
31+
() => <ColorSlider defaultValue="#7f0000" channel={'red'} showValueLabel={false} />
3232
)
3333
.add(
3434
'no label, no value label',
35-
() => <ColorSlider defaultValue={new Color('#7f0000')} channel={'red'} label={null} showValueLabel={false} />
35+
() => <ColorSlider defaultValue="#7f0000" channel={'red'} label={null} showValueLabel={false} />
3636
)
3737
.add(
3838
'step',
39-
() => <ColorSlider defaultValue={new Color('hsl(0, 100%, 50%)')} channel={'hue'} step={72} />
39+
() => <ColorSlider defaultValue="hsl(0, 100%, 50%)" channel={'hue'} step={72} />
4040
)
4141
.add(
4242
'disabled',
43-
() => <ColorSlider defaultValue={new Color('#333333')} channel={'red'} isDisabled />
43+
() => <ColorSlider defaultValue="#333333" channel={'red'} isDisabled />
4444
)
4545
.add(
4646
'vertical',
47-
() => <ColorSlider defaultValue={new Color('#ff0000')} channel={'red'} orientation="vertical" />
47+
() => <ColorSlider defaultValue="#ff0000" channel={'red'} orientation="vertical" />
4848
)
4949
.add(
5050
'controlled',
51-
() => <ColorSlider value={new Color('#ff0000')} channel={'red'} />
51+
() => <ColorSlider value="#ff0000" channel={'red'} />
5252
)
5353
.add(
5454
'custom width',
55-
() => <ColorSlider defaultValue={new Color('#7f0000')} channel={'red'} width={300} />
55+
() => <ColorSlider defaultValue="#7f0000" channel={'red'} width={300} />
5656
)
5757
.add(
5858
'rgba',
5959
() => {
60-
let [color, setColor] = useState(new Color('#ff00ff'));
60+
let [color, setColor] = useState(parseColor('#ff00ff'));
6161
return (<Flex gap="size-500" alignItems="center">
6262
<Flex direction="column">
6363
<ColorSlider value={color} onChange={setColor} channel={'red'} />
@@ -75,7 +75,7 @@ storiesOf('ColorSlider', module)
7575
.add(
7676
'hsla',
7777
() => {
78-
let [color, setColor] = useState(new Color('hsla(0, 100%, 50%, 0.5)'));
78+
let [color, setColor] = useState(parseColor('hsla(0, 100%, 50%, 0.5)'));
7979
return (<Flex gap="size-500" alignItems="center">
8080
<Flex direction="column">
8181
<ColorSlider value={color} onChange={setColor} channel={'hue'} />
@@ -92,7 +92,7 @@ storiesOf('ColorSlider', module)
9292
.add(
9393
'hsba',
9494
() => {
95-
let [color, setColor] = useState(new Color('hsba(0, 100%, 50%, 0.5)'));
95+
let [color, setColor] = useState(parseColor('hsba(0, 100%, 50%, 0.5)'));
9696
return (<Flex gap="size-500" alignItems="center">
9797
<Flex direction="column">
9898
<ColorSlider value={color} onChange={setColor} channel={'hue'} />

‎packages/@react-spectrum/color/stories/ColorThumb.stories.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -10,29 +10,29 @@
1010
* governing permissions and limitations under the License.
1111
*/
1212

13-
import {Color} from '@react-stately/color';
1413
import {ColorThumb} from '../src/ColorThumb';
14+
import {parseColor} from '@react-stately/color';
1515
import React from 'react';
1616
import {storiesOf} from '@storybook/react';
1717

1818
storiesOf('ColorThumb', module)
1919
.add(
2020
'default',
21-
() => <ColorThumb value={new Color('#f00')} />
21+
() => <ColorThumb value={parseColor('#f00')} />
2222
)
2323
.add(
2424
'focused',
25-
() => <ColorThumb value={new Color('#f00')} isFocused />
25+
() => <ColorThumb value={parseColor('#f00')} isFocused />
2626
)
2727
.add(
2828
'focused, dragging',
29-
() => <ColorThumb value={new Color('#f00')} isFocused isDragging />
29+
() => <ColorThumb value={parseColor('#f00')} isFocused isDragging />
3030
)
3131
.add(
3232
'focused, dragging, alpha',
33-
() => <ColorThumb value={new Color('hsla(0, 100%, 100%, 0)')} isFocused isDragging />
33+
() => <ColorThumb value={parseColor('hsla(0, 100%, 100%, 0)')} isFocused isDragging />
3434
)
3535
.add(
3636
'disabled',
37-
() => <ColorThumb value={new Color('#f00')} isDisabled />
37+
() => <ColorThumb value={parseColor('#f00')} isDisabled />
3838
);

‎packages/@react-spectrum/color/stories/ColorWheel.stories.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -11,24 +11,24 @@
1111
*/
1212

1313
import {action} from '@storybook/addon-actions';
14-
import {Color} from '@react-stately/color';
1514
import {ColorWheel} from '../';
1615
import {Flex} from '@adobe/react-spectrum';
16+
import {parseColor} from '@react-stately/color';
1717
import React, {useState} from 'react';
1818
import {storiesOf} from '@storybook/react';
1919

2020
storiesOf('ColorWheel', module)
2121
.add(
2222
'default',
23-
() => <ColorWheel defaultValue={new Color('hsl(0, 100%, 50%)')} onChange={action('change')} />
23+
() => <ColorWheel defaultValue="hsl(0, 100%, 50%)')" onChange={action('change')} />
2424
)
2525
.add(
2626
'disabled',
27-
() => <ColorWheel isDisabled defaultValue={new Color('hsl(0, 100%, 50%)')} />
27+
() => <ColorWheel isDisabled defaultValue="hsl(0, 100%, 50%)" />
2828
)
2929
.add(
3030
'step',
31-
() => <ColorWheel step={6} defaultValue={new Color('hsl(0, 100%, 50%)')} />
31+
() => <ColorWheel step={6} defaultValue="hsl(0, 100%, 50%)" />
3232
)
3333
.add(
3434
'custom size',
@@ -40,14 +40,14 @@ storiesOf('ColorWheel', module)
4040
<button onClick={() => setSize('size-5000')}>size-5000</button>
4141
<button onClick={() => setSize('50vh')}>50vh</button>
4242
</Flex>
43-
<ColorWheel defaultValue={new Color('hsl(0, 100%, 50%)')} size={size} />
43+
<ColorWheel defaultValue="hsl(0, 100%, 50%)" size={size} />
4444
</Flex>);
4545
}
4646
)
4747
.add(
4848
'controlled',
4949
() => {
50-
let [color, setColor] = useState(new Color('hsl(0, 100%, 50%)'));
50+
let [color, setColor] = useState(parseColor('hsl(0, 100%, 50%)'));
5151
let colorCSS = color.toString('css');
5252
return (<Flex gap={'size-500'} direction="row" alignItems="center">
5353
<ColorWheel onChange={setColor} value={color} />

‎packages/@react-spectrum/color/stories/HexColorField.stories.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212

1313
import {action} from '@storybook/addon-actions';
1414
import {ActionButton} from '@react-spectrum/button';
15-
import {Color} from '@react-stately/color';
15+
import {Color} from '@react-types/color';
1616
import {Dialog, DialogTrigger} from '@react-spectrum/dialog';
1717
import {Flex} from '@react-spectrum/layout';
1818
import {HexColorField} from '../';
@@ -61,7 +61,7 @@ storiesOf('HexColorField', module)
6161
'controlled value',
6262
() => (
6363
<ControlledHexColorField
64-
value={new Color('#FF00AA')}
64+
value="#FF00AA"
6565
onChange={action('change')} />
6666
)
6767
)
@@ -91,7 +91,7 @@ function HexColorFieldPopover(props: any = {}) {
9191
UNSAFE_style={{
9292
background: colorString
9393
}} >{colorString}</ActionButton>
94-
<Dialog
94+
<Dialog
9595
width="size-3600"
9696
height="size-1600" >
9797
<View padding="size-300">

0 commit comments

Comments
 (0)