chore: add dropdown button variant (#1830)

* chore: add dropdown button variant
momentum-design · Nov 20, 2024 · 2888fc2 · 2888fc2
1 parent 232019d
commit 2888fc2
Show file tree

Hide file tree

Showing 8 changed files with 158 additions and 25 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.24",
+  "version": "2.14.25",
   "author": "Yana Harris",
   "license": "MIT",
   "repository": "https://github.com/momentum-design/momentum-ui.git",

diff --git a/web-components/src/[sandbox]/examples/button.ts b/web-components/src/[sandbox]/examples/button.ts
@@ -409,6 +409,45 @@ export class ButtonTemplateSandbox extends LitElement {
           </div>
         </md-button>
       </div>
+      <h3 class="sandbox-header" style="margin: .5rem 1rem">Drop down button</h3>
+      <div class="row" style="display: flex; margin: .5rem 0; gap: 8px;">
+        <md-button variant="dropdown">
+          <div class="status-button__children">
+            <span> Selected text </span>
+            <md-icon class="status-arrow" name="arrow-down-bold" iconSet="momentumDesign" size="12"></md-icon>
+          </div>
+        </md-button>
+        <md-button variant="dropdown" is-placeholder-text>
+          <div class="status-button__children">
+            <span> Placeholder text </span>
+            <md-icon class="status-arrow" name="arrow-down-bold" iconSet="momentumDesign" size="12"></md-icon>
+          </div>
+        </md-button>
+        <md-button variant="dropdown" rounded>
+          <div class="status-button__children">
+            <span> Selected text </span>
+            <md-icon class="status-arrow" name="arrow-down-bold" iconSet="momentumDesign" size="12"></md-icon>
+          </div>
+        </md-button>
+        <md-button variant="dropdown" is-placeholder-text rounded>
+          <div class="status-button__children">
+            <span> Placeholder text </span>
+            <md-icon class="status-arrow" name="arrow-down-bold" iconSet="momentumDesign" size="12"></md-icon>
+          </div>
+        </md-button>
+        <md-button variant="dropdown" rounded disabled>
+          <div class="status-button__children">
+            <span> Selected text disabled </span>
+            <md-icon class="status-arrow" name="arrow-down-bold" iconSet="momentumDesign" size="12"></md-icon>
+          </div>
+        </md-button>
+        <md-button variant="dropdown" is-placeholder-text rounded disabled>
+          <div class="status-button__children">
+            <span> Placeholder text disabled </span>
+            <md-icon class="status-arrow" name="arrow-down-bold" iconSet="momentumDesign" size="12"></md-icon>
+          </div>
+        </md-button>
+      </div>
     `;
   }
 }

diff --git a/web-components/src/components/button/Button.ts b/web-components/src/components/button/Button.ts
@@ -74,7 +74,8 @@ export const buttonVariant = [
   "engaged",
   "idle",
   "inverted-primary",
-  "inverted-secondary"
+  "inverted-secondary",
+  "dropdown"
 ] as const;
 export const buttonColor = [
   "blue",
@@ -176,6 +177,7 @@ export namespace Button {
     @property({ type: Boolean }) iconActive = false;
     @property({ type: Boolean }) isActive = false;
     @property({ attribute: false }) clickFunction?: () => void;
+    @property({ type: Boolean, attribute: "is-placeholder-text" }) isPlaceholderText?: boolean;
 
     @query(".md-button") button!: HTMLButtonElement;
 
@@ -252,7 +254,8 @@ export namespace Button {
         [`md-activity__${this.activityType}`]: !!this.activityType,
         "md-activity": !!this.activityType,
         "md-button--icon": this.iconActive,
-        "md-button--onlyicon": this.hasIcon && !this.slottedText
+        "md-button--onlyicon": this.hasIcon && !this.slottedText,
+        "md-button--placeholder-text": this.isPlaceholderText === true
       };
     }
 

diff --git a/web-components/src/components/button/scss/button.scss b/web-components/src/components/button/scss/button.scss
@@ -629,6 +629,34 @@
   }
 }
 
+:host([variant="dropdown"]) .md-button {
+  font-family: var(--brand-font-regular, $brand-font-regular);
+  font-weight: 400;
+  font-size: rem-calc(14);
+
+  background-color: var(--button-dropdown-bg-color);
+  color: var(--button-dropdown-text-color);
+  border: 1px solid var(--button-dropdown-border-color);
+
+  &--placeholder-text {
+    color: var(--button-dropdown-text-color-placeholder)
+  }
+
+  &:hover {
+    background-color: var(--button-dropdown-hover);
+  }
+  &:active {
+    background-color: var(--button-dropdown-active);
+  }
+
+  &:disabled,
+  &.disabled {
+    background-color: var(--button-dropdown-disabled-bg-color);
+    color: var(--button-dropdown-disabled-text-color);
+    border: 1px solid var(--button-dropdown-disabled-border-color);
+  }
+}
+
 :host([variant="inverted-secondary"]) .md-button {
   background-color: var(--button-inverted-secondary-bg-color);
   color: var(--button-inverted-secondary-text-color);
@@ -644,7 +672,8 @@
     color: var(--button-inverted-secondary-text-color);
   }
 
-  &:disabled, &.disabled {
+  &:disabled,
+  &.disabled {
     background-color: var(--button-inverted-secondary-disabled-bg-color);
     border: 1px solid var(--button-inverted-secondary-disabled-border-color);
     color: var(--button-inverted-secondary-disabled-text-color);
@@ -708,15 +737,9 @@
 
     &:disabled,
     &.disabled {
-      background-color: var(
-        --button-secondary-disabled-bg-color,
-        var(--button-disabled-bg-color)
-      );
+      background-color: var(--button-secondary-disabled-bg-color, var(--button-disabled-bg-color));
       border: 1px solid var(--button-secondary-disabled-border-color);
-      color: var(
-        --button-secondary-disabled-text-color,
-        var(--button-disabled-text-color)
-      );
+      color: var(--button-secondary-disabled-text-color, var(--button-disabled-text-color));
     }
   }
 
@@ -737,15 +760,9 @@
 
     &:disabled,
     &.disabled {
-      background-color: var(
-        --button-secondary-disabled-bg-color,
-        var(--button-disabled-bg-color)
-      );
+      background-color: var(--button-secondary-disabled-bg-color, var(--button-disabled-bg-color));
       border: 1px solid var(--button-secondary-disabled-border-color);
-      color: var(
-        --button-secondary-disabled-text-color,
-        var(--button-disabled-text-color)
-      );
+      color: var(--button-secondary-disabled-text-color, var(--button-disabled-text-color));
     }
   }
 }
@@ -792,7 +809,7 @@
   background-color: var(--button-available-bg-color);
   color: var(--button-secondary-text-color);
   border: 1px solid var(--button-available-border-color);
-  font-size: var(--body-secondary-font-size, $button__font-size);
+  font-size: rem-calc(14);
   font-family: var(--brand-font-regular, $brand-font-regular);
   font-weight: 400;
 
@@ -824,7 +841,7 @@
   color: var(--button-secondary-text-color);
   border: 1px solid var(--button-unavailable-border-color);
   border-radius: var(--button-state-selector-border-radius);
-  font-size: var(--body-secondary-font-size, $button__font-size);
+  font-size: rem-calc(14);
   font-family: var(--brand-font-regular, $brand-font-regular);
   font-weight: 400;
 
@@ -856,7 +873,7 @@
   color: var(--button-secondary-text-color);
   border: 1px solid var(--button-idle-border-color);
   border-radius: var(--button-state-selector-border-radius);
-  font-size: var(--body-secondary-font-size, $button__font-size);
+  font-size: rem-calc(14);
   font-family: var(--brand-font-regular, $brand-font-regular);
   font-weight: 400;
 
@@ -930,7 +947,7 @@
   color: var(--button-secondary-text-color);
   border: 1px solid var(--button-engaged-border-color);
   border-radius: var(--button-state-selector-border-radius);
-  font-size: var(--body-secondary-font-size, $button__font-size);
+  font-size: rem-calc(14);
   font-family: var(--brand-font-regular, $brand-font-regular);
   font-weight: 400;
 

diff --git a/web-components/src/components/button/tokens/lm-button-tokens.js b/web-components/src/components/button/tokens/lm-button-tokens.js
@@ -421,6 +421,46 @@ const button = {
         common: "$mds-color-theme-inverted-outline-disabled-normal"
       }
     }
+  },
+  dropdown: {
+    "bg-color": {
+      light: colors.white[100].name,
+      dark: colors.gray[100].name
+    },
+    "text-color": {
+      light: colors.gray[100].name,
+      dark: colors.gray["05"].name,
+      placeholder: {
+        light: colors.gray[70].name,
+        dark: colors.gray[40].name
+      }
+    },
+    "border-color": {
+      light: colors.gray[30].name,
+      dark: colors.gray[80].name
+    },
+    hover: {
+      light: colors.gray[20].name,
+      dark: colors.gray[90].name
+    },
+    active: {
+      light: colors.gray[30].name,
+      dark: colors.gray[70].name
+    },
+    disabled: {
+      "bg-color": {
+        light: colors.gray[10].name,
+        dark: colors.gray[90].name
+      },
+      "border-color": {
+        light: colors.gray[10].name,
+        dark: colors.gray[90].name
+      },
+      "text-color": {
+        light: colors.gray[70].name,
+        dark: colors.gray[40].name
+      }
+    }
   }
 };
 

diff --git a/web-components/src/components/button/tokens/mdv2-button-tokens.js b/web-components/src/components/button/tokens/mdv2-button-tokens.js
@@ -430,6 +430,37 @@ const button = {
       }
     }
   },
+  dropdown: {
+    "bg-color": {
+      common: "$mds-color-theme-background-primary-ghost"
+    },
+    "text-color": {
+      common: "$mds-color-theme-text-primary-normal",
+      placeholder: {
+        common: "$mds-color-theme-text-secondary-normal"
+      }
+    },
+    "border-color": {
+      common: "$mds-color-theme-outline-input-normal"
+    },
+    hover: {
+      common: "$mds-color-theme-background-primary-hover"
+    },
+    active: {
+      common: "$mds-color-theme-background-primary-active"
+    },
+    disabled: {
+      "bg-color": {
+        common: "$mds-color-theme-background-primary-disabled"
+      },
+      "border-color": {
+        common: "$mds-color-theme-outline-primary-disabled"
+      },
+      "text-color": {
+        common: "$mds-color-theme-text-primary-disabled"
+      }
+    }
+  },
   "state-selector": {
     "border-radius": {
       common: "8px"

diff --git a/web-components/src/components/dropdown/scss/dropdown.scss b/web-components/src/components/dropdown/scss/dropdown.scss
@@ -281,7 +281,7 @@
 
   .md-new-dropdown {
     &-label {
-      background-color: transparent;
+      background-color: var(--dropdown-bg-color-default);
       border-radius: 8px;
 
       &--text {

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,6 +13,9 @@ const dropdown = {
   prefix: "mdv2",
   component: "dropdown",
   "bg-color": {
+    default: {
+      common: "$mds-color-theme-background-primary-ghost"
+    },
     hover: {
       common: "$mds-color-theme-background-primary-hover"
     },