feat(PixMultiSelect): improve searchable variant style

1024pix · Dec 11, 2024 · 0dbd6c2 · 0dbd6c2
1 parent b5e7f4f
commit 0dbd6c2
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 36 deletions.
diff --git a/addon/components/pix-multi-select.hbs b/addon/components/pix-multi-select.hbs
@@ -19,11 +19,15 @@
   <PopperJS @placement={{or @placement "bottom-start"}} as |reference popover|>
 
     {{#if @isSearchable}}
-      <span {{reference}} class={{this.headerClassName}}>
-        <PixIcon @name="search" class="pix-multi-select-header__search-icon" @ariaHidden={{true}} />
+      <span {{reference}} class={{this.mainInputClassName}}>
+        <PixIcon
+          @name="search"
+          class="pix-multi-select-main-input__search-icon"
+          @ariaHidden={{true}}
+        />
 
         <input
-          class="pix-multi-select-header__search-input"
+          class="pix-multi-select-main-input__search-input"
           id={{this.multiSelectId}}
           type="text"
           name={{this.multiSelectId}}
@@ -44,7 +48,7 @@
         aria-expanded={{this.isAriaExpanded}}
         aria-controls={{this.listId}}
         aria-haspopup="menu"
-        class={{this.headerClassName}}
+        class={{this.mainInputClassName}}
         {{on "click" this.toggleDropDown}}
       >
         {{#if (has-block "placeholder")}}
@@ -53,8 +57,8 @@
           {{this.placeholder}}
         {{/if}}
         <PixIcon
-          class="pix-multi-select-header__dropdown-icon
-            {{if this.isExpanded ' pix-multi-select-header__dropdown-icon--expand'}}"
+          class="pix-multi-select-main-input__dropdown-icon
+            {{if this.isExpanded ' pix-multi-select-main-input__dropdown-icon--expand'}}"
           @name={{if this.isExpanded "chevronTop" "chevronBottom"}}
           @ariaHidden={{true}}
         />

diff --git a/addon/components/pix-multi-select.js b/addon/components/pix-multi-select.js
@@ -30,13 +30,17 @@ export default class PixMultiSelect extends Component {
     this.options = [...(this.args.options || [])];
   }
 
-  get headerClassName() {
-    const classes = ['pix-multi-select-header'];
+  get mainInputClassName() {
+    let classes = 'pix-multi-select-main-input';
+
+    if (this.args.isSearchable) {
+      classes += ' pix-multi-select-main-input--is-searchable';
+    }
     if (this.args.className) {
-      classes.push(this.args.className);
+      classes += ` ${this.args.className}`;
     }
 
-    return classes.join(' ');
+    return classes;
   }
 
   get multiSelectId() {

diff --git a/addon/styles/_pix-multi-select.scss b/addon/styles/_pix-multi-select.scss
@@ -11,7 +11,8 @@
   }
 }
 
-.pix-multi-select-header {
+/* Main input */
+.pix-multi-select-main-input {
   @extend %pix-body-s;
   @extend %pix-form-element-state;
 
@@ -27,42 +28,46 @@
   border: 1px var(--pix-neutral-500) solid;
   border-radius: var(--pix-spacing-1x);
   cursor: pointer;
+}
 
-  &--big {
-    height: 44px;
-  }
+.pix-multi-select-main-input__dropdown-icon {
+  @extend %pix-body-s;
 
-  &__search-icon {
-    color: var(--pix-neutral-900);
-  }
+  color: var(--pix-neutral-900);
+  pointer-events: none;
+}
 
-  &__title {
-    position: absolute;
-    width: 0;
-    height: 0;
-    opacity: 0;
-  }
+// Searchable multiselect
+.pix-multi-select-main-input--is-searchable {
+  padding: 0;
 
-  input.pix-multi-select-header__search-input {
-    width: 100%;
-    height: inherit;
-    padding: 0 10px;
-    color: var(--pix-neutral-900);
-    font-size: 0.875rem;
-    background: transparent;
-    border: none;
-    border-radius: 3px;
-    outline: none;
+  .pix-multi-select-main-input__search-icon {
+    position: absolute;
+    top: 50%;
+    left: var(--pix-spacing-3x);
+    z-index: 0;
+    width: var(--pix-spacing-4x);
+    height: var(--pix-spacing-4x);
+    color: var(--pix-neutral-500);
+    transform: translateY(-50%);
   }
 
-  &__dropdown-icon {
+  .pix-multi-select-main-input__search-input {
     @extend %pix-body-s;
 
-    color: var(--pix-neutral-900);
-    pointer-events: none;
+    position: relative;
+    z-index: 1;
+    padding: var(--pix-spacing-2x) var(--pix-spacing-3x) var(--pix-spacing-2x) var(--pix-spacing-9x);
+    background-color: transparent;
+    border: none;
+
+    &:focus {
+      outline: none;
+    }
   }
 }
 
+/* Select list */
 .pix-multi-select-list {
   @extend %pix-shadow-sm;