fix(swatch+swatchgroup): remove unnecessary borderStyle references, set default size to m, additional cleanup

Author: cdransf

.changeset/proud-schools-reply.md

@@ -13,7 +13,7 @@ The `Add Swatch` and `Mixed Value` variants may not be combined with background
 
 The `spectrum-Swatch-icon` is used to set the expected color to icons contained within the swatch.
 
-The border should not be set when the swatch is selected as the border conflicts with the display of the selected state.
+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
 

components/swatch/dist/metadata.json

@@ -20,7 +20,7 @@
     ".spectrum-Swatch--roundingNone:after",
     ".spectrum-Swatch--roundingNone:before",
     ".spectrum-Swatch--sizeL",
-    ".spectrum-Swatch--sizeM",
+    ".spectrum-Swatch--sizeS",
     ".spectrum-Swatch--sizeXS",
     ".spectrum-Swatch-disabledIcon",
     ".spectrum-Swatch-disabledIcon path:first-child",
@@ -120,7 +120,7 @@
     "--spectrum-animation-duration-100",
     "--spectrum-border-width-100",
     "--spectrum-border-width-200",
-    "--spectrum-corner-radius-75",
+    "--spectrum-corner-radius-100",
     "--spectrum-corner-radius-full",
     "--spectrum-corner-radius-none",
     "--spectrum-focus-indicator-color",
@@ -135,7 +135,6 @@
     "--spectrum-neutral-content-color-default",
     "--spectrum-picked-color",
     "--spectrum-white",
-    "--spectrum-workflow-icon-size-100",
     "--spectrum-workflow-icon-size-200",
     "--spectrum-workflow-icon-size-50",
     "--spectrum-workflow-icon-size-75"

components/swatch/index.css

@@ -11,18 +11,17 @@
  * governing permissions and limitations under the License.
  */
 
-/* @note: default sizing for swatch is small */
 .spectrum-Swatch {
 	/* Placeholder tokens */
 	--spectrum-swatch-icon-border-color: var(--mod-swatch-icon-border-color, rgb(0 0 0 / var(--spectrum-swatch-disabled-icon-border-opacity)));
 
 	/* 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-75));
+	--spectrum-swatch-size: var(--mod-swatch-size, var(--spectrum-swatch-size-medium));
+	--spectrum-swatch-border-radius: var(--mod-swatch-border-radius, var(--spectrum-corner-radius-100));
 	--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));
-	--spectrum-swatch-slash-thickness: var(--mod-swatch-slash-thickness, var(--spectrum-swatch-slash-thickness-small));
+	--spectrum-swatch-slash-thickness: var(--mod-swatch-slash-thickness, var(--spectrum-swatch-slash-thickness-medium));
 
 	/* Color */
 	--spectrum-swatch-border-color-selected: var(--highcontrast-swatch-border-color-selected, var(--mod-swatch-border-color-selected, var(--spectrum-gray-1000)));
@@ -64,10 +63,10 @@
 	--spectrum-swatch-slash-thickness: var(--mod-swatch-slash-thickness, var(--spectrum-swatch-slash-thickness-extra-small));
 }
 
-.spectrum-Swatch--sizeM {
-	--spectrum-swatch-size: var(--mod-swatch-size, var(--spectrum-swatch-size-medium));
-	--spectrum-swatch-disabled-icon-size: var(--mod-swatch-disabled-icon-size, var(--spectrum-workflow-icon-size-100));
-	--spectrum-swatch-slash-thickness: var(--mod-swatch-slash-thickness, var(--spectrum-swatch-slash-thickness-medium));
+.spectrum-Swatch--sizeS {
+	--spectrum-swatch-size: var(--mod-swatch-size, var(--spectrum-swatch-size-small));
+	--spectrum-swatch-disabled-icon-size: var(--mod-swatch-disabled-icon-size, var(--spectrum-workflow-icon-size-75));
+	--spectrum-swatch-slash-thickness: var(--mod-swatch-slash-thickness, var(--spectrum-swatch-slash-thickness-small));
 }
 
 .spectrum-Swatch--sizeL {

components/swatch/stories/swatch.stories.js

@@ -47,6 +47,7 @@ export default {
 		isDisabled: {
 			...isDisabled,
 			if: { arg: "isAddSwatch", truthy: false },
+			category: "State",
 		},
 		isSelected,
 		isHovered: {

components/swatch/stories/template.js

@@ -13,7 +13,6 @@ import "../index.css";
 export const Template = ({
 	rootClass = "spectrum-Swatch",
 	size = "m",
-	borderStyle = "default",
 	shape = "square",
 	imageUrl,
 	isMixedValue = false,
@@ -31,18 +30,6 @@ export const Template = ({
 } = {}, context = {}) => {
 	const { updateArgs } = context;
 
-	switch (borderStyle) {
-		case "none":
-			borderStyle = "noBorder";
-			break;
-		case "border":
-			borderStyle = "border";
-			break;
-		case "light":
-			borderStyle = "lightBorder";
-			break;
-	}
-
 	let pickedColor = swatchColor;
 
 	if (isMixedValue) pickedColor = "var(--spectrum-gray-25)";
@@ -57,7 +44,6 @@ export const Template = ({
 				[`${rootClass}--rounding${capitalize(
 							lowerCase(rounding)
 						)}`]: typeof rounding !== "undefined" && rounding !== "partial",
-				[`${rootClass}--${borderStyle}`]: typeof borderStyle !== "undefined" && borderStyle !== "default",
 				"is-selected": !isDisabled && isSelected,
 				"is-disabled": isDisabled,
 				"is-hover": isHovered,
@@ -146,7 +132,6 @@ export const Template = ({
 
 /* Shows a single group of swatches with all rounding options. */
 export const RoundingGroup = (args, context) => Container({
-	withBorder: false,
 	content: html`
 		${Container({
 			withBorder: false,
@@ -169,34 +154,8 @@ export const RoundingGroup = (args, context) => Container({
 	`
 }, 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`
 		${Container({
 			withBorder: false,
@@ -218,7 +177,6 @@ export const EmptyGroup = (args, context) => Container({
 
 /* Shows a single group of disabled swatches. */
 export const DisabledGroup = (args, context) => Container({
-	withBorder: false,
 	content: html`
 		${Container({
 			withBorder: false,
@@ -234,7 +192,6 @@ export const DisabledGroup = (args, context) => Container({
 }, context);
 
 export const SizingGroup = (args, context) =>Container({
-	withBorder: false,
 	content: html`
 		${Container({
 			withBorder: false,

components/swatchgroup/stories/swatchgroup.stories.js

@@ -11,14 +11,14 @@ import { RoundingTemplate, Template } from "./template.js";
  *
  * ## Usage notes
  *
- *  * ### Corner rounding in swatch groups
+ * The border opacity of swatches in a swatch group is 20%.
+ *
+ * ### Corner rounding in swatch groups
  *
  * A corner rounding of "none" (`.spectrum-Swatch--roundingNone` class) should be used in a swatch group in order to help minimize the Hermann grid illusion that happens at the intersections of the white space within the group.
  *
  * The only exception is when a swatch group only takes up a single row. In that case, use any of the rounding options.
  *
- * The border opacity of swatches in a swatch group is 20%.
- *
  * ### Density
  *
  * Swatch groups come in several densities: regular (default), compact and spacious. Each density retains the same swatch size, but have less or more padding between each swatch, respectively.
@@ -64,12 +64,12 @@ export default {
 				defaultValue: { summary: "none", },
 			},
 		},
-		tags: ["migrated"],
 	},
 	args: {
 		rootClass: "spectrum-SwatchGroup",
 		containerWidth: "200px",
 		density: "regular",
+		size: "m",
 		rounding: "none",
 		items: [
 			{swatchColor: "rgb(184, 109, 70)",},

components/swatchgroup/stories/swatchgroup.test.js

@@ -5,18 +5,18 @@ export const SwatchgroupGroup = Variants({
 	Template,
 	testData: [
 		{
-			testHeading: "Default",
+			testHeading: "Default (regular density)",
 		},
 		{
-			testHeading: "Small size (compact density)",
+			testHeading: "Compact density",
 			density: "compact",
 		},
 		{
-			testHeading: "Full rounding",
+			testHeading: "Full rounding (regular density)",
 			rounding: "full",
 		},
 		{
-			testHeading: "Regular rounding",
+			testHeading: "Regular rounding (regular density)",
 			rounding: "regular",
 		},
 	],

components/swatchgroup/stories/template.js

@@ -13,7 +13,6 @@ export const Template = ({
 	size = "m",
 	density = "regular",
 	rounding = "none",
-	borderStyle = "noBorder",
 	containerWidth,
 	items = [],
 	customStyles = {},
@@ -36,7 +35,6 @@ export const Template = ({
 		${items.map((swatch) => Swatch({
 			size,
 			rounding,
-			borderStyle,
 			...swatch,
 		}, context))}
 	</div>