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

BREAKING CHANGE: migrates `Action Group` to Spectrum 2, Removes some mod properties

Author: Melissa Thompson

components/actiongroup/index.css

@@ -14,6 +14,7 @@ governing permissions and limitations under the License.
   --spectrum-actiongroup-button-spacing-reset: 0;
   --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,
@@ -36,7 +37,7 @@ governing permissions and limitations under the License.
 
   .spectrum-ActionGroup-item {
     flex-shrink: 0;
-    
+
     /* Focus indicator should appear above hovered and selected borders */
     &:focus-visible {
       z-index: 3;
@@ -74,15 +75,6 @@ governing permissions and limitations under the License.
 
       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 {
-      /* Action button passthrough styling */
-      --mod-actionbutton-focus-indicator-border-radius: 0px;
-
-      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 {
@@ -91,8 +83,6 @@ governing permissions and limitations under the License.
 
       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));
     }
 
     &.is-selected {
@@ -126,16 +116,6 @@ governing permissions and limitations under the License.
 
       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));
-    }
-
-    & + .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 {
@@ -144,8 +124,6 @@ governing permissions and limitations under the License.
 
       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));
     }
   }
 }

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`   |

components/actiongroup/stories/actiongroup.stories.js

@@ -119,8 +119,22 @@ Justified.args = {
 	content: items
 };
 
+export const JustifiedCompact = Template.bind({});
+JustifiedCompact.args = {
+	justified: true,
+	compact: true,
+	content: items,
+};
+
 export const Quiet = Template.bind({});
 Quiet.args = {
 	areQuiet: true,
 	content: items
 };
+
+export const QuietCompact = Template.bind({});
+QuietCompact.args = {
+	areQuiet: true,
+	compact: true,
+	content: items,
+};

components/actiongroup/themes/express.css

@@ -11,11 +11,4 @@ governing permissions and limitations under the License.
 */
 
 @container (--system: express) {
-  .spectrum-ActionGroup {
-    --spectrum-actiongroup-gap-size-compact: var(--spectrum-spacing-50);
-
-    /* account for button border */
-    --spectrum-actiongroup-horizontal-spacing-compact: calc(-1px * var(--spectrum-spacing-50));
-    --spectrum-actiongroup-vertical-spacing-compact: calc(-1px * var(--spectrum-spacing-50));
-  }
 }

components/actiongroup/themes/spectrum.css

@@ -11,11 +11,4 @@ governing permissions and limitations under the License.
 */
 
 @container (--system: spectrum) {
-  .spectrum-ActionGroup {
-    --spectrum-actiongroup-gap-size-compact: 0;
-
-    /* account for button border */
-    --spectrum-actiongroup-horizontal-spacing-compact: -1px;
-    --spectrum-actiongroup-vertical-spacing-compact: -1px;
-  }
 }