feat(ld-select): implement clear button for multiselect

emdgroup-liquid · Jul 5, 2021 · 6bf2919 · 6bf2919
1 parent 8bfacdd
commit 6bf2919
Show file tree

Hide file tree

Showing 3 changed files with 135 additions and 4 deletions.
diff --git a/src/liquid/components/ld-select/ld-select.css b/src/liquid/components/ld-select/ld-select.css
@@ -15,7 +15,7 @@
   position: relative;
   display: flex;
   align-items: center;
-  justify-content: space-between;
+  justify-content: flex-end;
   font: var(--ld-typo-body-m);
   border: 0;
   outline: none;
@@ -63,6 +63,28 @@
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  margin-right: auto;
+}
+
+.ld-select__btn-clear {
+  border: 0;
+  outline: none;
+  padding: 0;
+  border-radius: var(--ld-br-full);
+  flex-shrink: 0;
+  user-select: none;
+  touch-action: manipulation;
+  background-color: transparent;
+  -webkit-touch-callout: none;
+  cursor: pointer;
+  margin-right: var(--ld-sp-6);
+  line-height: 0;
+}
+
+.ld-select__btn-clear-icon {
+  --ld-select-btn-clear-size: 1.25rem;
+  width: var(--ld-select-btn-clear-size);
+  height: var(--ld-select-btn-clear-size);
 }
 
 .ld-select__btn-trigger-icon {
@@ -83,9 +105,28 @@
   &:where(:focus:focus-visible) {
     box-shadow: inset 0 0 0 0.1rem var(--ld-thm-ocean-bg-primary);
   }
+
+  .ld-select__btn-clear,
   .ld-select__btn-trigger-icon {
     color: var(--ld-thm-ocean-bg-primary);
   }
+
+  &:where(:not(:disabled):not([aria-disabled='true'])) {
+    .ld-select__btn-clear {
+      &:where(:focus:focus-visible) {
+        color: var(--ld-col-rb-focus);
+      }
+      @media (hover: hover) {
+        &:where(:hover) {
+          color: var(--ld-col-rb-hover);
+        }
+      }
+      &:where(:active),
+      &:where(:active:focus-visible) {
+        color: var(--ld-col-rb-active);
+      }
+    }
+  }
 }
 
 .ld-theme-bubblegum,
@@ -99,9 +140,28 @@
       box-shadow: inset 0 0 0 0.1rem var(--ld-col-rp-default);
     }
   }
+
+  .ld-select__btn-clear,
   .ld-select__btn-trigger-icon {
     color: var(--ld-col-rp-default);
   }
+
+  &:where(:not(:disabled):not([aria-disabled='true'])) {
+    .ld-select__btn-clear {
+      &:where(:focus:focus-visible) {
+        color: var(--ld-col-rp-focus);
+      }
+      @media (hover: hover) {
+        &:where(:hover) {
+          color: var(--ld-col-rp-hover);
+        }
+      }
+      &:where(:active),
+      &:where(:active:focus-visible) {
+        color: var(--ld-col-rp-active);
+      }
+    }
+  }
 }
 
 .ld-theme-tea,
@@ -111,9 +171,28 @@
       box-shadow: inset 0 0 0 0.1rem var(--ld-thm-tea-bg-primary);
     }
   }
+
+  .ld-select__btn-clear,
   .ld-select__btn-trigger-icon {
     color: var(--ld-thm-tea-bg-primary);
   }
+
+  &:where(:not(:disabled):not([aria-disabled='true'])) {
+    .ld-select__btn-clear {
+      &:where(:focus:focus-visible) {
+        color: var(--ld-col-rg-focus);
+      }
+      @media (hover: hover) {
+        &:where(:hover) {
+          color: var(--ld-col-rg-hover);
+        }
+      }
+      &:where(:active),
+      &:where(:active:focus-visible) {
+        color: var(--ld-col-rg-active);
+      }
+    }
+  }
 }
 
 .ld-select__popper {

diff --git a/src/liquid/components/ld-select/ld-select.tsx b/src/liquid/components/ld-select/ld-select.tsx
@@ -29,6 +29,7 @@ export class LdSelect {
   private triggerRef!: HTMLElement
   private popperRef!: HTMLElement
   private scrollContainerRef!: HTMLElement
+  private btnClearRef: HTMLButtonElement
   private popper: Tether
   private observer: MutationObserver
 
@@ -234,6 +235,13 @@ export class LdSelect {
       return
     }
 
+    if (
+      document.activeElement === this.btnClearRef &&
+      (ev.key === ' ' || ev.key === 'Enter')
+    ) {
+      return
+    }
+
     switch (ev.key) {
       case 'ArrowDown': {
         // Move focus to the next option.
@@ -401,6 +409,12 @@ export class LdSelect {
     this.togglePopper()
   }
 
+  private handleClearClick(ev: MouseEvent) {
+    ev.preventDefault()
+    ev.stopImmediatePropagation()
+    this.clearSelection()
+  }
+
   componentDidLoad() {
     this.initOptions()
     this.updateInert()
@@ -439,18 +453,52 @@ export class LdSelect {
           class="ld-select__select"
           ref={(el) => (this.selectRef = el as HTMLElement)}
         >
-          <button
-            onClick={this.handleTriggerClick.bind(this)}
+          <div
             class="ld-select__btn-trigger"
+            role="button"
+            tabindex="0"
             aria-haspopup="listbox"
             aria-expanded={this.expanded ? 'true' : 'false'}
+            onClick={this.handleTriggerClick.bind(this)}
             ref={(el) => (this.triggerRef = el as HTMLElement)}
           >
             <span class="ld-select__btn-trigger-text" title={triggerText}>
               {triggerText}
             </span>
+
+            {this.multiple && (
+              <button
+                class="ld-select__btn-clear"
+                onClick={this.handleClearClick.bind(this)}
+                ref={(el) => (this.btnClearRef = el as HTMLButtonElement)}
+              >
+                <svg
+                  class="ld-select__btn-clear-icon"
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 21 20"
+                >
+                  <title>Clear selection</title>
+                  <path
+                    fill="currentColor"
+                    fill-rule="evenodd"
+                    d="M10 20a10 10 0 100-20 10 10 0 000 20z"
+                    clip-rule="evenodd"
+                  />
+                  <path
+                    stroke="#fff"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M6.67 6.67l6.67 6.66M6.67 13.33l6.67-6.66"
+                  />
+                </svg>
+              </button>
+            )}
+
             <svg
               class={triggerIconCl}
+              role={'presentation'}
               xmlns="http://www.w3.org/2000/svg"
               fill="none"
               viewBox="0 0 16 16"
@@ -463,7 +511,7 @@ export class LdSelect {
                 d="M3 6l5 4 5-4"
               />
             </svg>
-          </button>
+          </div>
         </div>
         <div
           role="listbox"

diff --git a/src/liquid/components/ld-select/readme.md b/src/liquid/components/ld-select/readme.md
@@ -27,6 +27,8 @@ permalink: components/ld-select/
   <ld-option value="blueberry">Blueberry</ld-option>
   <ld-option value="peach">Peach</ld-option>
   <ld-option value="grape">Grape</ld-option>
+  <ld-option value="fuyu persimmon">Fuyu Persimmon</ld-option>
+  <ld-option value="monstera deliciosa">Monstera Deliciosa</ld-option>
   <ld-option value="pear">Pear</ld-option>
   <ld-option value="pineapple">Pineapple</ld-option>
   <ld-option value="plum">Plum</ld-option>
@@ -47,6 +49,8 @@ permalink: components/ld-select/
   <ld-option value="blueberry">Blueberry</ld-option>
   <ld-option value="peach">Peach</ld-option>
   <ld-option value="grape">Grape</ld-option>
+  <ld-option value="fuyu persimmon">Fuyu Persimmon</ld-option>
+  <ld-option value="monstera deliciosa">Monstera Deliciosa</ld-option>
   <ld-option value="pear">Pear</ld-option>
   <ld-option value="pineapple">Pineapple</ld-option>
   <ld-option value="plum">Plum</ld-option>