@spectrum-css/swatch - npm Package Compare versions

Comparing version 5.0.17 to 5.0.18

CHANGELOG.md

@@ -6,2 +6,9 @@ # Change Log
 
+<a name="5.0.18"></a>
+##5.0.18
+🗓
[phone] • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/swatch@5.0.17...@spectrum-css/swatch@5.0.18)
+
+**Note:** Version bump only for package @spectrum-css/swatch
+
 <a name="5.0.17"></a>
@@ -8,0 +15,0 @@ ##5.0.17

package.json

 {
   "name": "@spectrum-css/swatch",
-  "version": "5.0.17",
+  "version": "5.0.18",
   "description": "The Spectrum CSS Color swatch component",
@@ -26,4 +26,4 @@ "license": "Apache-2.0",
     "@spectrum-css/component-builder-simple": "^2.0.17",
-    "@spectrum-css/opacitycheckerboard": "^1.0.4",
-    "@spectrum-css/tokens": "^12.0.0",
+    "@spectrum-css/opacitycheckerboard": "^1.0.5",
+    "@spectrum-css/tokens": "^13.0.0",
     "gulp": "^4.0.0"
@@ -34,3 +34,3 @@ },
   },
-  "gitHead": "db5d42ecb6d0ba5fca5b7511f4cc9d8e58e637ae"
+  "gitHead": "394fdd27405bd2ecbf1aec96da58a72150b3fc9e"
 }

stories/swatch.stories.js

@@ -1,2 +0,1 @@
-// Import the component markup template
 import { Template } from "./template";
@@ -7,3 +6,3 @@
 	description:
-		"A swatch shows a small sample of a fill—such as a color, gradient, texture, or material—that is intended to be applied to an object.",
+		"A swatch shows a small sample of a fill&emdash;such as a color, gradient, texture, or material&emdash;that is intended to be applied to an object.",
 	component: "Swatch",
@@ -21,17 +20,58 @@ argTypes: {
 		},
-		styles: { table: { disable: true } },
-	},
-	args: {
-		rootClass: "spectrum-Swatch",
-	},
-	parameters: {
-		actions: {
-			handles: [],
+		swatchColor: {
+			name: "Color",
+			type: { name: "string", required: true },
+			table: {
+				type: { summary: "string" },
+				category: "Component",
+			},
+			control: "color",
 		},
-		status: {
-			type: process.env.MIGRATED_PACKAGES.includes("swatch")
-				? "migrated"
-				: undefined,
+		rounding: {
+			name: "Rounding",
+			type: { name: "string" },
+			table: {
+				type: { summary: "string", required: true },
+				category: "Component",
+			},
+			options: ["none", "regular", "full"],
+			control: "select",
 		},
-	},
+		isDisabled: {
+			name: "Disabled",
+			type: { name: "boolean" },
+			table: {
+				type: { summary: "boolean" },
+				category: "State",
+			},
+			control: "boolean",
+		},
+		isSelected: {
+			name: "Selected",
+			type: { name: "boolean" },
+			table: {
+				type: { summary: "boolean" },
+				category: "State",
+			},
+			control: "boolean",
+		},
+  },
+  args: {
+    rootClass: "spectrum-Swatch",
+    size: "m",
+    isSelected: false,
+    isDisabled: false,
+    rounding: "regular",
+    swatchColor: "rgb(174, 216, 230)"
+  },
+  parameters: {
+    actions: {
+      handles: [],
+    },
+    status: {
+      type: process.env.MIGRATED_PACKAGES.includes("swatch")
+        ? "migrated"
+        : "legacy",
+    },
+  },
 };
@@ -44,3 +84,3 @@
 Transparent.args = {
-	styles: {"--spectrum-picked-color": "rgba(174, 216, 230, 0.3)"},
-};
+	swatchColor: "rgba(174, 216, 230, 0.3)",
+};

stories/template.js

@@ -5,3 +5,8 @@ import { html } from "lit";
 import { styleMap } from "lit/directives/style-map.js";
+import { capitalize, lowerCase } from "lodash-es";
+
+import { useArgs } from '@storybook/client-api';
+
 import { Template as OpacityCheckerboard } from "@spectrum-css/opacitycheckerboard/stories/template.js";
+
 import "../index.css";
@@ -12,4 +17,8 @@
 	size = "m",
+	isSelected = false,
+	isDisabled = false,
+	rounding = "regular",
 	customClasses = [],
-	styles = {"--spectrum-picked-color": "rgb(174, 216, 230)"},
+	swatchColor = "rgb(174, 216, 230)",
+	customStyles = {},
 	id,
@@ -19,2 +28,3 @@ ...globals
 	const { express } = globals;
+  	const [_, updateArgs] = useArgs();
 
@@ -34,15 +44,30 @@ try {
 					typeof size !== "undefined",
+				[`${rootClass}--rounding${capitalize(
+							lowerCase(rounding)
+						)}`]: typeof rounding !== "undefined" && rounding !== "regular",
+				'is-selected': !isDisabled && isSelected,
+				'is-disabled': isDisabled,
 				...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
 			})}
+			?disabled=${isDisabled}
 			id=${ifDefined(id)}
-			style=${styleMap(styles)}
+			style=${ifDefined(styleMap({
+				"--spectrum-picked-color": swatchColor,
+				...customStyles,
+			}))}
 			tabindex="0"
+			@click=${() => {
+				updateArgs({ isSelected: !isSelected });
+			}}
+			@focusout=${() => updateArgs({ isSelected: false })}
+			@keypress=${(e) => {
+				if (e.key !== 'Enter' && e.key !== ' ') return;
+				updateArgs({ isSelected: !isSelected });
+			}}
 		>
-		${OpacityCheckerboard({
-			...globals,
-			componentOnly: true,
-			customClasses: [`${rootClass}-fill`],
-		})}
+			${OpacityCheckerboard({
+				customClasses: [`${rootClass}-fill`],
+			})}
 		</div>
 	`;
 };

No alert changes

Improved metrics

Total package byte prevSize

127578

increased by1.42%

Lines of code

1281

increased by5.17%

No dependency changes