Merge branch 'spectrum-two' into aramos-adobe/css781-illustrated-mess…

…age-s2-tokens
adobe · Jan 29, 2025 · 2e58098 · 2e58098
2 parents 2448aed + a2be4d1
commit 2e58098
Show file tree

Hide file tree

Showing 6 changed files with 135 additions and 105 deletions.
diff --git a/.changeset/serious-clouds-jam.md b/.changeset/serious-clouds-jam.md
@@ -0,0 +1,11 @@
+---
+"@spectrum-css/colorslider": minor
+---
+
+# S2 colorslider migration
+
+This migrates the `colorslider` component to S2. Custom properties have been remapped per the design spec.
+
+| Before                    | After                      |
+| ------------------------- | -------------------------- |
+| `--spectrum-gray-900-rgb` | `--spectrum-gray-1000-rgb` |
diff --git a/components/colorslider/dist/metadata.json b/components/colorslider/dist/metadata.json
@@ -37,13 +37,15 @@
     "--spectrum-color-slider-border-opacity",
     "--spectrum-color-slider-border-rounding",
     "--spectrum-color-slider-border-width",
+    "--spectrum-color-slider-control-track-width",
+    "--spectrum-color-slider-fill-color-disabled",
     "--spectrum-color-slider-length",
     "--spectrum-color-slider-minimum-length"
   ],
   "global": [
     "--spectrum-color-control-track-width",
     "--spectrum-disabled-background-color",
-    "--spectrum-gray-900-rgb"
+    "--spectrum-gray-1000-rgb"
   ],
   "passthroughs": ["--mod-colorhandle-hitarea-border-radius"],
   "high-contrast": [

diff --git a/components/colorslider/index.css b/components/colorslider/index.css
@@ -11,28 +11,24 @@
  * governing permissions and limitations under the License.
  */
 
-@media (forced-colors: active) {
-	.spectrum-ColorSlider {
-		--highcontrast-color-slider-border-color: CanvasText;
-		--highcontrast-color-slider-border-color-disabled: GrayText;
-		--highcontrast-color-slider-background-color-disabled: Canvas;
-		forced-color-adjust: none;
-	}
-}
-
 .spectrum-ColorSlider {
+	/* Size and Spacing */
+	--spectrum-color-slider-control-track-width: var(--spectrum-color-control-track-width);
+
 	/* @todo Refactor with --spectrum-color-slider-border-color once gray rgb token is no longer necessary to workaround nested rgb color token value using rgba(). */
-	--spectrum-color-slider-border-color-default: rgba(var(--spectrum-gray-900-rgb), var(--spectrum-color-slider-border-opacity));
+	--spectrum-color-slider-border-color-default: rgba(var(--spectrum-gray-1000-rgb), var(--spectrum-color-slider-border-opacity));
 
 	/* @passthrough -- settings for nested color handle */
 	--mod-colorhandle-hitarea-border-radius: var(--mod-color-slider-handle-hitarea-border-radius, 0px);
 
+	--spectrum-color-slider-fill-color-disabled: var(--spectrum-disabled-background-color);
+
 	position: relative;
 	display: block;
 
 	min-inline-size: var(--mod-color-slider-minimum-length, var(--spectrum-color-slider-minimum-length));
 	inline-size: var(--mod-color-slider-length, var(--spectrum-color-slider-length));
-	block-size: var(--mod-color-slider-control-track-width, var(--spectrum-color-control-track-width));
+	block-size: var(--mod-color-slider-control-track-width, var(--spectrum-color-slider-control-track-width));
 
 	/* Otherwise we randomly drag a file icon */
 	user-select: none;
@@ -58,7 +54,7 @@
 	min-block-size: var(--mod-color-slider-vertical-minimum-height, var(--mod-color-slider-minimum-length, var(--spectrum-color-slider-minimum-length)));
 	block-size: var(--mod-color-slider-vertical-height, var(--mod-color-slider-length, var(--spectrum-color-slider-length)));
 	min-inline-size: 0;
-	inline-size: var(--mod-color-slider-vertical-control-track-width, var(--mod-color-slider-control-track-height, var(--spectrum-color-control-track-width)));
+	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%;
@@ -85,8 +81,8 @@
 	}
 
 	.spectrum-ColorSlider.is-disabled & {
-		--spectrum-color-slider-border-color-local: var(--highcontrast-color-slider-border-color-disabled, var(--mod-color-slider-border-color-disabled, var(--spectrum-disabled-background-color)));
-		background: var(--highcontrast-color-slider-background-color-disabled, var(--mod-color-slider-background-color-disabled, var(--spectrum-disabled-background-color)));
+		--spectrum-color-slider-border-color-local: var(--highcontrast-color-slider-border-color-disabled, var(--mod-color-slider-border-color-disabled, var(--spectrum-color-slider-fill-color-disabled)));
+		background: var(--highcontrast-color-slider-background-color-disabled, var(--mod-color-slider-background-color-disabled, var(--spectrum-color-slider-fill-color-disabled)));
 	}
 }
 
@@ -114,3 +110,12 @@
 	margin: 0;
 	pointer-events: none;
 }
+
+@media (forced-colors: active) {
+	.spectrum-ColorSlider {
+		--highcontrast-color-slider-border-color: CanvasText;
+		--highcontrast-color-slider-border-color-disabled: GrayText;
+		--highcontrast-color-slider-background-color-disabled: Canvas;
+		forced-color-adjust: none;
+	}
+}
diff --git a/components/colorslider/stories/colorslider.stories.js b/components/colorslider/stories/colorslider.stories.js
@@ -19,18 +19,20 @@ export default {
 	component: "ColorSlider",
 	argTypes: {
 		colorHandleStyle: { table: { disable: true } },
-		vertical: { table: { disable: true } },
 		isDisabled,
 		isFocused: {
 			...isFocused,
 			if: { arg: "isDisabled", truthy: false },
 		},
-		gradientStops: {
-			name: "Gradient stops",
+		color: {
+			name: "Color",
 			description:
-				"The <linear-color-stop> value of the CSS linear-gradient. Can be multiple stops separated by commas.",
-			type: { name: "array" },
-			table: { disable: true },
+				"Supports standard color input or any valid input for the <code>background</code> property such as, <code>linear-gradient(red, blue)</code>.",
+			type: { name: "string", required: true },
+			table: {
+				type: { summary: "string" },
+			},
+			control: "color",
 		},
 		selectedColor: {
 			name: "Selected color",
@@ -40,12 +42,19 @@ export default {
 			control: "color",
 		},
 		gradientType: {
-			name: "Gradient type",
-			description: "The gradient can be defined in the markup using CSS or with an image.",
-			options: ["gradient", "image"],
+			name: "Color type",
+			description:
+				"The color can be defined in the markup using CSS or with an image.",
+			options: ["color", "image"],
 			control: { type: "select" },
 			table: { disable: true },
 		},
+		vertical: {
+			name: "Vertical",
+			description: "The orientation of the component.",
+			type: { name: "boolean" },
+			control: "boolean",
+		},
 	},
 	args: {
 		rootClass: "spectrum-ColorSlider",
@@ -70,8 +79,8 @@ export default {
  */
 export const Default = ColorSliderGroup.bind({});
 Default.args = {
-	gradientStops:
-		["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, 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%)",
 };
 
 // ********* VRT ONLY ********* //
@@ -81,7 +90,7 @@ WithForcedColors.tags = ["!autodocs", "!dev"];
 WithForcedColors.parameters = {
 	chromatic: {
 		forcedColors: "active",
-		modes: disableDefaultModes
+		modes: disableDefaultModes,
 	},
 };
 
@@ -92,6 +101,8 @@ WithForcedColors.parameters = {
 export const Vertical = Template.bind({});
 Vertical.args = {
 	vertical: true,
+	color:
+		"linear-gradient(to bottom, 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%)",
 };
 Vertical.tags = ["!dev"];
 Vertical.parameters = {
@@ -100,7 +111,7 @@ Vertical.parameters = {
 
 export const Alpha = Template.bind({});
 Alpha.args = {
-	gradientStops: ["rgba(0, 0, 0, 1) 0%", "rgba(0, 0, 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)",
 };
 Alpha.tags = ["!dev"];

diff --git a/components/colorslider/stories/colorslider.test.js b/components/colorslider/stories/colorslider.test.js
@@ -14,14 +14,15 @@ export const ColorSliderGroup = Variants({
 		{
 			testHeading: "Vertical",
 			vertical: true,
+			color: "linear-gradient(to bottom, 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%)",
 			wrapperStyles: {
 				// Adjust for the indicator
 				"padding-block": "20px",
 			},
 		},
 		{
 			testHeading: "Alpha",
-			gradientStops: ["rgba(0, 0, 0, 1) 0%", "rgba(0, 0, 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

diff --git a/components/colorslider/stories/template.js b/components/colorslider/stories/template.js
@@ -7,83 +7,83 @@ import { when } from "lit/directives/when.js";
 
 import "../index.css";
 
-export const Template = ({
-	rootClass = "spectrum-ColorSlider",
-	customClasses = [],
-	customStyles = {},
-	isDisabled = false,
-	isFocused = false,
-	vertical = false,
-	gradientStops = [
-		"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)",
-	],
-	gradientType = "gradient",
-	selectedColor = "rgba(255, 0, 0, 1)",
-	colorHandleStyle = {},
-} = {}, context = {}) => {
+export const Template = (
+	{
+		rootClass = "spectrum-ColorSlider",
+		customClasses = [],
+		customStyles = {},
+		isDisabled = false,
+		isFocused = false,
+		vertical = false,
+		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%)",
+		gradientType = "gradient",
+		selectedColor = "rgba(255, 0, 0, 1)",
+		colorHandleStyle = {},
+	} = {},
+	context = {},
+) => {
 	const { updateArgs } = context;
 
 	return html`
-    <div
-      class=${classMap({
-        [rootClass]: true,
-        [`${rootClass}--vertical`]: vertical,
-        "is-disabled": isDisabled,
-        "is-focused": isFocused,
-        ...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
-      })}
-      style=${styleMap(customStyles)}
-      @focusin=${function() {
-        updateArgs({ isFocused: true });
-      }}
-      @focusout=${function() {
-        updateArgs({ isFocused: false });
-      }}
-    >
-      ${OpacityCheckerboard({
-        customClasses: [`${rootClass}-checkerboard`],
-        content: [
-          when(
-            gradientType === "image",
-            () => html`<img
-              class="${rootClass}-gradient"
-              role="presentation"
-              src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKAAAAAeCAIAAAAkbYJ/AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyVpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ4IDc5LjE2NDAzNiwgMjAxOS8wOC8xMy0wMTowNjo1NyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDIxLjAgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RjNBMTBENzk4QkQzMTFFQThDOTdDN0QyNDNGMUNFMzAiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RjNBMTBEN0E4QkQzMTFFQThDOTdDN0QyNDNGMUNFMzAiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpGM0ExMEQ3NzhCRDMxMUVBOEM5N0M3RDI0M0YxQ0UzMCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpGM0ExMEQ3ODhCRDMxMUVBOEM5N0M3RDI0M0YxQ0UzMCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PrmQ8p4AAADbSURBVHja7JFLDsMgDAWNc/9L9h7YiQ0Gou66rGaUWHxegDDN5SPiEm/Uo+3S3LPWIzEy2uqu1Vh1dy3q5TM/ks38yprJbGdXK38GdHwVs94sAtXNas9h/LIK2zE11jlHrI5ksa9a5r+mdJ3E8i+OveISurzCvldr3V/dp91XQLTPvWYdgbFCr/tcp81BqW/bzKxLkz2epxLzPWglS7Y1ERX4axCMYEAwIBgQDAgGBAOCEQwIBgQDggHBgGBAMIIBwYBgQDAgGBAMCAYEIxgQDAgGBAOC4RduAQYALiXYw9aNKvcAAAAASUVORK5CYII="
-            />`,
-            () => html`<div
-              class="${rootClass}-gradient"
-              role="presentation"
-              style=${when(gradientStops && gradientStops.length, () =>
-                styleMap({
-                  background: `linear-gradient(to ${
-                    vertical ? "bottom" : "right"
-                  }, ${gradientStops.join(", ")})`,
-                })
-              )}
-            ></div>`
-          ),
-        ],
-        role: "presentation",
-      }, context)}
-      ${ColorHandle({
-        isDisabled,
-        isFocused,
-        selectedColor,
-        customClasses: [`${rootClass}-handle`],
-        customStyles: colorHandleStyle,
-      }, context)}
-      <input
-	  	type="color"
-		value=${selectedColor}
-		class=${classMap({
-			[`${rootClass}-slider`]: true
-		})} />
-    </div>
-  `;
+		<div
+			class=${classMap({
+				[rootClass]: true,
+				[`${rootClass}--vertical`]: vertical,
+				"is-disabled": isDisabled,
+				"is-focused": isFocused,
+				...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
+			})}
+			style=${styleMap(customStyles)}
+			@focusin=${function () {
+				updateArgs({ isFocused: true });
+			}}
+			@focusout=${function () {
+				updateArgs({ isFocused: false });
+			}}
+		>
+			${OpacityCheckerboard(
+				{
+					customClasses: [`${rootClass}-checkerboard`],
+					content: [
+						when(
+							gradientType === "image",
+							() =>
+								html`<img
+									class="${rootClass}-gradient"
+									role="presentation"
+									src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKAAAAAeCAIAAAAkbYJ/AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyVpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ4IDc5LjE2NDAzNiwgMjAxOS8wOC8xMy0wMTowNjo1NyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDIxLjAgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RjNBMTBENzk4QkQzMTFFQThDOTdDN0QyNDNGMUNFMzAiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RjNBMTBEN0E4QkQzMTFFQThDOTdDN0QyNDNGMUNFMzAiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpGM0ExMEQ3NzhCRDMxMUVBOEM5N0M3RDI0M0YxQ0UzMCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpGM0ExMEQ3ODhCRDMxMUVBOEM5N0M3RDI0M0YxQ0UzMCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PrmQ8p4AAADbSURBVHja7JFLDsMgDAWNc/9L9h7YiQ0Gou66rGaUWHxegDDN5SPiEm/Uo+3S3LPWIzEy2uqu1Vh1dy3q5TM/ks38yprJbGdXK38GdHwVs94sAtXNas9h/LIK2zE11jlHrI5ksa9a5r+mdJ3E8i+OveISurzCvldr3V/dp91XQLTPvWYdgbFCr/tcp81BqW/bzKxLkz2epxLzPWglS7Y1ERX4axCMYEAwIBgQDAgGBAOCEQwIBgQDggHBgGBAMIIBwYBgQDAgGBAMCAYEIxgQDAgGBAOC4RduAQYALiXYw9aNKvcAAAAASUVORK5CYII="
+								/>`,
+							() =>
+								html`<div
+									class="${rootClass}-gradient"
+									role="presentation"
+									style=${styleMap({
+										background: `${color}`,
+									})}
+								></div>`,
+						),
+					],
+					role: "presentation",
+				},
+				context,
+			)}
+			${ColorHandle(
+				{
+					isDisabled,
+					isFocused,
+					selectedColor,
+					customClasses: [`${rootClass}-handle`],
+					customStyles: colorHandleStyle,
+				},
+				context,
+			)}
+			<input
+				type="color"
+				value=${selectedColor}
+				class=${classMap({
+					[`${rootClass}-slider`]: true,
+				})}
+			/>
+		</div>
+	`;
 };