diff --git a/web-components/package.json b/web-components/package.json
index 1c385ca01..bd158ce5a 100644
--- a/web-components/package.json
+++ b/web-components/package.json
@@ -1,6 +1,6 @@
{
"name": "@momentum-ui/web-components",
- "version": "2.17.6",
+ "version": "2.17.7",
"author": "Yana Harris",
"license": "MIT",
"repository": "https://github.com/momentum-design/momentum-ui.git",
diff --git a/web-components/src/[sandbox]/examples/radio-group.ts b/web-components/src/[sandbox]/examples/radio-group.ts
index 13f97c770..fdec707d6 100644
--- a/web-components/src/[sandbox]/examples/radio-group.ts
+++ b/web-components/src/[sandbox]/examples/radio-group.ts
@@ -1,52 +1,75 @@
+import "@/components/icon/Icon";
import "@/components/radio/Radio";
import "@/components/radio/RadioGroup";
-import { html } from "lit-element";
+import { RadioGroup } from "@/components/radio/RadioGroup";
+import "@/components/tooltip/Tooltip";
+import { customElement, html, LitElement } from "lit-element";
+
+@customElement("radiogroup-template-sandbox")
+export class RadioGroupTemplateSandbox extends LitElement {
+ render() {
+ return html` Default
+
+ Option 1
+ Option 2
+ Option 3
+ Option 4
+
+ Horizontal
+
+
+ Long Radio description overflowing text with three dots in the end
+
+ Option 1
+ Option 2
+ Option 3
+
+ Long Radio description overflowing text with three dots in the end
+
+
+ Pre-Checked Radio
+
+ Option 1
+ Option 2 [Preselected]
+ Option 3
+ Option 4
+
+ {
+ const radioGroup = this?.shadowRoot?.querySelector("#pre-checked-radio-group") as RadioGroup.ELEMENT;
+ if (radioGroup) {
+ radioGroup.clearSelection();
+ }
+ }}
+ >
+ Clear selection
+
+ Disabled
+
+ Option
+ Disabled
+ Option 2 [Preselected]
+ Disabled 2
+
+ Radio buttons with icons
+
+
+ Option 1
+
+
+
+ Option 2
+
+
+
+
+ `;
+ }
+}
export const radioGroupTemplate = html`
- Default
-
- Option 1
- Option 2
- Option 3
- Option 4
-
- Horizontal
-
-
- Long Radio description overflowing text with three dots in the end
-
- Option 1
- Option 2
- Option 3
-
- Long Radio description overflowing text with three dots in the end
-
-
- Pre-Checked Radio
-
- Option 1
- Option 2 [Preselected]
- Option 3
- Option 4
-
- Disabled
-
- Option
- Disabled
- Option 2 [Preselected]
- Disabled 2
-
- Radio buttons with icons
-
-
- Option 1
-
-
-
- Option 2
-
-
-
-
-
+ Default Favorite
+
`;
diff --git a/web-components/src/components/button/scss/button.scss b/web-components/src/components/button/scss/button.scss
index cefd3b810..6068db528 100644
--- a/web-components/src/components/button/scss/button.scss
+++ b/web-components/src/components/button/scss/button.scss
@@ -701,15 +701,15 @@
:host([variant="ghost"]) .md-button {
background-color: var(--button-ghost-bg-color, transparent);
- color: var(--button-ghost-text-color, var(--button-secondary-text-color));
+ color: var(--button-ghost-text-color);
border: unset;
&:hover {
- background-color: var(--button-ghost-hover-bg-color, var(--button-secondary-hover-bg-color));
+ background-color: var(--button-ghost-hover-bg-color);
}
&:active {
- background-color: var(--button-ghost-pressed-bg-color, var(--button-secondary-pressed-bg-color));
+ background-color: var(--button-ghost-pressed-bg-color);
}
&:disabled,
diff --git a/web-components/src/components/button/tokens/md-button-tokens.js b/web-components/src/components/button/tokens/md-button-tokens.js
new file mode 100644
index 000000000..92d27bca8
--- /dev/null
+++ b/web-components/src/components/button/tokens/md-button-tokens.js
@@ -0,0 +1,330 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+/* eslint-disable no-undef */
+const colors = require("@momentum-ui/tokens/dist/colors.json");
+
+const button = {
+ prefix: "md",
+ component: "button",
+ primary: {
+ "bg-color": {
+ light: colors.blue[60].name,
+ dark: colors.blue[60].name
+ },
+ hover: {
+ "bg-color": {
+ light: colors.blue[70].name,
+ dark: colors.blue[70].name
+ }
+ },
+ pressed: {
+ "bg-color": {
+ light: colors.blue[80].name,
+ dark: colors.blue[80].name
+ }
+ },
+ "text-color": {
+ light: colors.gray["05"].name,
+ dark: colors.gray["05"].name
+ },
+ outline: {
+ color: {
+ light: colors.blue[70].name,
+ dark: colors.blue[40].name
+ },
+ "text-color": {
+ light: colors.blue[70].name,
+ dark: colors.blue[40].name
+ }
+ }
+ },
+ secondary: {
+ "bg-color": {
+ light: colors.gray[20].name,
+ dark: colors.gray[60].name
+ },
+ hover: {
+ "bg-color": {
+ light: colors.gray[30].name,
+ dark: colors.gray[70].name
+ }
+ },
+ pressed: {
+ "bg-color": {
+ light: colors.gray[40].name,
+ dark: colors.gray[80].name
+ }
+ },
+ "text-color": {
+ light: colors.gray[100].name,
+ dark: colors.gray["05"].name
+ },
+ outline: {
+ color: {
+ light: colors.gray[70].name,
+ dark: colors.gray[40].name
+ },
+ "text-color": {
+ light: colors.gray[70].name,
+ dark: colors.gray[40].name
+ }
+ }
+ },
+ tertiary: {
+ "bg-color": {
+ light: colors.gray[80].name,
+ dark: colors.gray[20].name
+ },
+ hover: {
+ "bg-color": {
+ light: colors.gray[90].name,
+ dark: colors.gray[30].name
+ }
+ },
+ pressed: {
+ "bg-color": {
+ light: colors.gray["95"].name,
+ dark: colors.gray[40].name
+ }
+ },
+ "text-color": {
+ light: colors.gray["05"].name,
+ dark: colors.gray[100].name
+ },
+ outline: {
+ color: {
+ light: colors.gray[40].name,
+ dark: colors.gray[70].name
+ },
+ "text-color": {
+ light: colors.gray[40].name,
+ dark: colors.gray[70].name
+ }
+ }
+ },
+ join: {
+ "bg-color": {
+ light: colors.green[60].name,
+ dark: colors.green[60].name
+ },
+ hover: {
+ "bg-color": {
+ light: colors.green[70].name,
+ dark: colors.green[70].name
+ }
+ },
+ pressed: {
+ "bg-color": {
+ light: colors.green[80].name,
+ dark: colors.green[80].name
+ }
+ },
+ "text-color": {
+ light: colors.gray["05"].name,
+ dark: colors.gray["05"].name
+ },
+ outline: {
+ color: {
+ light: colors.green[70].name,
+ dark: colors.green[40].name
+ },
+ "text-color": {
+ light: colors.green[70].name,
+ dark: colors.green[40].name
+ }
+ }
+ },
+ cancel: {
+ "bg-color": {
+ light: colors.red[60].name,
+ dark: colors.red[60].name
+ },
+ hover: {
+ "bg-color": {
+ light: colors.red[70].name,
+ dark: colors.red[70].name
+ }
+ },
+ pressed: {
+ "bg-color": {
+ light: colors.red[80].name,
+ dark: colors.red[80].name
+ }
+ },
+ "text-color": {
+ light: colors.gray["05"].name,
+ dark: colors.gray["05"].name
+ },
+ outline: {
+ color: {
+ light: colors.red[70].name,
+ dark: colors.red[40].name
+ },
+ "text-color": {
+ light: colors.red[70].name,
+ dark: colors.red[40].name
+ }
+ }
+ },
+ red: {
+ "bg-color": {
+ common: "$mds-color-theme-button-cancel-normal"
+ },
+ "text-color": {
+ common: "$mds-color-theme-common-text-primary-normal"
+ },
+ hover: {
+ "bg-color": {
+ common: "$mds-color-theme-button-cancel-hover"
+ }
+ },
+ pressed: {
+ "bg-color": {
+ common: "$mds-color-theme-button-cancel-pressed"
+ }
+ },
+ outline: {
+ color: {
+ common: "$mds-color-theme-outline-cancel-normal"
+ },
+ "text-color": {
+ common: "$mds-color-theme-text-error-normal"
+ }
+ }
+ },
+ green: {
+ "bg-color": {
+ light: colors.green[60].name,
+ dark: colors.green[60].name
+ },
+ hover: {
+ "bg-color": {
+ light: colors.green[70].name,
+ dark: colors.green[70].name
+ }
+ },
+ pressed: {
+ "bg-color": {
+ light: colors.green[80].name,
+ dark: colors.green[80].name
+ }
+ },
+ outline: {
+ color: {
+ light: colors.green[70].name,
+ dark: colors.green[40].name
+ },
+ "text-color": {
+ light: colors.green[70].name,
+ dark: colors.green[40].name
+ }
+ }
+ },
+ ghost: {
+ "bg-color": {
+ common: "$mds-color-theme-button-secondary-normal"
+ },
+ "text-color": {
+ common: "$mds-color-theme-text-primary-normal"
+ },
+ disabled: {
+ "bg-color": {
+ common: "$mds-color-theme-button-secondary-disabled"
+ },
+ "text-color": {
+ common: "$mds-color-theme-text-primary-disabled"
+ }
+ },
+ hover: {
+ "bg-color": {
+ common: "$mds-color-theme-button-secondary-hover"
+ }
+ },
+ pressed: {
+ "bg-color": {
+ common: "$mds-color-theme-button-secondary-pressed"
+ }
+ }
+ },
+ "focus-ring": {
+ color: {
+ light: colors.blue[60].name,
+ dark: colors.blue[40].name
+ }
+ },
+ disabled: {
+ "bg-color": {
+ light: colors.gray[20].name,
+ dark: colors.gray[90].name
+ },
+ "text-color": {
+ light: colors.gray[40].name,
+ dark: colors.gray[70].name
+ }
+ },
+ files: {
+ normal: {
+ "bg-color": {
+ light: "none",
+ dark: "none"
+ },
+ "text-color": {
+ light: colors.gray[100].name,
+ dark: colors.gray["05"].name
+ }
+ },
+ hover: {
+ "bg-color": {
+ light: colors.yellow[70].name,
+ dark: colors.gray[80].name
+ },
+ "text-color": {
+ light: colors.white[100].name,
+ dark: colors.gray["05"].name
+ }
+ },
+ pressed: {
+ "bg-color": {
+ light: colors.yellow[80].name,
+ dark: colors.yellow[50].name
+ },
+ "text-color": {
+ light: colors.gray["05"].name,
+ dark: colors.gray["05"].name
+ }
+ }
+ },
+ whiteboards: {
+ normal: {
+ "bg-color": {
+ light: "none",
+ dark: "none"
+ },
+ "text-color": {
+ light: colors.gray[100].name,
+ dark: colors.gray["05"].name
+ }
+ },
+ hover: {
+ "bg-color": {
+ light: colors.purple[70].name,
+ dark: colors.gray[80].name
+ },
+ "text-color": {
+ light: colors.white[100].name,
+ dark: colors.gray["05"].name
+ }
+ },
+ pressed: {
+ "bg-color": {
+ light: colors.purple[80].name,
+ dark: colors.purple[50].name
+ },
+ "text-color": {
+ light: colors.gray["05"].name,
+ dark: colors.gray["05"].name
+ }
+ }
+ }
+};
+
+module.exports = button;
diff --git a/web-components/src/components/radio/RadioGroup.ts b/web-components/src/components/radio/RadioGroup.ts
index 34f85b01a..11a85572a 100644
--- a/web-components/src/components/radio/RadioGroup.ts
+++ b/web-components/src/components/radio/RadioGroup.ts
@@ -88,7 +88,7 @@ export namespace RadioGroup {
return this.slotted.findIndex((radio) => eventPath.includes(radio));
}
- private findCheckedRadioIndex() {
+ private findCheckedRadioIndex(): number {
return this.slotted.findIndex((radio) => (radio as Radio.ELEMENT).checked);
}
@@ -138,32 +138,35 @@ export namespace RadioGroup {
switch (code) {
case Key.Enter:
case Key.Space:
- {
- if (!this.isRadioDisabled(this.selected)) {
- this.setChecked(this.selected);
- this.notifySelectedChange();
- }
+ if (!this.isRadioDisabled(this.selected)) {
+ this.setChecked(this.selected);
+ this.notifySelectedChange();
+ event.stopPropagation();
+ event.preventDefault();
}
+
break;
case Key.ArrowUp:
case Key.ArrowLeft:
- {
- if (this.selected === 0) {
- this.switchRadioOnArrowPress(this.slotted.length - 1, -1);
- } else {
- this.switchRadioOnArrowPress(this.selected - 1, -1);
- }
+ if (this.selected === 0) {
+ this.switchRadioOnArrowPress(this.slotted.length - 1, -1);
+ } else {
+ this.switchRadioOnArrowPress(this.selected - 1, -1);
}
+
+ event.stopPropagation();
+ event.preventDefault();
break;
case Key.ArrowDown:
case Key.ArrowRight:
- {
- if (this.selected === this.slotted.length - 1) {
- this.switchRadioOnArrowPress(0);
- } else {
- this.switchRadioOnArrowPress(this.selected + 1);
- }
+ if (this.selected === this.slotted.length - 1) {
+ this.switchRadioOnArrowPress(0);
+ } else {
+ this.switchRadioOnArrowPress(this.selected + 1);
}
+
+ event.stopPropagation();
+ event.preventDefault();
break;
default:
break;
@@ -178,6 +181,14 @@ export namespace RadioGroup {
return [reset, styles];
}
+ public clearSelection() {
+ const selectedIndex = this.findCheckedRadioIndex();
+ if (selectedIndex != -1) {
+ this.checked = -1;
+ (this.slotted[selectedIndex] as Radio.ELEMENT).checked = false;
+ }
+ }
+
render() {
return html`
diff --git a/web-components/src/utils/generateScssFromTokens.js b/web-components/src/utils/generateScssFromTokens.js
index 0e1c95e97..54c751d5e 100644
--- a/web-components/src/utils/generateScssFromTokens.js
+++ b/web-components/src/utils/generateScssFromTokens.js
@@ -13,10 +13,8 @@ const handlebars = require("handlebars");
const colorData = require("@momentum-ui/tokens/dist/colors.json");
const semanticColorData = require("@momentum-ui/tokens/dist/semanticColor.json");
const tokenFileData = require("../tokens/vars/tokenFiles.js");
-const tokenImports = require("../tokens/tokenImports.js");
const fse = require("fs-extra");
const fsPath = require("fs-path");
-
const createdStyleSheets = [];
const componentsWithTokens = [];
@@ -228,7 +226,7 @@ const generateThemeStylesheets = () => {
};
const generateComponentScssFromTokens = async () => {
- const allTokenFiles = tokenFileData.tokenFiles.concat(tokenImports);
+ const allTokenFiles = tokenFileData.tokenFiles;
let index = 0;
for (const tokenObject of allTokenFiles) {
const componentName = tokenObject.component;