chore: update dropdown new momentum sizings (#1833)

* chore: update dropdown new momentum sizings * chore: update readonly and disabled
momentum-design · Nov 21, 2024 · beea36d · beea36d
1 parent 9f35794
commit beea36d
Show file tree

Hide file tree

Showing 12 changed files with 104 additions and 70 deletions.
diff --git a/web-components/package.json b/web-components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@momentum-ui/web-components",
-  "version": "2.14.26",
+  "version": "2.15.0",
   "author": "Yana Harris",
   "license": "MIT",
   "repository": "https://github.com/momentum-design/momentum-ui.git",

diff --git a/web-components/src/[sandbox]/examples/combobox.ts b/web-components/src/[sandbox]/examples/combobox.ts
@@ -48,7 +48,7 @@ export const comboBoxTemplate = html`
 
   <h3>Default</h3>
   <md-combobox
-    style="width: 240px; display: inline-block;"
+    style="width: 250px; display: inline-block;"
     .options=${comboBoxOptions}
     placeholder="Placeholder"
     ariaLabel="Select the country"
@@ -80,7 +80,7 @@ export const comboBoxTemplate = html`
   <br />
   <h3>Default (New Momentum)</h3>
   <md-combobox
-    style="width: 240px; display: inline-block;"
+    style="width: 250px; display: inline-block;"
     .options=${comboBoxOptions}
     placeholder="Placeholder"
     ariaLabel="Select the country"

diff --git a/web-components/src/components/combobox/ComboBox.ts b/web-components/src/components/combobox/ComboBox.ts
@@ -1406,7 +1406,8 @@ export namespace ComboBox {
         "md-new-combobox": this.newMomentum,
         [`md-${this.messageType}`]: !!this.messageType,
         "md-combobox-readonly": this.readOnly,
-        "md-combobox-compact": this.compact
+        "md-combobox-compact": this.compact,
+        "md-combobox-dropdown-arrow": this.isDropdownArrow
       };
     }
 
@@ -1708,12 +1709,14 @@ export namespace ComboBox {
         : nothing;
     }
 
+    get newArrowButtonTemplate() {
+      //TODO: implement a new button instead of a div and the old button template
+      //      This should be tabbable
+      return html`<div class="md-combobox-right-arrow">${this.arrowButtonTemplate()}</div>`;
+    }
+
     get renderNewMomentumArrow(): TemplateResult {
-      return html`
-        ${this.isDropdownArrow
-          ? this.arrowButtonTemplate()
-          : html`<div class="md-combobox-right-arrow">${this.arrowButtonTemplate()}</div>`}
-      `;
+      return html` ${this.isDropdownArrow ? this.arrowButtonTemplate() : this.newArrowButtonTemplate} `;
     }
 
     get renderTrailingInputControls(): TemplateResult {

diff --git a/web-components/src/components/combobox/scss/combobox.scss b/web-components/src/components/combobox/scss/combobox.scss
@@ -25,7 +25,7 @@
 
 :host([focus-visible]) {
   .group {
-    border-color: var(--combobox-focus-border-color, $lm-combobox-focus-border-color-light);
+    border-color: var(--combobox-focus-border-color);
     box-shadow: none;
   }
   .md-new-combobox {
@@ -182,6 +182,14 @@
     max-width: 100%;
     flex-grow: 1;
 
+    &:not(.md-combobox-dropdown-arrow) {
+      padding-right: 0;
+
+      .md-combobox-button {
+        margin-left: 0;
+      }
+    }
+
     span {
       margin-right: -$combobox-main-indent;
       overflow: hidden;
@@ -218,7 +226,7 @@
     }
 
     .md-combobox-button.clear {
-      margin-right: $combobox-main-indent !important;
+      margin-right: rem-calc(4);
     }
 
     md-icon {
@@ -313,6 +321,7 @@
   @include arrow-transition;
   align-self: center;
   align-items: center;
+  justify-content: center;
   background: transparent;
   border: 0;
   cursor: pointer;
@@ -322,7 +331,10 @@
   position: relative;
   vertical-align: bottom;
   height: inherit;
-  display: flex;
+  display: inline-flex;
+  border-radius: 50%;
+  width: rem-calc(20);
+  height: rem-calc(20);
 
   .md-input__icon-clear {
     align-items: center;
@@ -336,19 +348,21 @@
 .md-combobox-button.clear {
   display: inline-flex;
   align-items: center;
-  justify-content: center;
-  width: rem-calc(24);
-  height: rem-calc(28);
+  justify-content: center;  
 }
 
 .md-combobox-right-arrow {
   height: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
-  width: 24px;
+  width: rem-calc(32);  
   border-left: $combobox-border;
 
+  .md-combobox-right-arrow {
+    margin-left: 0;
+  }
+
   .md-combobox-button.clear:focus,
   .md-combobox-button.arrow-down:focus {
     outline: none;

diff --git a/web-components/src/components/dropdown/Dropdown.ts b/web-components/src/components/dropdown/Dropdown.ts
@@ -9,13 +9,13 @@
 import "@/components/icon/Icon";
 import { ATTRIBUTES, Key } from "@/constants";
 import { customElementWithCheck, FocusMixin } from "@/mixins";
+import { debounce } from "@/utils/helpers";
 import reset from "@/wc_scss/reset.scss";
 import { internalProperty, LitElement, property, PropertyValues, query, queryAll } from "lit-element";
 import { html, nothing } from "lit-html";
 import { classMap } from "lit-html/directives/class-map.js";
 import { ifDefined } from "lit-html/directives/if-defined";
 import { repeat } from "lit-html/directives/repeat";
-import { debounce } from "@/utils/helpers";
 import { styleMap } from "lit-html/directives/style-map";
 import styles from "./scss/module.scss";
 
@@ -764,15 +764,13 @@ export namespace Dropdown {
           ?disabled=${this.disabled}
           @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="16"
+            iconSet="momentumDesign"
+            style="height: ${this.clearIconHeight};"
+          ></md-icon>
         </button>
       `;
     }
@@ -786,14 +784,12 @@ export namespace Dropdown {
           aria-label=${ifDefined(this.popupChevronAriaHidden === "true" ? undefined : this.arrowAriaLabel)}
           aria-controls="md-dropdown-input"
           tabindex="-1"
-          aria-hidden=${this.popupChevronAriaHidden}
+          aria-hidden=${ifDefined(this.popupChevronAriaHidden === "true" ? "true" : undefined)}
           ?readonly=${this.readOnly}
           ?disabled=${this.disabled}
           @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>
       `;
     }

diff --git a/web-components/src/components/dropdown/scss/dropdown.scss b/web-components/src/components/dropdown/scss/dropdown.scss
@@ -183,12 +183,16 @@
         flex: 1 1 auto;
         height: $dropdown-min-height;
         outline: none;
+
+        &::placeholder{
+          color: var(--md-secondary-text-color);
+        }
       }
 
       ::input-placeholder {
         @include text-dots;
         display: inline-block;
-        width: calc(100%);
+        width: calc(100%);    
       }
 
       .md-dropdown-left-icon {
@@ -235,7 +239,7 @@
   }
 
   .group[readonly] {
-    border-color: var(--dropdown-bg-color-disabled) !important;
+    border-color: var(--dropdown-border-color-disabled) !important;
 
     md-icon {
       color: var(--dropdown-bg-color-disabled) !important;
@@ -251,19 +255,13 @@
     margin: 0;
     margin-left: calc(#{$dropdown-main-indent} * 2);
     outline: none;
-    padding: 0;
-    padding-top: calc(#{$dropdown-main-indent} * 1.5);
-    position: relative;
-    vertical-align: bottom;
-    height: inherit;
+    padding: 0;    
+    position: relative;    
+    width: rem-calc(20);
+    height: rem-calc(20);
     display: flex;
     align-items: center;
-
-    &.clear {
-      align-items: center;
-      padding-top: #{$dropdown-main-indent};
-      display: flex;
-    }
+    justify-content: center;
 
     md-icon {
       color: var(--combobox-dropdown-item-icon-color);
@@ -298,8 +296,10 @@
     }
 
     .group {
-      border-radius: 8px;
+      height: $dropdown-new-height;
+      border-radius: $dropdown-new-border-radius;
       background-color: transparent;
+      padding-right: $dropdown-new-padding-right;
     }
   }
 }
@@ -374,23 +374,23 @@
   }
 
   md-help-text {
-    color: var(--dropdown-bg-color-disabled, $md-gray-40);
+    color: var(--md-disabled-text-color, $md-gray-40);
   }
 
   .md-new-dropdown {
     &-label {
       background-color: transparent;
-      border-color: var(--dropdown-bg-color-disabled, $md-gray-40) !important;
+      border-color: var(--dropdown-border-color-disabled, $md-gray-40);
       outline: none !important;
       box-shadow: none;
 
       &--text {
-        color: var(--dropdown-bg-color-disabled, $md-gray-40);
+        color: var(--md-disabled-text-color);
       }
 
       .md-dropdown-label--icon {
         md-icon {
-          color: var(--dropdown-bg-color-disabled, $md-gray-40);
+          color: var(--md-disabled-text-color);
         }
       }
 
@@ -400,30 +400,34 @@
         pointer-events: none;
         outline: none !important;
         box-shadow: none;
-        border-color: var(--dropdown-bg-color-disabled, $md-gray-40) !important;
+        border-color: var(--dropdown-border-color-disabled, $md-gray-40);
       }
       &:focus-visible {
-        border-color: var(--dropdown-bg-color-disabled, $md-gray-40) !important;
+        border-color: var(--dropdown-border-color-disabled);
         outline: none !important;
         box-shadow: none;
       }
     }
     .group {
       background: transparent;
-      border-color: var(--dropdown-bg-color-disabled, $md-gray-40) !important;
+      border-color: var(--dropdown-border-color-disabled);
       pointer-events: none;
       outline: none !important;
 
       input {
-        color: var(--dropdown-bg-color-disabled, $md-gray-40);
+        color: var(--md-disabled-text-color);
+
+        &::placeholder{
+          color: var(--md-disabled-text-color);
+        }
       }
 
       &:hover,
       &:active {
-        border-color: var(--dropdown-bg-color-disabled, $md-gray-40) !important;
+        border-color: var(--dropdown-border-color-disabled);
       }
       &:focus-visible {
-        border-color: var(--dropdown-bg-color-disabled, $md-gray-40) !important;
+        border-color: var(--dropdown-border-color-disabled);
       }
     }
   }

diff --git a/web-components/src/components/dropdown/scss/settings.scss b/web-components/src/components/dropdown/scss/settings.scss
@@ -22,3 +22,7 @@ $dropdown-option-select-size: rem-calc(20);
 $dropdown-option-select-margin: rem-calc(16);
 
 $dropdown-disabled-opacity: 0.3;
+
+$dropdown-new-height: rem-calc(32);
+$dropdown-new-border-radius: rem-calc(8);
+$dropdown-new-padding-right: rem-calc(8);
diff --git a/web-components/src/components/dropdown/tokens/lm-dropdown-tokens.js b/web-components/src/components/dropdown/tokens/lm-dropdown-tokens.js
@@ -29,6 +29,10 @@ const dropdown = {
     focus: {
       light: colors.theme[70].name,
       dark: colors.theme[50].name
+    },
+    disabled: {
+      light: colors.gray[10].name,
+      dark: colors.gray[90].name
     }
   },
   label: {

diff --git a/web-components/src/components/dropdown/tokens/md-dropdown-tokens.js b/web-components/src/components/dropdown/tokens/md-dropdown-tokens.js
@@ -29,6 +29,10 @@ const dropdown = {
     focus: {
       light: colors.theme[50].name,
       dark: colors.theme[60].name
+    },
+    disabled: {
+      light: colors.gray[10].name,
+      dark: colors.gray[90].name
     }
   },
   label: {

diff --git a/web-components/src/components/dropdown/tokens/mdv2-dropdown-tokens.js b/web-components/src/components/dropdown/tokens/mdv2-dropdown-tokens.js
@@ -30,6 +30,9 @@ const dropdown = {
     common: "$mds-color-theme-outline-input-normal",
     focus: {
       common: "$mds-color-theme-outline-theme-normal"
+    },
+    disabled: {
+      common: "$mds-color-theme-outline-primary-disabled"
     }
   },
   label: {