fix(swatch+swatchgroup): split medium + large sizing back out

Author: cdransf

.changeset/proud-schools-reply.md

@@ -24,7 +24,6 @@ An `Add Swatch` variant has been added with the required color tokens and the sp
 `--spectrum-swatch-icon-color`
 `--spectrum-swatch-rectangle-width-multiplier`
 `--spectrum-swatchgroup-border-color`
-`--spectrum-swatchgroup-spacing-mediumLarge`
 
 ##### New mods
 

components/swatchgroup/dist/metadata.json

@@ -2,18 +2,17 @@
   "sourceFile": "index.css",
   "selectors": [
     ".spectrum-SwatchGroup",
-    ".spectrum-SwatchGroup--mediumLarge",
+    ".spectrum-SwatchGroup--sizeL",
+    ".spectrum-SwatchGroup--sizeM",
     ".spectrum-SwatchGroup--spacious"
   ],
   "modifiers": [
     "--mod-swatch-group-spacing-spacious",
-    "--mod-swatchgroup-spacing",
-    "--mod-swatchgroup-spacing-mediumLarge"
+    "--mod-swatchgroup-spacing"
   ],
   "component": [
     "--spectrum-swatch-group-spacing-spacious",
-    "--spectrum-swatchgroup-spacing",
-    "--spectrum-swatchgroup-spacing-mediumLarge"
+    "--spectrum-swatchgroup-spacing"
   ],
   "global": ["--spectrum-spacing-100", "--spectrum-spacing-75"],
   "passthroughs": [],

components/swatchgroup/index.css

@@ -13,7 +13,6 @@
 
 .spectrum-SwatchGroup {
 	--spectrum-swatchgroup-spacing: var(--spectrum-spacing-75);
-	--spectrum-swatchgroup-spacing-mediumLarge: var(--spectrum-spacing-100);
 }
 
 .spectrum-SwatchGroup {
@@ -29,7 +28,12 @@
 	--mod-swatchgroup-spacing: var(--mod-swatch-group-spacing-spacious, var(--spectrum-swatch-group-spacing-spacious));
 }
 
-/* Medium/large */
-.spectrum-SwatchGroup--mediumLarge {
+/* Medium */
+.spectrum-SwatchGroup--sizeM {
+	--spectrum-swatchgroup-spacing: var(--spectrum-spacing-100);
+}
+
+/* Large */
+.spectrum-SwatchGroup--sizeL {
 	--spectrum-swatchgroup-spacing: var(--spectrum-spacing-100);
 }

components/swatchgroup/stories/swatchgroup.stories.js

@@ -19,7 +19,7 @@ import { RoundingTemplate, Template } from "./template.js";
  *
  * ### Density
  *
- * Swatch groups come in 3 densities: regular (default), compact, and spacious. Compact and spacious densities retain the same swatch size as regular density, but have less or more padding between each swatch, respectively.
+ * Swatch groups come in several densities: regular (default), spacious, medium and large. Each density retains the same swatch size, but have less or more padding between each swatch, respectively.
  */
 export default {
 	title: "Swatch group",
@@ -42,7 +42,7 @@ export default {
 				type: { summary: "string" },
 				category: "Component",
 			},
-			options: ["regular", "spacious", "mediumLarge"],
+			options: ["regular", "spacious", "sizeM", "sizeL"],
 			control: "select",
 		},
 		items: {
@@ -124,15 +124,15 @@ export const Default = SwatchgroupGroup.bind({});
 Default.args = {};
 
 // ********* DOCS ONLY ********* //
-export const MediumLarge = Template.bind({});
-MediumLarge.args = {
-	density: "mediumLarge",
+export const Medium = Template.bind({});
+Medium.args = {
+	density: "sizeM",
 };
-MediumLarge.tags = ["!dev"];
-MediumLarge.parameters = {
+Medium.tags = ["!dev"];
+Medium.parameters = {
 	chromatic: { disableSnapshot: true },
 };
-MediumLarge.storyName = "Density - medium/large";
+Medium.storyName = "Density - Medium";
 
 export const Spacious = Template.bind({});
 Spacious.args = {

components/swatchgroup/stories/swatchgroup.test.js

@@ -12,8 +12,12 @@ export const SwatchgroupGroup = Variants({
 			density: "spacious",
 		},
 		{
-			testHeading: "Medium/large",
-			density: "mediumLarge",
+			testHeading: "Medium",
+			density: "sizeM",
+		},
+		{
+			testHeading: "Large",
+			density: "sizeL",
 		},
 		{
 			testHeading: "Full rounding",