fix(search): update disabled state in spectrum two (#3593)

TarunAdobe · rise-erpelding · castastrophe · castastrophe · commit 7e2624a49b38 · 2025-03-12T16:11:29.000-04:00
Co-authored-by: rise-erpelding &lt;54716846+rise-erpelding@users.noreply.github.com&gt;
Co-authored-by: [ Cassondra ] &lt;castastrophe@users.noreply.github.com&gt;
diff --git a/.changeset/tall-pens-lay.md b/.changeset/tall-pens-lay.md
diff --git a/components/actionbutton/CHANGELOG.md b/components/actionbutton/CHANGELOG.md
@@ -1,5 +1,15 @@
 # Change log
 
+## 7.1.2
+
+### Patch Changes
+
+📝 [#3606](https://github.com/adobe/spectrum-css/pull/3606) [`3ec3b46`](https://github.com/adobe/spectrum-css/commit/3ec3b468313cbeb19298b35a2bd80860b83f4734) Thanks [@jawinn](https://github.com/jawinn)!
+
+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.
+
+This also includes a forced-colors/high contrast mode fix for the selected + disabled state. This now shows the disabled colors.
+
 ## 7.1.1
 
 ### Patch Changes
diff --git a/components/actionbutton/package.json b/components/actionbutton/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@spectrum-css/actionbutton",
-	"version": "7.1.1",
+	"version": "7.1.2",
 	"description": "The Spectrum CSS action button component",
 	"license": "Apache-2.0",
 	"author": "Adobe",
diff --git a/components/actiongroup/package.json b/components/actiongroup/package.json
@@ -37,7 +37,7 @@
 		}
 	},
 	"devDependencies": {
-		"@spectrum-css/actionbutton": "7.1.1",
+		"@spectrum-css/actionbutton": "7.1.2",
 		"@spectrum-css/tokens": "16.0.1"
 	},
 	"keywords": [
diff --git a/components/actionmenu/package.json b/components/actionmenu/package.json
@@ -32,7 +32,7 @@
 		"@spectrum-css/tokens": ">=16.0.0 <17.0.0"
 	},
 	"devDependencies": {
-		"@spectrum-css/actionbutton": "7.1.1",
+		"@spectrum-css/actionbutton": "7.1.2",
 		"@spectrum-css/icon": "9.1.0",
 		"@spectrum-css/menu": "9.1.1",
 		"@spectrum-css/popover": "8.2.0",
diff --git a/components/breadcrumb/package.json b/components/breadcrumb/package.json
@@ -41,7 +41,7 @@
 		}
 	},
 	"devDependencies": {
-		"@spectrum-css/actionbutton": "7.1.1",
+		"@spectrum-css/actionbutton": "7.1.2",
 		"@spectrum-css/icon": "9.1.0",
 		"@spectrum-css/tokens": "16.0.1"
 	},
diff --git a/components/calendar/package.json b/components/calendar/package.json
@@ -37,7 +37,7 @@
 		}
 	},
 	"devDependencies": {
-		"@spectrum-css/actionbutton": "7.1.1",
+		"@spectrum-css/actionbutton": "7.1.2",
 		"@spectrum-css/tokens": "16.0.1"
 	},
 	"keywords": [
diff --git a/components/card/package.json b/components/card/package.json
@@ -57,7 +57,7 @@
 		}
 	},
 	"devDependencies": {
-		"@spectrum-css/actionbutton": "7.1.1",
+		"@spectrum-css/actionbutton": "7.1.2",
 		"@spectrum-css/asset": "7.1.0",
 		"@spectrum-css/checkbox": "10.1.1",
 		"@spectrum-css/icon": "9.1.0",
diff --git a/components/coachmark/package.json b/components/coachmark/package.json
@@ -57,7 +57,7 @@
 		}
 	},
 	"devDependencies": {
-		"@spectrum-css/actionbutton": "7.1.1",
+		"@spectrum-css/actionbutton": "7.1.2",
 		"@spectrum-css/actionmenu": "7.1.1",
 		"@spectrum-css/button": "14.1.2",
 		"@spectrum-css/buttongroup": "9.1.0",
diff --git a/components/contextualhelp/package.json b/components/contextualhelp/package.json
@@ -45,7 +45,7 @@
 		}
 	},
 	"devDependencies": {
-		"@spectrum-css/actionbutton": "7.1.1",
+		"@spectrum-css/actionbutton": "7.1.2",
 		"@spectrum-css/link": "7.1.0",
 		"@spectrum-css/popover": "8.2.0",
 		"@spectrum-css/tokens": "16.0.1"
diff --git a/components/dropzone/package.json b/components/dropzone/package.json
@@ -45,7 +45,7 @@
 		}
 	},
 	"devDependencies": {
-		"@spectrum-css/actionbutton": "7.1.1",
+		"@spectrum-css/actionbutton": "7.1.2",
 		"@spectrum-css/illustratedmessage": "9.1.0",
 		"@spectrum-css/link": "7.1.0",
 		"@spectrum-css/tokens": "16.0.1"
diff --git a/components/pagination/package.json b/components/pagination/package.json
@@ -49,7 +49,7 @@
 		}
 	},
 	"devDependencies": {
-		"@spectrum-css/actionbutton": "7.1.1",
+		"@spectrum-css/actionbutton": "7.1.2",
 		"@spectrum-css/button": "14.1.2",
 		"@spectrum-css/icon": "9.1.0",
 		"@spectrum-css/textfield": "8.1.1",
diff --git a/components/search/CHANGELOG.md b/components/search/CHANGELOG.md
@@ -1,5 +1,15 @@
 # Change log
 
+## 8.1.1
+
+### Patch Changes
+
+📝 [#3593](https://github.com/adobe/spectrum-css/pull/3593) [`d829abb`](https://github.com/adobe/spectrum-css/commit/d829abb44f1eaa1874090e52caee553d776684e7) Thanks [@TarunAdobe](https://github.com/TarunAdobe)!
+
+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.
+
+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.
+
 ## 8.1.0
 
 ### Minor Changes
diff --git a/components/search/dist/metadata.json b/components/search/dist/metadata.json
@@ -118,7 +118,6 @@
     "--spectrum-component-top-to-text-100",
     "--spectrum-corner-radius-100",
     "--spectrum-default-font-style",
-    "--spectrum-disabled-background-color",
     "--spectrum-disabled-border-color",
     "--spectrum-disabled-content-color",
     "--spectrum-field-edge-to-visual-quiet",
@@ -127,6 +126,7 @@
     "--spectrum-focus-indicator-gap",
     "--spectrum-focus-indicator-thickness",
     "--spectrum-gray-25",
+    "--spectrum-gray-300",
     "--spectrum-gray-500",
     "--spectrum-gray-600",
     "--spectrum-gray-800",
@@ -151,13 +151,17 @@
   ],
   "system-theme": [
     "--system-search-background-color",
+    "--system-search-background-color-disabled",
     "--system-search-border-color-default",
+    "--system-search-border-color-disabled",
     "--system-search-border-color-focus",
     "--system-search-border-color-focus-hover",
     "--system-search-border-color-hover",
     "--system-search-border-color-key-focus",
     "--system-search-border-radius",
     "--system-search-edge-to-visual",
+    "--system-search-quiet-background-color-disabled",
+    "--system-search-quiet-border-color-disabled",
     "--system-search-size-l-border-radius",
     "--system-search-size-l-edge-to-visual",
     "--system-search-size-m-border-radius",
diff --git a/components/search/index.css b/components/search/index.css
@@ -48,8 +48,6 @@
 
 	/* Disabled */
 	--spectrum-search-color-disabled: var(--spectrum-disabled-content-color);
-	--spectrum-search-background-color-disabled: var(--spectrum-disabled-background-color);
-	--spectrum-search-border-color-disabled: var(--spectrum-disabled-background-color);
 
 	/* @passthrough start -- settings for nested Textfield component */
 	--mod-textfield-font-family: var(--mod-search-font-family, var(--spectrum-search-font-family));
diff --git a/components/search/package.json b/components/search/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@spectrum-css/search",
-	"version": "8.1.0",
+	"version": "8.1.1",
 	"description": "The Spectrum CSS search component",
 	"license": "Apache-2.0",
 	"author": "Adobe",
diff --git a/components/search/themes/spectrum-two.css b/components/search/themes/spectrum-two.css
@@ -20,6 +20,8 @@
 		--spectrum-search-border-color-key-focus: var(--spectrum-gray-900);
 
 		--spectrum-search-background-color: var(--spectrum-gray-25);
+		--spectrum-search-background-color-disabled: var(--spectrum-gray-25);
+		--spectrum-search-border-color-disabled: var(--spectrum-gray-300);
 
 		&,
 		&.spectrum-Search--sizeM {
@@ -42,4 +44,9 @@
 			--spectrum-search-edge-to-visual: var(--spectrum-component-edge-to-visual-300);
 		}
 	}
+
+	.spectrum-Search--quiet {
+		--spectrum-search-background-color-disabled: transparent;
+		--spectrum-search-border-color-disabled: var(--spectrum-disabled-border-color);
+	}
 }
diff --git a/components/search/themes/spectrum.css b/components/search/themes/spectrum.css
@@ -17,6 +17,8 @@
 
 @container style(--system: legacy) {
 	.spectrum-Search {
+		--spectrum-search-background-color-disabled: var(--spectrum-disabled-background-color);
+		--spectrum-search-border-color-disabled: var(--spectrum-disabled-background-color);
 		--spectrum-search-background-color: var(--spectrum-gray-50);
 	}
 }
diff --git a/components/stepper/package.json b/components/stepper/package.json
@@ -49,7 +49,7 @@
 		}
 	},
 	"devDependencies": {
-		"@spectrum-css/actionbutton": "7.1.1",
+		"@spectrum-css/actionbutton": "7.1.2",
 		"@spectrum-css/icon": "9.1.0",
 		"@spectrum-css/infieldbutton": "6.1.1",
 		"@spectrum-css/textfield": "8.1.1",
diff --git a/tools/bundle/package.json b/tools/bundle/package.json
@@ -32,7 +32,7 @@
 	"devDependencies": {
 		"@spectrum-css/accordion": "7.1.0",
 		"@spectrum-css/actionbar": "10.1.1",
-		"@spectrum-css/actionbutton": "7.1.1",
+		"@spectrum-css/actionbutton": "7.1.2",
 		"@spectrum-css/actiongroup": "6.1.0",
 		"@spectrum-css/actionmenu": "7.1.1",
 		"@spectrum-css/alertbanner": "3.1.0",
@@ -91,7 +91,7 @@
 		"@spectrum-css/progresscircle": "5.1.0",
 		"@spectrum-css/radio": "10.1.0",
 		"@spectrum-css/rating": "6.1.0",
-		"@spectrum-css/search": "8.1.0",
+		"@spectrum-css/search": "8.1.1",
 		"@spectrum-css/sidenav": "7.1.0",
 		"@spectrum-css/slider": "6.1.0",
 		"@spectrum-css/splitview": "7.1.0",
diff --git a/yarn.lock b/yarn.lock
@@ -3755,7 +3755,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@spectrum-css/actionbutton@npm:7.1.1, @spectrum-css/actionbutton@workspace:components/actionbutton":
+"@spectrum-css/actionbutton@npm:7.1.2, @spectrum-css/actionbutton@workspace:components/actionbutton":
   version: 0.0.0-use.local
   resolution: "@spectrum-css/actionbutton@workspace:components/actionbutton"
   dependencies:
@@ -3777,7 +3777,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@spectrum-css/actiongroup@workspace:components/actiongroup"
   dependencies:
-    "@spectrum-css/actionbutton": "npm:7.1.1"
+    "@spectrum-css/actionbutton": "npm:7.1.2"
     "@spectrum-css/tokens": "npm:16.0.1"
   peerDependencies:
     "@spectrum-css/actionbutton": ">=7.0.0 <8.0.0"
@@ -3794,7 +3794,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@spectrum-css/actionmenu@workspace:components/actionmenu"
   dependencies:
-    "@spectrum-css/actionbutton": "npm:7.1.1"
+    "@spectrum-css/actionbutton": "npm:7.1.2"
     "@spectrum-css/icon": "npm:9.1.0"
     "@spectrum-css/menu": "npm:9.1.1"
     "@spectrum-css/popover": "npm:8.2.0"
@@ -3966,7 +3966,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@spectrum-css/breadcrumb@workspace:components/breadcrumb"
   dependencies:
-    "@spectrum-css/actionbutton": "npm:7.1.1"
+    "@spectrum-css/actionbutton": "npm:7.1.2"
     "@spectrum-css/icon": "npm:9.1.0"
     "@spectrum-css/tokens": "npm:16.0.1"
   peerDependencies:
@@ -3989,7 +3989,7 @@ __metadata:
   dependencies:
     "@spectrum-css/accordion": "npm:7.1.0"
     "@spectrum-css/actionbar": "npm:10.1.1"
-    "@spectrum-css/actionbutton": "npm:7.1.1"
+    "@spectrum-css/actionbutton": "npm:7.1.2"
     "@spectrum-css/actiongroup": "npm:6.1.0"
     "@spectrum-css/actionmenu": "npm:7.1.1"
     "@spectrum-css/alertbanner": "npm:3.1.0"
@@ -4048,7 +4048,7 @@ __metadata:
     "@spectrum-css/progresscircle": "npm:5.1.0"
     "@spectrum-css/radio": "npm:10.1.0"
     "@spectrum-css/rating": "npm:6.1.0"
-    "@spectrum-css/search": "npm:8.1.0"
+    "@spectrum-css/search": "npm:8.1.1"
     "@spectrum-css/sidenav": "npm:7.1.0"
     "@spectrum-css/slider": "npm:6.1.0"
     "@spectrum-css/splitview": "npm:7.1.0"
@@ -4121,7 +4121,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@spectrum-css/calendar@workspace:components/calendar"
   dependencies:
-    "@spectrum-css/actionbutton": "npm:7.1.1"
+    "@spectrum-css/actionbutton": "npm:7.1.2"
     "@spectrum-css/tokens": "npm:16.0.1"
   peerDependencies:
     "@spectrum-css/actionbutton": ">=7.0.0 <8.0.0"
@@ -4138,7 +4138,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@spectrum-css/card@workspace:components/card"
   dependencies:
-    "@spectrum-css/actionbutton": "npm:7.1.1"
+    "@spectrum-css/actionbutton": "npm:7.1.2"
     "@spectrum-css/asset": "npm:7.1.0"
     "@spectrum-css/checkbox": "npm:10.1.1"
     "@spectrum-css/icon": "npm:9.1.0"
@@ -4239,7 +4239,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@spectrum-css/coachmark@workspace:components/coachmark"
   dependencies:
-    "@spectrum-css/actionbutton": "npm:7.1.1"
+    "@spectrum-css/actionbutton": "npm:7.1.2"
     "@spectrum-css/actionmenu": "npm:7.1.1"
     "@spectrum-css/button": "npm:14.1.2"
     "@spectrum-css/buttongroup": "npm:9.1.0"
@@ -4416,7 +4416,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@spectrum-css/contextualhelp@workspace:components/contextualhelp"
   dependencies:
-    "@spectrum-css/actionbutton": "npm:7.1.1"
+    "@spectrum-css/actionbutton": "npm:7.1.2"
     "@spectrum-css/link": "npm:7.1.0"
     "@spectrum-css/popover": "npm:8.2.0"
     "@spectrum-css/tokens": "npm:16.0.1"
@@ -4543,7 +4543,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@spectrum-css/dropzone@workspace:components/dropzone"
   dependencies:
-    "@spectrum-css/actionbutton": "npm:7.1.1"
+    "@spectrum-css/actionbutton": "npm:7.1.2"
     "@spectrum-css/illustratedmessage": "npm:9.1.0"
     "@spectrum-css/link": "npm:7.1.0"
     "@spectrum-css/tokens": "npm:16.0.1"
@@ -4874,7 +4874,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@spectrum-css/pagination@workspace:components/pagination"
   dependencies:
-    "@spectrum-css/actionbutton": "npm:7.1.1"
+    "@spectrum-css/actionbutton": "npm:7.1.2"
     "@spectrum-css/button": "npm:14.1.2"
     "@spectrum-css/icon": "npm:9.1.0"
     "@spectrum-css/textfield": "npm:8.1.1"
@@ -5096,7 +5096,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@spectrum-css/search@npm:8.1.0, @spectrum-css/search@workspace:components/search":
+"@spectrum-css/search@npm:8.1.1, @spectrum-css/search@workspace:components/search":
   version: 0.0.0-use.local
   resolution: "@spectrum-css/search@workspace:components/search"
   dependencies:
@@ -5206,7 +5206,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@spectrum-css/stepper@workspace:components/stepper"
   dependencies:
-    "@spectrum-css/actionbutton": "npm:7.1.1"
+    "@spectrum-css/actionbutton": "npm:7.1.2"
     "@spectrum-css/icon": "npm:9.1.0"
     "@spectrum-css/infieldbutton": "npm:6.1.1"
     "@spectrum-css/textfield": "npm:8.1.1"

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@spectrum-css/actionbutton",`
`3`		`- "version": "7.1.1",`
	`3`	`+ "version": "7.1.2",`
`4`	`4`	`"description": "The Spectrum CSS action button component",`
`5`	`5`	`"license": "Apache-2.0",`
`6`	`6`	`"author": "Adobe",`
Original file line number	Diff line number	Diff line change
`@@ -37,7 +37,7 @@`
`37`	`37`	`}`
`38`	`38`	`},`
`39`	`39`	`"devDependencies": {`
`40`		`- "@spectrum-css/actionbutton": "7.1.1",`
	`40`	`+ "@spectrum-css/actionbutton": "7.1.2",`
`41`	`41`	`"@spectrum-css/tokens": "16.0.1"`
`42`	`42`	`},`
`43`	`43`	`"keywords": [`
Original file line number	Diff line number	Diff line change
`@@ -41,7 +41,7 @@`
`41`	`41`	`}`
`42`	`42`	`},`
`43`	`43`	`"devDependencies": {`
`44`		`- "@spectrum-css/actionbutton": "7.1.1",`
	`44`	`+ "@spectrum-css/actionbutton": "7.1.2",`
`45`	`45`	`"@spectrum-css/icon": "9.1.0",`
`46`	`46`	`"@spectrum-css/tokens": "16.0.1"`
`47`	`47`	`},`
Original file line number	Diff line number	Diff line change
`@@ -57,7 +57,7 @@`
`57`	`57`	`}`
`58`	`58`	`},`
`59`	`59`	`"devDependencies": {`
`60`		`- "@spectrum-css/actionbutton": "7.1.1",`
	`60`	`+ "@spectrum-css/actionbutton": "7.1.2",`
`61`	`61`	`"@spectrum-css/asset": "7.1.0",`
`62`	`62`	`"@spectrum-css/checkbox": "10.1.1",`
`63`	`63`	`"@spectrum-css/icon": "9.1.0",`
Original file line number	Diff line number	Diff line change
`@@ -45,7 +45,7 @@`
`45`	`45`	`}`
`46`	`46`	`},`
`47`	`47`	`"devDependencies": {`
`48`		`- "@spectrum-css/actionbutton": "7.1.1",`
	`48`	`+ "@spectrum-css/actionbutton": "7.1.2",`
`49`	`49`	`"@spectrum-css/link": "7.1.0",`
`50`	`50`	`"@spectrum-css/popover": "8.2.0",`
`51`	`51`	`"@spectrum-css/tokens": "16.0.1"`