chore(swatch+swatchgroup): swap none to partial rounding as the default; add missing isAddSwatch arg for swatchgroup story

Author: cdransf

components/swatch/dist/metadata.json

@@ -15,13 +15,13 @@
     ".spectrum-Swatch--roundingFull:not(.spectrum-Swatch--rectangle) .spectrum-Swatch-fill:before",
     ".spectrum-Swatch--roundingFull:not(.spectrum-Swatch--rectangle):after",
     ".spectrum-Swatch--roundingFull:not(.spectrum-Swatch--rectangle):before",
-    ".spectrum-Swatch--roundingPartial",
-    ".spectrum-Swatch--roundingPartial .spectrum-Swatch-fill",
-    ".spectrum-Swatch--roundingPartial .spectrum-Swatch-fill:before",
-    ".spectrum-Swatch--roundingPartial.is-selected .spectrum-Swatch-fill",
-    ".spectrum-Swatch--roundingPartial.is-selected .spectrum-Swatch-fill:before",
-    ".spectrum-Swatch--roundingPartial:after",
-    ".spectrum-Swatch--roundingPartial:before",
+    ".spectrum-Swatch--roundingNone",
+    ".spectrum-Swatch--roundingNone .spectrum-Swatch-fill",
+    ".spectrum-Swatch--roundingNone .spectrum-Swatch-fill:before",
+    ".spectrum-Swatch--roundingNone.is-selected .spectrum-Swatch-fill",
+    ".spectrum-Swatch--roundingNone.is-selected .spectrum-Swatch-fill:before",
+    ".spectrum-Swatch--roundingNone:after",
+    ".spectrum-Swatch--roundingNone:before",
     ".spectrum-Swatch--sizeL",
     ".spectrum-Swatch--sizeM",
     ".spectrum-Swatch--sizeXS",

components/swatch/index.css

@@ -19,7 +19,7 @@
 
 	/* Size */
 	--spectrum-swatch-size: var(--mod-swatch-size, var(--spectrum-swatch-size-small));
-	--spectrum-swatch-border-radius: var(--mod-swatch-border-radius, var(--spectrum-corner-radius-none));
+	--spectrum-swatch-border-radius: var(--mod-swatch-border-radius, var(--spectrum-corner-radius-75));
 	--spectrum-swatch-border-thickness: var(--mod-swatch-border-thickness, var(--spectrum-border-width-100));
 	--spectrum-swatch-border-thickness-selected: var(--mod-swatch-border-thickness-selected, var(--spectrum-border-width-200));
 	--spectrum-swatch-disabled-icon-size: var(--mod-swatch-disabled-icon-size, var(--spectrum-workflow-icon-size-75));
@@ -328,16 +328,16 @@
 	inline-size: calc(var(--spectrum-swatch-size) * var(--spectrum-swatch-rectangle-width-multiplier));
 }
 
-/* Variant: Rounding - Partial */
-.spectrum-Swatch--roundingPartial {
+/* Variant: Rounding - None */
+.spectrum-Swatch--roundingNone {
 	&,
 	&::before,
 	&::after,
 	.spectrum-Swatch-fill,
 	.spectrum-Swatch-fill::before,
 	&.is-selected .spectrum-Swatch-fill,
 	&.is-selected .spectrum-Swatch-fill::before {
-		border-radius: var(--mod-swatch-border-radius, var(--spectrum-corner-radius-75));
+		border-radius: var(--mod-swatch-border-radius, var(--spectrum-corner-radius-none));
 	}
 }
 

components/swatch/stories/swatch.stories.js

@@ -31,14 +31,14 @@ export default {
 		rounding: {
 			name: "Rounding",
 			description: "The amount of corner rounding for a swatch.",
-			defaultValue: "regular",
+			defaultValue: "partial",
 			type: { name: "string" },
 			table: {
 				type: { summary: "string", required: true },
 				category: "Component",
-				defaultValue: { summary: "regular", },
+				defaultValue: { summary: "partial", },
 			},
-			options: ["regular", "partial", "full"],
+			options: ["partial", "none", "full"],
 			control: "select",
 		},
 		isDisabled,
@@ -111,7 +111,7 @@ export default {
 		isDisabled: false,
 		isHovered: false,
 		isKeyboardFocused: false,
-		rounding: "regular",
+		rounding: "partial",
 		swatchColor: "rgb(174, 216, 230)",
 		borderStyle: "default",
 		shape: "square",
@@ -165,7 +165,7 @@ Disabled.parameters = {
 };
 
 /**
- * Full rounding is usually used when a swatch is presented by itself near other components.
+ * 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.
  */
 export const Rounding = RoundingGroup.bind({});
 Rounding.tags = ["!dev"];

components/swatch/stories/template.js

@@ -22,7 +22,7 @@ export const Template = ({
 	isDisabled = false,
 	isHovered = false,
 	isKeyboardFocused = false,
-	rounding = "regular",
+	rounding = "partial",
 	customClasses = [],
 	swatchColor,
 	customStyles = {},
@@ -55,7 +55,7 @@ export const Template = ({
 					typeof size !== "undefined",
 				[`${rootClass}--rounding${capitalize(
 							lowerCase(rounding)
-						)}`]: typeof rounding !== "undefined" && rounding !== "regular",
+						)}`]: typeof rounding !== "undefined" && rounding !== "partial",
 				[`${rootClass}--${borderStyle}`]: typeof borderStyle !== "undefined" && borderStyle !== "default",
 				"is-selected": !isDisabled && isSelected,
 				"is-disabled": isDisabled,

components/swatchgroup/stories/swatchgroup.stories.js

@@ -51,13 +51,14 @@ export default {
 		},
 		rounding: {
 			...Swatch.argTypes.rounding,
-			defaultValue: "regular",
+			defaultValue: "partial",
 			table: {
 				type: { summary: "string", required: true },
 				category: "Component",
-				defaultValue: { summary: "regular", },
+				defaultValue: { summary: "partial", },
 			},
 		},
+		isKeyboardFocused: { table: { disable: true } },
 		borderStyle: {
 			...Swatch.argTypes.borderStyle,
 			defaultValue: "noBorder",
@@ -75,11 +76,12 @@ export default {
 		rootClass: "spectrum-SwatchGroup",
 		size: "m",
 		density: "regular",
-		rounding: "regular",
+		rounding: "partial",
 		borderStyle: "noBorder",
 		containerWidth: "200px",
 		isDisabled: false,
 		isSelected: false,
+		isAddSwatch: false,
 		items: [
 			{swatchColor: "rgb(184, 109, 70)",},
 			{swatchColor: "rgb(240, 56, 35)",},

components/swatchgroup/stories/template.js

@@ -12,7 +12,7 @@ export const Template = ({
 	customClasses = [],
 	size = "m",
 	density = "regular",
-	rounding = "regular",
+	rounding = "partial",
 	borderStyle = "noBorder",
 	containerWidth,
 	items = [],
@@ -62,11 +62,11 @@ export const RoundingTemplate = (args, context) => Container({
 		}, context)}
 		${Container({
 			withBorder: false,
-			heading: "Regular",
+			heading: "Partial",
 			containerStyles: {"gap": "8px",},
 			content: Template({
 				...args,
-				rounding: "regular",
+				rounding: "partial",
 			}, context)
 		}, context)}
 		${Container({