Skip to content

Commit 4ae6f5f

Browse files
jnurthensnowystingerLFDanLuMichael Jordan
authored
Add WHCM support for all the form elements (#2830)
* fix: merged checkbox fixes from spectrum-css for WHCM * fix: WHCM for menu * fix: WHCM fixes for textfield * fix: WHCM for switch * fix: WHCM checkbox - more fixes * fix: WHCM radioGroup * fix: WHCM slider * fix: WHCM stepper * fix: merged checkbox fixes from spectrum-css for WHCM * fix: WHCM for menu * fix: WHCM fixes for textfield * fix: WHCM for switch * fix: WHCM checkbox - more fixes * fix: WHCM radioGroup * fix: WHCM slider * fix: WHCM stepper * Add calendar WHCM * Add InputGroup WHCM * Add Color Controls WHCM * fix linter * fix: Picker WHCM * fix: add WHCM checkbox story * fix: update WHCM combo/menu/picker * fix: add hover style for today * fix: remove comment from radio * fix: indents in inputgroup * fix: textfield border on hover in WHCM * fix: switch review comments WHCM * fix: stepper fixes from review comments * fix: inputgroup, picker, menu review comments * remove focus colour for colorhandle * add focus on cells within dateFields * fix placeholder for dropdown * add focus overrides for readonly & placeholder * fix: unavailable today date was invisible * fix slider down state * Fix quiet combobox * Add invalid colours * ColorArea should have forced-color-adjust: none In order to reproduce the overlapping gradients for a ColorArea, the container element .spectrum-ColorArea will have a background-image or background-color over which the .spectrum-ColorArea-gradient renders. * fix: combobox/picker/date/textfield hover/active style Co-authored-by: Robert Snow <[email protected]> Co-authored-by: Daniel Lu <[email protected]> Co-authored-by: Michael Jordan <[email protected]>
1 parent da520fc commit 4ae6f5f

File tree

21 files changed

+682
-11
lines changed

21 files changed

+682
-11
lines changed

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

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1337,6 +1337,8 @@ governing permissions and limitations under the License.
13371337
--spectrum-logicbutton-or-text-color: ButtonText;
13381338
--spectrum-button-primary-focus-ring-color-key-focus: CanvasText;
13391339
--spectrum-button-primary-focus-ring-size-key-focus: 3px;
1340+
--spectrum-dropdown-border-color-key-focus: Highlight;
1341+
13401342
}
13411343

13421344
.spectrum-Button--overBackground {
@@ -1371,4 +1373,16 @@ governing permissions and limitations under the License.
13711373
--spectrum-actionbutton-emphasized-icon-color-key-focus: HighlightText;
13721374
}
13731375
}
1376+
.spectrum-FieldButton {
1377+
&:focus-ring,
1378+
&.is-focused {
1379+
&:not(.spectrum-FieldButton--quiet) {
1380+
outline:2px solid Highlight;
1381+
}
1382+
&.spectrum-FieldButton--quiet {
1383+
forced-color-adjust: none;
1384+
box-shadow: 0 2px 0 0 var(--spectrum-dropdown-border-color-key-focus);
1385+
}
1386+
}
1387+
}
13741388
}

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

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -151,3 +151,58 @@ governing permissions and limitations under the License.
151151
}
152152
}
153153
}
154+
155+
@media (forced-colors: active) {
156+
.spectrum-Calendar-date {
157+
color: CanvasText;
158+
forced-color-adjust: none;
159+
--spectrum-calendar-button-icon-color: ButtonText;
160+
--spectrum-calendar-day-background-color-cap-selected: Highlight;
161+
--spectrum-calendar-day-background-color-cap-invalid-selected: Highlight;
162+
--spectrum-calendar-day-background-color-cap-invalid-selected-down: Highlight;
163+
--spectrum-calendar-day-background-color-cap-invalid-selected-hover: Highlight;
164+
--spectrum-calendar-day-background-color-cap-selected-down: Highlight;
165+
--spectrum-calendar-day-background-color-cap-selected-hover: Highlight;
166+
--spectrum-calendar-day-background-color-disabled: ButtonFace;
167+
--spectrum-calendar-day-background-color-down: ButtonFace;
168+
--spectrum-calendar-day-background-color-hover: ButtonFace;
169+
--spectrum-calendar-day-background-color-invalid-selected: Highlight;
170+
--spectrum-calendar-day-background-color-selected-hover: Highlight;
171+
--spectrum-calendar-day-background-color-selected: Highlight;
172+
--spectrum-calendar-day-border-color-key-focus: ButtonText;
173+
--spectrum-calendar-day-text-color-cap-selected: HighlightText;
174+
--spectrum-calendar-day-text-color-cap-selected-hover: HighlightText;
175+
--spectrum-calendar-day-text-color-disabled: GrayText;
176+
--spectrum-calendar-day-text-color-hover: ButtonText;
177+
--spectrum-calendar-day-text-color-selected-hover: HighlightText;
178+
--spectrum-calendar-day-title-text-color: CanvasText;
179+
--spectrum-calendar-day-today-background-color: ButtonText;
180+
--spectrum-calendar-day-today-background-color-down: ButtonText;
181+
--spectrum-calendar-day-today-background-color-hover: ButtonText;
182+
--spectrum-calendar-day-today-text-color: ButtonFace;
183+
&.is-range-selection {
184+
color: HighlightText;
185+
}
186+
&.is-disabled {
187+
&.is-range-selection {
188+
background: Highlight;
189+
color: HighlightText;
190+
}
191+
192+
&.is-selected {
193+
background: Highlight;
194+
color: HighlightText;
195+
}
196+
}
197+
&.is-unavailable {
198+
&.is-today {
199+
color: var(--spectrum-calendar-day-text-color-hover);
200+
}
201+
}
202+
&:hover {
203+
&.is-today {
204+
color: var(--spectrum-calendar-day-today-text-color);
205+
}
206+
}
207+
}
208+
}

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

Lines changed: 60 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
/*
1+
/*
22
Copyright 2019 Adobe. All rights reserved.
33
This file is licensed to you under the Apache License, Version 2.0 (the "License");
44
you may not use this file except in compliance with the License. You may obtain a copy
@@ -207,3 +207,62 @@ governing permissions and limitations under the License.
207207
}
208208
}
209209
}
210+
@media (forced-colors: active) {
211+
.spectrum-Checkbox {
212+
forced-color-adjust: none;
213+
--spectrum-checkbox-box-border-color: ButtonText;
214+
--spectrum-checkbox-box-border-color-error: Highlight;
215+
--spectrum-checkbox-box-border-color-error-down: Highlight;
216+
--spectrum-checkbox-box-border-color-error-hover: Highlight;
217+
--spectrum-checkbox-box-border-color-key-focus: Highlight;
218+
--spectrum-checkbox-checkmark-color: HighlightText;
219+
--spectrum-checkbox-emphasized-box-background-color: ButtonFace;
220+
--spectrum-checkbox-emphasized-box-background-color-disabled: ButtonFace;
221+
--spectrum-checkbox-emphasized-box-border-color: ButtonText;
222+
--spectrum-checkbox-emphasized-box-border-color-disabled: GrayText;
223+
--spectrum-checkbox-emphasized-box-border-color-down: Highlight;
224+
--spectrum-checkbox-emphasized-box-border-color-hover: Highlight;
225+
--spectrum-checkbox-emphasized-box-border-color-selected: Highlight;
226+
--spectrum-checkbox-emphasized-box-border-color-selected-down: Highlight;
227+
--spectrum-checkbox-emphasized-box-border-color-selected-hover: Highlight;
228+
--spectrum-checkbox-emphasized-box-border-color-selected-key-focus: Highlight;
229+
--spectrum-checkbox-emphasized-text-color: FieldText;
230+
--spectrum-checkbox-emphasized-text-color-down: FieldText;
231+
--spectrum-checkbox-emphasized-text-color-hover: FieldText;
232+
--spectrum-checkbox-emphasized-text-color-key-focus: FieldText;
233+
--spectrum-checkbox-focus-ring-color-key-focus: ButtonText;
234+
--spectrum-checkbox-quiet-box-border-color-selected: Highlight;
235+
--spectrum-checkbox-quiet-box-border-color-selected-down: Highlight;
236+
--spectrum-checkbox-quiet-box-border-color-selected-hover: Highlight;
237+
--spectrum-checkbox-text-color: FieldText;
238+
--spectrum-checkbox-text-color-disabled: GrayText;
239+
--spectrum-checkbox-text-color-error: FieldText;
240+
--spectrum-checkbox-text-color-error-down: FieldText;
241+
--spectrum-checkbox-text-color-error-hover: FieldText;
242+
243+
&.is-invalid {
244+
.spectrum-Checkbox-box {
245+
&:before {
246+
border-color: var(--spectrum-checkbox-box-border-color);
247+
}
248+
}
249+
&.is-indeterminate .spectrum-Checkbox-box {
250+
&:before {
251+
border-color: var(--spectrum-checkbox-box-border-color-error);
252+
}
253+
}
254+
&.is-disabled .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box {
255+
&:before {
256+
border-color: GrayText;
257+
}
258+
}
259+
/* Extra-specific selectors added here to handle checked state */
260+
.spectrum-Checkbox-input:checked + .spectrum-Checkbox-box
261+
{
262+
&:before {
263+
border-color: var(--spectrum-checkbox-box-border-color-error);
264+
}
265+
}
266+
}
267+
}
268+
}

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

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,28 +9,29 @@
99
.spectrum-ColorHandle-color {
1010
forced-color-adjust: none;
1111
}
12-
12+
1313
.spectrum-ColorArea {
1414
&.is-disabled {
1515
background: var(--spectrum-colorarea-fill-color-disabled);
16-
16+
1717
&:before {
1818
box-shadow: inset 0 0 0 var(--spectrum-colorarea-border-size) var(--spectrum-colorarea-border-color-disabled);
1919
}
20-
20+
2121
.spectrum-ColorArea-gradient {
2222
display: none;
2323
}
2424
}
2525
}
26-
26+
2727
@media (forced-colors: active) {
2828
.spectrum-ColorArea {
2929
--spectrum-colorarea-fill-color-disabled : GrayText;
3030
}
3131
.spectrum-ColorArea {
32+
forced-color-adjust: none;
3233
&.is-disabled {
3334
forced-color-adjust: none;
3435
}
3536
}
36-
}
37+
}

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

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,3 +34,13 @@
3434
.spectrum-ColorHandle-color {
3535
box-shadow: inset 0 0 0 var(--spectrum-colorhandle-outer-border-size) var(--spectrum-colorhandle-outer-border-color);
3636
}
37+
38+
@media (forced-colors: active) {
39+
.spectrum-ColorHandle {
40+
forced-color-adjust: none;
41+
--spectrum-colorhandle-inner-border-color-disabled: GrayText;
42+
--spectrum-colorhandle-fill-color-disabled: GrayText;
43+
--spectrum-colorhandle-inner-border-color: ButtonText;
44+
--spectrum-colorhandle-outer-border-color: ButtonFace;
45+
}
46+
}

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

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,3 +9,11 @@
99
.spectrum-ColorLoupe-inner-checker {
1010
fill: var(--spectrum-global-color-static-gray-500);
1111
}
12+
13+
@media (forced-colors: active) {
14+
.spectrum-ColorLoupe {
15+
forced-color-adjust: none;
16+
--spectrum-colorloupe-inner-border-color: ButtonText;
17+
--spectrum-colorloupe-outer-border-color: ButtonFace;
18+
}
19+
}

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

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,3 +25,13 @@
2525
margin: 0;
2626
}
2727
}
28+
29+
@media (forced-colors: active) {
30+
.spectrum-ColorSlider {
31+
forced-color-adjust: none;
32+
--spectrum-colorslider-fill-color-disabled: GrayText;
33+
--spectrum-colorslider-border-color-disabled: GrayText;
34+
--spectrum-colorslider-border-color: ButtonText;
35+
--spectrum-colorarea-border-color: ButtonText;
36+
}
37+
}

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

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,3 +27,13 @@
2727
border-color: var(--spectrum-colorwheel-border-color);
2828
}
2929
}
30+
31+
@media (forced-colors: active) {
32+
.spectrum-ColorWheel {
33+
forced-color-adjust: none;
34+
--spectrum-colorwheel-fill-color-disabled: GrayText;
35+
--spectrum-colorwheel-border-color-disabled: GrayText;
36+
--spectrum-colorwheel-border-color: ButtonText;
37+
--spectrum-colorarea-border-color: ButtonText;
38+
}
39+
}

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

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

1313
.spectrum-Dropdown {
14+
/* Override to gray-800 to meet WCAG */
15+
--spectrum-dropdown-placeholder-text-color: var(--spectrum-global-color-gray-800);
16+
1417
.spectrum-Dropdown-trigger:hover {
1518
.spectrum-Dropdown-chevron {
1619
color: var(--spectrum-dropdown-icon-color-hover);
@@ -62,8 +65,7 @@ governing permissions and limitations under the License.
6265

6366
.spectrum-Dropdown-label {
6467
&.is-placeholder {
65-
/* Override to gray-800 to meet WCAG */
66-
color: var(--spectrum-global-color-gray-800);
68+
color: var(--spectrum-dropdown-placeholder-text-color);
6769
}
6870
}
6971

@@ -85,3 +87,29 @@ governing permissions and limitations under the License.
8587
color: var(--spectrum-dropdown-icon-color-key-focus)
8688
}
8789
}
90+
91+
@media (forced-colors: active) {
92+
.spectrum-Dropdown {
93+
--spectrum-dropdown-icon-color: ButtonText;
94+
--spectrum-dropdown-icon-color-disabled: GrayText;
95+
--spectrum-dropdown-icon-color-hover: ButtonText;
96+
--spectrum-dropdown-icon-color-key-focus: ButtonText;
97+
--spectrum-dropdown-placeholder-text-color: GrayText;
98+
--spectrum-dropdown-placeholder-text-color-disabled: GrayText;
99+
--spectrum-dropdown-placeholder-text-color-down: GrayText;
100+
--spectrum-dropdown-placeholder-text-color-hover: GrayText;
101+
--spectrum-dropdown-placeholder-text-color-key-focus: GrayText;
102+
--spectrum-dropdown-placeholder-text-color-mouse-focus: GrayText;
103+
--spectrum-dropdown-text-color-disabled: GrayText;
104+
--spectrum-dropdown-validation-icon-color-error: ButtonText;
105+
}
106+
/*Override the label behaviour when NOT a placeholder*/
107+
.spectrum-Dropdown-trigger {
108+
&:hover .spectrum-Dropdown-label {
109+
color: ButtonText;
110+
&.is-placeholder {
111+
color: GrayText;
112+
}
113+
}
114+
}
115+
}

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

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -217,3 +217,81 @@ governing permissions and limitations under the License.
217217
}
218218
}
219219
}
220+
@media (forced-colors: active) {
221+
.spectrum-InputGroup {
222+
--spectrum-dropdown-border-color-error: Highlight;
223+
--spectrum-dropdown-border-color-key-focus: Highlight;
224+
--spectrum-textfield-border-color-error: Highlight;
225+
--spectrum-textfield-border-color-hover: Highlight;
226+
--spectrum-textfield-border-color-key-focus: Highlight;
227+
--spectrum-textfield-quiet-border-color: CanvasText;
228+
--spectrum-textfield-quiet-border-color-disabled: GrayText;
229+
--spectrum-textfield-quiet-border-color-hover: Highlight;
230+
--spectrum-textfield-quiet-border-color-key-focus: Highlight;
231+
--spectrum-textfield-text-color-disabled: GrayText;
232+
forced-color-adjust: none;
233+
.spectrum-InputGroup-input {
234+
forced-color-adjust: auto;
235+
}
236+
.spectrum-FieldButton {
237+
forced-color-adjust: auto;
238+
}
239+
240+
&.is-disabled:not(.spectrum-InputGroup--invalid):not(.spectrum-InputGroup--quiet) .spectrum-FieldButton {
241+
border-color: GrayText;
242+
border-width: 1px;
243+
}
244+
}
245+
246+
.spectrum-InputGroup--quiet {
247+
/*
248+
specifically for readonly inputgroups that aren't disabled since the button will have the disabled class
249+
but we don't want the border color to be the disabled quiet one
250+
*/
251+
&:not(.is-disabled) {
252+
.spectrum-FieldButton {
253+
&:disabled,
254+
&:disabled:hover {
255+
border-color: var(--spectrum-textfield-quiet-border-color);
256+
}
257+
}
258+
}
259+
&.is-disabled {
260+
.spectrum-FieldButton {
261+
border-color: GrayText;
262+
}
263+
}
264+
}
265+
.spectrum-InputGroup--invalid {
266+
.spectrum-FieldButton {
267+
border-color: Highlight;
268+
}
269+
&.is-disabled:not(.spectrum-InputGroup--quiet) .spectrum-InputGroup-input {
270+
border-color: GrayText;
271+
}
272+
&.is-disabled {
273+
&.spectrum-InputGroup--quiet .spectrum-InputGroup-input {
274+
border-color: GrayText;
275+
}
276+
&.spectrum-InputGroup--quiet .spectrum-FieldButton {
277+
border-color: GrayText;
278+
}
279+
}
280+
&.is-disabled:not(.spectrum-InputGroup--quiet) .spectrum-FieldButton {
281+
border-color: GrayText;
282+
}
283+
}
284+
285+
.spectrum-InputGroup {
286+
&:focus-ring
287+
{
288+
&:not(.spectrum-InputGroup--quiet) {
289+
outline:2px solid Highlight;
290+
}
291+
&.spectrum-InputGroup--quiet {
292+
box-shadow: 0 2px 0 0 var(--spectrum-dropdown-border-color-key-focus);
293+
}
294+
}
295+
}
296+
}
297+

0 commit comments

Comments
 (0)