Skip to content

Commit 7e2624a

Browse files
TarunAdoberise-erpeldingcastastrophe
committed
fix(search): update disabled state in spectrum two (#3593)
Co-authored-by: rise-erpelding <[email protected]> Co-authored-by: [ Cassondra ] <[email protected]>
1 parent 3ec3b46 commit 7e2624a

File tree

21 files changed

+62
-41
lines changed

21 files changed

+62
-41
lines changed

‎.changeset/tall-pens-lay.md

-10
This file was deleted.

‎components/actionbutton/CHANGELOG.md

+10
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,15 @@
11
# Change log
22

3+
## 7.1.2
4+
5+
### Patch Changes
6+
7+
📝 [#3606](https://github.com/adobe/spectrum-css/pull/3606) [`3ec3b46`](https://github.com/adobe/spectrum-css/commit/3ec3b468313cbeb19298b35a2bd80860b83f4734) Thanks [@jawinn](https://github.com/jawinn)!
8+
9+
This updates the colors used in action button for the spectrum two theme, so they are closer aligned with the spectrum 2 spec, per the request in SWC-597. This removes the border by making it transparent and updates the background color tokens that are used.
10+
11+
This also includes a forced-colors/high contrast mode fix for the selected + disabled state. This now shows the disabled colors.
12+
313
## 7.1.1
414

515
### Patch Changes

‎components/actionbutton/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@spectrum-css/actionbutton",
3-
"version": "7.1.1",
3+
"version": "7.1.2",
44
"description": "The Spectrum CSS action button component",
55
"license": "Apache-2.0",
66
"author": "Adobe",

‎components/actiongroup/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@
3737
}
3838
},
3939
"devDependencies": {
40-
"@spectrum-css/actionbutton": "7.1.1",
40+
"@spectrum-css/actionbutton": "7.1.2",
4141
"@spectrum-css/tokens": "16.0.1"
4242
},
4343
"keywords": [

‎components/actionmenu/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@
3232
"@spectrum-css/tokens": ">=16.0.0 <17.0.0"
3333
},
3434
"devDependencies": {
35-
"@spectrum-css/actionbutton": "7.1.1",
35+
"@spectrum-css/actionbutton": "7.1.2",
3636
"@spectrum-css/icon": "9.1.0",
3737
"@spectrum-css/menu": "9.1.1",
3838
"@spectrum-css/popover": "8.2.0",

‎components/breadcrumb/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@
4141
}
4242
},
4343
"devDependencies": {
44-
"@spectrum-css/actionbutton": "7.1.1",
44+
"@spectrum-css/actionbutton": "7.1.2",
4545
"@spectrum-css/icon": "9.1.0",
4646
"@spectrum-css/tokens": "16.0.1"
4747
},

‎components/calendar/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@
3737
}
3838
},
3939
"devDependencies": {
40-
"@spectrum-css/actionbutton": "7.1.1",
40+
"@spectrum-css/actionbutton": "7.1.2",
4141
"@spectrum-css/tokens": "16.0.1"
4242
},
4343
"keywords": [

‎components/card/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@
5757
}
5858
},
5959
"devDependencies": {
60-
"@spectrum-css/actionbutton": "7.1.1",
60+
"@spectrum-css/actionbutton": "7.1.2",
6161
"@spectrum-css/asset": "7.1.0",
6262
"@spectrum-css/checkbox": "10.1.1",
6363
"@spectrum-css/icon": "9.1.0",

‎components/coachmark/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@
5757
}
5858
},
5959
"devDependencies": {
60-
"@spectrum-css/actionbutton": "7.1.1",
60+
"@spectrum-css/actionbutton": "7.1.2",
6161
"@spectrum-css/actionmenu": "7.1.1",
6262
"@spectrum-css/button": "14.1.2",
6363
"@spectrum-css/buttongroup": "9.1.0",

‎components/contextualhelp/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@
4545
}
4646
},
4747
"devDependencies": {
48-
"@spectrum-css/actionbutton": "7.1.1",
48+
"@spectrum-css/actionbutton": "7.1.2",
4949
"@spectrum-css/link": "7.1.0",
5050
"@spectrum-css/popover": "8.2.0",
5151
"@spectrum-css/tokens": "16.0.1"

‎components/dropzone/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@
4545
}
4646
},
4747
"devDependencies": {
48-
"@spectrum-css/actionbutton": "7.1.1",
48+
"@spectrum-css/actionbutton": "7.1.2",
4949
"@spectrum-css/illustratedmessage": "9.1.0",
5050
"@spectrum-css/link": "7.1.0",
5151
"@spectrum-css/tokens": "16.0.1"

‎components/pagination/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@
4949
}
5050
},
5151
"devDependencies": {
52-
"@spectrum-css/actionbutton": "7.1.1",
52+
"@spectrum-css/actionbutton": "7.1.2",
5353
"@spectrum-css/button": "14.1.2",
5454
"@spectrum-css/icon": "9.1.0",
5555
"@spectrum-css/textfield": "8.1.1",

‎components/search/CHANGELOG.md

+10
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,15 @@
11
# Change log
22

3+
## 8.1.1
4+
5+
### Patch Changes
6+
7+
📝 [#3593](https://github.com/adobe/spectrum-css/pull/3593) [`d829abb`](https://github.com/adobe/spectrum-css/commit/d829abb44f1eaa1874090e52caee553d776684e7) Thanks [@TarunAdobe](https://github.com/TarunAdobe)!
8+
9+
Updated `--spectrum-search-background-color-disabled` to `--spectrum-gray-25` and `--spectrum-search-border-color-disabled` to `--spectrum-gray-300` for the S2 foundations contexts.
10+
11+
Also defines disabled quiet border and background colors (`--system-search-quiet-background-color-disabled` and `--system-search-quiet-border-color-disabled`) in order to maintain disabled quiet styling.
12+
313
## 8.1.0
414

515
### Minor Changes

‎components/search/dist/metadata.json

+5-1
Original file line numberDiff line numberDiff line change
@@ -118,7 +118,6 @@
118118
"--spectrum-component-top-to-text-100",
119119
"--spectrum-corner-radius-100",
120120
"--spectrum-default-font-style",
121-
"--spectrum-disabled-background-color",
122121
"--spectrum-disabled-border-color",
123122
"--spectrum-disabled-content-color",
124123
"--spectrum-field-edge-to-visual-quiet",
@@ -127,6 +126,7 @@
127126
"--spectrum-focus-indicator-gap",
128127
"--spectrum-focus-indicator-thickness",
129128
"--spectrum-gray-25",
129+
"--spectrum-gray-300",
130130
"--spectrum-gray-500",
131131
"--spectrum-gray-600",
132132
"--spectrum-gray-800",
@@ -151,13 +151,17 @@
151151
],
152152
"system-theme": [
153153
"--system-search-background-color",
154+
"--system-search-background-color-disabled",
154155
"--system-search-border-color-default",
156+
"--system-search-border-color-disabled",
155157
"--system-search-border-color-focus",
156158
"--system-search-border-color-focus-hover",
157159
"--system-search-border-color-hover",
158160
"--system-search-border-color-key-focus",
159161
"--system-search-border-radius",
160162
"--system-search-edge-to-visual",
163+
"--system-search-quiet-background-color-disabled",
164+
"--system-search-quiet-border-color-disabled",
161165
"--system-search-size-l-border-radius",
162166
"--system-search-size-l-edge-to-visual",
163167
"--system-search-size-m-border-radius",

‎components/search/index.css

-2
Original file line numberDiff line numberDiff line change
@@ -48,8 +48,6 @@
4848

4949
/* Disabled */
5050
--spectrum-search-color-disabled: var(--spectrum-disabled-content-color);
51-
--spectrum-search-background-color-disabled: var(--spectrum-disabled-background-color);
52-
--spectrum-search-border-color-disabled: var(--spectrum-disabled-background-color);
5351

5452
/* @passthrough start -- settings for nested Textfield component */
5553
--mod-textfield-font-family: var(--mod-search-font-family, var(--spectrum-search-font-family));

‎components/search/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@spectrum-css/search",
3-
"version": "8.1.0",
3+
"version": "8.1.1",
44
"description": "The Spectrum CSS search component",
55
"license": "Apache-2.0",
66
"author": "Adobe",

‎components/search/themes/spectrum-two.css

+7
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,8 @@
2020
--spectrum-search-border-color-key-focus: var(--spectrum-gray-900);
2121

2222
--spectrum-search-background-color: var(--spectrum-gray-25);
23+
--spectrum-search-background-color-disabled: var(--spectrum-gray-25);
24+
--spectrum-search-border-color-disabled: var(--spectrum-gray-300);
2325

2426
&,
2527
&.spectrum-Search--sizeM {
@@ -42,4 +44,9 @@
4244
--spectrum-search-edge-to-visual: var(--spectrum-component-edge-to-visual-300);
4345
}
4446
}
47+
48+
.spectrum-Search--quiet {
49+
--spectrum-search-background-color-disabled: transparent;
50+
--spectrum-search-border-color-disabled: var(--spectrum-disabled-border-color);
51+
}
4552
}

‎components/search/themes/spectrum.css

+2
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,8 @@
1717

1818
@container style(--system: legacy) {
1919
.spectrum-Search {
20+
--spectrum-search-background-color-disabled: var(--spectrum-disabled-background-color);
21+
--spectrum-search-border-color-disabled: var(--spectrum-disabled-background-color);
2022
--spectrum-search-background-color: var(--spectrum-gray-50);
2123
}
2224
}

‎components/stepper/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@
4949
}
5050
},
5151
"devDependencies": {
52-
"@spectrum-css/actionbutton": "7.1.1",
52+
"@spectrum-css/actionbutton": "7.1.2",
5353
"@spectrum-css/icon": "9.1.0",
5454
"@spectrum-css/infieldbutton": "6.1.1",
5555
"@spectrum-css/textfield": "8.1.1",

‎tools/bundle/package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@
3232
"devDependencies": {
3333
"@spectrum-css/accordion": "7.1.0",
3434
"@spectrum-css/actionbar": "10.1.1",
35-
"@spectrum-css/actionbutton": "7.1.1",
35+
"@spectrum-css/actionbutton": "7.1.2",
3636
"@spectrum-css/actiongroup": "6.1.0",
3737
"@spectrum-css/actionmenu": "7.1.1",
3838
"@spectrum-css/alertbanner": "3.1.0",
@@ -91,7 +91,7 @@
9191
"@spectrum-css/progresscircle": "5.1.0",
9292
"@spectrum-css/radio": "10.1.0",
9393
"@spectrum-css/rating": "6.1.0",
94-
"@spectrum-css/search": "8.1.0",
94+
"@spectrum-css/search": "8.1.1",
9595
"@spectrum-css/sidenav": "7.1.0",
9696
"@spectrum-css/slider": "6.1.0",
9797
"@spectrum-css/splitview": "7.1.0",

‎yarn.lock

+14-14
Original file line numberDiff line numberDiff line change
@@ -3755,7 +3755,7 @@ __metadata:
37553755
languageName: unknown
37563756
linkType: soft
37573757

3758-
"@spectrum-css/actionbutton@npm:7.1.1, @spectrum-css/actionbutton@workspace:components/actionbutton":
3758+
"@spectrum-css/actionbutton@npm:7.1.2, @spectrum-css/actionbutton@workspace:components/actionbutton":
37593759
version: 0.0.0-use.local
37603760
resolution: "@spectrum-css/actionbutton@workspace:components/actionbutton"
37613761
dependencies:
@@ -3777,7 +3777,7 @@ __metadata:
37773777
version: 0.0.0-use.local
37783778
resolution: "@spectrum-css/actiongroup@workspace:components/actiongroup"
37793779
dependencies:
3780-
"@spectrum-css/actionbutton": "npm:7.1.1"
3780+
"@spectrum-css/actionbutton": "npm:7.1.2"
37813781
"@spectrum-css/tokens": "npm:16.0.1"
37823782
peerDependencies:
37833783
"@spectrum-css/actionbutton": ">=7.0.0 <8.0.0"
@@ -3794,7 +3794,7 @@ __metadata:
37943794
version: 0.0.0-use.local
37953795
resolution: "@spectrum-css/actionmenu@workspace:components/actionmenu"
37963796
dependencies:
3797-
"@spectrum-css/actionbutton": "npm:7.1.1"
3797+
"@spectrum-css/actionbutton": "npm:7.1.2"
37983798
"@spectrum-css/icon": "npm:9.1.0"
37993799
"@spectrum-css/menu": "npm:9.1.1"
38003800
"@spectrum-css/popover": "npm:8.2.0"
@@ -3966,7 +3966,7 @@ __metadata:
39663966
version: 0.0.0-use.local
39673967
resolution: "@spectrum-css/breadcrumb@workspace:components/breadcrumb"
39683968
dependencies:
3969-
"@spectrum-css/actionbutton": "npm:7.1.1"
3969+
"@spectrum-css/actionbutton": "npm:7.1.2"
39703970
"@spectrum-css/icon": "npm:9.1.0"
39713971
"@spectrum-css/tokens": "npm:16.0.1"
39723972
peerDependencies:
@@ -3989,7 +3989,7 @@ __metadata:
39893989
dependencies:
39903990
"@spectrum-css/accordion": "npm:7.1.0"
39913991
"@spectrum-css/actionbar": "npm:10.1.1"
3992-
"@spectrum-css/actionbutton": "npm:7.1.1"
3992+
"@spectrum-css/actionbutton": "npm:7.1.2"
39933993
"@spectrum-css/actiongroup": "npm:6.1.0"
39943994
"@spectrum-css/actionmenu": "npm:7.1.1"
39953995
"@spectrum-css/alertbanner": "npm:3.1.0"
@@ -4048,7 +4048,7 @@ __metadata:
40484048
"@spectrum-css/progresscircle": "npm:5.1.0"
40494049
"@spectrum-css/radio": "npm:10.1.0"
40504050
"@spectrum-css/rating": "npm:6.1.0"
4051-
"@spectrum-css/search": "npm:8.1.0"
4051+
"@spectrum-css/search": "npm:8.1.1"
40524052
"@spectrum-css/sidenav": "npm:7.1.0"
40534053
"@spectrum-css/slider": "npm:6.1.0"
40544054
"@spectrum-css/splitview": "npm:7.1.0"
@@ -4121,7 +4121,7 @@ __metadata:
41214121
version: 0.0.0-use.local
41224122
resolution: "@spectrum-css/calendar@workspace:components/calendar"
41234123
dependencies:
4124-
"@spectrum-css/actionbutton": "npm:7.1.1"
4124+
"@spectrum-css/actionbutton": "npm:7.1.2"
41254125
"@spectrum-css/tokens": "npm:16.0.1"
41264126
peerDependencies:
41274127
"@spectrum-css/actionbutton": ">=7.0.0 <8.0.0"
@@ -4138,7 +4138,7 @@ __metadata:
41384138
version: 0.0.0-use.local
41394139
resolution: "@spectrum-css/card@workspace:components/card"
41404140
dependencies:
4141-
"@spectrum-css/actionbutton": "npm:7.1.1"
4141+
"@spectrum-css/actionbutton": "npm:7.1.2"
41424142
"@spectrum-css/asset": "npm:7.1.0"
41434143
"@spectrum-css/checkbox": "npm:10.1.1"
41444144
"@spectrum-css/icon": "npm:9.1.0"
@@ -4239,7 +4239,7 @@ __metadata:
42394239
version: 0.0.0-use.local
42404240
resolution: "@spectrum-css/coachmark@workspace:components/coachmark"
42414241
dependencies:
4242-
"@spectrum-css/actionbutton": "npm:7.1.1"
4242+
"@spectrum-css/actionbutton": "npm:7.1.2"
42434243
"@spectrum-css/actionmenu": "npm:7.1.1"
42444244
"@spectrum-css/button": "npm:14.1.2"
42454245
"@spectrum-css/buttongroup": "npm:9.1.0"
@@ -4416,7 +4416,7 @@ __metadata:
44164416
version: 0.0.0-use.local
44174417
resolution: "@spectrum-css/contextualhelp@workspace:components/contextualhelp"
44184418
dependencies:
4419-
"@spectrum-css/actionbutton": "npm:7.1.1"
4419+
"@spectrum-css/actionbutton": "npm:7.1.2"
44204420
"@spectrum-css/link": "npm:7.1.0"
44214421
"@spectrum-css/popover": "npm:8.2.0"
44224422
"@spectrum-css/tokens": "npm:16.0.1"
@@ -4543,7 +4543,7 @@ __metadata:
45434543
version: 0.0.0-use.local
45444544
resolution: "@spectrum-css/dropzone@workspace:components/dropzone"
45454545
dependencies:
4546-
"@spectrum-css/actionbutton": "npm:7.1.1"
4546+
"@spectrum-css/actionbutton": "npm:7.1.2"
45474547
"@spectrum-css/illustratedmessage": "npm:9.1.0"
45484548
"@spectrum-css/link": "npm:7.1.0"
45494549
"@spectrum-css/tokens": "npm:16.0.1"
@@ -4874,7 +4874,7 @@ __metadata:
48744874
version: 0.0.0-use.local
48754875
resolution: "@spectrum-css/pagination@workspace:components/pagination"
48764876
dependencies:
4877-
"@spectrum-css/actionbutton": "npm:7.1.1"
4877+
"@spectrum-css/actionbutton": "npm:7.1.2"
48784878
"@spectrum-css/button": "npm:14.1.2"
48794879
"@spectrum-css/icon": "npm:9.1.0"
48804880
"@spectrum-css/textfield": "npm:8.1.1"
@@ -5096,7 +5096,7 @@ __metadata:
50965096
languageName: unknown
50975097
linkType: soft
50985098

5099-
"@spectrum-css/search@npm:8.1.0, @spectrum-css/search@workspace:components/search":
5099+
"@spectrum-css/search@npm:8.1.1, @spectrum-css/search@workspace:components/search":
51005100
version: 0.0.0-use.local
51015101
resolution: "@spectrum-css/search@workspace:components/search"
51025102
dependencies:
@@ -5206,7 +5206,7 @@ __metadata:
52065206
version: 0.0.0-use.local
52075207
resolution: "@spectrum-css/stepper@workspace:components/stepper"
52085208
dependencies:
5209-
"@spectrum-css/actionbutton": "npm:7.1.1"
5209+
"@spectrum-css/actionbutton": "npm:7.1.2"
52105210
"@spectrum-css/icon": "npm:9.1.0"
52115211
"@spectrum-css/infieldbutton": "npm:6.1.1"
52125212
"@spectrum-css/textfield": "npm:8.1.1"

0 commit comments

Comments
 (0)