fix(colorslider): add missing vertical style; update gradient color

cdransf · cdransf · commit ec61ee27c0ed · 2025-01-29T10:07:56.000-08:00
diff --git a/components/colorslider/index.css b/components/colorslider/index.css
@@ -57,6 +57,7 @@
 	inline-size: var(--mod-color-slider-vertical-control-track-width, var(--mod-color-slider-control-track-height, var(--spectrum-color-slider-control-track-width)));
 
 	.spectrum-ColorSlider-handle {
+		inset-inline-start: 50%;
 		inset-block-start: 0;
 	}
 }
diff --git a/components/colorslider/stories/colorslider.test.js b/components/colorslider/stories/colorslider.test.js
@@ -22,7 +22,7 @@ export const ColorSliderGroup = Variants({
 		},
 		{
 			testHeading: "Alpha",
-			color: "linear-gradient(to right, rgb(255, 0, 0) 0%, rgb(255, 255, 0) 17%, rgb(0, 255, 0) 33%, rgb(0, 255, 255) 50%, rgb(0, 0, 255) 67%, rgb(255, 0, 255) 83%, rgb(255, 0, 0) 100%)",
+			color: "linear-gradient(to right, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%)",
 			selectedColor: "rgba(0, 0, 0, 1)",
 			wrapperStyles: {
 				// Adjust for the indicator

Original file line number	Diff line number	Diff line change
`@@ -57,6 +57,7 @@`
`57`	`57`	`inline-size: var(--mod-color-slider-vertical-control-track-width, var(--mod-color-slider-control-track-height, var(--spectrum-color-slider-control-track-width)));`
`58`	`58`
`59`	`59`	`.spectrum-ColorSlider-handle {`
	`60`	`+ inset-inline-start: 50%;`
`60`	`61`	`inset-block-start: 0;`
`61`	`62`	`}`
`62`	`63`	`}`
Original file line number	Diff line number	Diff line change
`@@ -22,7 +22,7 @@ export const ColorSliderGroup = Variants({`
`22`	`22`	`},`
`23`	`23`	`{`
`24`	`24`	`testHeading: "Alpha",`
`25`		`- color: "linear-gradient(to right, rgb(255, 0, 0) 0%, rgb(255, 255, 0) 17%, rgb(0, 255, 0) 33%, rgb(0, 255, 255) 50%, rgb(0, 0, 255) 67%, rgb(255, 0, 255) 83%, rgb(255, 0, 0) 100%)",`
	`25`	`+ color: "linear-gradient(to right, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%)",`
`26`	`26`	`selectedColor: "rgba(0, 0, 0, 1)",`
`27`	`27`	`wrapperStyles: {`
`28`	`28`	`// Adjust for the indicator`