@spectrum-css/colorslider - npm Package Compare versions

Comparing version 7.0.0-s2-foundations.10 to 7.0.0-s2-foundations.11

CHANGELOG.md

 # Change Log
 
+## 7.0.0-s2-foundations.11
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`8e772ef`](https://github.com/adobe/spectrum-css/commit/8e772efd757f5e88fd4048a5c0229472f9bf90cf) Thanks [@pfulton](https://github.com/pfulton)! - Updated build to set cssnano to discardUnused: false
+
+### Patch Changes
+
+- Updated dependencies [[`8e772ef`](https://github.com/adobe/spectrum-css/commit/8e772efd757f5e88fd4048a5c0229472f9bf90cf)]:
+  - @spectrum-css/opacitycheckerboard@3.0.0-s2-foundations.11
+  - @spectrum-css/colorhandle@9.0.0-s2-foundations.11
+  - @spectrum-css/tokens@15.0.0-s2-foundations.12
+
 ## 7.0.0-s2-foundations.10
@@ -7,7 +20,7 @@
 
-- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`54c5625`](https://github.com/adobe/spectrum-css/commit/54c56257bcca5872567a2bf0c5737e35b8190b05) Thanks [@pfulton](https://github.com/pfulton)! - Fixes to index.css imports to ensure appropriate system mappings get loaded
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543) Thanks [@pfulton](https://github.com/pfulton)! - Fixes to index.css imports to ensure appropriate system mappings get loaded
 
 ### Patch Changes
 
-- Updated dependencies [[`54c5625`](https://github.com/adobe/spectrum-css/commit/54c56257bcca5872567a2bf0c5737e35b8190b05)]:
+- Updated dependencies [[`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543)]:
   - @spectrum-css/opacitycheckerboard@3.0.0-s2-foundations.10
@@ -14,0 +27,0 @@ - @spectrum-css/colorhandle@9.0.0-s2-foundations.10

package.json

 {
 	"name": "@spectrum-css/colorslider",
-	"version": "7.0.0-s2-foundations.10",
+	"version": "7.0.0-s2-foundations.11",
 	"description": "The Spectrum CSS Color slider component",
@@ -5,0 +5,0 @@ "license": "Apache-2.0",

stories/template.js

 import { Template as ColorHandle } from "@spectrum-css/colorhandle/stories/template.js";
 import { Template as OpacityCheckerboard } from "@spectrum-css/opacitycheckerboard/stories/template.js";
+import { Variants } from "@spectrum-css/preview/decorators";
 import { html } from "lit";
@@ -9,30 +10,25 @@ import { classMap } from "lit/directives/class-map.js";
 import "../index.css";
-import "../themes/express.css";
-import "../themes/spectrum.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 = "rgb(255, 0, 0)",
-		colorHandleStyle = {},
-	} = {},
-	context = {}
-) => {
+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",
+	colorHandleStyle = {
+		"--spectrum-picked-color": "rgba(255, 0, 0)",
+	},
+} = {}, context = {}) => {
 	const { updateArgs } = context;
-
 	return html`
@@ -55,49 +51,74 @@ <div
     >
-      ${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,
-        })}
-      />
+      ${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,
+        customClasses: [`${rootClass}-handle`],
+        customStyles: colorHandleStyle,
+      }, context)}
+      <input type="range" class="${rootClass}-slider" min="0" max="100" step="1" />
     </div>
-	`;
+  `;
 };
+
+export const ColorSliderGroup = Variants({
+	Template,
+	testData: [
+		{
+			testHeading: "Default",
+		},
+		{
+			testHeading: "Vertical",
+			vertical: true,
+		},
+		{
+			testHeading: "Alpha",
+			gradientStops: ["rgba(0, 0, 0, 1) 0%", "rgba(0, 0, 0, 0) 100%"],
+			colorHandleStyle: {
+				"--spectrum-picked-color": "rgba(0, 0, 0, 1)",
+			},
+		},
+		{
+			testHeading: "With Image",
+			gradientType: "image",
+			colorHandleStyle: {
+				"--spectrum-picked-color": "#df6a7d",
+				"inset-inline-start": "50%",
+			},
+		},
+	],
+	stateData: [
+		{
+			testHeading: "Disabled",
+			isDisabled: true,
+		},
+		{
+			testHeading: "Focused",
+			isFocused: true,
+		},
+	],
+});

No alert changes

Improved metrics

Total package byte prevSize

74950

increased by1.43%

Lines of code

566

increased by3.85%

No dependency changes