feat(ld-select): add filter feature

Resolves #238
emdgroup-liquid · Jul 27, 2022 · b6a84ee · b6a84ee
1 parent 8cdd327
commit b6a84ee
Show file tree

Hide file tree

Showing 15 changed files with 3,066 additions and 1,862 deletions.
diff --git a/screenshot/builds/master.json b/screenshot/builds/master.json
@@ -13680,6 +13680,71 @@
       "isLandscape": false,
       "isMobile": false
     },
+    {
+      "id": "789d7a75",
+      "image": "3e1bb8aaf27461f602fab0860d72a33f.png",
+      "userAgent": "default",
+      "desc": "ld-select filter multiple",
+      "testPath": "./src/liquid/components/ld-select/test/ld-select.e2e.ts",
+      "width": 600,
+      "height": 600,
+      "deviceScaleFactor": 1,
+      "hasTouch": false,
+      "isLandscape": false,
+      "isMobile": false
+    },
+    {
+      "id": "79a4fc6f",
+      "image": "7be4aaf8a54b8e7d34a0bce86ad17bc4.png",
+      "userAgent": "default",
+      "desc": "ld-select filter multiple selected",
+      "testPath": "./src/liquid/components/ld-select/test/ld-select.e2e.ts",
+      "width": 600,
+      "height": 600,
+      "deviceScaleFactor": 1,
+      "hasTouch": false,
+      "isLandscape": false,
+      "isMobile": false
+    },
+    {
+      "id": "e559358f",
+      "image": "677bfd5163a16689f682b4594653b5de.png",
+      "userAgent": "default",
+      "desc": "ld-select filter multiple selected after clearing filter",
+      "testPath": "./src/liquid/components/ld-select/test/ld-select.e2e.ts",
+      "width": 600,
+      "height": 600,
+      "deviceScaleFactor": 1,
+      "hasTouch": false,
+      "isLandscape": false,
+      "isMobile": false
+    },
+    {
+      "id": "ab52fc0e",
+      "image": "ae4b429d273b73fee030c20870f161d2.png",
+      "userAgent": "default",
+      "desc": "ld-select filter single",
+      "testPath": "./src/liquid/components/ld-select/test/ld-select.e2e.ts",
+      "width": 600,
+      "height": 600,
+      "deviceScaleFactor": 1,
+      "hasTouch": false,
+      "isLandscape": false,
+      "isMobile": false
+    },
+    {
+      "id": "22b56492",
+      "image": "c5affdf651742e11d7b741c30f98e902.png",
+      "userAgent": "default",
+      "desc": "ld-select filter single selected",
+      "testPath": "./src/liquid/components/ld-select/test/ld-select.e2e.ts",
+      "width": 600,
+      "height": 600,
+      "deviceScaleFactor": 1,
+      "hasTouch": false,
+      "isLandscape": false,
+      "isMobile": false
+    },
     {
       "id": "82fda3bf",
       "image": "71f6a317d5d38f78087a9d107a54579e.png",

diff --git a/screenshot/images/3e1bb8aaf27461f602fab0860d72a33f.png b/screenshot/images/3e1bb8aaf27461f602fab0860d72a33f.png
diff --git a/screenshot/images/677bfd5163a16689f682b4594653b5de.png b/screenshot/images/677bfd5163a16689f682b4594653b5de.png
diff --git a/screenshot/images/7be4aaf8a54b8e7d34a0bce86ad17bc4.png b/screenshot/images/7be4aaf8a54b8e7d34a0bce86ad17bc4.png
diff --git a/screenshot/images/ae4b429d273b73fee030c20870f161d2.png b/screenshot/images/ae4b429d273b73fee030c20870f161d2.png
diff --git a/screenshot/images/c5affdf651742e11d7b741c30f98e902.png b/screenshot/images/c5affdf651742e11d7b741c30f98e902.png
diff --git a/src/liquid/components/ld-select/ld-option-internal/ld-option-internal.tsx b/src/liquid/components/ld-select/ld-option-internal/ld-option-internal.tsx
@@ -54,6 +54,9 @@ export class LdOptionInternal {
   /** Size of the select trigger button for applying according paddings. */
   @Prop() size?: 'sm' | 'lg'
 
+  /** Set to true on filtering via select input. */
+  @Prop({ reflect: true }) hidden = false
+
   /**
    * Sets focus internally.
    */

diff --git a/src/liquid/components/ld-select/ld-option/ld-option.tsx b/src/liquid/components/ld-select/ld-option/ld-option.tsx
@@ -29,6 +29,9 @@ export class LdOption {
    */
   @Prop() disabled: boolean
 
+  /** Set to true on filtering via select input. */
+  @Prop({ reflect: true }) hidden = false
+
   componentWillLoad() {
     // Setting selected via prop directly triggers the mutation observer to fire twice on attribute chage.
     // This is indeed only true for the selected attribute. The disabled attribute works fine when assigned directly.

diff --git a/src/liquid/components/ld-select/ld-option/readme.md b/src/liquid/components/ld-select/ld-option/readme.md
@@ -24,6 +24,7 @@ Please refer to the [`ld-select` documentation](components/ld-select) for usage
 | Property   | Attribute  | Description                                                                                                                                                                                                     | Type               | Default     |
 | ---------- | ---------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ | ----------- |
 | `disabled` | `disabled` | Disables the option.                                                                                                                                                                                            | `boolean`          | `undefined` |
+| `hidden`   | `hidden`   | Set to true on filtering via select input.                                                                                                                                                                      | `boolean`          | `false`     |
 | `key`      | `key`      | for tracking the node's identity when working with lists                                                                                                                                                        | `string \| number` | `undefined` |
 | `ref`      | `ref`      | reference to component                                                                                                                                                                                          | `any`              | `undefined` |
 | `selected` | `selected` | If present, this boolean attribute indicates that the option is selected.                                                                                                                                       | `boolean`          | `undefined` |

diff --git a/src/liquid/components/ld-select/ld-select.css b/src/liquid/components/ld-select/ld-select.css
@@ -353,12 +353,30 @@
   overflow: hidden;
 }
 
+.ld-select__btn-trigger-input {
+  font: var(--ld-typo-label-m);
+  line-height: var(--ld-select-trigger-line-height);
+  background-color: transparent;
+  width: 100%;
+  border: 0;
+  outline: none;
+  appearance: none;
+  color: var(--ld-select-col);
+  padding: var(--ld-sp-2) 0;
+
+  &::placeholder {
+    color: inherit;
+  }
+}
+
 .ld-select--sm > select,
+.ld-select--sm .ld-select__btn-trigger-input,
 .ld-select--sm .ld-select__btn-trigger-text-wrapper {
   font: var(--ld-typo-body-s);
   line-height: var(--ld-select-trigger-line-height);
 }
 .ld-select--lg > select,
+.ld-select--lg .ld-select__btn-trigger-input,
 .ld-select--lg .ld-select__btn-trigger-text-wrapper {
   font: var(--ld-typo-body-l);
   line-height: var(--ld-select-trigger-line-height);
@@ -372,6 +390,13 @@
   white-space: nowrap;
 }
 
+.ld-select__selection-list-container {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: var(--ld-sp-6);
+  margin-right: auto;
+}
+
 .ld-select__selection-list {
   display: flex;
   flex-wrap: wrap;
@@ -393,7 +418,6 @@
 
 .ld-select__selection-list-more {
   order: 2147483647; /* Highest possible */
-  height: 100%;
   display: inline-flex;
   align-items: center;
   font: var(--ld-typo-label-s);