diff --git a/backstop_data/backstop_scenarios.json b/backstop_data/backstop_scenarios.json
index abaf155b349..8fcbff26bca 100644
--- 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
index d27ea0e1e88..46d87264288 100644
--- 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
new file mode 100644
index 00000000000..ce21a0ac1f8
--- /dev/null
+++ b/components/actiongroup/.npmignore
@@ -0,0 +1 @@
+/dist/docs/
diff --git a/components/actiongroup/CHANGELOG.md b/components/actiongroup/CHANGELOG.md
new file mode 100644
index 00000000000..e5ef6b7be54
--- /dev/null
+++ 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.
+
+
+# 3.0.0-beta.1
+🗓 2020-03-12 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/buttongroup@3.0.0-beta.0...@spectrum-css/buttongroup@3.0.0-beta.1)
+
+**Note:** Version bump only for package @spectrum-css/buttongroup
+
+
+
+
+
+
+# 3.0.0-beta.0
+🗓 2020-03-09 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/buttongroup@2.2.1...@spectrum-css/buttongroup@3.0.0-beta.0)
+
+### ✨ Features
+
+* make ButtonGroup support RTL ([eeb2d4e](https://github.com/adobe/spectrum-css/commit/eeb2d4e))
+
+
+
+
+
+
+## 2.2.1
+🗓 2020-03-06 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/buttongroup@2.2.0...@spectrum-css/buttongroup@2.2.1)
+
+**Note:** Version bump only for package @spectrum-css/buttongroup
+
+
+
+
+
+
+# 2.2.0
+🗓 2020-02-10 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/buttongroup@2.1.0...@spectrum-css/buttongroup@2.2.0)
+
+### ✨ 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)
+
+
+
+
+
+
+# 2.1.0
+🗓 2020-01-23 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/buttongroup@2.0.3...@spectrum-css/buttongroup@2.1.0)
+
+### ✨ 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))
+
+
+
+
+
+
+## 2.0.3
+🗓 2019-12-14 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/buttongroup@2.0.2...@spectrum-css/buttongroup@2.0.3)
+
+**Note:** Version bump only for package @spectrum-css/buttongroup
+
+
+
+
+
+
+## 2.0.2
+🗓 2019-11-08 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/buttongroup@2.0.1...@spectrum-css/buttongroup@2.0.2)
+
+**Note:** Version bump only for package @spectrum-css/buttongroup
+
+
+
+
+
+
+## 2.0.1
+🗓 2019-11-07 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/buttongroup@2.0.0...@spectrum-css/buttongroup@2.0.1)
+
+**Note:** Version bump only for package @spectrum-css/buttongroup
+
+
+
+
+
+
+# 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
new file mode 100644
index 00000000000..3ca0fa14991
--- /dev/null
+++ 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
new file mode 100644
index 00000000000..3d2a7fa4e41
--- /dev/null
+++ 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
new file mode 100644
index 00000000000..3e713345921
--- /dev/null
+++ 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;
+}
diff --git a/components/actiongroup/metadata/actiongroup.yml b/components/actiongroup/metadata/actiongroup.yml
new file mode 100644
index 00000000000..6ea38f1303f
--- /dev/null
+++ b/components/actiongroup/metadata/actiongroup.yml
@@ -0,0 +1,290 @@
+name: Action Group
+SpectrumSiteSlug: https://spectrum.adobe.com/page/button/
+examples:
+ - id: actiongroup
+ name: Horizontal
+ markup: |
+
+
+
+
+
+
+ - id: actiongroup
+ name: Horizontal (icon-only)
+ markup: |
+
+
+
+
+
+
+ - id: actiongroup
+ name: Horizontal (quiet, icon-only)
+ markup: |
+
+
+
+
+
+
+ - id: actiongroup
+ name: Horizontal (compact)
+ markup: |
+
+
+
+
+
+
+ - id: actiongroup
+ name: Horizontal (compact, icon-only)
+ markup: |
+
+
+
+
+
+
+ - id: actiongroup
+ name: Horizontal (compact, quiet, icon-only)
+ markup: |
+
+
+
+
+
+
+ - id: actiongroup
+ name: Vertical
+ markup: |
+
+
+
+
+
+
+ - id: actiongroup
+ name: Vertical (icon-only)
+ markup: |
+
+
+
+
+
+
+ - id: actiongroup
+ name: Vertical (icon-only, quiet)
+ markup: |
+
+
+
+
+
+
+ - id: actiongroup
+ name: Vertical (compact)
+ markup: |
+
+
+
+
+
+
+ - id: actiongroup
+ name: Vertical (compact, icon-only)
+ markup: |
+
+
+
+
+
+
+ - id: actiongroup
+ name: Vertical (icon-only, compact, quiet)
+ markup: |
+
+
+
+
+
+
+ - id: actiongroup
+ name: Justified
+ markup: |
+
+
+
+
+
+ - id: actiongroup
+ name: Justified (icon-only)
+ markup: |
+
+
+
+
+
+
+ - id: actiongroup
+ name: Justified (compact, icon-only)
+ markup: |
+
+
+
+
+
diff --git a/components/actiongroup/package.json b/components/actiongroup/package.json
new file mode 100644
index 00000000000..ad5ec10f02a
--- /dev/null
+++ b/components/actiongroup/package.json
@@ -0,0 +1,33 @@
+{
+ "name": "@spectrum-css/actiongroup",
+ "version": "1.0.0-beta.0",
+ "description": "The Spectrum CSS actiongroup component",
+ "license": "Apache-2.0",
+ "main": "dist/index-vars.css",
+ "repository": {
+ "type": "git",
+ "url": "https://github.com/adobe/spectrum-css.git",
+ "directory": "components/actiongroup"
+ },
+ "bugs": {
+ "url": "https://github.com/adobe/spectrum-css/issues"
+ },
+ "scripts": {
+ "build": "gulp"
+ },
+ "peerDependencies": {
+ "@spectrum-css/button": "^3.0.0-beta.0",
+ "@spectrum-css/vars": "^2.0.0"
+ },
+ "devDependencies": {
+ "@spectrum-css/button": "^3.0.0-beta.1",
+ "@spectrum-css/component-builder": "^1.2.0",
+ "@spectrum-css/icon": "^2.1.0",
+ "@spectrum-css/vars": "^2.2.0",
+ "gulp": "^4.0.0"
+ },
+ "publishConfig": {
+ "access": "public"
+ },
+ "homepage": "https://opensource.adobe.com/spectrum-css/"
+}
\ No newline at end of file
diff --git a/components/button/index.css b/components/button/index.css
index 60c48f8286a..68689ae1bf3 100644
--- a/components/button/index.css
+++ b/components/button/index.css
@@ -64,6 +64,10 @@ governing permissions and limitations under the License.
line-height: var(--spectrum-button-line-height);
+ user-select: none;
+ -webkit-user-select: none;
+ touch-action: none; /* prevent touch scrolling on buttons */
+
cursor: pointer;
&:focus {
@@ -224,7 +228,7 @@ a.spectrum-ActionButton {
text-align: center;
/* @safari10 Workaround for https://bugs.webkit.org/show_bug.cgi?id=169700 */
- inline-size: 100%;
+ /*inline-size: 100%;*/
&:empty {
display: none;
@@ -354,38 +358,3 @@ a.spectrum-ActionButton {
inline-size: var(--spectrum-clearbutton-small-width);
block-size: var(--spectrum-clearbutton-small-height);
}
-
-.spectrum-Tool {
- @inherit: .spectrum-ActionButton;
- @inherit: .spectrum-ActionButton--quiet;
-
- position: relative;
-
- justify-content: center;
-
- inline-size: var(--spectrum-tool-min-width);
- block-size: var(--spectrum-tool-height);
-
- padding: 0;
-}
-
-.spectrum-Tool-hold {
- position: absolute;
- inset-inline-end: var(--spectrum-tool-hold-icon-padding-right);
- inset-block-end: var(--spectrum-tool-hold-icon-padding-bottom);
-
- transform: logical rotate(0deg);
-}
-
-/* Potentially temporary: Add back default margin between all buttons when adjacent */
-.spectrum-Button + .spectrum-Button {
- margin-inline-start: var(--spectrum-buttongroup-button-gap-x);
-}
-
-.spectrum-ActionButton + .spectrum-ActionButton {
- margin-inline-start: var(--spectrum-actionbuttongroup-text-button-gap-x);
-}
-
-.spectrum-Tool + .spectrum-Tool {
- margin-inline-start: var(--spectrum-toolgroup-text-button-gap-x);
-}
diff --git a/components/button/metadata/actionbutton.yml b/components/button/metadata/actionbutton.yml
index 7b6b4fee37d..5c52ff52d33 100644
--- a/components/button/metadata/actionbutton.yml
+++ b/components/button/metadata/actionbutton.yml
@@ -1,6 +1,9 @@
name: Action Button
status: Verified
SpectrumSiteSlug: https://spectrum.adobe.com/page/button/
+description: |
+ - For Action Buttons that only contain an icon with no label, do not include the element with the `.spectrum-ActionButton-label` class in the markup
+ - If an icon and a label are both used, ensure that the element with the `.spectrum-ActionButton-label` class comes after the `.spectrum-Icon` element.
examples:
- id: actionbutton
name: Standard
@@ -275,3 +278,378 @@ examples:
+ - id: actionbutton
+ name: Emphasized
+ markup: |
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - id: actionbutton
+ name: Emphasized (quiet)
+ markup: |
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/components/button/metadata/tool.yml b/components/button/metadata/tool.yml
deleted file mode 100644
index b5c174a7669..00000000000
--- a/components/button/metadata/tool.yml
+++ /dev/null
@@ -1,69 +0,0 @@
-name: Tool
-dnaStatus: Deprecated
-description: The tool button.
-SpectrumSiteSlug: https://spectrum.adobe.com/page/tool/
-hide: true
-examples:
- - name: Standard
- markup: |
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/components/button/skin.css b/components/button/skin.css
index 5d589273299..89cbdbf5a92 100644
--- a/components/button/skin.css
+++ b/components/button/skin.css
@@ -433,6 +433,140 @@ governing permissions and limitations under the License.
}
}
+.spectrum-ActionButton--emphasized {
+ background-color: var(--spectrum-actionbutton-emphasized-background-color);
+ border-color: var(--spectrum-actionbutton-emphasized-border-color);
+ color: var(--spectrum-actionbutton-emphasized-text-color);
+
+ .spectrum-Icon {
+ color: var(--spectrum-actionbutton-emphasized-icon-color);
+ }
+
+ .spectrum-ActionButton-hold {
+ color: var(--spectrum-actionbutton-emphasized-hold-icon-color);
+ }
+
+ &.is-selected {
+ .spectrum-ActionButton-hold {
+ color: var(--spectrum-actionbutton-emphasized-hold-icon-color-selected);
+ }
+
+ &:hover {
+ .spectrum-ActionButton-hold {
+ color: var(--spectrum-actionbutton-emphasized-text-color-selected-hover);
+ }
+ }
+ }
+
+ &:hover {
+ background-color: var(--spectrum-actionbutton-emphasized-background-color-hover);
+ border-color: var(--spectrum-actionbutton-emphasized-border-color-hover);
+ box-shadow: none;
+ color: var(--spectrum-actionbutton-emphasized-text-color-hover);
+
+ .spectrum-Icon {
+ color: var(--spectrum-actionbutton-emphasized-icon-color-hover);
+ }
+
+ .spectrum-ActionButton-hold {
+ color: var(--spectrum-actionbutton-emphasized-hold-icon-color-hover);
+ }
+ }
+
+ &:focus-ring {
+ background-color: var(--spectrum-actionbutton-emphasized-background-color-key-focus);
+ border-color: var(--spectrum-actionbutton-emphasized-border-color-key-focus);
+ box-shadow: 0 0 0 var(--spectrum-button-primary-border-size-increase-key-focus) var(--spectrum-actionbutton-border-color-key-focus);
+ color: var(--spectrum-actionbutton-emphasized-text-color-key-focus);
+
+ .spectrum-Icon {
+ color: var(--spectrum-actionbutton-emphasized-icon-color-key-focus);
+ }
+
+ .spectrum-ActionButton-hold {
+ color: var(--spectrum-actionbutton-emphasized-hold-icon-color-key-focus);
+ }
+ }
+
+ &.is-active {
+ background-color: var(--spectrum-actionbutton-emphasized-background-color-down);
+ border-color: var(--spectrum-actionbutton-emphasized-border-color-down);
+ box-shadow: none;
+ color: var(--spectrum-actionbutton-emphasized-text-color-down);
+
+ .spectrum-ActionButton-hold {
+ color: var(--spectrum-actionbutton-emphasized-hold-icon-color-down);
+ }
+ }
+
+ &:disabled,
+ &.is-disabled {
+ background-color: var(--spectrum-actionbutton-emphasized-background-color-disabled);
+ border-color: var(--spectrum-actionbutton-emphasized-border-color-disabled);
+ color: var(--spectrum-actionbutton-emphasized-text-color-disabled);
+
+ .spectrum-Icon {
+ color: var(--spectrum-actionbutton-emphasized-icon-color-disabled);
+ }
+
+ .spectrum-ActionButton-hold {
+ color: var(--spectrum-actionbutton-emphasized-hold-icon-color-disabled);
+ }
+ }
+
+ &.spectrum-ActionButton--quiet.is-selected,
+ &.is-selected {
+ background-color: var(--spectrum-actionbutton-emphasized-background-color-selected);
+ border-color: var(--spectrum-actionbutton-emphasized-border-color-selected);
+ color: var(--spectrum-actionbutton-emphasized-text-color-selected);
+
+ .spectrum-Icon {
+ color: var(--spectrum-actionbutton-emphasized-icon-color-selected);
+ }
+
+ &:focus-ring {
+ background-color: var(--spectrum-actionbutton-emphasized-background-color-selected-key-focus);
+ border-color: var(--spectrum-actionbutton-emphasized-border-color-selected-key-focus);
+ color: var(--spectrum-actionbutton-emphasized-text-color-selected-key-focus);
+
+ .spectrum-Icon {
+ color: var(--spectrum-actionbutton-emphasized-icon-color-selected-key-focus);
+ }
+ }
+
+ &:hover {
+ background-color: var(--spectrum-actionbutton-emphasized-background-color-selected-hover);
+ border-color: var(--spectrum-actionbutton-emphasized-border-color-selected-hover);
+ color: var(--spectrum-actionbutton-emphasized-text-color-selected-hover);
+
+ .spectrum-Icon {
+ color: var(--spectrum-actionbutton-emphasized-icon-color-selected-hover);
+ }
+ }
+
+ &.is-active {
+ background-color: var(--spectrum-actionbutton-emphasized-background-color-selected-down);
+ border-color: var(--spectrum-actionbutton-emphasized-border-color-selected-down);
+ color: var(--spectrum-actionbutton-emphasized-text-color-selected-down);
+
+ .spectrum-Icon {
+ color: var(--spectrum-actionbutton-emphasized-icon-color-selected-down);
+ }
+ }
+
+ &:disabled,
+ &.is-disabled {
+ background-color: var(--spectrum-actionbutton-emphasized-background-color-selected-disabled);
+ border-color: var(--spectrum-actionbutton-emphasized-border-color-selected-disabled);
+ color: var(--spectrum-actionbutton-emphasized-text-color-selected-disabled);
+
+ .spectrum-Icon {
+ color: var(--spectrum-actionbutton-emphasized-icon-color-selected-disabled);
+ }
+ }
+ }
+}
+
.spectrum-ActionButton--quiet {
background-color: var(--spectrum-actionbutton-quiet-background-color);
border-color: var(--spectrum-actionbutton-quiet-border-color);
@@ -669,93 +803,3 @@ governing permissions and limitations under the License.
color: var(--spectrum-fieldbutton-text-color-disabled);
}
}
-
-.spectrum-Tool {
- @inherit: .spectrum-ActionButton;
- @inherit: .spectrum-ActionButton--quiet;
-
- &.is-selected {
- .spectrum-Icon {
- color: var(--spectrum-tool-icon-color-selected);
- }
-
- .spectrum-Tool-hold {
- color: var(--spectrum-tool-hold-icon-color-selected);
- }
-
- &:hover {
- .spectrum-Icon {
- color: var(--spectrum-tool-icon-color-selected-hover);
- }
-
- .spectrum-Tool-hold {
- color: var(--spectrum-tool-hold-icon-color-selected-hover);
- }
- }
-
- &:active {
- .spectrum-Icon {
- color: var(--spectrum-tool-icon-color-selected-down);
- }
-
- .spectrum-Tool-hold {
- color: var(--spectrum-tool-hold-icon-color-selected-down);
- }
- }
-
- &:focus-ring {
- .spectrum-Icon {
- color: var(--spectrum-tool-icon-color-selected-key-focus);
- }
-
- .spectrum-Tool-hold {
- color: var(--spectrum-tool-hold-icon-color-selected-key-focus);
- }
- }
-
- &:disabled,
- &.is-disabled {
- background-color: var(--spectrum-tool-background-color-selected-disabled);
- border-color: var(--spectrum-tool-border-color-selected-disabled);
- .spectrum-Icon {
- color: var(--spectrum-tool-icon-color-selected-disabled);
- }
-
- .spectrum-Tool-hold {
- color: var(--spectrum-tool-hold-icon-color-disabled);
- }
- }
- }
-
- .spectrum-Tool-hold {
- color: var(--spectrum-tool-hold-icon-color);
- }
-
- &:hover {
- .spectrum-Tool-hold {
- color: var(--spectrum-tool-hold-icon-color-hover);
- }
- }
-
- &:active {
- background-color: var(--spectrum-tool-background-color-down);
- border-color: var(--spectrum-tool-border-color-down);
-
- .spectrum-Tool-hold {
- color: var(--spectrum-tool-hold-icon-color-down);
- }
- }
-
- &:focus-ring {
- .spectrum-Tool-hold {
- color: var(--spectrum-tool-hold-icon-color-key-focus);
- }
- }
-
- &.is-disabled,
- &:disabled {
- .spectrum-Tool-hold {
- color: var(--spectrum-tool-hold-icon-color-disabled);
- }
- }
-}
diff --git a/components/buttongroup/index.css b/components/buttongroup/index.css
index 9dd99327680..9f7476aa25c 100644
--- a/components/buttongroup/index.css
+++ b/components/buttongroup/index.css
@@ -17,51 +17,21 @@ governing permissions and limitations under the License.
.spectrum-ButtonGroup {
display: flex;
- .spectrum-Button,
- .spectrum-ActionButton,
- .spectrum-Tool {
+ .spectrum-ButtonGroup-item {
flex-shrink: 0;
}
- > .spectrum-Rule--vertical {
- block-size: auto;
- align-self: stretch;
- }
-
- .spectrum-Button + .spectrum-Button {
+ .spectrum-ButtonGroup-item + .spectrum-ButtonGroup-item {
margin-inline-start: var(--spectrum-buttongroup-button-gap-x);
}
-
- .spectrum-ActionButton + .spectrum-ActionButton {
- margin-inline-start: var(--spectrum-actionbuttongroup-text-button-gap-x);
- }
-
- .spectrum-Tool + .spectrum-Tool {
- margin-inline-start: var(--spectrum-toolgroup-text-button-gap-x);
- }
}
.spectrum-ButtonGroup--vertical {
display: inline-flex;
flex-direction: column;
- .spectrum-ActionButton-label {
- flex-grow: 1;
- text-align: start;
- }
-
- .spectrum-Button + .spectrum-Button {
+ .spectrum-ButtonGroup-item + .spectrum-ButtonGroup-item {
margin-block-start: var(--spectrum-buttongroup-button-gap-y);
margin-inline-start: var(--spectrum-buttongroup-button-gap-reset);
}
-
- .spectrum-ActionButton + .spectrum-ActionButton {
- margin-block-start: var(--spectrum-actionbuttongroup-text-button-gap-y);
- margin-inline-start: var(--spectrum-buttongroup-button-gap-reset);
- }
-
- .spectrum-Tool + .spectrum-Tool {
- margin-block-start: var(--spectrum-toolgroup-text-button-gap-y);
- margin-inline-start: var(--spectrum-buttongroup-button-gap-reset);
- }
}
diff --git a/components/buttongroup/metadata/buttongroup.yml b/components/buttongroup/metadata/buttongroup.yml
index 2167dafbd38..14027d96a4e 100644
--- a/components/buttongroup/metadata/buttongroup.yml
+++ b/components/buttongroup/metadata/buttongroup.yml
@@ -5,211 +5,28 @@ examples:
name: Horizontal
markup: |
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- id: buttongroup
name: Vertical
markup: |
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+