feat(ld-select): add caret icon to select trigger

emdgroup-liquid · Jul 2, 2021 · 9e0b789 · 9e0b789
1 parent 337e63c
commit 9e0b789
Show file tree

Hide file tree

Showing 4 changed files with 72 additions and 5 deletions.
diff --git a/src/liquid/components/ld-option/ld-option.css b/src/liquid/components/ld-option/ld-option.css
@@ -6,6 +6,7 @@
   padding: var(--ld-sp-8) var(--ld-sp-12);
   font: var(--ld-typo-label-m);
   min-height: 2.5rem;
+  white-space: nowrap;
   user-select: none;
   touch-action: manipulation;
   border: 0;

diff --git a/src/liquid/components/ld-option/ld-option.tsx b/src/liquid/components/ld-option/ld-option.tsx
@@ -8,6 +8,7 @@ import {
   Event,
   EventEmitter,
   Listen,
+  State,
 } from '@stencil/core'
 
 @Component({
@@ -18,6 +19,8 @@ import {
 export class LdOption {
   @Element() el: HTMLElement
 
+  private optionLabelRef!: HTMLElement
+
   /**
    * The content of this attribute represents the value to be submitted with the form,
    * should this option be selected. If this attribute is omitted, the value is taken
@@ -40,6 +43,8 @@ export class LdOption {
    */
   @Event() ldOptionSelect: EventEmitter<boolean>
 
+  @State() title: string
+
   private handleClick() {
     if (this.disabled) {
       return
@@ -66,6 +71,12 @@ export class LdOption {
     }
   }
 
+  componentDidLoad() {
+    setTimeout(() => {
+      this.title = this.optionLabelRef.innerHTML
+    })
+  }
+
   render() {
     return (
       <Host
@@ -93,7 +104,11 @@ export class LdOption {
             stroke-linejoin="round"
           />
         </svg>
-        <span class="ld-option__label">
+        <span
+          ref={(el) => (this.optionLabelRef = el as HTMLElement)}
+          class="ld-option__label"
+          title={this.title}
+        >
           <slot></slot>
         </span>
       </Host>

diff --git a/src/liquid/components/ld-select/ld-select.css b/src/liquid/components/ld-select/ld-select.css
@@ -13,6 +13,9 @@
 
 .ld-select__btn-trigger {
   position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
   font: var(--ld-typo-body-m);
   border: 0;
   outline: none;
@@ -55,13 +58,34 @@
   }
 }
 
+.ld-select__btn-trigger-text {
+  padding-right: var(--ld-sp-4);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ld-select__btn-trigger-icon {
+  width: var(--ld-sp-16);
+  height: var(--ld-sp-16);
+  flex-shrink: 0;
+}
+
+.ld-select__btn-trigger-icon--rotated {
+  transform-origin: center;
+  transform: rotate(180deg);
+}
+
 /* .ld-theme-ocean -> default */
 .ld-select__btn-trigger,
 .ld-theme-ocean .ld-select__btn-trigger,
 [class*='ld-theme'] .ld-theme-ocean .ld-select__btn-trigger {
   &:where(:focus:focus-visible) {
     box-shadow: inset 0 0 0 0.1rem var(--ld-thm-ocean-bg-primary);
   }
+  .ld-select__btn-trigger-icon {
+    color: var(--ld-thm-ocean-bg-primary);
+  }
 }
 
 .ld-theme-bubblegum,
@@ -75,6 +99,9 @@
       box-shadow: inset 0 0 0 0.1rem var(--ld-col-rp-default);
     }
   }
+  .ld-select__btn-trigger-icon {
+    color: var(--ld-col-rp-default);
+  }
 }
 
 .ld-theme-tea,
@@ -84,6 +111,9 @@
       box-shadow: inset 0 0 0 0.1rem var(--ld-thm-tea-bg-primary);
     }
   }
+  .ld-select__btn-trigger-icon {
+    color: var(--ld-thm-tea-bg-primary);
+  }
 }
 
 .ld-select__popper {

diff --git a/src/liquid/components/ld-select/ld-select.tsx b/src/liquid/components/ld-select/ld-select.tsx
@@ -412,6 +412,14 @@ export class LdSelect {
     let popperCl = 'ld-select__popper'
     if (this.expanded) popperCl += ' ld-select__popper--expanded'
 
+    let triggerIconCl = 'ld-select__btn-trigger-icon'
+    if (this.expanded) triggerIconCl += ' ld-select__btn-trigger-icon--rotated'
+
+    const triggerText = this.multiple
+      ? this.placeholder
+      : ((this.selected[0] as unknown) as HTMLElement)?.textContent ||
+        this.placeholder
+
     return (
       <Host class={cl}>
         <div
@@ -425,10 +433,23 @@ export class LdSelect {
             aria-expanded={this.expanded ? 'true' : 'false'}
             ref={(el) => (this.triggerRef = el as HTMLElement)}
           >
-            {this.multiple
-              ? this.placeholder
-              : ((this.selected[0] as unknown) as HTMLElement)?.textContent ||
-                this.placeholder}
+            <span class="ld-select__btn-trigger-text" title={triggerText}>
+              {triggerText}
+            </span>
+            <svg
+              class={triggerIconCl}
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              viewBox="0 0 16 16"
+            >
+              <path
+                stroke="currentColor"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="3"
+                d="M3 6l5 4 5-4"
+              />
+            </svg>
           </button>
         </div>
         <div