feat(actiongroup)!: migrate to S2

adobe · Jan 22, 2024 · f55489b · f55489b
1 parent 0f88d6b
commit f55489b
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 15 deletions.
diff --git a/components/actiongroup/index.css b/components/actiongroup/index.css
@@ -14,6 +14,11 @@ 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);
+
+  /* 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));
 }
 
 .spectrum-ActionGroup--sizeXS,
@@ -36,7 +41,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;

diff --git a/components/actiongroup/stories/actiongroup.stories.js b/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,
+};
diff --git a/components/actiongroup/themes/express.css b/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));
-  }
 }
diff --git a/components/actiongroup/themes/spectrum.css b/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;
-  }
 }