@spectrum-css/swatch - npm Package Compare versions

Comparing version 9.0.0-next.0 to 9.0.0-next.1

CHANGELOG.md

 # Change log
 
+## 9.0.0-next.1
+
+### Major Changes
+
+- [#3677](https://github.com/adobe/spectrum-css/pull/3677) [`d47295a`](https://github.com/adobe/spectrum-css/commit/d47295a06cf974c347d794ae4f71bc4c8c498025) Thanks [@cdransf](https://github.com/cdransf)!
+
+#### S2 migration for Swatch group
+
+This migrates the `swatch` and `swatchgroup` components to the latest Spectrum 2 designs. Custom properties have been remapped and added per the design specification.
+
+An `Add Swatch` variant has been added with the required color tokens and the specified add UI icon.
+
+The `Add Swatch` and `Mixed Value` variants may not be combined with background colors or images. To implement the `Add Swatch` you need to apply the `is-addSwatch` class to the `spectrum-Swatch` element. `Add swatch` keyboard focus may be applied by adding the `is-keyboardFocused` class to this combination of classes.
+
+The `spectrum-Swatch-icon` is used to set the expected color to icons contained within the swatch.
+
+The light and no border variants have been removed. Individual swatches have a border set to `--spectrum-gray-1000` at `42%` opacity, while the border opacity is set to `20%` in swatch groups.
+
+##### Removed custom properties
+
+`--spectrum-swatch-border-color`
+`--spectrum-swatch-dash-icon-color` (replaced by `--spectrum-swatch-icon-color`)
+
+##### New custom properties
+
+`--spectrum-swatch-border-color-rgb`
+`--spectrum-swatch-border-opacity`
+`--spectrum-corner-radius-full`
+`--spectrum-corner-radius-none`
+`--spectrum-swatch-disabled-icon-border-opacity`
+`--spectrum-swatch-icon-color`
+`--spectrum-swatch-rectangle-width-multiplier`
+
+##### New mods
+
+`--mod-add-button-background`
+`--mod-add-button-background-down`
+`--mod-add-button-background-hover`
+`--mod-add-button-background-keyboard-focus`
+`--mod-corner-radius-full`
+`--mod-mixed-button-background`
+`--mod-swatchgroup-border-color`
+`--mod-swatch-border-color-rgb`
+`--mod-swatch-border-opacity`
+
+### Patch Changes
+
+- [#3871](https://github.com/adobe/spectrum-css/pull/3871) [`7578ad2`](https://github.com/adobe/spectrum-css/commit/7578ad20dc42b533f4cb04b37f02ad13eb85a576) Thanks [@cdransf](https://github.com/cdransf)! - Updates the add swatch icon to use the ui rather than workflow icon
+
 ## 9.0.0-next.0
@@ -4,0 +53,0 @@

dist/metadata.json

@@ -7,4 +7,2 @@ {
     ".spectrum-Swatch .spectrum-Swatch-fill",
-    ".spectrum-Swatch--lightBorder .spectrum-Swatch-fill:before",
-    ".spectrum-Swatch--noBorder .spectrum-Swatch-fill:before",
     ".spectrum-Swatch--rectangle",
@@ -26,3 +24,3 @@ ".spectrum-Swatch--roundingFull.is-selected:not(.spectrum-Swatch--rectangle) .spectrum-Swatch-fill",
     ".spectrum-Swatch--sizeL",
-    ".spectrum-Swatch--sizeM",
+    ".spectrum-Swatch--sizeS",
     ".spectrum-Swatch--sizeXS",
@@ -34,12 +32,21 @@ ".spectrum-Swatch-disabledIcon",
     ".spectrum-Swatch-fill:before",
+    ".spectrum-Swatch-icon",
     ".spectrum-Swatch-image",
-    ".spectrum-Swatch-mixedValueIcon",
+    ".spectrum-Swatch.is-addSwatch",
+    ".spectrum-Swatch.is-addSwatch .spectrum-Swatch-fill",
+    ".spectrum-Swatch.is-addSwatch .spectrum-Swatch-icon",
+    ".spectrum-Swatch.is-addSwatch.is-keyboardFocused",
+    ".spectrum-Swatch.is-addSwatch:active",
+    ".spectrum-Swatch.is-addSwatch:focus-visible",
+    ".spectrum-Swatch.is-addSwatch:hover",
     ".spectrum-Swatch.is-disabled",
     ".spectrum-Swatch.is-disabled .spectrum-Swatch-disabledIcon",
     ".spectrum-Swatch.is-image .spectrum-Swatch-fill:before",
+    ".spectrum-Swatch.is-keyboardFocused",
+    ".spectrum-Swatch.is-mixedValue",
     ".spectrum-Swatch.is-mixedValue .spectrum-Swatch-fill",
-    ".spectrum-Swatch.is-mixedValue .spectrum-Swatch-mixedValueIcon",
-    ".spectrum-Swatch.is-nothing .spectrum-Swatch-fill",
-    ".spectrum-Swatch.is-nothing .spectrum-Swatch-fill:after",
-    ".spectrum-Swatch.is-nothing.spectrum-Swatch--rectangle .spectrum-Swatch-fill:after",
+    ".spectrum-Swatch.is-mixedValue .spectrum-Swatch-icon",
+    ".spectrum-Swatch.is-nothing.spectrum-Swatch--rectangle:not(.spectrum-Swatch.is-mixedValue, .spectrum-Swatch.is-addSwatch) .spectrum-Swatch-fill:after",
+    ".spectrum-Swatch.is-nothing:not(.spectrum-Swatch.is-mixedValue, .spectrum-Swatch.is-addSwatch) .spectrum-Swatch-fill",
+    ".spectrum-Swatch.is-nothing:not(.spectrum-Swatch.is-mixedValue, .spectrum-Swatch.is-addSwatch) .spectrum-Swatch-fill:after",
     ".spectrum-Swatch.is-selected",
@@ -49,5 +56,4 @@ ".spectrum-Swatch.is-selected .spectrum-Swatch-fill",
     ".spectrum-Swatch.is-selected:before",
-    ".spectrum-Swatch:after",
     ".spectrum-Swatch:before",
-    ".spectrum-Swatch:focus-visible:after",
+    ".spectrum-Swatch:focus-visible",
     ".spectrum-Swatch[disabled]",
@@ -57,6 +63,13 @@ ".spectrum-Swatch[disabled] .spectrum-Swatch-disabledIcon"
   "modifiers": [
+    "--mod-add-button-background",
+    "--mod-add-button-background-down",
+    "--mod-add-button-background-hover",
+    "--mod-add-button-background-keyboard-focus",
     "--mod-animation-duration-100",
+    "--mod-corner-radius-full",
+    "--mod-mixed-button-background",
+    "--mod-swatch-border",
     "--mod-swatch-border-color",
-    "--mod-swatch-border-color-light",
     "--mod-swatch-border-color-selected",
+    "--mod-swatch-border-opacity",
     "--mod-swatch-border-radius",
@@ -67,3 +80,2 @@ "--mod-swatch-border-thickness",
     "--mod-swatch-disabled-icon-size",
-    "--mod-swatch-focus-indicator-border-radius",
     "--mod-swatch-focus-indicator-color",
@@ -73,2 +85,3 @@ "--mod-swatch-focus-indicator-gap",
     "--mod-swatch-icon-border-color",
+    "--mod-swatch-icon-color",
     "--mod-swatch-inner-border-color-selected",
@@ -80,12 +93,12 @@ "--mod-swatch-size",
   "component": [
+    "--spectrum-swatch-border",
     "--spectrum-swatch-border-color",
-    "--spectrum-swatch-border-color-light",
     "--spectrum-swatch-border-color-selected",
+    "--spectrum-swatch-border-opacity",
     "--spectrum-swatch-border-radius",
     "--spectrum-swatch-border-thickness",
     "--spectrum-swatch-border-thickness-selected",
-    "--spectrum-swatch-dash-icon-color",
+    "--spectrum-swatch-disabled-icon-border-opacity",
     "--spectrum-swatch-disabled-icon-color",
     "--spectrum-swatch-disabled-icon-size",
-    "--spectrum-swatch-focus-indicator-border-radius",
     "--spectrum-swatch-focus-indicator-color",
@@ -95,3 +108,5 @@ "--spectrum-swatch-focus-indicator-gap",
     "--spectrum-swatch-icon-border-color",
+    "--spectrum-swatch-icon-color",
     "--spectrum-swatch-inner-border-color-selected",
+    "--spectrum-swatch-rectangle-width-multiplier",
     "--spectrum-swatch-size",
@@ -110,2 +125,6 @@ "--spectrum-swatch-size-extra-small",
   "global": [
+    "--spectrum-add-button-background",
+    "--spectrum-add-button-background-down",
+    "--spectrum-add-button-background-hover",
+    "--spectrum-add-button-background-keyboard-focus",
     "--spectrum-animation-duration-100",
@@ -115,12 +134,16 @@ "--spectrum-border-width-100",
     "--spectrum-corner-radius-100",
+    "--spectrum-corner-radius-full",
+    "--spectrum-corner-radius-none",
     "--spectrum-focus-indicator-color",
     "--spectrum-focus-indicator-gap",
     "--spectrum-focus-indicator-thickness",
+    "--spectrum-gray-100",
+    "--spectrum-gray-1000",
+    "--spectrum-gray-200",
     "--spectrum-gray-25",
-    "--spectrum-gray-800",
-    "--spectrum-gray-900",
+    "--spectrum-mixed-button-background",
+    "--spectrum-negative-visual-color",
+    "--spectrum-neutral-content-color-default",
     "--spectrum-picked-color",
-    "--spectrum-red-900",
     "--spectrum-white",
-    "--spectrum-workflow-icon-size-100",
     "--spectrum-workflow-icon-size-200",
@@ -137,4 +160,5 @@ "--spectrum-workflow-icon-size-50",
     "--highcontrast-swatch-fill-foreground-color",
-    "--highcontrast-swatch-focus-indicator-color"
+    "--highcontrast-swatch-focus-indicator-color",
+    "--highcontrast-swatch-icon-color"
   ]
 }

package.json

 {
 	"name": "@spectrum-css/swatch",
-	"version": "9.0.0-next.0",
+	"version": "9.0.0-next.1",
 	"description": "The Spectrum CSS Color swatch component",
@@ -41,3 +41,3 @@ "license": "Apache-2.0",
 		"@spectrum-css/opacitycheckerboard": "5.0.0-next.0",
-		"@spectrum-css/tokens": "16.1.0-next.0"
+		"@spectrum-css/tokens": "16.1.0-next.3"
 	},
@@ -44,0 +44,0 @@ "keywords": [

stories/swatch.stories.js

 import { Sizes } from "@spectrum-css/preview/decorators";
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
-import { isDisabled, isSelected, size } from "@spectrum-css/preview/types";
+import { isDisabled, isHovered, isActive, isKeyboardFocused, isSelected, size } from "@spectrum-css/preview/types";
 import metadata from "../dist/metadata.json";
 import packageJson from "../package.json";
 import { SwatchGroup } from "./swatch.test.js";
-import { BorderGroup, DisabledGroup, EmptyGroup, RoundingGroup, SizingGroup, Template } from "./template.js";
+import { DisabledGroup, EmptyGroup, RoundingGroup, SizingGroup, Template } from "./template.js";
 
@@ -15,2 +15,5 @@ /**
  * Set `--spectrum-picked-color` to customize the swatch fill background color.
+ *
+ * By default, swatches have a border with 42% opacity. However, when swatches are used within a swatch group, the default border opacity changes .
+ *
  */
@@ -24,3 +27,3 @@ export default {
 			name: "Color",
-			description: "Supports standard color input or any valid input for the <code>background</code> property such as, <code>linear-gradient(red, blue)</code>.",
+			description: "Supports standard color input or any valid input for the <code>background</code> property such as, <code>linear-gradient(red, blue)</code> or <code>transparent</code>.",
 			type: { name: "string", required: true },
@@ -43,17 +46,20 @@ table: {
 			},
-			options: ["none", "regular", "full"],
+			options: ["regular", "none", "full"],
 			control: "select",
 		},
-		isDisabled,
+		isDisabled: {
+			...isDisabled,
+			if: { arg: "isAddSwatch", truthy: false },
+			category: "State",
+		},
 		isSelected,
-		borderStyle: {
-			name: "Border style",
-			type: { name: "string" },
-			table: {
-				type: { summary: "string", required: true },
-				category: "Component",
-			},
-			options: ["default", "none", "light"],
-			control: "select",
+		isHovered: {
+			...isHovered,
+			if: { arg: "isAddSwatch", truthy: true },
 		},
+		isActive: {
+			...isActive,
+			if: { arg: "isAddSwatch", truthy: true },
+		},
+		isKeyboardFocused,
 		shape: {
@@ -91,3 +97,15 @@ name: "Swatch shape",
 			control: "boolean",
+			if: { arg: "isAddSwatch", truthy: false },
 		},
+		isAddSwatch: {
+			name: "Add swatch",
+			description: "A swatch that allows a user to add a new value.",
+			type: { name: "boolean" },
+			table: {
+				type: { summary: "boolean" },
+				category: "Component",
+			},
+			control: "boolean",
+			if: { arg: "isMixedValue", truthy: false },
+		},
 	},
@@ -99,7 +117,10 @@ args: {
 		isDisabled: false,
+		isHovered: false,
+		isActive: false,
+		isKeyboardFocused: false,
 		rounding: "regular",
 		swatchColor: "rgb(174, 216, 230)",
-		borderStyle: "default",
 		shape: "square",
 		isMixedValue: false,
+		isAddSwatch: false,
 	},
@@ -113,7 +134,11 @@ parameters: {
 		metadata,
+		status: {
+			type: "migrated",
+		},
 	},
+	tags: ["migrated"],
 };
 
 /**
- * The medium size is the default and most frequently used option. By default, a swatch has a square shape.
+ * The medium size is the default and most frequently used option. By default, a swatch has a square shape, with rounded corners.
  */
@@ -154,3 +179,3 @@ export const Default = SwatchGroup.bind({});
 /**
- * Default rounding and full rounding are usually used when a swatch is presented by itself near other components. A rounding of “none” is used in a swatch group to help minimize the Hermann grid illusion that happens at the intersections of white space in the group.
+ * Default rounding and full rounding are usually used when a swatch is presented by itself near other components. A rounding of "none" is used in a swatch group to help minimize the Hermann grid illusion that happens at the intersections of white space in the group.
  */
@@ -179,13 +204,2 @@ export const Rounding = RoundingGroup.bind({});
 /**
- * By default, swatches have a border. However, when swatches are used within a swatch group, there are additional border considerations.
- * - When color swatches are used in a [swatch group](?path=/docs/components-swatch-group--docs), they typically have the `.spectrum-Swatch--noBorder` class.
- * - When and only when color swatches used in a swatch group have low contrast (below 3:1 contrast with the background), those swatches will have a less prominent border compared to the swatch component when used by itself. They individually use the `.spectrum-Swatch--lightBorder` class.
- */
-export const Border = BorderGroup.bind({});
-Border.tags = ["!dev"];
-Border.parameters = {
-	chromatic: { disableSnapshot: true },
-};
-
-/**
  * Swatches can also have a rectangle shape with an aspect ratio of 2:1. The square shape is the default and is used in swatch groups (e.g., a palette of colors).
@@ -231,3 +245,21 @@ */
 };
+MixedValue.storyName = "Mixed value";
 
+/**
+ * When a swatch allows a user to add a new value, the preview shows a `gray-50` fill and an add UI icon.
+ */
+export const AddSwatch  = (args, context) => Sizes({
+	Template: DisabledGroup,
+	withHeading: false,
+	...args,
+}, context);
+AddSwatch.args = {
+	isAddSwatch: true,
+};
+AddSwatch.tags = ["!dev"];
+AddSwatch.parameters = {
+	chromatic: { disableSnapshot: true },
+};
+AddSwatch.storyName = "Add swatch";
+
 export const Gradient = Template.bind({});
@@ -234,0 +266,0 @@ Gradient.args = {

stories/swatch.test.js

@@ -22,3 +22,2 @@ import { Container, Variants } from "@spectrum-css/preview/decorators";
 				rounding: "none",
-				borderStyle: "noBorder",
 				swatchColor: "linear-gradient(to right, rgba(154, 116, 200, 0.5), rgb(174, 216, 230))",
@@ -29,3 +28,2 @@ }, context),
 				rounding: "full",
-				borderStyle: "lightBorder",
 				swatchColor: `center / contain no-repeat url("${exampleImage}")`,
@@ -39,2 +37,10 @@ }, context),
 				...args,
+				isDisabled: true,
+			}, context),
+			Template({
+				...args,
+				isAddSwatch: true,
+			}, context),
+			Template({
+				...args,
 				swatchColor: undefined,
@@ -68,2 +74,6 @@ imageUrl: undefined,
 		{
+			testHeading: "Regular rounding",
+			rounding: "regular"
+		},
+		{
 			testHeading: "Full rounding",
@@ -73,10 +83,2 @@ rounding: "full"
 		{
-			testHeading: "Light border",
-			borderStyle: "lightBorder",
-		},
-		{
-			testHeading: "No border",
-			borderStyle: "noBorder",
-		},
-		{
 			testHeading: "Shape: rectangle",
@@ -101,7 +103,5 @@ shape: "rectangle",
 		},
-	],
-	stateData: [
 		{
-			testHeading: "Disabled",
-			isDisabled: true,
+			testHeading: "Add",
+			isAddSwatch: true,
 		},
@@ -112,10 +112,34 @@ {
 			imageUrl: undefined,
-			isMixedValue: false,
-			borderStyle: "default",
 		},
+	],
+	stateData: [
 		{
+			testHeading: "Empty",
+			swatchColor: undefined,
+			imageUrl: undefined,
+			ignore: ["Mixed value", "Add", "Empty"]
+		},
+		{
 			testHeading: "Selected",
 			isSelected: true,
 		},
+		{
+			testHeading: "Keyboard focus",
+			isKeyboardFocused: true,
+		},
+		{
+			testHeading: "Disabled",
+			isDisabled: true,
+		},
+		{
+			testHeading: "Hovered",
+			isHovered: true,
+			include: ["Add"]
+		},
+		{
+			testHeading: "Active",
+			isActive: true,
+			include: ["Add"]
+		},
 	]
 });

stories/template.js

@@ -16,8 +16,11 @@ import { Template as Icon } from "@spectrum-css/icon/stories/template.js";
 	size = "m",
-	borderStyle = "default",
 	shape = "square",
 	imageUrl,
 	isMixedValue = false,
+	isAddSwatch = false,
 	isSelected = false,
 	isDisabled = false,
+	isHovered = false,
+	isActive = false,
+	isKeyboardFocused = false,
 	rounding = "regular",
@@ -31,11 +34,7 @@ customClasses = [],
 
-	switch (borderStyle) {
-		case "none":
-			borderStyle = "noBorder";
-			break;
-		case "light":
-			borderStyle = "lightBorder";
-			break;
-	}
+	let pickedColor = swatchColor;
 
+	if (isMixedValue) pickedColor = "var(--spectrum-gray-25)";
+	if (isAddSwatch) pickedColor = undefined;
+
 	return html`
@@ -49,8 +48,11 @@ <div
 							lowerCase(rounding)
-						)}`]: typeof rounding !== "undefined" && rounding !== "regular",
-				[`${rootClass}--${borderStyle}`]: typeof borderStyle !== "undefined" && borderStyle !== "default",
+						)}`]: typeof rounding !== "undefined" && rounding !== "partial",
 				"is-selected": !isDisabled && isSelected,
 				"is-disabled": isDisabled,
-				"is-image": isMixedValue || typeof imageUrl !== "undefined",
-				"is-mixedValue": !isDisabled && isMixedValue,
+				"is-hover": isHovered,
+				"is-active": isActive,
+				"is-keyboardFocused": isKeyboardFocused,
+				"is-image": (isMixedValue || isAddSwatch) || typeof imageUrl !== "undefined",
+				"is-mixedValue": !isDisabled && !isAddSwatch && isMixedValue,
+				"is-addSwatch": !isDisabled && !isMixedValue && isAddSwatch,
 				[`${rootClass}--rectangle`]: typeof shape !== "undefined" && shape !== "square",
@@ -63,3 +65,3 @@ "is-nothing": !isDisabled && (typeof swatchColor === "undefined" || swatchColor === "transparent"),
 			style=${ifDefined(styleMap({
-				"--spectrum-picked-color": isMixedValue ? "var(--spectrum-gray-50)" : swatchColor,
+				"--spectrum-picked-color": pickedColor,
 				...customStyles,
@@ -79,3 +81,3 @@ }))}
 		>
-			${when((typeof imageUrl !== "undefined") && !isDisabled && !isMixedValue, () => html`
+			${when((typeof imageUrl !== "undefined") && !isDisabled && !isMixedValue && !isAddSwatch, () => html`
 				${when(imageUrl, () => html`
@@ -112,3 +114,3 @@ <div class="${rootClass}-fill" >
 							...(isMixedValue ? [Icon({
-								customClasses: [`${rootClass}-mixedValueIcon`],
+								customClasses: [`${rootClass}-icon`],
 								setName: "ui",
@@ -123,2 +125,14 @@ iconName: "Dash" + ({
 							}, context)] : []),
+							...(isAddSwatch ? [Icon({
+								customClasses: [`${rootClass}-icon`],
+								setName: "ui",
+								size,
+								iconName: "Add" + ({
+									xs: "75",
+									s: "75",
+									m: "100",
+									l: "200",
+								}[size] || "100"),
+								useRef: false,
+							}, context)] : []),
 						]
@@ -133,7 +147,6 @@ })}
 export const RoundingGroup = (args, context) => Container({
-	withBorder: false,
 	content: html`
 		${Container({
 			withBorder: false,
-			heading: "Regular",
+			heading: "Regular (Default)",
 			containerStyles: { "gap": "8px" },
@@ -157,30 +170,4 @@ content: Template(args, context),
 
-/* Shows a single group of swatches with all border options. */
-export const BorderGroup = (args, context) => Container({
-	withBorder: false,
-	content: html`
-		${Container({
-			withBorder: false,
-			heading: "Default",
-			containerStyles: { "gap": "8px" },
-			content: Template(args, context),
-		}, context)}
-		${Container({
-			withBorder: false,
-			heading: "No border",
-			containerStyles: { "gap": "8px" },
-			content: Template({...args, borderStyle: "noBorder"}, context),
-		}, context)}
-		${Container({
-			withBorder: false,
-			heading: "Light Border",
-			containerStyles: { "gap": "8px" },
-			content: Template({...args, borderStyle: "lightBorder"}, context),
-		}, context)}
-	`
-}, context);
-
 /* Shows a single group of swatches that are empty/nothing in various shapes and rounding. */
 export const EmptyGroup = (args, context) => Container({
-	withBorder: false,
 	content: html`
@@ -207,3 +194,2 @@ ${Container({
 export const DisabledGroup = (args, context) => Container({
-	withBorder: false,
 	content: html`
@@ -224,3 +210,2 @@ ${Container({
 export const SizingGroup = (args, context) =>Container({
-	withBorder: false,
 	content: html`
@@ -227,0 +212,0 @@ ${Container({

No alert changes

Improved metrics

Total package byte prevSize

106085

8.55%

Lines of code

1390

7.42%

Worsened metrics

Number of package files

11

-21.43%

No dependency changes