Skip to content

Commit c428cf5

Browse files
devongovettdannify
devongovett
and
dannify
authored
Audit color picker APIs and start docs (#1559)
* Audit ColorWheel API and refactor to use conic-gradient * Init aria and stately docs for color picker components * Color slider audit * Init useColorSlider docs * Fix TS * HexColorField audit * Add getChannelRange to the Color interface * Cleanup * Mark more fields in state as readonly * Rename HexColorField to ColorField * Add descriptions for hooks * Remove empty features section * lint * Add back color wheel border and adjust thickness on scale changes * Merge trackProps and groupProps in useColorSlider * Move some of the positioning code for ColorSlider into aria to match ColorWheel Co-authored-by: Danni <[email protected]>
1 parent cca9be1 commit c428cf5

33 files changed

+1148
-498
lines changed

‎packages/@adobe/spectrum-css-temp/components/colorslider/index.css

Lines changed: 19 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -44,13 +44,32 @@
4444
display: block;
4545
width: 100%;
4646
height: var(--spectrum-colorslider-height);
47+
border-radius: var(--spectrum-colorslider-border-radius);
4748

4849
/* Otherwise we randomly drag a file icon */
4950
user-select: none;
5051
touch-action: none;
5152

5253
cursor: default;
5354

55+
/* The checkerboard is a separate element so that the gradient is overlaid on top. */
56+
&:before {
57+
content: "";
58+
z-index: -1;
59+
position: absolute;
60+
top: 0;
61+
left: 0;
62+
bottom: 0;
63+
right: 0;
64+
border-radius: var(--spectrum-colorslider-border-radius);
65+
background-size: var(--spectrum-global-dimension-static-size-200)
66+
var(--spectrum-global-dimension-static-size-200);
67+
background-position: 0 0, 0 var(--spectrum-global-dimension-static-size-100),
68+
var(--spectrum-global-dimension-static-size-100)
69+
calc(-1 * var(--spectrum-global-dimension-static-size-100)),
70+
calc(-1 * var(--spectrum-global-dimension-static-size-100)) 0;
71+
}
72+
5473
&.is-focused {
5574
z-index: 2;
5675

@@ -87,34 +106,6 @@
87106
}
88107
}
89108

90-
.spectrum-ColorSlider-checkerboard {
91-
background-size: var(--spectrum-global-dimension-static-size-200)
92-
var(--spectrum-global-dimension-static-size-200);
93-
background-position: 0 0, 0 var(--spectrum-global-dimension-static-size-100),
94-
var(--spectrum-global-dimension-static-size-100)
95-
calc(-1 * var(--spectrum-global-dimension-static-size-100)),
96-
calc(-1 * var(--spectrum-global-dimension-static-size-100)) 0;
97-
98-
/* the floating inset box shadow must be a separate element since <canvas> won't take it */
99-
&:before {
100-
content: "";
101-
z-index: 1;
102-
position: absolute;
103-
top: 0;
104-
left: 0;
105-
bottom: 0;
106-
right: 0;
107-
border-radius: var(--spectrum-colorslider-border-radius);
108-
}
109-
}
110-
111-
.spectrum-ColorSlider-gradient,
112-
.spectrum-ColorSlider-checkerboard {
113-
width: 100%;
114-
height: 100%;
115-
border-radius: var(--spectrum-colorslider-border-radius);
116-
}
117-
118109
.spectrum-ColorSlider-slider {
119110
@extend %spectrum-ColorControl-hiddenField;
120111
}

‎packages/@adobe/spectrum-css-temp/components/colorslider/skin.css

Lines changed: 13 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -3,35 +3,25 @@
33
--spectrum-colorslider-border-color: var(--spectrum-colorarea-border-color);
44
}
55

6-
.spectrum-ColorSlider-checkerboard {
6+
.spectrum-ColorSlider {
77
background-color: var(--spectrum-global-color-static-white);
8-
9-
/* Add a half-percent to fix diagonal line issue in Chrome on non-retina displays */
10-
background-image:
11-
linear-gradient(-45deg, transparent 75.5%, var(--spectrum-global-color-static-gray-500) 75.5%),
12-
linear-gradient(45deg, transparent 75.5%, var(--spectrum-global-color-static-gray-500) 75.5%),
13-
linear-gradient(-45deg, var(--spectrum-global-color-static-gray-500) 25.5%, transparent 25.5%),
14-
linear-gradient(45deg, var(--spectrum-global-color-static-gray-500) 25.5%, transparent 25.5%);
8+
box-shadow: inset 0 0 0 var(--spectrum-colorslider-border-size) var(--spectrum-colorslider-border-color);
159

1610
&:before {
17-
box-shadow: inset 0 0 0 var(--spectrum-colorslider-border-size) var(--spectrum-colorslider-border-color);
11+
/* Add a half-percent to fix diagonal line issue in Chrome on non-retina displays */
12+
background-image:
13+
linear-gradient(-45deg, transparent 75.5%, var(--spectrum-global-color-static-gray-500) 75.5%),
14+
linear-gradient(45deg, transparent 75.5%, var(--spectrum-global-color-static-gray-500) 75.5%),
15+
linear-gradient(-45deg, var(--spectrum-global-color-static-gray-500) 25.5%, transparent 25.5%),
16+
linear-gradient(45deg, var(--spectrum-global-color-static-gray-500) 25.5%, transparent 25.5%);
1817
}
19-
}
2018

21-
.spectrum-ColorSlider {
2219
&.is-disabled {
23-
.spectrum-ColorSlider-checkerboard {
24-
background: var(--spectrum-colorslider-fill-color-disabled);
25-
}
26-
27-
.spectrum-ColorSlider-checkerboard {
28-
&:before {
29-
box-shadow: 0 0 0 var(--spectrum-colorslider-border-size) var(--spectrum-colorslider-border-color-disabled);
30-
}
31-
}
20+
background: var(--spectrum-colorslider-fill-color-disabled) !important;
21+
box-shadow: inset 0 0 0 var(--spectrum-colorslider-border-size) var(--spectrum-colorslider-border-color-disabled);
22+
}
3223

33-
.spectrum-ColorSlider-gradient {
34-
display: none
35-
}
24+
.spectrum-ColorSlider-handle {
25+
margin: 0;
3626
}
3727
}

‎packages/@adobe/spectrum-css-temp/components/colorwheel/index.css

Lines changed: 26 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -32,13 +32,19 @@
3232
display: block;
3333
width: var(--spectrum-colorwheel-width);
3434
height: var(--spectrum-colorwheel-height);
35+
/* expose to JS */
36+
--spectrum-colorwheel-track-thickness: var(--spectrum-colorwheel-track-width);
3537

3638
border-radius: var(--spectrum-colorwheel-border-radius);
3739

3840
user-select: none;
3941
touch-action: none;
4042
cursor: default;
4143

44+
.spectrum-ColorWheel-handle {
45+
margin: 0;
46+
}
47+
4248
&.is-focused {
4349
z-index: 2;
4450

@@ -62,30 +68,31 @@
6268
z-index: 0;
6369
width: var(--spectrum-colorwheel-width);
6470
height: var(--spectrum-colorwheel-height);
65-
border-radius: 100%;
66-
box-sizing: border-box;
67-
68-
border-width: var(--spectrum-colorwheel-border-size);
69-
border-style: solid;
70-
}
7171

72-
.spectrum-ColorWheel-wheel {
73-
position: relative;
74-
z-index: 1;
75-
}
72+
&:before,
73+
&:after {
74+
content: "";
75+
position: absolute;
76+
border-radius: 100%;
77+
border-width: var(--spectrum-colorwheel-border-size);
78+
border-style: solid;
79+
}
7680

77-
.spectrum-ColorWheel-outerCircle,
78-
.spectrum-ColorWheel-innerCircle {
79-
fill: transparent;
81+
&:before {
82+
top: 0;
83+
left: 0;
84+
bottom: 0;
85+
right: 0;
86+
}
8087

81-
stroke-width: var(--spectrum-colorwheel-border-size);
88+
&:after {
89+
top: calc(var(--spectrum-colorwheel-track-width) - var(--spectrum-colorwheel-border-size));
90+
left: calc(var(--spectrum-colorwheel-track-width) - var(--spectrum-colorwheel-border-size));
91+
bottom: calc(var(--spectrum-colorwheel-track-width) - var(--spectrum-colorwheel-border-size));
92+
right: calc(var(--spectrum-colorwheel-track-width) - var(--spectrum-colorwheel-border-size));
93+
}
8294
}
8395

8496
.spectrum-ColorWheel-slider {
8597
@extend %spectrum-ColorControl-hiddenField;
8698
}
87-
88-
.spectrum-ColorWheel-handle {
89-
left: 50%;
90-
top: 50%;
91-
}

‎packages/@adobe/spectrum-css-temp/components/colorwheel/skin.css

Lines changed: 10 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,13 @@
55

66
.spectrum-ColorWheel {
77
&.is-disabled {
8-
.spectrum-ColorWheel-outerCircle,
9-
.spectrum-ColorWheel-innerCircle {
10-
stroke: var(--spectrum-colorwheel-border-color-disabled);
11-
}
8+
.spectrum-ColorWheel-gradient {
9+
background: var(--spectrum-colorwheel-fill-color-disabled) !important;
1210

13-
.spectrum-ColorWheel-outerCircle {
14-
fill: var(--spectrum-colorwheel-fill-color-disabled);
11+
&:before,
12+
&:after {
13+
border-color: var(--spectrum-colorwheel-border-color-disabled);
14+
}
1515
}
1616

1717
/* hide all the little colored bits */
@@ -22,10 +22,8 @@
2222
}
2323

2424
.spectrum-ColorWheel-gradient {
25-
border-color: var(--spectrum-colorwheel-border-color);
26-
}
27-
28-
.spectrum-ColorWheel-outerCircle,
29-
.spectrum-ColorWheel-innerCircle {
30-
stroke: var(--spectrum-colorwheel-border-color);
25+
&:before,
26+
&:after {
27+
border-color: var(--spectrum-colorwheel-border-color);
28+
}
3129
}

‎packages/@react-aria/color/docs/useColorField.mdx

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
<!-- Copyright 2020 Adobe. All rights reserved.
2+
This file is licensed to you under the Apache License, Version 2.0 (the "License");
3+
you may not use this file except in compliance with the License. You may obtain a copy
4+
of the License at http://www.apache.org/licenses/LICENSE-2.0
5+
Unless required by applicable law or agreed to in writing, software distributed under
6+
the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
7+
OF ANY KIND, either express or implied. See the License for the specific language
8+
governing permissions and limitations under the License. -->
9+
10+
import {Layout} from '@react-spectrum/docs';
11+
export default Layout;
12+
13+
import docs from 'docs:@react-aria/color';
14+
import statelyDocs from 'docs:@react-stately/color';
15+
import {HeaderInfo, FunctionAPI, TypeContext, InterfaceType, TypeLink} from '@react-spectrum/docs';
16+
import packageData from '@react-aria/color/package.json';
17+
18+
```jsx import
19+
import {useColorField} from '@react-aria/color';
20+
```
21+
22+
---
23+
category: Color
24+
keywords: [color, input, color picker, aria]
25+
---
26+
27+
# useColorField
28+
29+
<p>{docs.exports.useColorField.description}</p>
30+
31+
<HeaderInfo
32+
packageData={packageData}
33+
componentNames={['useColorField']}
34+
sourceData={[
35+
{type: 'W3C', url: 'https://www.w3.org/TR/wai-aria-practices-1.2/#spinbutton'}
36+
]} />
37+
38+
## API
39+
40+
<FunctionAPI function={docs.exports.useColorField} links={docs.links} />
41+
42+
## Example
43+
44+
```tsx example
45+
import {useColorFieldState} from '@react-stately/color';
46+
47+
function ColorField(props) {
48+
let state = useColorFieldState(props);
49+
let inputRef = React.useRef();
50+
let {
51+
labelProps,
52+
inputProps
53+
} = useColorField(props, state, inputRef);
54+
55+
return (
56+
<div style={{display: 'inline-flex', flexDirection: 'column'}}>
57+
<label {...labelProps}>{props.label}</label>
58+
<input {...inputProps} ref={inputRef} />
59+
</div>
60+
);
61+
}
62+
63+
<ColorField label="Color" />
64+
```

0 commit comments

Comments
 (0)