fix(dropdown): correctly support "quiet" variant

adobe · Feb 28, 2020 · 2a51a2b · 2a51a2b
1 parent f7e54e5
commit 2a51a2b
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 19 deletions.
diff --git a/packages/button/src/spectrum-config.js b/packages/button/src/spectrum-config.js
@@ -26,6 +26,11 @@ module.exports = {
                     selector: '.is-invalid',
                     name: 'invalid',
                 },
+                {
+                    type: 'boolean',
+                    selector: '.spectrum-FieldButton--quiet',
+                    name: 'quiet',
+                },
             ],
             classes: [
                 {

diff --git a/packages/button/src/spectrum-fieldbutton.css b/packages/button/src/spectrum-fieldbutton.css
@@ -140,7 +140,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
         var(--spectrum-alias-border-size-thin)
     );
 }
-.spectrum-FieldButton--quiet {
+:host([quiet]) #button {
     /* .spectrum-FieldButton--quiet */
     margin: 0;
     padding: 0;
@@ -296,7 +296,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
         var(--spectrum-alias-icon-color-disabled)
     );
 }
-.spectrum-FieldButton--quiet:hover {
+:host([quiet]) #button:hover {
     /* .spectrum-FieldButton--quiet:hover */
     background-color: var(
         --spectrum-fieldbutton-quiet-background-color-hover,
@@ -307,8 +307,8 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
         var(--spectrum-alias-text-color-hover)
     );
 }
-.spectrum-FieldButton--quiet:focus-visible,
-.spectrum-FieldButton--quiet.is-focused {
+:host([quiet]) #button:focus-visible,
+:host([quiet]) #button.is-focused {
     /* .spectrum-FieldButton--quiet.focus-ring,
    * .spectrum-FieldButton--quiet.is-focused */
     background-color: var(
@@ -321,17 +321,17 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
             var(--spectrum-alias-border-color-focus)
         );
 }
-.spectrum-FieldButton--quiet:focus-visible.is-placeholder,
-.spectrum-FieldButton--quiet.is-focused.is-placeholder {
+:host([quiet]) #button:focus-visible.is-placeholder,
+:host([quiet]) #button.is-focused.is-placeholder {
     /* .spectrum-FieldButton--quiet.focus-ring.is-placeholder,
    * .spectrum-FieldButton--quiet.is-focused.is-placeholder */
     color: var(
         --spectrum-fieldbutton-quiet-placeholder-text-color-key-focus,
         var(--spectrum-alias-placeholder-text-color-hover)
     );
 }
-.spectrum-FieldButton--quiet.is-selected,
-.spectrum-FieldButton--quiet:active {
+:host([quiet]) #button.is-selected,
+:host([quiet]) #button:active {
     /* .spectrum-FieldButton--quiet.is-selected,
    * .spectrum-FieldButton--quiet:active */
     background-color: var(
@@ -343,10 +343,10 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
         var(--spectrum-alias-border-color-transparent)
     );
 }
-.spectrum-FieldButton--quiet.is-selected:focus-visible,
-.spectrum-FieldButton--quiet.is-selected.is-focused,
-.spectrum-FieldButton--quiet:active:focus-visible,
-.spectrum-FieldButton--quiet:active.is-focused {
+:host([quiet]) #button.is-selected:focus-visible,
+:host([quiet]) #button.is-selected.is-focused,
+:host([quiet]) #button:active:focus-visible,
+:host([quiet]) #button:active.is-focused {
     /* .spectrum-FieldButton--quiet.is-selected.focus-ring,
    * .spectrum-FieldButton--quiet.is-selected.is-focused,
    * .spectrum-FieldButton--quiet:active.focus-ring,
@@ -361,8 +361,8 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
             var(--spectrum-alias-border-color-focus)
         );
 }
-:host([invalid]) .spectrum-FieldButton--quiet:focus-visible,
-:host([invalid]) .spectrum-FieldButton--quiet.is-focused {
+:host([quiet][invalid]) #button:focus-visible,
+:host([quiet][invalid]) #button.is-focused {
     /* .spectrum-FieldButton--quiet.is-invalid.focus-ring,
    * .spectrum-FieldButton--quiet.is-invalid.is-focused */
     box-shadow: 0 2px 0 0
@@ -371,8 +371,8 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
             var(--spectrum-alias-border-color-focus)
         );
 }
-.spectrum-FieldButton--quiet.is-disabled,
-.spectrum-FieldButton--quiet:disabled {
+:host([quiet]) #button.is-disabled,
+:host([quiet]) #button:disabled {
     /* .spectrum-FieldButton--quiet.is-disabled,
    * .spectrum-FieldButton--quiet:disabled */
     background-color: var(
@@ -384,8 +384,8 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
         var(--spectrum-alias-text-color-disabled)
     );
 }
-.spectrum-FieldButton--quiet.is-disabled:focus-visible,
-.spectrum-FieldButton--quiet:disabled:focus-visible {
+:host([quiet]) #button.is-disabled:focus-visible,
+:host([quiet]) #button:disabled:focus-visible {
     /* .spectrum-FieldButton--quiet.is-disabled.focus-ring,
    * .spectrum-FieldButton--quiet:disabled.focus-ring */
     box-shadow: none;

diff --git a/packages/dropdown/src/dropdown.ts b/packages/dropdown/src/dropdown.ts
@@ -123,6 +123,10 @@ export class DropdownBase extends Focusable {
         return this.button;
     }
 
+    public click(): void {
+        this.focusElement.click();
+    }
+
     public onButtonBlur(): void {
         /* istanbul ignore if */
         if (typeof this.button === 'undefined') {

diff --git a/packages/dropdown/test/dropdown.test.ts b/packages/dropdown/test/dropdown.test.ts
@@ -103,7 +103,7 @@ describe('Dropdown', () => {
         await elementUpdated(el);
 
         expect(el.open).to.be.false;
-        el.open = true;
+        el.click();
         await elementUpdated(el);
 
         expect(el.open).to.be.true;