chore: compact combo and filter (#1816)

* chore: compact combo and filter * chore: minor updates * chore: minor updates --------- Co-authored-by: James Nestor <jnestor@cisco.com>
momentum-design · Nov 7, 2024 · 82a4cf2 · 82a4cf2
1 parent 1c6be4f
commit 82a4cf2
Show file tree

Hide file tree

Showing 6 changed files with 126 additions and 41 deletions.
diff --git a/web-components/src/[sandbox]/examples/combobox.ts b/web-components/src/[sandbox]/examples/combobox.ts
@@ -1,10 +1,10 @@
 import { comboBoxObjectLongOptions, comboBoxObjectOptions, comboBoxOptions } from "@/[sandbox]/sandbox.mock";
 import "@/components/combobox/ComboBox";
+import { ComboBox } from "@/components/combobox/ComboBox";
 import "@/components/icon/Icon";
 import "@/components/spinner/Spinner";
 import { html } from "lit-element";
 import { repeat } from "lit-html/directives/repeat";
-import { ComboBox } from "@/components/combobox/ComboBox";
 
 const dropdownValue: string[] = [];
 const testCustomValue = [
@@ -121,6 +121,22 @@ export const comboBoxTemplate = html`
     placeholder="Enter Text"
     newMomentum
   ></md-combobox>
+  <h3>Filter new momentum compact</h3>
+  <div style="width: 250px;">
+  <md-combobox
+    .options=${comboBoxOptions}
+    .value=${[comboBoxOptions[5]]}
+    placeholder="Select country"
+    show-filter-icon
+    newMomentum
+    visible-option="8"
+    compact
+    is-multi
+    no-clear-icon
+    allow-select-all
+    show-selected-count
+  ></md-combobox>
+  </div>
   <br />
   <h3>Multi Data with Custom Values</h3>
   <md-combobox

diff --git a/web-components/src/components/combobox/ComboBox.ts b/web-components/src/components/combobox/ComboBox.ts
@@ -13,8 +13,8 @@ import { FocusMixin } from "@/mixins";
 import { customElementWithCheck } from "@/mixins/CustomElementCheck";
 import { debounce, findHighlight } from "@/utils/helpers";
 import reset from "@/wc_scss/reset.scss";
-import { LitElement, PropertyValues, html, internalProperty, property, query, queryAll } from "lit-element";
-import { nothing } from "lit-html";
+import { html, internalProperty, LitElement, property, PropertyValues, query, queryAll } from "lit-element";
+import { nothing, TemplateResult } from "lit-html";
 import { classMap } from "lit-html/directives/class-map";
 import { ifDefined } from "lit-html/directives/if-defined";
 import { repeat } from "lit-html/directives/repeat";
@@ -108,16 +108,24 @@ export namespace ComboBox {
     @property({ type: Boolean, attribute: "show-selected-count", reflect: true }) showSelectedCount = false;
     @property({ type: String, attribute: "popup-chevron-aria-hidden" }) popupChevronAriaHidden = "true";
     @property({ type: Boolean, reflect: true }) newMomentum = false;
+    @property({ type: Boolean, attribute: "show-filter-icon" }) showFilterIcon = false;
 
-    @property({ type: String }) comboboxId = "";
+    /**
+     * When using the new momentum style sets whether to use the new combobox style arrow
+     * or the arrow not in a div what a border to the right. This will be used for filter dropdowns
+     * that were implemented using a combobox
+     */
+    @property({ type: Boolean, attribute: "is-dropdown-arrow" }) isDropdownArrow = false;
+
+    @property({ type: String })
+    comboboxId = "";
     @property({ type: String }) helpText = "";
     @property({ type: Array }) messageArr: ComboBox.Message[] = [];
     @property({ type: String }) htmlId = "";
     @property({ type: Boolean, reflect: true }) readOnly = false;
 
     private readonly messageController = new MessageController();
 
-    @property({ type: Number, attribute: false })
     @internalProperty()
     private isOptGroup = false;
     @internalProperty()
@@ -1356,7 +1364,8 @@ export namespace ComboBox {
 
     get listItemOptionMap() {
       return {
-        "md-combobox-multiselect": this.isMulti
+        "md-combobox-multiselect": this.isMulti,
+        compact: this.compact
       };
     }
 
@@ -1392,17 +1401,27 @@ export namespace ComboBox {
       return {
         [`md-combobox--${this.shape}`]: !!this.shape,
         "md-combobox-searchable": this.searchable,
+        "md-combobox-has-leading-icon": this.searchable || this.showFilterIcon,
         "md-new-combobox": this.newMomentum,
         [`md-${this.messageType}`]: !!this.messageType,
-        "md-combobox-readonly": this.readOnly
+        "md-combobox-readonly": this.readOnly,
+        "md-combobox-compact": this.compact
       };
     }
 
     searchIconTemplate() {
+      return this.leadingIconTemplate("search-bold", "search-icon");
+    }
+
+    filterIconTemplate() {
+      return this.leadingIconTemplate("filter-bold", "filter-icon");
+    }
+
+    leadingIconTemplate(iconName: string, iconClass: string) {
       return html`
         <md-icon
-          name="search-bold"
-          class="search-icon"
+          name=${iconName}
+          class=${iconClass}
           size="16"
           iconSet="momentumDesign"
           @click=${this.toggleVisualListBox}
@@ -1437,15 +1456,13 @@ export namespace ComboBox {
           ?readonly=${this.readOnly}
           @click=${this.handleRemoveAll}
         >
-          <span>
-            <md-icon
-              class="md-input__icon-clear"
-              name="cancel-bold"
-              size="14"
-              iconSet="momentumDesign"
-              style="height: ${this.clearIconHeight};"
-            ></md-icon
-          ></span>
+          <md-icon
+            class="md-input__icon-clear"
+            name="cancel-bold"
+            size="14"
+            iconSet="momentumDesign"
+            style="height: ${this.clearIconHeight};"
+          ></md-icon>
         </button>
       `;
     }
@@ -1459,14 +1476,12 @@ export namespace ComboBox {
           aria-label=${ifDefined(this.popupChevronAriaHidden === "true" ? undefined : this.arrowAriaLabel)}
           aria-controls="md-combobox-listbox"
           tabindex="-1"
-          aria-hidden=${this.popupChevronAriaHidden}
+          aria-hidden=${ifDefined(this.popupChevronAriaHidden === "true" ? "true" : undefined)}
           ?disabled=${this.disabled}
           ?readonly=${this.readOnly}
           @click=${this.toggleVisualListBox}
         >
-          <span>
-            <md-icon name="arrow-down-bold" size="16" iconSet="momentumDesign"></md-icon>
-          </span>
+          <md-icon name="arrow-down-bold" size="16" iconSet="momentumDesign"></md-icon>
         </button>
       `;
     }
@@ -1692,11 +1707,19 @@ export namespace ComboBox {
         : nothing;
     }
 
+    get renderNewMomentumArrow(): TemplateResult {
+      return html`
+        ${this.isDropdownArrow
+          ? this.arrowButtonTemplate()
+          : html`<div class="md-combobox-right-arrow">${this.arrowButtonTemplate()}</div>`}
+      `;
+    }
+
     render() {
       return html`
         <div part="combobox" class="md-combobox md-combobox-list ${classMap(this.comboBoxTemplateClassMap)}">
           <div part="group" class="group ${classMap(this.listItemOptionMap)}">
-            ${this.searchable ? this.searchIconTemplate() : nothing}
+            ${this.searchable ? this.searchIconTemplate() : this.showFilterIcon ? this.filterIconTemplate() : nothing}
             <div class="md-combobox__multiwrap" part="multiwrap">
               ${this.isMulti
                 ? this.isMulti && !this.showSelectedCount
@@ -1734,9 +1757,7 @@ export namespace ComboBox {
                 : !this.newMomentum
                   ? this.arrowButtonTemplate()
                   : nothing}
-            ${this.newMomentum
-              ? html` <div class="md-combobox-right-arrow">${this.arrowButtonTemplate()}</div> `
-              : nothing}
+            ${this.newMomentum ? this.renderNewMomentumArrow : nothing}
           </div>
 
           ${this.showLoader || this.showCustomError

diff --git a/web-components/src/components/combobox/scss/combobox.scss b/web-components/src/components/combobox/scss/combobox.scss
@@ -18,7 +18,7 @@
       border: $combobox-border !important;
     }
     .md-combobox-right-arrow {
-      border-left: $combobox-border !important;
+      border-left: $combobox-border;
     }
   }
 }
@@ -68,7 +68,7 @@
       }
 
       .md-combobox-right-arrow {
-        border-color: var(--combobox-disabled-bg-color) !important;
+        border-color: var(--combobox-disabled-bg-color);
       }
     }
 
@@ -120,6 +120,7 @@
     border-radius: $combobox-group-radius;
     display: flex;
     padding: $combobox-input-padding;
+    padding-right: $combobox-input-padding-right;
     height: rem-calc(34);
 
     md-icon {
@@ -173,8 +174,48 @@
 
 .md-new-combobox {
   .group {
+    display: flex;
+    align-items: center;
     border-radius: 8px;
     background: transparent;
+    height: $combobox-new-height;
+    max-width: 100%;
+    flex-grow: 1;
+
+    span {
+      margin-right: -$combobox-main-indent;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      display: inline-block;
+      width: 100%;
+    }
+
+    &.compact {
+      height: $combobox-new-height-compact;
+
+      .md-combobox-button {
+        width: 20px;
+        height: 20px;
+        justify-content: center;
+        align-items: center;
+      }
+
+      .md-combobox__multiwrap {
+        display: flex;
+        align-items: center;
+        width: 50%;
+        max-height: $combobox-new-height-compact;
+
+        input {
+          height: $combobox-new-height-compact;
+          min-width: 0;
+          flex-grow: 1;
+          flex-shrink: 1;
+          width: auto;
+        }
+      }
+    }
 
     .md-combobox-button.clear {
       margin-right: $combobox-main-indent !important;
@@ -221,7 +262,7 @@
       border-color: var(--input-error-border-color) !important;
 
       .md-combobox-right-arrow {
-        border-color: var(--input-error-border-color) !important;
+        border-color: var(--input-error-border-color);
       }
     }
   }
@@ -271,14 +312,13 @@
 .md-combobox-button {
   @include arrow-transition;
   align-self: center;
+  align-items: center;
   background: transparent;
   border: 0;
   cursor: pointer;
   margin: 0;
   margin-left: calc(#{$combobox-main-indent} * 2);
   outline: none;
-  padding: 0;
-  padding-top: calc(#{$combobox-main-indent} / 1.5);
   position: relative;
   vertical-align: bottom;
   height: inherit;
@@ -294,16 +334,20 @@
   }
 }
 .md-combobox-button.clear {
-  height: auto;
-  padding: 0.115rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: rem-calc(24);
+  height: rem-calc(28);
 }
 
 .md-combobox-right-arrow {
   height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 24px;
   border-left: $combobox-border;
-  .md-combobox-button {
-    padding-top: calc(#{$combobox-main-indent} / 1.4);
-  }
 
   .md-combobox-button.clear:focus,
   .md-combobox-button.arrow-down:focus {
@@ -466,6 +510,7 @@ div#md-combobox-listbox {
   flex: 1 1 auto;
   margin-left: 0;
   max-height: calc(#{$combobox-select-size} * 4.5);
+  max-width: 100%;
 
   .selected-count {
     color: var(--md-primary-text-color, $md-gray-05);
@@ -525,9 +570,9 @@ div#md-combobox-listbox {
   }
 }
 
-.md-combobox-searchable {
+.md-combobox-has-leading-icon {
   .md-combobox__multiwrap {
-    margin-left: calc(#{$combobox-main-indent} * 3);
+    margin-left: calc(#{$combobox-main-indent} * 1.5);
   }
 }
 input::placeholder,

diff --git a/web-components/src/components/combobox/scss/settings.scss b/web-components/src/components/combobox/scss/settings.scss
@@ -17,6 +17,7 @@ $combobox-dropdown-radius: rem-calc(8);
 $combobox-dropdown-shadow: 0 4px 8px $black-16, 0 0 1px $black-16;
 
 $combobox-input-padding: 0 rem-calc(12);
+$combobox-input-padding-right: rem-calc(8);
 $combobox-error-padding: rem-calc(3) 0 0 rem-calc(12);
 $combobox-new-error-padding: rem-calc(3) 0 0 0;
 
@@ -33,3 +34,6 @@ $combobox-selected-item-border: 1px solid
   var(--combobox-selected-border-color, $lm-combobox-selected-border-color-light);
 $combobox-invalid-bg-color: var(--combobox-invalid-bg-color, $lm-combobox-invalid-bg-color-light);
 $combobox-invalid-border-color: var(--combobox-invalid-border-color, $lm-combobox-invalid-border-color-light);
+
+$combobox-new-height-compact: rem-calc(28);
+$combobox-new-height: rem-calc(32);
diff --git a/web-components/src/components/label/scss/settings.scss b/web-components/src/components/label/scss/settings.scss
@@ -1,8 +1,8 @@
 $label__font-family: $brand-font-regular !default;
-$label__font-size: var(--body-primary-font-size, rem-calc(14)) !default;
+$label__font-size: var(--body-secondary-font-size, rem-calc(14)) !default;
 $label__line-height: rem-calc(20) !default;
 $label__spacing: rem-calc(16) !default;
 
-$secondary-label__font-size: var(--body-primary-font-size, rem-calc(14)) !default;
+$secondary-label__font-size: var(--body-secondary-font-size, rem-calc(14)) !default;
 $secondary-label__line-height: rem-calc(18) !default;
 $secondary-label__indent: rem-calc(4 16 0) !default;
diff --git a/web-components/src/components/popover/scss/module.scss b/web-components/src/components/popover/scss/module.scss
@@ -1,3 +1,2 @@
 // Component Specific
-@use "settings" as *;
 @use "popover" as *;