Skip to content

Commit ebd6bc2

Browse files
snowystingermajornistaLFDanLuashlovell
authored
Color area (#2483)
* Initial ColorArea implementation * refactor aria back to stately * more refactoring * refactor step logic and defaults * tests and subsequent fixes from tests * Add uncontrolled to tests * Add size story * use snaptovalue and add page steps * remove dead code * rename variable to make more sense, fix description * Add isDisabled based on Spectrum designs * add min size * add prop description * Get back to no useMove changes * Combine the useMove frequently appears with useKeyboard (#2508) * Combine the useMove frequently appears with useKeyboard * fix merge mistake * Remove isPage from useMove, add modifier keys * continue propagation for keys we don't handle * have aria pass through the step size Co-authored-by: Rob Snow <[email protected]> * ColorArea: remove aria-roledescription on iOS/Android (#2547) * ColorArea: remove aria-roledescription on iOS/Android To better reflect behavior of slider inputs with mobile screen readers on iOS and Android, each input should be labeled by its individual channel name and we should remove aria-roledescription so the input is identified simply as a slider control. * ColorArea: change aria-valuetext for iOS/Android On iOS/Android, the aria-valuetext for each slider within the ColorArea control should just be the value for that channel, and need not include the value for the second channel. The value for all three channels is included as the title attribute. * ColorArea: include channel name in aria-valuetext for iOS/Android * Add formatting for color name and value based on locale * allow for differences in formatting strings * fix lint * @trivial remove extra whitespace/redundant afterEach * fix: tests * fix remaining issues before merges on main make it in * incorporate michaels a11y and locale fixes Co-authored-by: Michael Jordan <[email protected]> Co-authored-by: Daniel Lu <[email protected]> Co-authored-by: GitHub <[email protected]>
1 parent cae83ff commit ebd6bc2

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

55 files changed

+1939
-75
lines changed

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

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
.spectrum-ColorArea {
2+
position: relative;
3+
display: inline-block;
4+
inline-size: var(--spectrum-colorarea-default-width);
5+
block-size: var(--spectrum-colorarea-default-height);
6+
min-inline-size: var(--spectrum-colorarea-min-width);
7+
min-block-size: var(--spectrum-colorarea-min-height);
8+
9+
border-radius: var(--spectrum-colorarea-border-radius);
10+
11+
cursor: default;
12+
13+
user-select: none;
14+
15+
&.is-focused,
16+
&.focus-ring {
17+
z-index: 2;
18+
19+
.spectrum-ColorArea-handle {
20+
/* Bigger handle when focused */
21+
width: calc(var(--spectrum-colorhandle-size) * 2);
22+
height: calc(var(--spectrum-colorhandle-size) * 2);
23+
24+
margin-left: calc(-1 * var(--spectrum-colorhandle-size));
25+
margin-top: calc(-1 * var(--spectrum-colorhandle-size));
26+
}
27+
}
28+
29+
&:focus-within {
30+
z-index: 2;
31+
}
32+
33+
&.is-disabled {
34+
pointer-events: none;
35+
}
36+
37+
/* the floating inset box shadow must be a separate element since <canvas> won't take it */
38+
&:before {
39+
content: '';
40+
z-index: 1;
41+
position: absolute;
42+
top: 0;
43+
left: 0;
44+
bottom: 0;
45+
right: 0;
46+
border-radius: var(--spectrum-colorarea-border-radius);
47+
}
48+
}
49+
50+
.spectrum-ColorArea-handle {
51+
left: 0;
52+
top: 0;
53+
}
54+
55+
.spectrum-ColorArea-gradient {
56+
width: 100%;
57+
height: 100%;
58+
border-radius: var(--spectrum-colorarea-border-radius);
59+
}
60+
61+
.spectrum-ColorArea-slider {
62+
opacity: 0.0001;
63+
position: absolute;
64+
top: 0;
65+
left: 0;
66+
width: 100%;
67+
height: 100%;
68+
z-index: 0;
69+
margin: 0;
70+
pointer-events: none;
71+
}

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

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
.spectrum-ColorArea {
2+
&:before {
3+
box-shadow: inset 0 0 0 var(--spectrum-colorarea-border-size) var(--spectrum-colorarea-border-color);
4+
}
5+
}
6+
.spectrum-ColorArea-gradient {
7+
forced-color-adjust: none;
8+
}
9+
.spectrum-ColorHandle-color {
10+
forced-color-adjust: none;
11+
}
12+
13+
.spectrum-ColorArea {
14+
&.is-disabled {
15+
background: var(--spectrum-colorarea-fill-color-disabled);
16+
17+
&:before {
18+
box-shadow: inset 0 0 0 var(--spectrum-colorarea-border-size) var(--spectrum-colorarea-border-color-disabled);
19+
}
20+
21+
.spectrum-ColorArea-gradient {
22+
display: none;
23+
}
24+
}
25+
}
26+
27+
@media (forced-colors: active) {
28+
.spectrum-ColorArea {
29+
--spectrum-colorarea-fill-color-disabled : GrayText;
30+
}
31+
.spectrum-ColorArea {
32+
&.is-disabled {
33+
forced-color-adjust: none;
34+
}
35+
}
36+
}

‎packages/@adobe/spectrum-css-temp/components/colorarea/vars.css

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
/*
2+
* Copyright 2021 Adobe. All rights reserved.
3+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
4+
* you may not use this file except in compliance with the License. You may obtain a copy
5+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
6+
*
7+
* Unless required by applicable law or agreed to in writing, software distributed under
8+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
9+
* OF ANY KIND, either express or implied. See the License for the specific language
10+
* governing permissions and limitations under the License.
11+
*/
12+
13+
@import './index.css';
14+
@import './skin.css';

‎packages/@react-aria/color/intl/ar-AE.json

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"twoDimensionalSlider": "شريط تمرير ثنائي الأبعاد",
3+
"colorNameAndValue": "{name}: {value}",
4+
"x/y": "{x} / {y}"
5+
}

‎packages/@react-aria/color/intl/bg-BG.json

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"twoDimensionalSlider": "2D плъзгач",
3+
"colorNameAndValue": "{name}: {value}",
4+
"x/y": "{x} / {y}"
5+
}

‎packages/@react-aria/color/intl/cs-CZ.json

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"twoDimensionalSlider": "2D posuvník",
3+
"colorNameAndValue": "{name}: {value}",
4+
"x/y": "{x} / {y}"
5+
}

‎packages/@react-aria/color/intl/da-DK.json

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"twoDimensionalSlider": "2D-skyder",
3+
"colorNameAndValue": "{name}: {value}",
4+
"x/y": "{x} / {y}"
5+
}

‎packages/@react-aria/color/intl/de-DE.json

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"twoDimensionalSlider": "2D-Schieberegler",
3+
"colorNameAndValue": "{name}: {value}",
4+
"x/y": "{x} / {y}"
5+
}

‎packages/@react-aria/color/intl/el-GR.json

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"twoDimensionalSlider": "Ρυθμιστικό 2D",
3+
"colorNameAndValue": "{name}: {value}",
4+
"x/y": "{x} / {y}"
5+
}

‎packages/@react-aria/color/intl/en-US.json

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"twoDimensionalSlider": "2D slider",
3+
"colorNameAndValue": "{name}: {value}",
4+
"x/y": "{x} / {y}"
5+
}

‎packages/@react-aria/color/intl/es-ES.json

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"twoDimensionalSlider": "Control deslizante en 2D",
3+
"colorNameAndValue": "{name}: {value}",
4+
"x/y": "{x} / {y}"
5+
}

‎packages/@react-aria/color/intl/et-EE.json

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"twoDimensionalSlider": "2D-liugur",
3+
"colorNameAndValue": "{name}: {value}",
4+
"x/y": "{x} / {y}"
5+
}

‎packages/@react-aria/color/intl/fi-FI.json

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"twoDimensionalSlider": "2D-liukusäädin",
3+
"colorNameAndValue": "{name}: {value}",
4+
"x/y": "{x} / {y}"
5+
}

‎packages/@react-aria/color/intl/fr-FR.json

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"twoDimensionalSlider": "Curseur 2D",
3+
"colorNameAndValue": "{name}: {value}",
4+
"x/y": "{x} / {y}"
5+
}

‎packages/@react-aria/color/intl/he-IL.json

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"twoDimensionalSlider": "מחוון דו-ממדי",
3+
"colorNameAndValue": "{name}: {value}",
4+
"x/y": "{x} / {y}"
5+
}

‎packages/@react-aria/color/intl/hr-HR.json

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"twoDimensionalSlider": "2D kliznik",
3+
"colorNameAndValue": "{name}: {value}",
4+
"x/y": "{x} / {y}"
5+
}

‎packages/@react-aria/color/intl/hu-HU.json

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"twoDimensionalSlider": "2D csúszka",
3+
"colorNameAndValue": "{name}: {value}",
4+
"x/y": "{x} / {y}"
5+
}

‎packages/@react-aria/color/intl/it-IT.json

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"twoDimensionalSlider": "Dispositivo di scorrimento 2D",
3+
"colorNameAndValue": "{name}: {value}",
4+
"x/y": "{x} / {y}"
5+
}

‎packages/@react-aria/color/intl/ja-JP.json

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"twoDimensionalSlider": "2D スライダー",
3+
"colorNameAndValue": "{name}: {value}",
4+
"x/y": "{x} / {y}"
5+
}

‎packages/@react-aria/color/intl/ko-KR.json

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"twoDimensionalSlider": "2D 슬라이더",
3+
"colorNameAndValue": "{name}: {value}",
4+
"x/y": "{x} / {y}"
5+
}

‎packages/@react-aria/color/intl/lt-LT.json

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"twoDimensionalSlider": "2D slankiklis",
3+
"colorNameAndValue": "{name}: {value}",
4+
"x/y": "{x} / {y}"
5+
}

‎packages/@react-aria/color/intl/lv-LV.json

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"twoDimensionalSlider": "Plaknes slīdnis",
3+
"colorNameAndValue": "{name}: {value}",
4+
"x/y": "{x} / {y}"
5+
}

‎packages/@react-aria/color/intl/nb-NO.json

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"twoDimensionalSlider": "2D-glidebryter",
3+
"colorNameAndValue": "{name}: {value}",
4+
"x/y": "{x} / {y}"
5+
}

‎packages/@react-aria/color/intl/nl-NL.json

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"twoDimensionalSlider": "2D-schuifregelaar",
3+
"colorNameAndValue": "{name}: {value}",
4+
"x/y": "{x} / {y}"
5+
}

‎packages/@react-aria/color/intl/pl-PL.json

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"twoDimensionalSlider": "Suwak 2D",
3+
"colorNameAndValue": "{name}: {value}",
4+
"x/y": "{x} / {y}"
5+
}

‎packages/@react-aria/color/intl/pt-BR.json

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"twoDimensionalSlider": "Controle deslizante 2D",
3+
"colorNameAndValue": "{name}: {value}",
4+
"x/y": "{x} / {y}"
5+
}

‎packages/@react-aria/color/intl/pt-PT.json

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"twoDimensionalSlider": "Controlo de deslize 2D",
3+
"colorNameAndValue": "{name}: {value}",
4+
"x/y": "{x} / {y}"
5+
}

‎packages/@react-aria/color/intl/ro-RO.json

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"twoDimensionalSlider": "Cursor 2D",
3+
"colorNameAndValue": "{name}: {value}",
4+
"x/y": "{x} / {y}"
5+
}

‎packages/@react-aria/color/intl/ru-RU.json

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"twoDimensionalSlider": "Двумерный ползунок",
3+
"colorNameAndValue": "{name}: {value}",
4+
"x/y": "{x} / {y}"
5+
}

‎packages/@react-aria/color/intl/sk-SK.json

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"twoDimensionalSlider": "2D jazdec",
3+
"colorNameAndValue": "{name}: {value}",
4+
"x/y": "{x} / {y}"
5+
}

‎packages/@react-aria/color/intl/sl-SI.json

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"twoDimensionalSlider": "2D-drsnik",
3+
"colorNameAndValue": "{name}: {value}",
4+
"x/y": "{x} / {y}"
5+
}

‎packages/@react-aria/color/intl/sr-SP.json

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"twoDimensionalSlider": "2D клизач",
3+
"colorNameAndValue": "{name}: {value}",
4+
"x/y": "{x} / {y}"
5+
}

‎packages/@react-aria/color/intl/sv-SE.json

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"twoDimensionalSlider": "2D-reglage",
3+
"colorNameAndValue": "{name}: {value}",
4+
"x/y": "{x} / {y}"
5+
}

‎packages/@react-aria/color/intl/tr-TR.json

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"twoDimensionalSlider": "2B slayt gösterisi",
3+
"colorNameAndValue": "{name}: {value}",
4+
"x/y": "{x} / {y}"
5+
}

‎packages/@react-aria/color/intl/uk-UA.json

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"twoDimensionalSlider": "Повзунок 2D",
3+
"colorNameAndValue": "{name}: {value}",
4+
"x/y": "{x} / {y}"
5+
}

‎packages/@react-aria/color/intl/zh-CN.json

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"twoDimensionalSlider": "2D 滑块",
3+
"colorNameAndValue": "{name}: {value}",
4+
"x/y": "{x} / {y}"
5+
}

‎packages/@react-aria/color/intl/zh-TW.json

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"twoDimensionalSlider": "2D 滑桿",
3+
"colorNameAndValue": "{name}: {value}",
4+
"x/y": "{x} / {y}"
5+
}

‎packages/@react-aria/color/package.json

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -18,16 +18,18 @@
1818
},
1919
"dependencies": {
2020
"@babel/runtime": "^7.6.2",
21-
"@react-aria/spinbutton": "^3.0.3",
22-
"@react-aria/textfield": "^3.5.2",
23-
"@react-aria/i18n": "^3.3.6",
24-
"@react-aria/interactions": "^3.8.1",
25-
"@react-aria/slider": "^3.0.5",
26-
"@react-aria/utils": "^3.11.2",
21+
"@internationalized/message": "^3.0.2",
22+
"@react-aria/i18n": "^3.3.3",
23+
"@react-aria/interactions": "^3.7.0",
24+
"@react-aria/slider": "^3.0.3",
25+
"@react-aria/spinbutton": "^3.0.1",
26+
"@react-aria/textfield": "^3.5.0",
27+
"@react-aria/utils": "^3.11.0",
28+
"@react-aria/visually-hidden": "^3.2.3",
2729
"@react-stately/color": "3.0.0-beta.7",
2830
"@react-types/color": "3.0.0-beta.5",
29-
"@react-types/shared": "^3.11.1",
30-
"@react-types/slider": "^3.0.4"
31+
"@react-types/shared": "^3.10.1",
32+
"@react-types/slider": "^3.0.2"
3133
},
3234
"peerDependencies": {
3335
"react": "^16.8.0 || ^17.0.0-rc.1",

‎packages/@react-aria/color/src/index.ts

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

13+
export * from './useColorArea';
1314
export * from './useColorSlider';
1415
export * from './useColorWheel';
1516
export * from './useColorField';

0 commit comments

Comments
 (0)