adobe · jianliao · Apr 29, 2020 · Mar 16, 2020 · Mar 16, 2020 · Mar 16, 2020
diff --git a/backstop_data/backstop_scenarios.json b/backstop_data/backstop_scenarios.json
@@ -15,6 +15,11 @@
     "url": "actionbutton.html",
     "package": "@spectrum-css/actionbutton"
   },
+  {
+    "label": "actiongroup",
+    "url": "actiongroup.html",
+    "package": "@spectrum-css/actiongroup"
+  },
   {
     "label": "actionmenu",
     "url": "actionmenu.html",

diff --git a/backstop_data/packageDependentMap.json b/backstop_data/packageDependentMap.json
@@ -7,6 +7,10 @@
     "@spectrum-css/actionbar",
     []
   ],
+  [
+    "@spectrum-css/actiongroup",
+    []
+  ],
   [
     "@spectrum-css/actionmenu",
     []
@@ -49,6 +53,7 @@
     "@spectrum-css/button",
     [
       "@spectrum-css/actionbar",
+      "@spectrum-css/actiongroup",
       "@spectrum-css/actionmenu",
       "@spectrum-css/alert",
       "@spectrum-css/breadcrumb",
@@ -111,10 +116,6 @@
     "@spectrum-css/cyclebutton",
     []
   ],
-  [
-    "@spectrum-css/decoratedtextfield",
-    []
-  ],
   [
     "@spectrum-css/dialog",
     [
@@ -143,9 +144,7 @@
   ],
   [
     "@spectrum-css/fieldlabel",
-    [
-      "@spectrum-css/decoratedtextfield"
-    ]
+    []
   ],
   [
     "@spectrum-css/illustratedmessage",
@@ -272,7 +271,6 @@
   [
     "@spectrum-css/textfield",
     [
-      "@spectrum-css/decoratedtextfield",
       "@spectrum-css/fieldlabel",
       "@spectrum-css/inputgroup",
       "@spectrum-css/pagination",

diff --git a/components/actiongroup/.npmignore b/components/actiongroup/.npmignore
@@ -0,0 +1 @@
+/dist/docs/
diff --git a/components/actiongroup/CHANGELOG.md b/components/actiongroup/CHANGELOG.md
@@ -0,0 +1,98 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+<a name="3.0.0-beta.1"></a>
+# 3.0.0-beta.1
+🗓 2020-03-12 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/[email protected]...@spectrum-css/[email protected])
+
+**Note:** Version bump only for package @spectrum-css/buttongroup
+
+
+
+
+
+<a name="3.0.0-beta.0"></a>
+# 3.0.0-beta.0
+🗓 2020-03-09 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/[email protected]...@spectrum-css/[email protected])
+
+### ✨ Features
+
+* make ButtonGroup support RTL ([eeb2d4e](https://github.com/adobe/spectrum-css/commit/eeb2d4e))
+
+
+
+
+
+<a name="2.2.1"></a>
+## 2.2.1
+🗓 2020-03-06 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/[email protected]...@spectrum-css/[email protected])
+
+**Note:** Version bump only for package @spectrum-css/buttongroup
+
+
+
+
+
+<a name="2.2.0"></a>
+# 2.2.0
+🗓 2020-02-10 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/[email protected]...@spectrum-css/[email protected])
+
+### ✨ Features
+
+* adding t-shirt sized typography, fixes [#210](https://github.com/adobe/spectrum-css/issues/210), closes [#416](https://github.com/adobe/spectrum-css/issues/416) ([#408](https://github.com/adobe/spectrum-css/issues/408)) ([3921bcb](https://github.com/adobe/spectrum-css/commit/3921bcb)), closes [#523](https://github.com/adobe/spectrum-css/issues/523)
+
+
+
+
+
+<a name="2.1.0"></a>
+# 2.1.0
+🗓 2020-01-23 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/[email protected]...@spectrum-css/[email protected])
+
+### ✨ Features
+
+* support vertical Rules inside of ButtonGroup, related to [#455](https://github.com/adobe/spectrum-css/issues/455) ([ea7b85f](https://github.com/adobe/spectrum-css/commit/ea7b85f))
+
+
+
+
+
+<a name="2.0.3"></a>
+## 2.0.3
+🗓 2019-12-14 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/[email protected]...@spectrum-css/[email protected])
+
+**Note:** Version bump only for package @spectrum-css/buttongroup
+
+
+
+
+
+<a name="2.0.2"></a>
+## 2.0.2
+🗓 2019-11-08 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/[email protected]...@spectrum-css/[email protected])
+
+**Note:** Version bump only for package @spectrum-css/buttongroup
+
+
+
+
+
+<a name="2.0.1"></a>
+## 2.0.1
+🗓 2019-11-07 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/[email protected]...@spectrum-css/[email protected])
+
+**Note:** Version bump only for package @spectrum-css/buttongroup
+
+
+
+
+
+<a name="2.0.0"></a>
+# 2.0.0
+🗓 2019-10-08
+
+### ✨ Features
+
+* move to individually versioned packages with Lerna ([#265](https://github.com/adobe/spectrum-css/issues/265)) ([cb7fd4b](https://github.com/adobe/spectrum-css/commit/cb7fd4b)), closes [#231](https://github.com/adobe/spectrum-css/issues/231) [#214](https://github.com/adobe/spectrum-css/issues/214) [#229](https://github.com/adobe/spectrum-css/issues/229) [#240](https://github.com/adobe/spectrum-css/issues/240) [#239](https://github.com/adobe/spectrum-css/issues/239) [#161](https://github.com/adobe/spectrum-css/issues/161) [#242](https://github.com/adobe/spectrum-css/issues/242) [#246](https://github.com/adobe/spectrum-css/issues/246) [#219](https://github.com/adobe/spectrum-css/issues/219) [#235](https://github.com/adobe/spectrum-css/issues/235) [#189](https://github.com/adobe/spectrum-css/issues/189) [#248](https://github.com/adobe/spectrum-css/issues/248) [#232](https://github.com/adobe/spectrum-css/issues/232) [#248](https://github.com/adobe/spectrum-css/issues/248) [#218](https://github.com/adobe/spectrum-css/issues/218) [#237](https://github.com/adobe/spectrum-css/issues/237) [#255](https://github.com/adobe/spectrum-css/issues/255) [#256](https://github.com/adobe/spectrum-css/issues/256) [#258](https://github.com/adobe/spectrum-css/issues/258) [#257](https://github.com/adobe/spectrum-css/issues/257) [#259](https://github.com/adobe/spectrum-css/issues/259)
diff --git a/components/actiongroup/README.md b/components/actiongroup/README.md
@@ -0,0 +1,6 @@
+# @spectrum-css/buttongroup
+> The Spectrum CSS buttongroup component
+
+This package is part of the [Spectrum CSS project](https://github.com/adobe/spectrum-css).
+
+See the [Spectrum CSS documentation](https://opensource.adobe.com/spectrum-css/) and [Spectrum CSS on GitHub](https://github.com/adobe/spectrum-css) for details.
diff --git a/components/actiongroup/gulpfile.js b/components/actiongroup/gulpfile.js
@@ -0,0 +1 @@
+module.exports = require('@spectrum-css/component-builder');
diff --git a/components/actiongroup/index.css b/components/actiongroup/index.css
@@ -0,0 +1,135 @@
+/*
+Copyright 2019 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+
+:root {
+  --spectrum-actiongroup-button-gap-reset: 0;
+  --spectrum-actiongroup-quiet-compact-button-gap: var(--spectrum-global-dimension-size-50);
+}
+
+.spectrum-ActionGroup {
+  display: flex;
+  flex-wrap: wrap;
+
+  .spectrum-ActionGroup-item {
+    flex-shrink: 0;
+  }
+
+  .spectrum-ActionGroup-item + .spectrum-ActionGroup-item {
+    margin-inline-start: var(--spectrum-actionbuttongroup-text-button-gap-x);
+  }
+}
+
+.spectrum-ActionGroup--vertical {
+  display: inline-flex;
+  flex-direction: column;
+
+  .spectrum-ActionGroup-item + .spectrum-ActionGroup-item {
+    margin-block-start: var(--spectrum-actionbuttongroup-text-button-gap-y);
+    margin-inline-start: var(--spectrum-actiongroup-button-gap-reset);
+  }
+
+  &.spectrum-ActionGroup--vertical {
+    margin-block-start: var(--spectrum-actionbuttongroup-text-button-gap-y);
+    margin-inline-start: var(--spectrum-actiongroup-button-gap-reset);
+  }
+}
+
+.spectrum-ActionGroup--compact {
+  &.spectrum-ActionGroup--quiet {
+    .spectrum-ActionGroup-item + .spectrum-ActionGroup-item {
+      margin-inline-start: var(--spectrum-actiongroup-quiet-compact-button-gap);
+      margin-block-start: var(--spectrum-actiongroup-button-gap-reset);
+    }
+
+    &.spectrum-ActionGroup--vertical {
+      .spectrum-ActionGroup-item + .spectrum-ActionGroup-item {
+        margin-inline-start: var(--spectrum-actiongroup-button-gap-reset);
+        margin-block-start: var(--spectrum-actiongroup-quiet-compact-button-gap);
+      }
+    }
+  }
+
+  &:not(.spectrum-ActionGroup--quiet) {
+    flex-wrap: nowrap;
+
+    .spectrum-ActionGroup-item {
+      position: relative;
+      border-radius: 0;
+      z-index: 0;
+
+      &:first-child {
+        border-start-start-radius: var(--spectrum-actionbutton-border-radius);
+        border-end-start-radius: var(--spectrum-actionbutton-border-radius);
+        margin-inline-end: calc(-1 * var(--spectrum-actionbutton-border-size) / 2);
+      }
+
+      &:last-child {
+        border-start-end-radius: var(--spectrum-actionbutton-border-radius);
+        border-end-end-radius: var(--spectrum-actionbutton-border-radius);
+        margin-inline-start: calc(-1 * var(--spectrum-actionbutton-border-size) / 2);
+        margin-inline-end: 0;
+      }
+
+      &.is-selected {
+        z-index: 1;
+      }
+
+      &:hover {
+        z-index: 2;
+      }
+
+      /* Appear above hovered and selected borders */
+      &:focus-ring {
+        z-index: 3;
+      }
+
+      & + .spectrum-ActionGroup-item {
+        margin-inline-start: calc(-1 * var(--spectrum-actionbutton-border-size) / 2);
+        margin-inline-end: calc(-1 * var(--spectrum-actionbutton-border-size) / 2);
+      }
+
+      .spectrum-ActionButton-label {
+        inline-size: auto;
+      }
+    }
+
+    &.spectrum-ActionGroup--vertical {
+      .spectrum-ActionGroup-item {
+        border-radius: 0;
+
+        & + .spectrum-ActionGroup-item {
+          margin-block-start: calc(-1 * var(--spectrum-actionbutton-border-size) / 2);
+          margin-block-end: calc(-1 * var(--spectrum-actionbutton-border-size) / 2);
+        }
+
+        &:first-child {
+          border-start-start-radius: var(--spectrum-actionbutton-border-radius);
+          border-start-end-radius: var(--spectrum-actionbutton-border-radius);
+          border-radius: 0;
+          margin-block-end: calc(-1 * var(--spectrum-actionbutton-border-size) / 2);
+        }
+
+        &:last-child {
+          border-end-start-radius: var(--spectrum-actionbutton-border-radius);
+          border-end-end-radius: var(--spectrum-actionbutton-border-radius);
+          border-radius: 0;
+          margin-block-start: calc(-1 * var(--spectrum-actionbutton-border-size) / 2);
+          margin-block-end: 0;
+        }
+      }
+    }
+  }
+}
+
+.spectrum-ActionGroup--justified .spectrum-ActionGroup-item {
+  flex: 1;
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		module.exports = require('@spectrum-css/component-builder');