@spectrum-css/colorslider - npm Package Compare versions

Comparing version 4.0.1 to 5.0.0-beta.0

gulpfile.js

@@ -1,1 +0,1 @@
-module.exports = require("@spectrum-css/component-builder");
+module.exports = require("@spectrum-css/component-builder-simple");

package.json

 {
   "name": "@spectrum-css/colorslider",
-  "version": "4.0.1",
-  "description": "The Spectrum CSS Color Slider component",
+  "version": "5.0.0-beta.0",
+  "description": "The Spectrum CSS Color slider component",
   "license": "Apache-2.0",
@@ -21,11 +21,11 @@ "author": "Adobe",
   "peerDependencies": {
-    "@spectrum-css/colorhandle": ">=5.0.0",
-    "@spectrum-css/opacitycheckerboard": ">=1.0.0-alpha.0",
-    "@spectrum-css/vars": ">=9"
+    "@spectrum-css/colorhandle": ">=6",
+    "@spectrum-css/opacitycheckerboard": ">=1.0.0",
+    "@spectrum-css/tokens": ">=11"
   },
   "devDependencies": {
     "@spectrum-css/colorhandle": "^6.0.1",
-    "@spectrum-css/component-builder": "^4.0.12",
+    "@spectrum-css/component-builder-simple": "^2.0.15",
     "@spectrum-css/opacitycheckerboard": "^1.0.1",
-    "@spectrum-css/vars": "^9.0.8",
+    "@spectrum-css/tokens": "^11.0.2",
     "gulp": "^4.0.0"
@@ -36,3 +36,3 @@ },
   },
-  "gitHead": "b0be52b34af5510c140a17f2e13114f49c9818b1"
+  "gitHead": "a85d92b6410f42a737d445e592c1ecab9a6e7ac6"
 }

README.md

 # @spectrum-css/colorslider
 
-> The Spectrum CSS Color Slider component
+> The Spectrum CSS Color slider component
 
@@ -5,0 +5,0 @@ This package is part of the [Spectrum CSS project](https://github.com/adobe/spectrum-css).

stories/colorslider.stories.js

@@ -30,2 +30,16 @@ // Import the component markup template
 		},
+		gradientStops: {
+			name: "Gradient Stops",
+			description:
+				"The <linear-color-stop> value of the CSS linear-gradient. Can be multiple stops separated by commas.",
+			type: { name: "string" },
+			table: { disable: true },
+		},
+		gradientType: {
+			name: "Gradient Type",
+			description: "The gradient can be defined in the markup using CSS or with an image.",
+			options: ['gradient', 'image'],
+			control: { type: 'select' },
+			table: { disable: true },
+		},
 	},
@@ -36,2 +50,5 @@ args: {
 		isFocused: false,
+		gradientType: "gradient",
+		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)",
 	},
@@ -57,1 +74,24 @@ parameters: {
 };
+
+export const Alpha = Template.bind({});
+Alpha.args = {
+	gradientStops: "rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%",
+	colorHandleStyle: {
+		"--spectrum-picked-color": "rgba(0, 0, 0, 1)",
+	},
+};
+
+export const WithImage = Template.bind({});
+WithImage.args = {
+	gradientType: "image",
+	colorHandleStyle: {
+		"--spectrum-picked-color": "#df6a7d",
+		"inset-inline-start": "50%",
+	},
+};
+WithImage.storyName = "Image";
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+	isDisabled: true,
+};

stories/template.js

@@ -5,5 +5,5 @@ import { html } from "lit";
 import { Template as ColorHandle } from "@spectrum-css/colorhandle/stories/template.js";
+import { Template as OpacityCheckerboard } from "@spectrum-css/opacitycheckerboard/stories/template.js";
 
 import "../index.css";
-import "../skin.css";
 
@@ -16,2 +16,4 @@ export const Template = ({
 	vertical,
+	gradientStops,
+	gradientType,
 	colorHandleStyle = {
@@ -22,2 +24,16 @@ "--spectrum-picked-color": "rgba(255, 0, 0)",
 }) => {
+	const checkerboardContent = gradientType == "image"
+		? html`
+			<img
+				class="spectrum-ColorSlider-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="background: linear-gradient(to ${vertical ? "bottom" : "right"}, ${gradientStops});"
+			></div>`;
+
 	return html`
@@ -33,14 +49,13 @@ <div
 		>
-			<div class="${rootClass}-checkerboard" role="presentation">
-				<div
-					class="${rootClass}-gradient"
-					role="presentation"
-					style="background: linear-gradient(to ${vertical
-						? "bottom"
-						: "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%);"
-				></div>
-			</div>
+			${OpacityCheckerboard({
+				...globals,
+				componentOnly: true,
+				customClasses: [`${rootClass}-checkerboard`],
+				content: checkerboardContent,
+				role: 'presentation',
+			})}
 			${ColorHandle({
 				...globals,
 				isDisabled,
+				isFocused,
 				customClasses: [`${rootClass}-handle`],
@@ -47,0 +62,0 @@ colorHandleStyle,

New alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

74087

increased by27.55%

Number of package files

18

increased by50%

Lines of code

595

increased by82.52%

Worsened metrics

Number of low quality alerts

2

increased by100%

No dependency changes