From 2888fc23aae8451398c5e2327620e2b244fd83b3 Mon Sep 17 00:00:00 2001 From: James Nestor <87858909+NotNestor@users.noreply.github.com> Date: Wed, 20 Nov 2024 14:18:47 +0000 Subject: [PATCH] chore: add dropdown button variant (#1830) * chore: add dropdown button variant --- web-components/package.json | 2 +- .../src/[sandbox]/examples/button.ts | 39 ++++++++++++ .../src/components/button/Button.ts | 7 ++- .../src/components/button/scss/button.scss | 59 ++++++++++++------- .../button/tokens/lm-button-tokens.js | 40 +++++++++++++ .../button/tokens/mdv2-button-tokens.js | 31 ++++++++++ .../components/dropdown/scss/dropdown.scss | 2 +- .../dropdown/tokens/mdv2-dropdown-tokens.js | 3 + 8 files changed, 158 insertions(+), 25 deletions(-) diff --git a/web-components/package.json b/web-components/package.json index 4ce7f87b1..a5d7ae70a 100644 --- 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 index 47d70ae1c..7dae4b7ca 100644 --- 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 { +

Drop down button

+
+ +
+ Selected text + +
+ + +
+ Placeholder text + +
+ + +
+ Selected text + +
+ + +
+ Placeholder text + +
+ + +
+ Selected text disabled + +
+ + +
+ Placeholder text disabled + +
+ +
`; } } diff --git a/web-components/src/components/button/Button.ts b/web-components/src/components/button/Button.ts index a9c745991..e5518c611 100644 --- 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 index cf15a7088..ec629776a 100644 --- 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 index 6b30a4e83..17a78befb 100644 --- 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 index 76a2ff7b0..df3e0f89a 100644 --- 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 index 1ff5dd7e0..3ab666a72 100644 --- 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 index 6e246df93..5c7283478 100644 --- 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" },