fix: implement "emphasized" styles

adobe · Nov 24, 2020 · 74a7bfb · 74a7bfb
1 parent ad376a4
commit 74a7bfb
Show file tree

Hide file tree

Showing 21 changed files with 181 additions and 180 deletions.
diff --git a/packages/button/action-button.md b/packages/button/action-button.md
@@ -66,6 +66,18 @@ import { ActionButton } from '@spectrum-web-components/button';
 </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>
+```
+
 ## 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
@@ -40,6 +40,9 @@ export class ActionButton extends ButtonBase {
     @property({ type: Boolean, reflect: true })
     public quiet = false;
 
+    @property({ type: Boolean, reflect: true })
+    public emphasized = false;
+
     constructor() {
         super();
         this.addEventListener('click', this.onClick);

diff --git a/packages/button/src/spectrum-action-button.css b/packages/button/src/spectrum-action-button.css
@@ -462,7 +462,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
         var(--spectrum-alias-icon-color-disabled)
     );
 }
-.spectrum-ActionButton--emphasized {
+:host([emphasized]) .button {
     /* .spectrum-ActionButton--emphasized */
     background-color: var(
         --spectrum-actionbutton-emphasized-background-color,
@@ -477,35 +477,35 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
         var(--spectrum-alias-text-color)
     );
 }
-.spectrum-ActionButton--emphasized ::slotted([slot='icon']) {
+:host([emphasized]) ::slotted([slot='icon']) {
     /* .spectrum-ActionButton--emphasized .spectrum-Icon */
     color: var(
         --spectrum-actionbutton-emphasized-icon-color,
         var(--spectrum-alias-icon-color)
     );
 }
-.spectrum-ActionButton--emphasized #hold-affordance {
+:host([emphasized]) #hold-affordance {
     /* .spectrum-ActionButton--emphasized .spectrum-ActionButton-hold */
     color: var(
         --spectrum-actionbutton-emphasized-hold-icon-color,
         var(--spectrum-alias-icon-color)
     );
 }
-:host([selected]) .spectrum-ActionButton--emphasized #hold-affordance {
+:host([emphasized][selected]) .button #hold-affordance {
     /* .spectrum-ActionButton--emphasized.is-selected .spectrum-ActionButton-hold */
     color: var(
         --spectrum-actionbutton-emphasized-hold-icon-color-selected,
         var(--spectrum-global-color-static-white)
     );
 }
-:host([selected]) .spectrum-ActionButton--emphasized:hover #hold-affordance {
+:host([emphasized][selected]) .button:hover #hold-affordance {
     /* .spectrum-ActionButton--emphasized.is-selected:hover .spectrum-ActionButton-hold */
     color: var(
         --spectrum-actionbutton-emphasized-text-color-selected-hover,
         var(--spectrum-global-color-static-white)
     );
 }
-.spectrum-ActionButton--emphasized:hover {
+:host([emphasized]) .button:hover {
     /* .spectrum-ActionButton--emphasized:hover */
     background-color: var(
         --spectrum-actionbutton-emphasized-background-color-hover,
@@ -521,21 +521,21 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
         var(--spectrum-alias-text-color-hover)
     );
 }
-.spectrum-ActionButton--emphasized:hover ::slotted([slot='icon']) {
+:host([emphasized]) .button:hover ::slotted([slot='icon']) {
     /* .spectrum-ActionButton--emphasized:hover .spectrum-Icon */
     color: var(
         --spectrum-actionbutton-emphasized-icon-color-hover,
         var(--spectrum-alias-icon-color-hover)
     );
 }
-.spectrum-ActionButton--emphasized:hover #hold-affordance {
+:host([emphasized]) .button:hover #hold-affordance {
     /* .spectrum-ActionButton--emphasized:hover .spectrum-ActionButton-hold */
     color: var(
         --spectrum-actionbutton-emphasized-hold-icon-color-hover,
         var(--spectrum-alias-icon-color-hover)
     );
 }
-.spectrum-ActionButton--emphasized:focus-visible {
+:host([emphasized]) .button:focus-visible {
     /* .spectrum-ActionButton--emphasized.focus-ring */
     background-color: var(
         --spectrum-actionbutton-emphasized-background-color-key-focus,
@@ -556,21 +556,21 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
         var(--spectrum-alias-text-color-hover)
     );
 }
-.spectrum-ActionButton--emphasized:focus-visible ::slotted([slot='icon']) {
+:host([emphasized]) .button:focus-visible ::slotted([slot='icon']) {
     /* .spectrum-ActionButton--emphasized.focus-ring .spectrum-Icon */
     color: var(
         --spectrum-actionbutton-emphasized-icon-color-key-focus,
         var(--spectrum-alias-icon-color-focus)
     );
 }
-.spectrum-ActionButton--emphasized:focus-visible #hold-affordance {
+:host([emphasized]) .button:focus-visible #hold-affordance {
     /* .spectrum-ActionButton--emphasized.focus-ring .spectrum-ActionButton-hold */
     color: var(
         --spectrum-actionbutton-emphasized-hold-icon-color-key-focus,
         var(--spectrum-alias-icon-color-hover)
     );
 }
-.spectrum-ActionButton--emphasized.is-active {
+:host([emphasized]) .button.is-active {
     /* .spectrum-ActionButton--emphasized.is-active */
     background-color: var(
         --spectrum-actionbutton-emphasized-background-color-down,
@@ -586,14 +586,14 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
         var(--spectrum-alias-text-color-down)
     );
 }
-.spectrum-ActionButton--emphasized.is-active #hold-affordance {
+:host([emphasized]) .button.is-active #hold-affordance {
     /* .spectrum-ActionButton--emphasized.is-active .spectrum-ActionButton-hold */
     color: var(
         --spectrum-actionbutton-emphasized-hold-icon-color-down,
         var(--spectrum-alias-icon-color-down)
     );
 }
-:host([disabled]) .spectrum-ActionButton--emphasized {
+:host([emphasized][disabled]) .button {
     /* .spectrum-ActionButton--emphasized.is-disabled,
    * .spectrum-ActionButton--emphasized:disabled */
     background-color: var(
@@ -609,24 +609,24 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
         var(--spectrum-alias-text-color-disabled)
     );
 }
-:host([disabled]) .spectrum-ActionButton--emphasized ::slotted([slot='icon']) {
+:host([emphasized][disabled]) .button ::slotted([slot='icon']) {
     /* .spectrum-ActionButton--emphasized.is-disabled .spectrum-Icon,
    * .spectrum-ActionButton--emphasized:disabled .spectrum-Icon */
     color: var(
         --spectrum-actionbutton-emphasized-icon-color-disabled,
         var(--spectrum-alias-icon-color-disabled)
     );
 }
-:host([disabled]) .spectrum-ActionButton--emphasized #hold-affordance {
+:host([emphasized][disabled]) .button #hold-affordance {
     /* .spectrum-ActionButton--emphasized.is-disabled .spectrum-ActionButton-hold,
    * .spectrum-ActionButton--emphasized:disabled .spectrum-ActionButton-hold */
     color: var(
         --spectrum-actionbutton-emphasized-hold-icon-color-disabled,
         var(--spectrum-alias-icon-color-disabled)
     );
 }
-:host([selected]) .spectrum-ActionButton--emphasized,
-:host([quiet][selected]) .spectrum-ActionButton--emphasized {
+:host([emphasized][selected]) .button,
+:host([emphasized][quiet][selected]) .button {
     /* .spectrum-ActionButton--emphasized.is-selected,
    * .spectrum-ActionButton--emphasized.spectrum-ActionButton--quiet.is-selected */
     background-color: var(
@@ -642,19 +642,17 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
         var(--spectrum-global-color-static-white)
     );
 }
-:host([selected]) .spectrum-ActionButton--emphasized ::slotted([slot='icon']),
-:host([quiet][selected])
-    .spectrum-ActionButton--emphasized
-    ::slotted([slot='icon']) {
+:host([emphasized][selected]) .button ::slotted([slot='icon']),
+:host([emphasized][quiet][selected]) .button ::slotted([slot='icon']) {
     /* .spectrum-ActionButton--emphasized.is-selected .spectrum-Icon,
    * .spectrum-ActionButton--emphasized.spectrum-ActionButton--quiet.is-selected .spectrum-Icon */
     color: var(
         --spectrum-actionbutton-emphasized-icon-color-selected,
         var(--spectrum-global-color-static-white)
     );
 }
-:host([selected]) .spectrum-ActionButton--emphasized:focus-visible,
-:host([quiet][selected]) .spectrum-ActionButton--emphasized:focus-visible {
+:host([emphasized][selected]) .button:focus-visible,
+:host([emphasized][quiet][selected]) .button:focus-visible {
     /* .spectrum-ActionButton--emphasized.is-selected.focus-ring,
    * .spectrum-ActionButton--emphasized.spectrum-ActionButton--quiet.is-selected.focus-ring */
     background-color: var(
@@ -670,11 +668,9 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
         var(--spectrum-global-color-static-white)
     );
 }
-:host([selected])
-    .spectrum-ActionButton--emphasized:focus-visible
-    ::slotted([slot='icon']),
-:host([quiet][selected])
-    .spectrum-ActionButton--emphasized:focus-visible
+:host([emphasized][selected]) .button:focus-visible ::slotted([slot='icon']),
+:host([emphasized][quiet][selected])
+    .button:focus-visible
     ::slotted([slot='icon']) {
     /* .spectrum-ActionButton--emphasized.is-selected.focus-ring .spectrum-Icon,
    * .spectrum-ActionButton--emphasized.spectrum-ActionButton--quiet.is-selected.focus-ring .spectrum-Icon */
@@ -683,8 +679,8 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
         var(--spectrum-global-color-static-white)
     );
 }
-:host([selected]) .spectrum-ActionButton--emphasized:hover,
-:host([quiet][selected]) .spectrum-ActionButton--emphasized:hover {
+:host([emphasized][selected]) .button:hover,
+:host([emphasized][quiet][selected]) .button:hover {
     /* .spectrum-ActionButton--emphasized.is-selected:hover,
    * .spectrum-ActionButton--emphasized.spectrum-ActionButton--quiet.is-selected:hover */
     background-color: var(
@@ -700,21 +696,17 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
         var(--spectrum-global-color-static-white)
     );
 }
-:host([selected])
-    .spectrum-ActionButton--emphasized:hover
-    ::slotted([slot='icon']),
-:host([quiet][selected])
-    .spectrum-ActionButton--emphasized:hover
-    ::slotted([slot='icon']) {
+:host([emphasized][selected]) .button:hover ::slotted([slot='icon']),
+:host([emphasized][quiet][selected]) .button:hover ::slotted([slot='icon']) {
     /* .spectrum-ActionButton--emphasized.is-selected:hover .spectrum-Icon,
    * .spectrum-ActionButton--emphasized.spectrum-ActionButton--quiet.is-selected:hover .spectrum-Icon */
     color: var(
         --spectrum-actionbutton-emphasized-icon-color-selected-hover,
         var(--spectrum-global-color-static-white)
     );
 }
-:host([selected]) .spectrum-ActionButton--emphasized.is-active,
-:host([quiet][selected]) .spectrum-ActionButton--emphasized.is-active {
+:host([emphasized][selected]) .button.is-active,
+:host([emphasized][quiet][selected]) .button.is-active {
     /* .spectrum-ActionButton--emphasized.is-selected.is-active,
    * .spectrum-ActionButton--emphasized.spectrum-ActionButton--quiet.is-selected.is-active */
     background-color: var(
@@ -730,11 +722,9 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
         var(--spectrum-global-color-static-white)
     );
 }
-:host([selected])
-    .spectrum-ActionButton--emphasized.is-active
-    ::slotted([slot='icon']),
-:host([quiet][selected])
-    .spectrum-ActionButton--emphasized.is-active
+:host([emphasized][selected]) .button.is-active ::slotted([slot='icon']),
+:host([emphasized][quiet][selected])
+    .button.is-active
     ::slotted([slot='icon']) {
     /* .spectrum-ActionButton--emphasized.is-selected.is-active .spectrum-Icon,
    * .spectrum-ActionButton--emphasized.spectrum-ActionButton--quiet.is-selected.is-active .spectrum-Icon */
@@ -743,8 +733,8 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
         var(--spectrum-global-color-static-white)
     );
 }
-:host([selected][disabled]) .spectrum-ActionButton--emphasized,
-:host([quiet][selected][disabled]) .spectrum-ActionButton--emphasized {
+:host([emphasized][selected][disabled]) .button,
+:host([emphasized][quiet][selected][disabled]) .button {
     /* .spectrum-ActionButton--emphasized.is-selected.is-disabled,
    * .spectrum-ActionButton--emphasized.is-selected:disabled,
    * .spectrum-ActionButton--emphasized.spectrum-ActionButton--quiet.is-selected.is-disabled,
@@ -762,11 +752,9 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
         var(--spectrum-alias-text-color-disabled)
     );
 }
-:host([selected][disabled])
-    .spectrum-ActionButton--emphasized
-    ::slotted([slot='icon']),
-:host([quiet][selected][disabled])
-    .spectrum-ActionButton--emphasized
+:host([emphasized][selected][disabled]) .button ::slotted([slot='icon']),
+:host([emphasized][quiet][selected][disabled])
+    .button
     ::slotted([slot='icon']) {
     /* .spectrum-ActionButton--emphasized.is-selected.is-disabled .spectrum-Icon,
    * .spectrum-ActionButton--emphasized.is-selected:disabled .spectrum-Icon,

diff --git a/packages/button/src/spectrum-config.js b/packages/button/src/spectrum-config.js
@@ -121,6 +121,11 @@ const config = {
                     name: 'selected',
                     selector: '.is-selected',
                 },
+                {
+                    type: 'boolean',
+                    name: 'emphasized',
+                    selector: '.spectrum-ActionButton--emphasized',
+                },
             ],
             ids: [
                 '.spectrum-ActionButton-label',

diff --git a/packages/button/stories/action-button.stories.ts b/packages/button/stories/action-button.stories.ts
@@ -20,15 +20,17 @@ interface Properties {
     disabled?: boolean;
     selected?: boolean;
     toggles?: boolean;
+    emphasized?: boolean;
 }
 
 function renderButton(properties: Properties): TemplateResult {
     return html`
         <sp-action-button
-            .quiet="${!!properties.quiet}"
-            .disabled=${!!properties.disabled}
-            .selected=${!!properties.selected}
-            .toggles=${!!properties.toggles}
+            ?quiet="${!!properties.quiet}"
+            ?emphasized="${!!properties.emphasized}"
+            ?disabled=${!!properties.disabled}
+            ?selected=${!!properties.selected}
+            ?toggles=${!!properties.toggles}
             @click=${action(`Action`)}
         >
             Action
@@ -60,6 +62,22 @@ export const Default = (): TemplateResult => {
     });
 };
 
+export const emphasized = (): TemplateResult => {
+    return renderButtonsSelected({
+        emphasized: true,
+        disabled: false,
+        selected: false,
+    });
+};
+
+export const quiet = (): TemplateResult => {
+    return renderButtonsSelected({
+        quiet: true,
+        disabled: false,
+        selected: false,
+    });
+};
+
 export const toggles = (): TemplateResult => {
     return renderButtonsSelected({
         toggles: true,

diff --git a/packages/checkbox/README.md b/packages/checkbox/README.md
@@ -35,9 +35,9 @@ import { Checkbox } from '@spectrum-web-components/checkbox';
 
 ### Standard checkboxes
 
-Standard checkboxes are the default style for checkboxes. The blue color
-provides a visual prominence that is optimal for forms, settings, lists or grids
-of assets, etc. where the checkboxes need to be noticed.
+Standard checkboxes are the default style for checkboxes. They are optimal for
+application panels where all visual elements are monochrome in order to direct
+focus to the content.
 
 ```html-live
 <div style="display: flex; justify-content: space-between;">
@@ -64,20 +64,19 @@ of assets, etc. where the checkboxes need to be noticed.
 </div>
 ```
 
-### Quiet checkboxes
+### Emphasized checkboxes
 
-Quiet checkboxes are a secondary style for checkboxes. The gray color provides a
-less prominent style than the standard checkboxes. They are optimal for
-application panels where all visual elements are monochrome in order to direct
-focus to the content.
+Emphasized checkboxes are a secondary style for checkboxes. The blue color
+provides a visual prominence that is optimal for forms, settings, lists or grids
+of assets, etc. where the checkboxes need to be noticed.
 
 ```html-live
 <div style="display: flex; justify-content: space-between;">
     <div style="display: flex; flex-direction: column; justify-content: space-between;">
         <h4 class="spectrum-Heading--subtitle1">Default</h4>
-        <sp-checkbox quiet>Web component</sp-checkbox>
-        <sp-checkbox quiet checked>Web component</sp-checkbox>
-        <sp-checkbox quiet indeterminate>Web component</sp-checkbox>
+        <sp-checkbox emphasized>Web component</sp-checkbox>
+        <sp-checkbox emphasized checked>Web component</sp-checkbox>
+        <sp-checkbox emphasized indeterminate>Web component</sp-checkbox>
     </div>
 
     <div style="display: flex; flex-direction: column;">

diff --git a/packages/checkbox/src/Checkbox.ts b/packages/checkbox/src/Checkbox.ts
@@ -34,6 +34,9 @@ export class Checkbox extends CheckboxBase {
     @property({ type: Boolean, reflect: true })
     public invalid = false;
 
+    @property({ type: Boolean, reflect: true })
+    public emphasized = false;
+
     public static get styles(): CSSResultArray {
         return [checkboxStyles, checkmarkSmallStyles, dashSmallStyles];
     }