fix(colorloupe): adds correct disabled styles (#3453)

marissahuysentruyt · web-flow · commit 8d2d269a6571 · 2025-01-08T11:43:11.000-05:00
- correctly adds styles for disabled color loupes
- rebuilds metadata.json
- create changeset
diff --git a/.changeset/slow-dogs-yawn.md b/.changeset/slow-dogs-yawn.md
@@ -0,0 +1,5 @@
+---
+"@spectrum-css/colorloupe": minor
+---
+
+Color loupes should not be displayed when their color handle is disabled, so this work adds the `.is-disabled` selector to color loupe's CSS, with `opacity: 0`.
diff --git a/components/colorloupe/index.css b/components/colorloupe/index.css
@@ -60,6 +60,10 @@
 		transform: translate(0, 0);
 		opacity: 1;
 	}
+
+	&.is-disabled {
+		opacity: 0;
+	}
 }
 
 .spectrum-ColorLoupe-inner-border {
diff --git a/components/colorloupe/metadata/metadata.json b/components/colorloupe/metadata/metadata.json
@@ -7,6 +7,7 @@
     ".spectrum-ColorLoupe-checkerboard-pattern",
     ".spectrum-ColorLoupe-inner-border",
     ".spectrum-ColorLoupe-outer-border",
+    ".spectrum-ColorLoupe.is-disabled",
     ".spectrum-ColorLoupe.is-open",
     ".spectrum-ColorLoupe:dir(rtl)",
     "[dir=\"rtl\"] .spectrum-ColorLoupe"

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +"@spectrum-css/colorloupe": minor
 +---
++
 +Color loupes should not be displayed when their color handle is disabled, so this work adds the `.is-disabled` selector to color loupe's CSS, with `opacity: 0`.
Original file line number	Diff line number	Diff line change
`@@ -60,6 +60,10 @@`
`60`	`60`	`transform: translate(0, 0);`
`61`	`61`	`opacity: 1;`
`62`	`62`	`}`
	`63`	`+`
	`64`	`+ &.is-disabled {`
	`65`	`+ opacity: 0;`
	`66`	`+ }`
`63`	`67`	`}`
`64`	`68`
`65`	`69`	`.spectrum-ColorLoupe-inner-border {`