feat: implement t-shirt sizing for Action Button, closes #936

feat: break out ActionButton from Button

BREAKING CHANGE: .spectrum-ActionButton is no longer part of the button component, use the actionbutton component

components/actionbutton/CHANGELOG.md

@@ -0,0 +1,149 @@
+# 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.4"></a>
+# 3.0.0-beta.4
+🗓 2020-09-23 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/[email protected]...@spectrum-css/[email protected])
+
+### 🐛 Bug fixes
+
+* actionButton focus-ring active state visual issue [#755](https://github.com/adobe/spectrum-css/issues/755) ([#777](https://github.com/adobe/spectrum-css/issues/777)) ([64af508](https://github.com/adobe/spectrum-css/commit/64af508))
+* fix the issues caused by component rename ([#778](https://github.com/adobe/spectrum-css/issues/778)) ([e1d180c](https://github.com/adobe/spectrum-css/commit/e1d180c))
+* removed deprecated tokens in button ([281027d](https://github.com/adobe/spectrum-css/commit/281027d))
+* resolving conflicts with main ([8cafffa](https://github.com/adobe/spectrum-css/commit/8cafffa))
+* wip fix more components ([b74dbb8](https://github.com/adobe/spectrum-css/commit/b74dbb8))
+* workflow icon size change to medium ([#917](https://github.com/adobe/spectrum-css/issues/917)) ([a609ee6](https://github.com/adobe/spectrum-css/commit/a609ee6))
+
+
+
+
+
+<a name="3.0.0-beta.3"></a>
+# 3.0.0-beta.3
+🗓 2020-06-19 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/[email protected]...@spectrum-css/[email protected])
+
+### 🐛 Bug fixes
+
+* correct OverBackground ClearButton focus-ring, fixes [#730](https://github.com/adobe/spectrum-css/issues/730) ([#733](https://github.com/adobe/spectrum-css/issues/733)) ([5a34fa4](https://github.com/adobe/spectrum-css/commit/5a34fa4))
+
+
+
+
+
+<a name="3.0.0-beta.2"></a>
+# 3.0.0-beta.2
+🗓 2020-05-14 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/[email protected]...@spectrum-css/[email protected])
+
+* Button Breaking Changes (#649) ([abf116b](https://github.com/adobe/spectrum-css/commit/abf116b)), closes [#649](https://github.com/adobe/spectrum-css/issues/649) [#519](https://github.com/adobe/spectrum-css/issues/519) [#620](https://github.com/adobe/spectrum-css/issues/620) [#606](https://github.com/adobe/spectrum-css/issues/606)
+
+
+### 🛑 BREAKING CHANGES
+
+* Tool button has been removed
+
+* fix: interaction on mobile, text select
+
+* feat: add Emphasized Action Button
+
+* docs: add exampes for Quiet Emphasized Action Button
+
+fix: correct Quiet Emphasized Action Button
+
+* feat: button group
+* Button group no longer supports Action Button, just normal buttons
+* Margins have been removed from adjacent buttons. Use ButtonGroup instead.
+
+
+
+
+
+<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/button
+
+
+
+
+
+<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 Button support RTL ([0f5aa5c](https://github.com/adobe/spectrum-css/commit/0f5aa5c))
+
+
+
+
+
+<a name="2.2.0"></a>
+# 2.2.0
+🗓 2020-03-06 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/[email protected]...@spectrum-css/[email protected])
+
+### ✨ Features
+
+* halo focus ring, closes [#112](https://github.com/adobe/spectrum-css/issues/112), closes [#573](https://github.com/adobe/spectrum-css/issues/573) ([#603](https://github.com/adobe/spectrum-css/issues/603)) ([d87e9a5](https://github.com/adobe/spectrum-css/commit/d87e9a5)), closes [#619](https://github.com/adobe/spectrum-css/issues/619)
+
+
+
+
+
+<a name="2.1.0"></a>
+# 2.1.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)
+
+
+### 🐛 Bug fixes
+
+* adjust Button text alignment, fixes [#516](https://github.com/adobe/spectrum-css/issues/516) ([7f36619](https://github.com/adobe/spectrum-css/commit/7f36619))
+
+
+
+
+
+<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/button
+
+
+
+
+
+<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/button
+
+
+
+
+
+<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/button
+
+
+
+
+
+<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)

components/actionbutton/README.md

@@ -0,0 +1,6 @@
+# @spectrum-css/button
+> The Spectrum CSS button 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.

components/actionbutton/gulpfile.js

@@ -0,0 +1 @@
+module.exports = require('@spectrum-css/component-builder');

components/actionbutton/index.css

@@ -0,0 +1,165 @@
+/*
+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.
+*/
+
+@import "../commons/index.css";
+@import "../commons/basebutton.css";
+
+:root {
+  --spectrum-actionbutton-s-text-padding-x: var(--spectrum-global-dimension-size-150);
+  --spectrum-actionbutton-m-text-padding-x: var(--spectrum-global-dimension-size-160);
+  --spectrum-actionbutton-l-text-padding-x: var(--spectrum-global-dimension-size-175);
+  --spectrum-actionbutton-xl-text-padding-x: var(--spectrum-global-dimension-size-200);
+}
+
+.spectrum-ActionButton--M {
+  /* Set up default variables, size medium */
+  --spectrum-actionbutton-border-radius: var(--spectrum-actionbutton-m-border-radius);
+  --spectrum-actionbutton-border-size: var(--spectrum-actionbutton-m-border-size);
+  --spectrum-actionbutton-height: var(--spectrum-actionbutton-m-height);
+  --spectrum-actionbutton-hold-icon-padding-bottom: var(--spectrum-actionbutton-m-hold-icon-padding-bottom);
+  --spectrum-actionbutton-hold-icon-padding-right: var(--spectrum-actionbutton-m-hold-icon-padding-right);
+  --spectrum-actionbutton-icon-gap: var(--spectrum-actionbutton-m-icon-gap);
+  --spectrum-actionbutton-icon-size: var(--spectrum-actionbutton-m-icon-size);
+  --spectrum-actionbutton-min-width: var(--spectrum-actionbutton-m-min-width);
+  --spectrum-actionbutton-quiet-border-radius: var(--spectrum-actionbutton-m-quiet-border-radius);
+  --spectrum-actionbutton-quiet-border-size: var(--spectrum-actionbutton-m-quiet-border-size);
+  --spectrum-actionbutton-quiet-text-font-weight: var(--spectrum-actionbutton-m-quiet-text-font-weight);
+  --spectrum-actionbutton-quiet-text-size: var(--spectrum-actionbutton-m-quiet-text-size);
+  --spectrum-actionbutton-text-font-weight: var(--spectrum-actionbutton-m-text-font-weight);
+  --spectrum-actionbutton-text-padding-x: var(--spectrum-actionbutton-m-text-padding-x);
+  --spectrum-actionbutton-text-size: var(--spectrum-actionbutton-m-text-size);
+}
+
+.spectrum-ActionButton--S {
+  --spectrum-actionbutton-border-radius: var(--spectrum-actionbutton-s-border-radius);
+  --spectrum-actionbutton-border-size: var(--spectrum-actionbutton-s-border-size);
+  --spectrum-actionbutton-height: var(--spectrum-actionbutton-s-height);
+  --spectrum-actionbutton-hold-icon-padding-bottom: var(--spectrum-actionbutton-s-hold-icon-padding-bottom);
+  --spectrum-actionbutton-hold-icon-padding-right: var(--spectrum-actionbutton-s-hold-icon-padding-right);
+  --spectrum-actionbutton-icon-gap: var(--spectrum-actionbutton-s-icon-gap);
+  --spectrum-actionbutton-icon-size: var(--spectrum-actionbutton-s-icon-size);
+  --spectrum-actionbutton-min-width: var(--spectrum-actionbutton-s-min-width);
+  --spectrum-actionbutton-quiet-border-radius: var(--spectrum-actionbutton-s-quiet-border-radius);
+  --spectrum-actionbutton-quiet-border-size: var(--spectrum-actionbutton-s-quiet-border-size);
+  --spectrum-actionbutton-quiet-text-font-weight: var(--spectrum-actionbutton-s-quiet-text-font-weight);
+  --spectrum-actionbutton-quiet-text-size: var(--spectrum-actionbutton-s-quiet-text-size);
+  --spectrum-actionbutton-text-font-weight: var(--spectrum-actionbutton-s-text-font-weight);
+  --spectrum-actionbutton-text-padding-x: var(--spectrum-actionbutton-s-text-padding-x);
+  --spectrum-actionbutton-text-size: var(--spectrum-actionbutton-s-text-size);
+}
+
+.spectrum-ActionButton--L {
+  --spectrum-actionbutton-border-radius: var(--spectrum-actionbutton-l-border-radius);
+  --spectrum-actionbutton-border-size: var(--spectrum-actionbutton-l-border-size);
+  --spectrum-actionbutton-height: var(--spectrum-actionbutton-l-height);
+  --spectrum-actionbutton-hold-icon-padding-bottom: var(--spectrum-actionbutton-l-hold-icon-padding-bottom);
+  --spectrum-actionbutton-hold-icon-padding-right: var(--spectrum-actionbutton-l-hold-icon-padding-right);
+  --spectrum-actionbutton-icon-gap: var(--spectrum-actionbutton-l-icon-gap);
+  --spectrum-actionbutton-icon-size: var(--spectrum-actionbutton-l-icon-size);
+  --spectrum-actionbutton-min-width: var(--spectrum-actionbutton-l-min-width);
+  --spectrum-actionbutton-quiet-border-radius: var(--spectrum-actionbutton-l-quiet-border-radius);
+  --spectrum-actionbutton-quiet-border-size: var(--spectrum-actionbutton-l-quiet-border-size);
+  --spectrum-actionbutton-quiet-text-font-weight: var(--spectrum-actionbutton-l-quiet-text-font-weight);
+  --spectrum-actionbutton-quiet-text-size: var(--spectrum-actionbutton-l-quiet-text-size);
+  --spectrum-actionbutton-text-font-weight: var(--spectrum-actionbutton-l-text-font-weight);
+  --spectrum-actionbutton-text-padding-x: var(--spectrum-actionbutton-l-text-padding-x);
+  --spectrum-actionbutton-text-size: var(--spectrum-actionbutton-l-text-size);
+}
+
+.spectrum-ActionButton--XL {
+  --spectrum-actionbutton-border-radius: var(--spectrum-actionbutton-xl-border-radius);
+  --spectrum-actionbutton-border-size: var(--spectrum-actionbutton-xl-border-size);
+  --spectrum-actionbutton-height: var(--spectrum-actionbutton-xl-height);
+  --spectrum-actionbutton-hold-icon-padding-bottom: var(--spectrum-actionbutton-xl-hold-icon-padding-bottom);
+  --spectrum-actionbutton-hold-icon-padding-right: var(--spectrum-actionbutton-xl-hold-icon-padding-right);
+  --spectrum-actionbutton-icon-gap: var(--spectrum-actionbutton-xl-icon-gap);
+  --spectrum-actionbutton-icon-size: var(--spectrum-actionbutton-xl-icon-size);
+  --spectrum-actionbutton-min-width: var(--spectrum-actionbutton-xl-min-width);
+  --spectrum-actionbutton-quiet-border-radius: var(--spectrum-actionbutton-xl-quiet-border-radius);
+  --spectrum-actionbutton-quiet-border-size: var(--spectrum-actionbutton-xl-quiet-border-size);
+  --spectrum-actionbutton-quiet-text-font-weight: var(--spectrum-actionbutton-xl-quiet-text-font-weight);
+  --spectrum-actionbutton-quiet-text-size: var(--spectrum-actionbutton-xl-quiet-text-size);
+  --spectrum-actionbutton-text-font-weight: var(--spectrum-actionbutton-xl-text-font-weight);
+  --spectrum-actionbutton-text-padding-x: var(--spectrum-actionbutton-xl-text-padding-x);
+  --spectrum-actionbutton-text-size: var(--spectrum-actionbutton-xl-text-size);
+}
+
+a.spectrum-ActionButton {
+  @inherit: %spectrum-AnchorButton;
+}
+
+.spectrum-ActionButton {
+  @inherit: %spectrum-BaseButton;
+  position: relative;
+
+  block-size: var(--spectrum-actionbutton-height);
+  min-inline-size: var(--spectrum-actionbutton-min-width);
+
+  /* Use icon padding by default as it's smaller */
+  padding: 0 calc(var(--spectrum-actionbutton-icon-gap) - var(--spectrum-actionbutton-border-size));
+
+  border-width: var(--spectrum-actionbutton-border-size);
+  border-radius: var(--spectrum-actionbutton-border-radius);
+
+  font-size: var(--spectrum-actionbutton-text-size);
+  font-weight: var(--spectrum-actionbutton-text-font-weight);
+
+  .spectrum-Icon + .spectrum-ActionButton-label {
+    /* Have icon padding on the left */
+    padding-inline-start: var(--spectrum-actionbutton-icon-gap);
+
+    /* Have text padding on the right */
+    padding-inline-end: calc(var(--spectrum-actionbutton-text-padding-x) - var(--spectrum-actionbutton-icon-gap));
+  }
+
+  .spectrum-Icon--sizeS:only-child {
+    /* Position absolutely to avoid layout errors introduced by padding */
+    position: absolute;
+    inset-block-start: calc(
+      50% - calc(var(--spectrum-actionbutton-icon-size) / 2)
+    );
+    inset-inline-start: calc(
+      50% - calc(var(--spectrum-actionbutton-icon-size) / 2)
+    );
+  }
+
+  .spectrum-ActionButton-label:only-child {
+    /* Add padding for text only buttons */
+    padding: 0 calc(var(--spectrum-actionbutton-text-padding-x) - var(--spectrum-actionbutton-icon-gap));
+  }
+}
+
+.spectrum-ActionButton-hold {
+  position: absolute;
+  inset-inline-end: var(--spectrum-actionbutton-hold-icon-padding-right);
+  inset-block-end: var(--spectrum-actionbutton-hold-icon-padding-bottom);
+
+  transform: logical rotate(0deg);
+}
+
+.spectrum-ActionButton-label{
+  @inherit: %spectrum-ButtonLabel;
+}
+
+.spectrum-ActionButton-label {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.spectrum-ActionButton--quiet {
+  border-width: var(--spectrum-actionbutton-quiet-border-size);
+  border-radius: var(--spectrum-actionbutton-quiet-border-radius);
+
+  font-size: var(--spectrum-actionbutton-quiet-text-size);
+  font-weight: var(--spectrum-actionbutton-quiet-text-font-weight);
+}