feat(ld-select): add filter feature

CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file. See
 [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.3.1](https://github.com/emdgroup-liquid/liquid/compare/v2.3.0...v2.3.1) (2022-07-19)
+
+
+### Bug Fixes
+
+* **ld-modal:** hide displaced focus outlines ([3ea2f75](https://github.com/emdgroup-liquid/liquid/commit/3ea2f757330978a215308d41266368a9cce0d220))
+* **ld-sidenav:** allow custom logo in sidenav header ([5eca62e](https://github.com/emdgroup-liquid/liquid/commit/5eca62e74fdab4bc3368f4264dd8be489fb4000d))
+
 # [2.3.0](https://github.com/emdgroup-liquid/liquid/compare/v2.2.0...v2.3.0) (2022-07-13)
 
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@emdgroup-liquid/liquid",
-  "version": "2.3.0",
+  "version": "2.3.1",
   "description": "Beautiful, accessible and versatile UI components",
   "publishConfig": {
     "access": "public"

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",

src/liquid/components/ld-modal/ld-modal.css

@@ -145,6 +145,7 @@ dialog.ld-modal--blurry-backdrop,
   margin: var(--ld-sp-8) calc(var(--ld-sp-8) * -1) var(--ld-sp-8) auto;
   position: relative;
   width: var(--ld-sp-32);
+  overflow: hidden;
 
   &::before,
   &::after {

src/liquid/components/ld-modal/readme.md

@@ -27,7 +27,7 @@ The [`<dialog>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialo
 
 Here is a minimalistic example of a modal dialog:
 
-{% example %}
+{% example '{ "styles": { "overflow": "visible", "will-change": "initial" } }' %}
 <ld-modal>
   <ld-typo style="text-align: center">
     I'm a modal dialog.
@@ -60,7 +60,7 @@ Here is a minimalistic example of a modal dialog:
 
 You have two additional slots to your disposal for altering the modal header and footer which are both positioned fixed at top and bottom of the dialog element.
 
-{% example %}
+{% example '{ "styles": { "overflow": "visible", "will-change": "initial" } }' %}
 <ld-modal>
   <ld-typo slot="header">Hello</ld-typo>
   <ld-typo style="text-align: center">
@@ -99,7 +99,7 @@ You have two additional slots to your disposal for altering the modal header and
 
 ### Non-cancelable
 
-{% example %}
+{% example '{ "styles": { "overflow": "visible", "will-change": "initial" } }' %}
 <ld-modal cancelable="false">
   <ld-typo slot="header">Hello</ld-typo>
   <ld-typo style="text-align: center">
@@ -131,7 +131,7 @@ You have two additional slots to your disposal for altering the modal header and
 
 ### With blurry backdrop
 
-{% example %}
+{% example '{ "styles": { "overflow": "visible", "will-change": "initial" } }' %}
 <ld-modal blurry-backdrop>
   <ld-typo style="text-align: center">
     I'm a modal dialog.

src/liquid/components/ld-notification/readme.md

@@ -127,7 +127,7 @@ Notifications of type `'info'` can be themed by wrapping `ld-notification` in a
 
 The examples below illustrate how you can trigger notifications using different parameters:
 
-{% example '{ "stacked": true }' %}
+{% example '{ "stacked": true, "styles": { "overflow": "visible", "will-change": "initial" } }' %}
 <style>
 .notification-form {
   display: grid;

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.
    */

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.

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` |

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);