fix(button): delivery hold affordance when attribute available

adobe · Jan 4, 2021 · aecc6fe · aecc6fe
1 parent 48fd67d
commit aecc6fe
Show file tree

Hide file tree

Showing 5 changed files with 95 additions and 3 deletions.
diff --git a/documentation/src/components/component.ts b/documentation/src/components/component.ts
@@ -69,7 +69,7 @@ function buildTable(
 ): TemplateResult {
     return html`
         <div class="headerContainer">
-            <h2 class="spectrum-Heading spectrum-Heading--M">${title}</h2>
+            <h2 class="spectrum-Heading spectrum-Heading--sizeM">${title}</h2>
             <sp-rule size="small"></sp-rule>
         </div>
         <table class="spectrum-Table">
@@ -172,7 +172,7 @@ class ComponentElement extends RouteComponent {
                 <article class="spectrum-Typography">
                     <div id="title-header">
                         <h1
-                            class="spectrum-Heading spectrum-Heading--XXL spectrum-Heading--serif"
+                            class="spectrum-Heading spectrum-Heading--sizeXXL spectrum-Heading--serif"
                         >
                             ${this.componentName}
                         </h1>

diff --git a/packages/button/action-button.md b/packages/button/action-button.md
@@ -78,6 +78,44 @@ import { ActionButton } from '@spectrum-web-components/button';
 </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`:

diff --git a/packages/button/src/ActionButton.ts b/packages/button/src/ActionButton.ts
@@ -12,11 +12,16 @@ governing permissions and limitations under the License.
 
 import {
     CSSResultArray,
+    html,
     property,
     PropertyValues,
+    TemplateResult,
 } from '@spectrum-web-components/base';
 import { ButtonBase } from './ButtonBase.js';
 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 { CornerTriangleIcon } from '@spectrum-web-components/icons-ui';
 
 /**
  * @element sp-card
@@ -25,7 +30,7 @@ import buttonStyles from './action-button.css.js';
  */
 export class ActionButton extends ButtonBase {
     public static get styles(): CSSResultArray {
-        return [...super.styles, buttonStyles];
+        return [...super.styles, buttonStyles, cornerTriangleStyles];
     }
 
     @property({ type: Boolean, reflect: true, attribute: 'hold-affordance' })
@@ -63,6 +68,18 @@ export class ActionButton extends ButtonBase {
         }
     };
 
+    protected get buttonContent(): TemplateResult[] {
+        const buttonContent = super.buttonContent;
+        if (this.holdAffordance) {
+            buttonContent.push(html`
+                <sp-icon id="hold-affordance" class="corner-triangle">
+                    ${CornerTriangleIcon({ hidden: true })}
+                </sp-icon>
+            `);
+        }
+        return buttonContent;
+    }
+
     protected updated(changes: PropertyValues): void {
         super.updated(changes);
         if (this.toggles && changes.has('selected')) {

diff --git a/packages/button/stories/action-button.stories.ts b/packages/button/stories/action-button.stories.ts
@@ -122,3 +122,39 @@ export const iconOnlyButton = (): TemplateResult => {
         </sp-action-button>
     `;
 };
+
+export const holdAffordance = (): TemplateResult => {
+    return html`
+        <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>
+    `;
+};
diff --git a/test/visual/stories.js b/test/visual/stories.js
@@ -51,6 +51,7 @@ module.exports = [
     'actionbutton--emphasized',
     'actionbutton--w-icon-button',
     'actionbutton--icon-only-button',
+    'actionbutton--hold-affordance',
     'button--default',
     'button--variant-cta',
     'button--variant-primary',