chore: combobox/dropdown update focused background color

momentum-design · Nov 21, 2024 · 9a45409 · 9a45409
1 parent beea36d
commit 9a45409
Show file tree

Hide file tree

Showing 11 changed files with 79 additions and 15 deletions.
diff --git a/web-components/package.json b/web-components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@momentum-ui/web-components",
-  "version": "2.15.0",
+  "version": "2.15.1",
   "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
@@ -137,6 +137,29 @@ export const comboBoxTemplate = html`
     show-selected-count
   ></md-combobox>
   </div>
+  <h3>new momentum multi dropdown arrow</h3>  
+  <md-combobox
+    .options=${comboBoxOptions}
+    .value=${[comboBoxOptions[5]]}
+    placeholder="Select country"    
+    newMomentum
+    visible-option="8"
+    is-dropdown-arrow
+    is-multi
+    no-clear-icon
+    allow-select-all
+    show-selected-count
+  ></md-combobox>
+  <h3>new momentum multi dropdown arrow</h3>  
+  <md-combobox  
+    .options=${comboBoxOptions}
+    placeholder="Placeholder"
+    ariaLabel="Select the country"
+    search-result-aria-label="Select the country, {{count}} results found."
+    helpText="This is help text"    
+    is-dropdown-arrow    
+    newMomentum
+  ></md-combobox>  
   <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
@@ -1366,7 +1366,8 @@ export namespace ComboBox {
     get listItemOptionMap() {
       return {
         "md-combobox-multiselect": this.isMulti,
-        compact: this.compact
+        compact: this.compact,
+        "md-combobox-dropdown-arrow": this.isDropdownArrow
       };
     }
 

diff --git a/web-components/src/components/combobox/scss/combobox.scss b/web-components/src/components/combobox/scss/combobox.scss
@@ -34,6 +34,7 @@
       outline-offset: rem-calc(2);
       box-shadow: none;
       border-color: var(--combobox-focus-new-border-color);
+      background-color: var(--combobox-focus-bg-color);
     }
     .md-combobox-right-arrow {
       border-color: var(--combobox-focus-new-border-color);
@@ -182,12 +183,20 @@
     max-width: 100%;
     flex-grow: 1;
 
+    &.md-combobox-dropdown-arrow {
+      padding-right: $combobox-input-padding-right;
+    }
+
     &:not(.md-combobox-dropdown-arrow) {
       padding-right: 0;
 
       .md-combobox-button {
         margin-left: 0;
       }
+
+      .md-combobox-button.clear {
+        margin-right: rem-calc(4);
+      }
     }
 
     span {
@@ -225,10 +234,6 @@
       }
     }
 
-    .md-combobox-button.clear {
-      margin-right: rem-calc(4);
-    }
-
     md-icon {
       color: var(--md-primary-text-color);
       cursor: pointer;

diff --git a/web-components/src/components/combobox/tokens/lm-combobox-tokens.js b/web-components/src/components/combobox/tokens/lm-combobox-tokens.js
@@ -37,6 +37,14 @@ const combobox = {
     "border-color": {
       light: colors.theme[70].name,
       dark: colors.theme[50].name
+    },
+    "new-border-color": {
+      light: colors.gray[70].name,
+      dark: colors.gray[40].name
+    },
+    "bg-color": {
+      light: colors.white[100].name,
+      dark: colors.gray[100].name
     }
   },
   disabled: {

diff --git a/web-components/src/components/combobox/tokens/md-combobox-tokens.js b/web-components/src/components/combobox/tokens/md-combobox-tokens.js
@@ -37,6 +37,14 @@ const combobox = {
     "border-color": {
       light: colors.theme[50].name,
       dark: colors.theme[60].name
+    },
+    "new-border-color": {
+      light: colors.gray[70].name,
+      dark: colors.gray[40].name
+    },
+    "bg-color": {
+      light: colors.white[100].name,
+      dark: colors.gray[100].name
     }
   },
   disabled: {

diff --git a/web-components/src/components/combobox/tokens/mdv2-combobox-tokens.js b/web-components/src/components/combobox/tokens/mdv2-combobox-tokens.js
@@ -30,6 +30,9 @@ const combobox = {
     },
     "new-border-color": {
       common: "mds-color-theme-outline-input-active"
+    },
+    "bg-color": {
+      common: "$mds-color-theme-background-primary-active"
     }
   },
   disabled: {

diff --git a/web-components/src/components/dropdown/scss/dropdown.scss b/web-components/src/components/dropdown/scss/dropdown.scss
@@ -167,11 +167,11 @@
       }
 
       &:hover {
-        background-color: var(--dropdown-bg-color-hover, $lm-dropdown-bg-color-hover-light);
+        background-color: var(--dropdown-bg-color-hover);
       }
 
       &:active {
-        background-color: var(--dropdown-bg-color-active, $lm-dropdown-bg-color-active-light);
+        background-color: var(--dropdown-bg-color-active);
       }
 
       input {
@@ -287,11 +287,15 @@
       }
 
       &:hover {
-        background-color: var(--dropdown-bg-color-hover, $lm-dropdown-bg-color-hover-light);
+        background-color: var(--dropdown-bg-color-hover);
       }
 
       &:active {
-        background-color: var(--dropdown-bg-color-active, $lm-dropdown-bg-color-active-light);
+        background-color: var(--dropdown-bg-color-active);
+      }
+
+      &:focus {
+        background-color: var(--dropdown-bg-color-focus)
       }
     }
 
@@ -318,12 +322,13 @@
 
 :host([focus-visible]) {
   .md-dropdown-label {
-    border-color: var(--dropdown-border-color-focus, $lm-dropdown-border-color-focus-light);
+    border-color: var(--dropdown-border-color-focus);
     box-shadow: none;
     outline: none;
   }
   .group {
-    border-color: var(--dropdown-border-color-focus, $lm-dropdown-border-color-focus-light);
+    border-color: var(--dropdown-border-color-focus);
+    background-color: var(--dropdown-bg-color-focus);
   }
 
   .md-new-dropdown {

diff --git a/web-components/src/components/dropdown/tokens/lm-dropdown-tokens.js b/web-components/src/components/dropdown/tokens/lm-dropdown-tokens.js
@@ -14,13 +14,19 @@ const dropdown = {
   prefix: "lm",
   component: "dropdown",
   "bg-color": {
+    light: colors.white[100].name,
+    dark: colors.gray[100].name,
     hover: {
       light: colors.gray[20].name,
       dark: colors.gray[90].name
     },
     active: {
       light: colors.gray[30].name,
       dark: colors.gray[80].name
+    },
+    focus: {
+      light: colors.white[100].name,
+      dark: colors.gray[100].name
     }
   },
   "border-color": {

diff --git a/web-components/src/components/dropdown/tokens/md-dropdown-tokens.js b/web-components/src/components/dropdown/tokens/md-dropdown-tokens.js
@@ -21,6 +21,10 @@ const dropdown = {
     active: {
       light: colors.gray[20].name,
       dark: colors.gray[80].name
+    },
+    focus: {
+      light: colors.white[100].name,
+      dark: colors.gray[100].name
     }
   },
   "border-color": {

diff --git a/web-components/src/components/dropdown/tokens/mdv2-dropdown-tokens.js b/web-components/src/components/dropdown/tokens/mdv2-dropdown-tokens.js
@@ -13,9 +13,7 @@ const dropdown = {
   prefix: "mdv2",
   component: "dropdown",
   "bg-color": {
-    default: {
-      common: "$mds-color-theme-background-primary-ghost"
-    },
+    common: "$mds-color-theme-background-primary-ghost",
     hover: {
       common: "$mds-color-theme-background-primary-hover"
     },
@@ -24,6 +22,9 @@ const dropdown = {
     },
     disabled: {
       common: "$mds-color-theme-background-primary-disabled"
+    },
+    focus: {
+      common: "$mds-color-theme-background-primary-active"
     }
   },
   "border-color": {