feat(actiongroup)!: migrate to S2 (#2453)

BREAKING CHANGE: migrates `Action Group` to Spectrum 2, Removes some mod properties
adobe · Dec 29, 2024 · 54f276f · 54f276f
1 parent 72dd36b
commit 54f276f
Show file tree

Hide file tree

Showing 8 changed files with 33 additions and 130 deletions.
diff --git a/components/actiongroup/index.css b/components/actiongroup/index.css
@@ -11,12 +11,10 @@
  * governing permissions and limitations under the License.
  */
 
-@import "./themes/spectrum-two.css";
-
 .spectrum-ActionGroup {
-	--spectrum-actiongroup-button-spacing-reset: 0;
-	--spectrum-actiongroup-border-radius-reset: 0;
-	--spectrum-actiongroup-border-radius: var(--spectrum-corner-radius-100);
+  --spectrum-actiongroup-border-radius-reset: 0;
+  --spectrum-actiongroup-border-radius: var(--spectrum-corner-radius-100);
+  --spectrum-actiongroup-gap-size-compact: var(--spectrum-spacing-50);
 }
 
 .spectrum-ActionGroup--sizeXS,
@@ -75,28 +73,17 @@
 			/* @passthrough -- Action button styling */
 			--mod-actionbutton-focus-indicator-border-radius: var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)) 0px 0px var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius));
 
-			border-start-start-radius: var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius));
-			border-end-start-radius: var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius));
-			margin-inline-start: var(--mod-actiongroup-button-spacing-reset, var(--spectrum-actiongroup-button-spacing-reset));
-		}
-
-		& + .spectrum-ActionGroup-item {
-			/* @passthrough -- Action button styling */
-			--mod-actionbutton-focus-indicator-border-radius: 0px;
+      border-start-start-radius: var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius));
+      border-end-start-radius: var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius));
+    }
 
-			margin-inline-start: var(--mod-actiongroup-horizontal-spacing-compact, var(--spectrum-actiongroup-horizontal-spacing-compact));
-			margin-inline-end: var(--mod-actiongroup-horizontal-spacing-compact, var(--spectrum-actiongroup-horizontal-spacing-compact));
-		}
-
-		&:last-child {
-			/* @passthrough -- Action button styling */
-			--mod-actionbutton-focus-indicator-border-radius: 0px var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)) var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)) 0px;
+    &:last-child {
+      /* Action button passthrough styling */
+      --mod-actionbutton-focus-indicator-border-radius: 0px var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)) var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)) 0px;
 
-			border-start-end-radius: var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius));
-			border-end-end-radius: var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius));
-			margin-inline-start: var(--mod-actiongroup-horizontal-spacing-compact, var(--spectrum-actiongroup-horizontal-spacing-compact));
-			margin-inline-end: var(--mod-actiongroup-border-radius-reset, var(--spectrum-actiongroup-border-radius-reset));
-		}
+      border-start-end-radius: var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius));
+      border-end-end-radius: var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius));
+    }
 
 		&.is-selected {
 			z-index: 1;
@@ -127,30 +114,18 @@
 			/* @passthrough -- Action button styling */
 			--mod-actionbutton-focus-indicator-border-radius: var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)) var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)) 0px 0px;
 
-			border-start-start-radius: var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius));
-			border-start-end-radius: var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius));
-			margin-inline-end: var(--mod-actiongroup-button-spacing-reset, var(--spectrum-actiongroup-button-spacing-reset));
-			margin-block-start: var(--mod-actiongroup-vertical-spacing-compact, var(--spectrum-actiongroup-vertical-spacing-compact));
-			margin-block-end: var(--mod-actiongroup-vertical-spacing-compact, var(--spectrum-actiongroup-vertical-spacing-compact));
-		}
+      border-start-start-radius: var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius));
+      border-start-end-radius: var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius));
+    }
 
-		& + .spectrum-ActionGroup-item {
-			margin-inline-start: var(--mod-actiongroup-button-spacing-reset, var(--spectrum-actiongroup-button-spacing-reset));
-			margin-inline-end: var(--mod-actiongroup-button-spacing-reset, var(--spectrum-actiongroup-button-spacing-reset));
-			margin-block-start: var(--mod-actiongroup-button-spacing-reset, var(--spectrum-actiongroup-button-spacing-reset));
-			margin-block-end: var(--mod-actiongroup-vertical-spacing-compact, var(--spectrum-actiongroup-vertical-spacing-compact));
-		}
+    &:last-child {
+      /* Action button passthrough styling */
+      --mod-actionbutton-focus-indicator-border-radius: 0px 0px var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)) var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius));
 
-		&:last-child {
-			/* @passthrough -- Action button styling */
-			--mod-actionbutton-focus-indicator-border-radius: 0px 0px var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)) var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius));
-
-			border-end-start-radius: var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius));
-			border-end-end-radius: var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius));
-			margin-block-start: var(--mod-actiongroup-vertical-spacing-compact, var(--spectrum-actiongroup-vertical-spacing-compact));
-			margin-block-end: var(--mod-actiongroup-button-spacing-reset, var(--spectrum-actiongroup-button-spacing-reset));
-		}
-	}
+      border-end-start-radius: var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius));
+      border-end-end-radius: var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius));
+    }
+  }
 }
 
 .spectrum-ActionGroup--justified .spectrum-ActionGroup-item {

diff --git a/components/actiongroup/metadata/metadata.json b/components/actiongroup/metadata/metadata.json
@@ -7,12 +7,10 @@
     ".spectrum-ActionGroup--compact",
     ".spectrum-ActionGroup--compact.spectrum-ActionGroup--vertical:not(.spectrum-ActionGroup--quiet)",
     ".spectrum-ActionGroup--compact.spectrum-ActionGroup--vertical:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item",
-    ".spectrum-ActionGroup--compact.spectrum-ActionGroup--vertical:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item + .spectrum-ActionGroup-item",
     ".spectrum-ActionGroup--compact.spectrum-ActionGroup--vertical:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:first-child",
     ".spectrum-ActionGroup--compact.spectrum-ActionGroup--vertical:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:last-child",
     ".spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet)",
     ".spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item",
-    ".spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item + .spectrum-ActionGroup-item",
     ".spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item .spectrum-ActionButton-label",
     ".spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item.is-selected",
     ".spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:first-child",
@@ -31,33 +29,24 @@
   "modifiers": [
     "--mod-actiongroup-border-radius",
     "--mod-actiongroup-border-radius-reset",
-    "--mod-actiongroup-button-spacing-reset",
     "--mod-actiongroup-gap-size-compact",
-    "--mod-actiongroup-horizontal-spacing-compact",
     "--mod-actiongroup-horizontal-spacing-regular",
-    "--mod-actiongroup-vertical-spacing-compact",
     "--mod-actiongroup-vertical-spacing-regular"
   ],
   "component": [
     "--spectrum-actiongroup-border-radius",
     "--spectrum-actiongroup-border-radius-reset",
-    "--spectrum-actiongroup-button-spacing-reset",
     "--spectrum-actiongroup-gap-size-compact",
-    "--spectrum-actiongroup-horizontal-spacing-compact",
     "--spectrum-actiongroup-horizontal-spacing-regular",
-    "--spectrum-actiongroup-vertical-spacing-compact",
     "--spectrum-actiongroup-vertical-spacing-regular"
   ],
   "global": [
     "--spectrum-corner-radius-100",
     "--spectrum-spacing-100",
+    "--spectrum-spacing-50",
     "--spectrum-spacing-75"
   ],
-  "system-theme": [
-    "--system-action-group-gap-size-compact",
-    "--system-action-group-horizontal-spacing-compact",
-    "--system-action-group-vertical-spacing-compact"
-  ],
+  "system-theme": [],
   "passthroughs": ["--mod-actionbutton-focus-indicator-border-radius"],
   "high-contrast": []
 }
diff --git a/components/actiongroup/metadata/mods.md b/components/actiongroup/metadata/mods.md
@@ -2,9 +2,6 @@
 | ---------------------------------------------- |
 | `--mod-actiongroup-border-radius`              |
 | `--mod-actiongroup-border-radius-reset`        |
-| `--mod-actiongroup-button-spacing-reset`       |
 | `--mod-actiongroup-gap-size-compact`           |
-| `--mod-actiongroup-horizontal-spacing-compact` |
 | `--mod-actiongroup-horizontal-spacing-regular` |
-| `--mod-actiongroup-vertical-spacing-compact`   |
 | `--mod-actiongroup-vertical-spacing-regular`   |
diff --git a/components/actiongroup/stories/actiongroup.stories.js b/components/actiongroup/stories/actiongroup.stories.js
@@ -279,6 +279,15 @@ JustifiedIconOnlyCompact.parameters = {
 	chromatic: { disableSnapshot: true },
 };
 
+export const Quiet = Template.bind({});
+Quiet.tags = ["!dev"];
+Quiet.args = {
+    areQuiet: true,
+};
+Quiet.parameters = {
+	chromatic: { disableSnapshot: true },
+};
+
 /**
  * When space is limited in an action group, there are 2 options for the group's overflow behavior: wrap or collapse. By default, an action group is set to wrap, meaning that the action buttons inside the group wrap to form another line. Alternatively, an action group can be set to collapse inside a **More (...)** action button.
 */

diff --git a/components/actiongroup/stories/template.js b/components/actiongroup/stories/template.js
@@ -6,9 +6,6 @@ import { styleMap } from "lit/directives/style-map.js";
 import { capitalize } from "lodash-es";
 
 import "../index.css";
-import "../themes/spectrum.css";
-/* Must be imported last */
-import "../themes/express.css";
 
 export const Template = ({
 	rootClass = "spectrum-ActionGroup",

diff --git a/components/actiongroup/themes/express.css b/components/actiongroup/themes/express.css
diff --git a/components/actiongroup/themes/spectrum-two.css b/components/actiongroup/themes/spectrum-two.css
diff --git a/components/actiongroup/themes/spectrum.css b/components/actiongroup/themes/spectrum.css