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

emdgroup-liquid · Jul 5, 2021 · 864ef69 · 864ef69
1 parent 6ed36a9
commit 864ef69
Show file tree

Hide file tree

Showing 3 changed files with 248 additions and 43 deletions.
diff --git a/src/liquid/components/ld-select/ld-select.css b/src/liquid/components/ld-select/ld-select.css
@@ -1,9 +1,11 @@
 :root {
   --ld-select-popper-max-height: calc(100vh - 1.25rem);
+  --ld-select-min-width: 12rem;
 }
 
-.ld-select {
+:where(.ld-select) {
   display: inline-flex;
+  min-width: var(--ld-select-min-width);
 }
 
 .ld-select__select,
@@ -58,27 +60,88 @@
   }
 }
 
+.ld-select__btn-trigger-text,
+.ld-select__selection-list {
+  flex-grow: 1;
+}
+
 .ld-select__btn-trigger-text {
-  padding-right: var(--ld-sp-4);
+  padding-right: var(--ld-sp-8);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  margin-right: auto;
 }
 
+.ld-select__selection-list {
+  display: flex;
+  flex-wrap: wrap;
+  margin-right: var(--ld-sp-4);
+  margin-bottom: calc(-1 * var(--ld-sp-4));
+  overflow: hidden;
+}
+
+.ld-select__selection-list-item {
+  flex: 0 1;
+  margin-right: var(--ld-sp-4);
+  margin-bottom: var(--ld-sp-4);
+  width: 100%;
+}
+
+.ld-select__btn-clear-single,
 .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;
+  -webkit-touch-callout: none;
+}
+
+.ld-select__btn-clear-single {
+  z-index: 1;
+}
+
+.ld-select__selection-label {
+  position: relative;
+  width: 100%;
+  display: inline-flex;
+  align-items: center;
+  color: var(--ld-col-wht);
+  font: var(--ld-typo-label-s);
+  font-weight: bold;
+  padding: var(--ld-sp-4) var(--ld-sp-6);
+}
+
+.ld-select__selection-label-bg {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  border-radius: var(--ld-br-m);
+}
+
+.ld-select__selection-label-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  z-index: 1;
+}
+
+.ld-select__btn-clear-single-icon {
+  --ld-select-btn-clear-single-size: 0.75rem;
+  width: var(--ld-select-btn-clear-single-size);
+  height: var(--ld-select-btn-clear-single-size);
+  margin-left: var(--ld-sp-6);
+}
+
+.ld-select__btn-clear {
+  margin-right: var(--ld-sp-6);
+  flex-shrink: 0;
 }
 
 .ld-select__btn-clear-icon {
@@ -111,6 +174,10 @@
     color: var(--ld-thm-ocean-bg-primary);
   }
 
+  .ld-select__selection-label-bg {
+    background-color: var(--ld-thm-ocean-bg-primary);
+  }
+
   &:where(:not(:disabled):not([aria-disabled='true'])) {
     .ld-select__btn-clear {
       &:where(:focus:focus-visible) {
@@ -126,6 +193,19 @@
         color: var(--ld-col-rb-active);
       }
     }
+
+    .ld-select__btn-clear-single {
+      &:where(:focus:focus-visible) + .ld-select__selection-label-bg {
+        background-color: var(--ld-col-rb-focus);
+      }
+
+      &:where(:active),
+      &:where(:active:focus-visible) {
+        + .ld-select__selection-label-bg {
+          background-color: var(--ld-col-rb-active);
+        }
+      }
+    }
   }
 }
 
@@ -146,6 +226,10 @@
     color: var(--ld-col-rp-default);
   }
 
+  .ld-select__selection-label-bg {
+    background-color: var(--ld-col-rp-default);
+  }
+
   &:where(:not(:disabled):not([aria-disabled='true'])) {
     .ld-select__btn-clear {
       &:where(:focus:focus-visible) {
@@ -161,6 +245,18 @@
         color: var(--ld-col-rp-active);
       }
     }
+
+    .ld-select__btn-clear-single {
+      &:where(:focus:focus-visible) + .ld-select__selection-label-bg {
+        background-color: var(--ld-col-rp-focus);
+      }
+      &:where(:active),
+      &:where(:active:focus-visible) {
+        + .ld-select__selection-label-bg {
+          background-color: var(--ld-col-rp-active);
+        }
+      }
+    }
   }
 }
 
@@ -177,6 +273,10 @@
     color: var(--ld-thm-tea-bg-primary);
   }
 
+  .ld-select__selection-label-bg {
+    background-color: var(--ld-thm-tea-bg-primary);
+  }
+
   &:where(:not(:disabled):not([aria-disabled='true'])) {
     .ld-select__btn-clear {
       &:where(:focus:focus-visible) {
@@ -192,6 +292,19 @@
         color: var(--ld-col-rg-active);
       }
     }
+
+    .ld-select__btn-clear-single {
+      &:where(:focus:focus-visible) + .ld-select__selection-label-bg {
+        background-color: var(--ld-col-rg-focus);
+      }
+
+      &:where(:active),
+      &:where(:active:focus-visible) {
+        + .ld-select__selection-label-bg {
+          background-color: var(--ld-col-rg-active);
+        }
+      }
+    }
   }
 }
 
@@ -205,6 +318,10 @@
   overflow-y: auto;
 }
 
+.ld-select__shadow {
+  display: none;
+}
+
 .ld-select--expanded {
   z-index: 2147483647; /* Highest possible z-index */
 }
@@ -213,8 +330,8 @@
   visibility: inherit;
   z-index: 2147483646; /* Highest possible z-index - 1 */
 
-  &:after {
-    content: '';
+  .ld-select__shadow {
+    display: block;
     position: absolute;
     width: 100%;
     height: calc(100% + 2.5rem);
@@ -228,8 +345,8 @@
   &.tether-pinned {
     z-index: 2147483647;
 
-    &:after {
-      height: 100%;
+    .ld-select__shadow {
+      height: 100% !important;
     }
 
     .ld-select__scroll-container {
@@ -250,7 +367,7 @@
 
   &.tether-target-attached-bottom,
   &.tether-pinned-top {
-    &:after {
+    .ld-select__shadow {
       bottom: 0;
     }
 
@@ -263,7 +380,7 @@
 
   &.tether-target-attached-top,
   &.tether-pinned-bottom {
-    &:after {
+    .ld-select__shadow {
       top: 0;
     }