feat(action-button): add action button pattern

adobe · Jan 6, 2021 · 03ac00a · 03ac00a
1 parent fade3ea
commit 03ac00a
Show file tree

Hide file tree

Showing 96 changed files with 8,467 additions and 6,571 deletions.
diff --git a/documentation/src/components/layout.ts b/documentation/src/components/layout.ts
@@ -28,7 +28,7 @@ import { Dropdown } from '@spectrum-web-components/dropdown';
 import '@spectrum-web-components/dropdown/sp-dropdown.js';
 import '@spectrum-web-components/menu/sp-menu.js';
 import '@spectrum-web-components/menu/sp-menu-item.js';
-import '@spectrum-web-components/button/sp-action-button.js';
+import '@spectrum-web-components/action-button/sp-action-button.js';
 import '@spectrum-web-components/toast/sp-toast.js';
 
 const SWC_THEME_COLOR_KEY = 'swc-docs:theme:color';

diff --git a/packages/accordion/src/spectrum-accordion-item.css b/packages/accordion/src/spectrum-accordion-item.css
@@ -30,13 +30,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
     display: block;
     position: absolute;
     top: calc(
-        (
-                var(--spectrum-accordion-item-height, 40px) -
-                    var(
-                        --spectrum-accordion-item-border-size,
-                        var(--spectrum-alias-border-size-thin)
-                    )
-            ) / 2 -
+        50% -
             var(
                 --spectrum-accordion-icon-height,
                 var(--spectrum-global-dimension-size-125)
@@ -68,7 +62,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
 #heading {
     /* .spectrum-Accordion-itemHeading */
     margin: 0;
-    height: var(--spectrum-accordion-item-height, 40px);
+    position: relative;
     box-sizing: border-box;
 }
 :host([dir='ltr']) #header {
@@ -77,11 +71,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
         var(
                 --spectrum-accordion-item-padding-x,
                 var(--spectrum-global-dimension-size-225)
-            ) +
-            var(
-                --spectrum-accordion-icon-width,
-                var(--spectrum-global-dimension-size-75)
-            ) +
+            ) + var(--spectrum-global-dimension-size-125) +
             var(
                 --spectrum-accordion-icon-gap,
                 var(--spectrum-global-dimension-size-100)
@@ -98,11 +88,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
         var(
                 --spectrum-accordion-item-padding-x,
                 var(--spectrum-global-dimension-size-225)
-            ) +
-            var(
-                --spectrum-accordion-icon-width,
-                var(--spectrum-global-dimension-size-75)
-            ) +
+            ) + var(--spectrum-global-dimension-size-125) +
             var(
                 --spectrum-accordion-icon-gap,
                 var(--spectrum-global-dimension-size-100)
@@ -146,7 +132,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
     padding-bottom: var(--spectrum-global-dimension-size-150);
     margin: 0;
     min-height: calc(
-        var(--spectrum-accordion-item-height, 40px) -
+        100% -
             var(
                 --spectrum-accordion-item-border-size,
                 var(--spectrum-alias-border-size-thin)
@@ -238,7 +224,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
 :host([open]) > #header:after {
     /* .spectrum-Accordion-item.is-open>.spectrum-Accordion-itemHeader:after */
     height: calc(
-        var(--spectrum-accordion-item-height, 40px) -
+        100% -
             var(
                 --spectrum-accordion-item-border-size,
                 var(--spectrum-alias-border-size-thin)

diff --git a/packages/action-button/README.md b/packages/action-button/README.md
@@ -0,0 +1,127 @@
+## Description
+
+An `<sp-action-button>` represents an action a user can take.
+
+### Usage
+
+[![See it on NPM!](https://img.shields.io/npm/v/@spectrum-web-components/action-button?style=for-the-badge)](https://www.npmjs.com/package/@spectrum-web-components/action-button)
+[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@spectrum-web-components/action-button?style=for-the-badge)](https://bundlephobia.com/result?p=@spectrum-web-components/action-button)
+
+```
+yarn add @spectrum-web-components/action-button
+```
+
+Import the side effectful registration of `<sp-action-button>` via:
+
+```
+import '@spectrum-web-components/action-button/sp-action-button.js';
+```
+
+When looking to leverage the `ActionButton` base class as a type and/or for extension purposes, do so via:
+
+```
+import { ActionButton } from '@spectrum-web-components/action-button';
+```
+
+## Example
+
+```html demo
+<sp-button-group>
+    <sp-action-button>
+        Do action
+    </sp-action-button>
+    <sp-action-button selected>
+        Do action
+    </sp-action-button>
+    <sp-action-button disabled>
+        Do action
+    </sp-action-button>
+</sp-button-group>
+```
+
+## Variants
+
+### Action button with icon
+
+```html demo
+<sp-action-button>
+    <svg slot="icon" id="spectrum-icon-18-Edit" viewBox="0 0 36 36">
+        <path
+            d="M33.567 8.2L27.8 2.432a1.215 1.215 0 0 0-.866-.353H26.9a1.371 1.371 0 0 0-.927.406L5.084 23.372a.99.99 0 0 0-.251.422L2.055 33.1c-.114.377.459.851.783.851a.251.251 0 0 0 .062-.007c.276-.063 7.866-2.344 9.311-2.778a.972.972 0 0 0 .414-.249l20.888-20.889a1.372 1.372 0 0 0 .4-.883 1.221 1.221 0 0 0-.346-.945zM11.4 29.316c-2.161.649-4.862 1.465-6.729 2.022l2.009-6.73z"
+        ></path>
+    </svg>
+    This is an action button
+</sp-action-button>
+```
+
+### Icon only action button
+
+```html demo
+<sp-action-button label="Edit">
+    <svg slot="icon" id="spectrum-icon-18-Edit" viewBox="0 0 36 36">
+        <path
+            d="M33.567 8.2L27.8 2.432a1.215 1.215 0 0 0-.866-.353H26.9a1.371 1.371 0 0 0-.927.406L5.084 23.372a.99.99 0 0 0-.251.422L2.055 33.1c-.114.377.459.851.783.851a.251.251 0 0 0 .062-.007c.276-.063 7.866-2.344 9.311-2.778a.972.972 0 0 0 .414-.249l20.888-20.889a1.372 1.372 0 0 0 .4-.883 1.221 1.221 0 0 0-.346-.945zM11.4 29.316c-2.161.649-4.862 1.465-6.729 2.022l2.009-6.73z"
+        ></path>
+    </svg>
+</sp-action-button>
+```
+
+### Emphasized action button
+
+```html demo
+<sp-action-button label="Edit" emphasized selected>
+    <svg slot="icon" id="spectrum-icon-18-Edit" viewBox="0 0 36 36">
+        <path
+            d="M33.567 8.2L27.8 2.432a1.215 1.215 0 0 0-.866-.353H26.9a1.371 1.371 0 0 0-.927.406L5.084 23.372a.99.99 0 0 0-.251.422L2.055 33.1c-.114.377.459.851.783.851a.251.251 0 0 0 .062-.007c.276-.063 7.866-2.344 9.311-2.778a.972.972 0 0 0 .414-.249l20.888-20.889a1.372 1.372 0 0 0 .4-.883 1.221 1.221 0 0 0-.346-.945zM11.4 29.316c-2.161.649-4.862 1.465-6.729 2.022l2.009-6.73z"
+        ></path>
+    </svg>
+</sp-action-button>
+```
+
+### Action button with hold affordance
+
+The use of the `hold-affordance` attribute signifies that the `<sp-action-button>` in question will be delivered with a visual affordance that can be used to outline that additional related content can be acquired via further interaction with the button (e.g. a click, longpress, etc.).
+
+```html demo
+<sp-action-group>
+    <sp-action-button label="Edit" hold-affordance>
+        <svg slot="icon" id="spectrum-icon-18-Edit" viewBox="0 0 36 36">
+            <path
+                d="M33.567 8.2L27.8 2.432a1.215 1.215 0 0 0-.866-.353H26.9a1.371 1.371 0 0 0-.927.406L5.084 23.372a.99.99 0 0 0-.251.422L2.055 33.1c-.114.377.459.851.783.851a.251.251 0 0 0 .062-.007c.276-.063 7.866-2.344 9.311-2.778a.972.972 0 0 0 .414-.249l20.888-20.889a1.372 1.372 0 0 0 .4-.883 1.221 1.221 0 0 0-.346-.945zM11.4 29.316c-2.161.649-4.862 1.465-6.729 2.022l2.009-6.73z"
+            ></path>
+        </svg>
+    </sp-action-button>
+
+    <sp-action-button hold-affordance quiet>
+        <svg
+            slot="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            height="18"
+            viewBox="0 0 18 18"
+            width="18"
+        >
+            <path
+                d="M16.45,7.8965H14.8945a5.97644,5.97644,0,0,0-.921-2.2535L15.076,4.54a.55.55,0,0,0,.00219-.77781L15.076,3.76l-.8365-.836a.55.55,0,0,0-.77781-.00219L13.4595,2.924,12.357,4.0265a5.96235,5.96235,0,0,0-2.2535-.9205V1.55a.55.55,0,0,0-.55-.55H8.45a.55.55,0,0,0-.55.55V3.106a5.96235,5.96235,0,0,0-2.2535.9205l-1.1-1.1025a.55.55,0,0,0-.77781-.00219L3.7665,2.924,2.924,3.76a.55.55,0,0,0-.00219.77781L2.924,4.54,4.0265,5.643a5.97644,5.97644,0,0,0-.921,2.2535H1.55a.55.55,0,0,0-.55.55V9.55a.55.55,0,0,0,.55.55H3.1055a5.967,5.967,0,0,0,.921,2.2535L2.924,13.4595a.55.55,0,0,0-.00219.77782l.00219.00218.8365.8365a.55.55,0,0,0,.77781.00219L4.5405,15.076,5.643,13.9735a5.96235,5.96235,0,0,0,2.2535.9205V16.45a.55.55,0,0,0,.55.55H9.55a.55.55,0,0,0,.55-.55V14.894a5.96235,5.96235,0,0,0,2.2535-.9205L13.456,15.076a.55.55,0,0,0,.77782.00219L14.236,15.076l.8365-.8365a.55.55,0,0,0,.00219-.77781l-.00219-.00219L13.97,12.357a5.967,5.967,0,0,0,.921-2.2535H16.45a.55.55,0,0,0,.55-.55V8.45a.55.55,0,0,0-.54649-.55349ZM11.207,9A2.207,2.207,0,1,1,9,6.793H9A2.207,2.207,0,0,1,11.207,9Z"
+            />
+        </svg>
+    </sp-action-button>
+
+    <sp-action-button hold-affordance selected>
+        <svg slot="icon" id="spectrum-icon-18-More" viewBox="0 0 36 36">
+            <circle cx="17.8" cy="18.2" r="3.4"></circle>
+            <circle cx="29.5" cy="18.2" r="3.4"></circle>
+            <circle cx="6.1" cy="18.2" r="3.4"></circle>
+        </svg>
+    </sp-action-button>
+</sp-action-group>
+```
+
+## Toggles
+
+With the application of the `toggles` attribute, the button will self manage its `selected` property on `click`:
+
+```html demo
+<sp-action-button toggles>
+    Toggle button
+</sp-action-button>
+```
diff --git a/packages/action-button/package.json b/packages/action-button/package.json
@@ -0,0 +1,59 @@
+{
+    "name": "@spectrum-web-components/action-button",
+    "publishConfig": {
+        "access": "public"
+    },
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/adobe/spectrum-web-components.git",
+        "directory": "packages/action-button"
+    },
+    "bugs": {
+        "url": "https://github.com/adobe/spectrum-web-components/issues"
+    },
+    "homepage": "https://adobe.github.io/spectrum-web-components/components/action-button",
+    "keywords": [
+        "spectrum css",
+        "web components",
+        "lit-element",
+        "lit-html"
+    ],
+    "version": "0.0.1",
+    "description": "",
+    "main": "src/index.js",
+    "module": "src/index.js",
+    "type": "module",
+    "exports": {
+        "./src/": "./src/",
+        "./custom-elements.json": "./custom-elements.json",
+        "./package.json": "./package.json",
+        "./sp-action-button": "./sp-action-button.js",
+        "./sp-action-button.js": "./sp-action-button.js"
+    },
+    "files": [
+        "custom-elements.json",
+        "*.d.ts",
+        "*.js",
+        "*.js.map",
+        "/src/"
+    ],
+    "sideEffects": [
+        "./sp-*.js",
+        "./sp-*.ts"
+    ],
+    "scripts": {
+        "test": "echo \"Error: run tests from mono-repo root.\" && exit 1"
+    },
+    "author": "",
+    "license": "Apache-2.0",
+    "devDependencies": {
+        "@spectrum-css/actionbutton": "^1.0.0-beta.1",
+        "@spectrum-web-components/icon": "^0.6.3",
+        "@spectrum-web-components/icons-workflow": "^0.3.6"
+    },
+    "dependencies": {
+        "@spectrum-web-components/base": "^0.1.0",
+        "@spectrum-web-components/button": "^0.9.4",
+        "tslib": "^2.0.0"
+    }
+}
diff --git a/packages/action-button/sp-action-button.ts b/packages/action-button/sp-action-button.ts
@@ -0,0 +1,21 @@
+/*
+Copyright 2020 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 { ActionButton } from './src/ActionButton.js';
+
+customElements.define('sp-action-button', ActionButton);
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'sp-action-button': ActionButton;
+    }
+}
diff --git a/packages/action-button/src/ActionButton.ts b/packages/action-button/src/ActionButton.ts
@@ -0,0 +1,99 @@
+/*
+Copyright 2020 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 {
+    CSSResultArray,
+    html,
+    property,
+    PropertyValues,
+    TemplateResult,
+} from '@spectrum-web-components/base';
+import { ButtonBase } from '@spectrum-web-components/button';
+import buttonStyles from './action-button.css.js';
+import '@spectrum-web-components/icon/sp-icon.js';
+import cornerTriangleStyles from '@spectrum-web-components/icon/src/spectrum-icon-corner-triangle.css.js';
+import { CornerTriangle300Icon } from '@spectrum-web-components/icons-ui';
+
+/**
+ * @element sp-card
+ *
+ * @fires change - Announces a change in the `selected` property of an action button
+ */
+export class ActionButton extends ButtonBase {
+    public static get styles(): CSSResultArray {
+        return [buttonStyles, cornerTriangleStyles];
+    }
+
+    @property({ type: Boolean, reflect: true, attribute: 'hold-affordance' })
+    public holdAffordance = false;
+
+    @property({ type: Boolean, reflect: true })
+    public selected = false;
+
+    @property({ type: Boolean, reflect: true })
+    public toggles = false;
+
+    @property({ type: Boolean, reflect: true })
+    public quiet = false;
+
+    @property({ type: String, reflect: true })
+    public size = 'm';
+
+    @property({ type: Boolean, reflect: true })
+    public emphasized = false;
+
+    constructor() {
+        super();
+        this.addEventListener('click', this.onClick);
+    }
+
+    private onClick = (): void => {
+        if (!this.toggles) {
+            return;
+        }
+        this.selected = !this.selected;
+        const applyDefault = this.dispatchEvent(
+            new Event('change', {
+                cancelable: true,
+            })
+        );
+        if (!applyDefault) {
+            this.selected = !this.selected;
+        }
+    };
+
+    protected get buttonContent(): TemplateResult[] {
+        const buttonContent = super.buttonContent;
+        if (this.holdAffordance) {
+            buttonContent.unshift(html`
+                <sp-icon
+                    id="hold-affordance"
+                    size="none"
+                    class="spectrum-UIIcon-CornerTriangle75"
+                >
+                    ${CornerTriangle300Icon()}
+                </sp-icon>
+            `);
+        }
+        return buttonContent;
+    }
+
+    protected updated(changes: PropertyValues): void {
+        super.updated(changes);
+        if (this.toggles && changes.has('selected')) {
+            this.focusElement.setAttribute(
+                'aria-pressed',
+                this.selected ? 'true' : 'false'
+            );
+        }
+    }
+}