diff --git a/web-components/.stylelintrc.js b/web-components/.stylelintrc.js index e5be98a2cd..d11d3e0394 100644 --- a/web-components/.stylelintrc.js +++ b/web-components/.stylelintrc.js @@ -1,17 +1,13 @@ module.exports = { - plugins: [ - "stylelint-prettier", - ], - extends: [ - "stylelint-config-sass-guidelines" - ], + plugins: ["stylelint-prettier"], + extends: ["stylelint-config-sass-guidelines"], rules: { "string-quotes": "double", "max-nesting-depth": 5, "selector-class-pattern": null, "scss/at-import-partial-extension-blacklist": null, "declaration-property-value-disallowed-list": { - "border": ["none"] + border: ["none"] }, "scss/dollar-variable-pattern": null } diff --git a/web-components/package.json b/web-components/package.json index 759eebb89d..663f66d2f6 100644 --- a/web-components/package.json +++ b/web-components/package.json @@ -1,6 +1,6 @@ { "name": "@momentum-ui/web-components", - "version": "2.16.4", + "version": "2.16.5", "author": "Yana Harris", "license": "MIT", "repository": "https://github.com/momentum-design/momentum-ui.git", @@ -98,19 +98,15 @@ "@storybook/core-common": "6.4.0", "@storybook/storybook-deployer": "^2.8.16", "@storybook/web-components": "6.4.0", - "@types/copy-webpack-plugin": "^5.0.0", - "@types/dompurify": "^3.0.5", "@types/express": "5.0.0", "@types/express-serve-static-core": "5.0.0", - "@types/highlight.js": "^10.1.0", - "@types/html-webpack-plugin": "^3.2.9", "@types/jest": "26.0.10", "@types/luxon": "^1.25.0", "@types/node": "^20.15.1", "@types/papaparse": "^5.3.14", "@types/sortablejs": "^1.10.6", "@types/webpack": "^4.41.38", - "@types/webpack-dev-server": "^3.10.0", + "@types/copy-webpack-plugin": "^6.4.1", "@types/webpack-node-externals": "^2.0.0", "@typescript-eslint/eslint-plugin": "^5.62.0", "@typescript-eslint/parser": "^5.62.0", @@ -119,10 +115,10 @@ "babel-jest": "26.3.0", "babel-loader": "^8.1.0", "clean-webpack-plugin": "^4.0.0", - "copy-webpack-plugin": "^5.1.1", + "copy-webpack-plugin": "^6.4.1", "cross-env": "^7.0.3", "css-loader": "^3.4.2", - "cssstats": "^4.0.5", + "cssstats": "^4.0.5", "eslint": "^8.56.0", "eslint-plugin-prettier": "^5.2.1", "extract-loader": "^4.0.3", @@ -130,7 +126,7 @@ "fs-extra": "^9.0.1", "fs-path": "^0.0.24", "handlebars": "^4.7.6", - "html-webpack-plugin": "^3.2.0", + "html-webpack-plugin": "^4.5.2", "husky": "3.1.0", "import-local": "^3.0.0", "jest": "26.4.2", @@ -140,7 +136,7 @@ "lit-scss-loader": "1.0.1", "postcss": "^8.4.47", "postcss-selector-parser": "^6.1.2", - "prettier": "^3.3.3", + "prettier": "^3.4.1", "properties-reader": "^2.3.0", "query-selector-shadow-dom": "^1.0.1", "react": "^16.0.0", diff --git a/web-components/publish-conf.js b/web-components/publish-conf.js index f9a02d6760..ee4b3575cc 100644 --- a/web-components/publish-conf.js +++ b/web-components/publish-conf.js @@ -1,8 +1,9 @@ +/* eslint-disable @typescript-eslint/no-var-requires */ +/* eslint-disable no-undef */ const fs = require("fs"); const fse = require("fs-extra"); const path = require("path"); const spawnSync = require("child_process").spawnSync; -const exec = require("child_process").exec; const filePkg = fs.readFileSync(path.resolve("./package.json")); const p = JSON.parse(filePkg.toString()); @@ -27,7 +28,7 @@ module.exports.createPackageJson = function () { const pkg = { name: p.name, version: p.version, - description: p.description || p.description, + description: p.description, author: p.author, license: p.license, repository: p.repository, diff --git a/web-components/src/components/combobox/scss/settings.scss b/web-components/src/components/combobox/scss/settings.scss index f8af2fd127..6e111c3e74 100644 --- a/web-components/src/components/combobox/scss/settings.scss +++ b/web-components/src/components/combobox/scss/settings.scss @@ -21,7 +21,7 @@ $combobox-input-padding-right: rem-calc(8); $combobox-error-padding: rem-calc(3) 0 0 rem-calc(12); $combobox-new-error-padding: rem-calc(3) 0 0 0; -$combobox-option-padding: rem-calc(5) rem-calc(12) rem-calc(6); +$combobox-option-padding: rem-calc(4) rem-calc(12) rem-calc(4); $combobox-select-size: rem-calc(20); $combobox-select-icon-size: rem-calc(18); $combobox-select-icon-top: rem-calc(3); diff --git a/web-components/src/components/dropdown/Dropdown.ts b/web-components/src/components/dropdown/Dropdown.ts index 8504e5eb7b..32ae1e52be 100644 --- a/web-components/src/components/dropdown/Dropdown.ts +++ b/web-components/src/components/dropdown/Dropdown.ts @@ -86,6 +86,9 @@ export namespace Dropdown { @property({ type: Boolean, reflect: true, attribute: "search-trim-space" }) trimSpace = false; @property({ type: String, attribute: "no-results-i18n" }) resultsTextLocalization = "No Results"; + @property({ type: Boolean }) + pill: boolean | null = false; + @property({ type: String }) helpText = ""; @property({ type: Array }) messageArr: Dropdown.Message[] = []; @property({ type: String }) htmlId = ""; @@ -97,7 +100,9 @@ export namespace Dropdown { @property({ type: String, reflect: true }) ariaLabel = ""; // This aria-label is used by default when there is no search or list-items are displayed. @property({ type: String, attribute: "search-result-aria-label" }) searchResultAriaLabel = ""; // This aria-label is dynamic and used when there is search and list-items are displayed. - @internalProperty() ariaLabelForDropdown = ""; // This internal property is used to conditionally set aria-label. + + @internalProperty() + private ariaLabelForDropdown = ""; // This internal property is used to conditionally set aria-label. @internalProperty() private renderOptions: RenderOptionMember[] = []; @internalProperty() private selectedKey: string = EMPTY_KEY; @@ -682,7 +687,8 @@ export namespace Dropdown { return { "md-dropdown__expanded": this.expanded, [`md-${this.messageType}`]: !!this.messageType, - "md-new-dropdown": this.newMomentum + "md-new-dropdown": this.newMomentum, + "md-dropdown--pill": this.pill === true }; } diff --git a/web-components/src/components/dropdown/scss/dropdown.scss b/web-components/src/components/dropdown/scss/dropdown.scss index d2667a08dd..f4c9839c8f 100644 --- a/web-components/src/components/dropdown/scss/dropdown.scss +++ b/web-components/src/components/dropdown/scss/dropdown.scss @@ -83,7 +83,7 @@ top: calc(100% + #{$dropdown-main-indent}); width: 100%; z-index: 99; - padding: calc((var(--dropdown-list-padding) / 16) * 1rem); + padding: calc((var(--dropdown-list-padding) / 16) * 1rem); } &-option { @@ -183,7 +183,7 @@ height: $dropdown-min-height; outline: none; - &::placeholder{ + &::placeholder { color: var(--md-secondary-text-color); } } @@ -191,7 +191,7 @@ ::input-placeholder { @include text-dots; display: inline-block; - width: calc(100%); + width: calc(100%); } .md-dropdown-left-icon { @@ -254,8 +254,8 @@ margin: 0; margin-left: calc(#{$dropdown-main-indent} * 2); outline: none; - padding: 0; - position: relative; + padding: 0; + position: relative; width: rem-calc(20); height: rem-calc(20); display: flex; @@ -277,6 +277,7 @@ } .md-new-dropdown { + height: $dropdown-new-height; &-label { background-color: var(--dropdown-bg-color-default); border-radius: 8px; @@ -294,7 +295,7 @@ } &:focus { - background-color: var(--dropdown-bg-color-focus) + background-color: var(--dropdown-bg-color-focus); } } @@ -421,7 +422,7 @@ input { color: var(--md-disabled-text-color); - &::placeholder{ + &::placeholder { color: var(--md-disabled-text-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 index 9fd29e5bc1..5ee31d4c32 100644 --- a/web-components/src/components/dropdown/tokens/mdv2-dropdown-tokens.js +++ b/web-components/src/components/dropdown/tokens/mdv2-dropdown-tokens.js @@ -65,7 +65,7 @@ const dropdown = { common: "8" }, height: { - common: "40" + common: "36" } } } diff --git a/web-components/src/components/icon/scss/icon.scss b/web-components/src/components/icon/scss/icon.scss index 3b4d7d3a2f..b18c89687c 100644 --- a/web-components/src/components/icon/scss/icon.scss +++ b/web-components/src/components/icon/scss/icon.scss @@ -1,6 +1,8 @@ /** @component icon */ +@use "@/wc_scss/tools/functions/core"; +@use "@/wc_scss/colors/settings-base" as color-base; -@include exports("md-icon") { +@include core.exports("md-icon") { :host { display: inline-flex; align-items: center; @@ -20,7 +22,7 @@ line-height: inherit; .md--dark & { - fill: $md-white-100; + fill: color-base.$md-white-100; } } } diff --git a/web-components/src/components/icon/scss/settings.scss b/web-components/src/components/icon/scss/settings.scss index e268169771..d168b1468b 100644 --- a/web-components/src/components/icon/scss/settings.scss +++ b/web-components/src/components/icon/scss/settings.scss @@ -1,10 +1,13 @@ +@use "@/wc_scss/colors/settings-base" as color-base; +@use "@/wc_scss/colors/settings-transparencies" as color-transparent; + // White button colors -$icon--white__fill: $md-white-100 !default; -$icon--white__fill--hover: $white-92 !default; -$icon--white__fill--active: $white-84 !default; -$icon--white__fill--disabled: $white-20 !default; +$icon--white__fill: color-base.$md-white-100 !default; +$icon--white__fill--hover: color-transparent.$white-92 !default; +$icon--white__fill--active: color-transparent.$white-84 !default; +$icon--white__fill--disabled: color-transparent.$white-20 !default; -$icon--white__fill--contrast: $md-black-100 !default; -$icon--white__fill--hover--contrast: $md-black-100 !default; -$icon--white__fill--active--contrast: $md-black-100 !default; -$icon--white__fill--disabled--contrast: $white-20 !default; +$icon--white__fill--contrast: color-base.$md-black-100 !default; +$icon--white__fill--hover--contrast: color-base.$md-black-100 !default; +$icon--white__fill--active--contrast: color-base.$md-black-100 !default; +$icon--white__fill--disabled--contrast: color-transparent.$white-20 !default; diff --git a/web-components/src/components/input/Input.ts b/web-components/src/components/input/Input.ts index 01943352d7..ebd17aaf25 100644 --- a/web-components/src/components/input/Input.ts +++ b/web-components/src/components/input/Input.ts @@ -453,6 +453,8 @@ export namespace Input { hasRemoveStyle @click=${(event: MouseEvent) => this.handleClear(event)} @keydown=${(event: KeyboardEvent) => this.handleClear(event)} + size="20" + circle > { const source = await fse.readFile(template, "utf8"); - var hbs = handlebars.create(); + let hbs = handlebars.create(); hbs.registerHelper("nodash", (value) => { return value.replace(/-/g, ""); }); diff --git a/web-components/webpack.config.ts b/web-components/webpack.config.ts index 27b29eb197..458dc1607c 100644 --- a/web-components/webpack.config.ts +++ b/web-components/webpack.config.ts @@ -137,17 +137,19 @@ export const commonDev = merge(common, { template: "./src/[sandbox]/index.html", favicon: "./src/[sandbox]/favicon.ico" }), - new CopyWebpackPlugin([ - { from: `${pMomentum}/core/fonts`, to: "fonts" }, - { from: `${pMomentum}/core/images`, to: "images" }, - { from: `${pMomentum}/icons/fonts`, to: "icons/fonts" }, - { from: `${pMomentum}/icons/fonts`, to: "fonts" }, - { from: `${pMomentum}/core/css/momentum-ui.min.css`, to: "css" }, - { from: `${pMomentum}/core/css/momentum-ui.min.css.map`, to: "css" }, - { from: `${pMomentum}/icons/css/momentum-ui-icons.min.css`, to: "css" }, - { from: `${pCss}/*.css`, to: "css", flatten: true }, - { from: `${pStats}/**/*.json`, to: "stats", flatten: true } - ]) + new CopyWebpackPlugin({ + patterns: [ + { from: `${pMomentum}/core/fonts`, to: "fonts" }, + { from: `${pMomentum}/core/images`, to: "images" }, + { from: `${pMomentum}/icons/fonts`, to: "icons/fonts" }, + { from: `${pMomentum}/icons/fonts`, to: "fonts" }, + { from: `${pMomentum}/core/css/momentum-ui.min.css`, to: "css" }, + { from: `${pMomentum}/core/css/momentum-ui.min.css.map`, to: "css" }, + { from: `${pMomentum}/icons/css/momentum-ui-icons.min.css`, to: "css" }, + { from: `${pCss}/*.css`, to: "css/[name].[ext]" }, + { from: `${pStats}/**/*.json`, to: "stats/[name].[ext]" } + ] + }) ] }); @@ -260,16 +262,18 @@ const commonDist = merge(common, { new WebpackLoadChunksPlugin({ trimNameEnd: 6 }), - new CopyWebpackPlugin([ - { from: `${pMomentum}/core/fonts`, to: "assets/fonts" }, - { from: `${pMomentum}/core/images`, to: "assets/images" }, - { from: `${pMomentum}/icons/fonts`, to: "assets/fonts" }, - { from: `${pMomentum}/icons/fonts`, to: "assets/icons/fonts" }, - { from: `${pMomentum}/core/css/momentum-ui.min.css`, to: "assets/styles" }, - { from: `${pMomentum}/core/css/momentum-ui.min.css.map`, to: "assets/styles" }, - { from: `${pMomentum}/icons/css/momentum-ui-icons.min.css`, to: "assets/styles" }, - { from: `${pCss}/*.css`, to: "assets/styles", flatten: true } - ]), + new CopyWebpackPlugin({ + patterns: [ + { from: `${pMomentum}/core/fonts`, to: "assets/fonts" }, + { from: `${pMomentum}/core/images`, to: "assets/images" }, + { from: `${pMomentum}/icons/fonts`, to: "assets/fonts" }, + { from: `${pMomentum}/icons/fonts`, to: "assets/icons/fonts" }, + { from: `${pMomentum}/core/css/momentum-ui.min.css`, to: "assets/styles" }, + { from: `${pMomentum}/core/css/momentum-ui.min.css.map`, to: "assets/styles" }, + { from: `${pMomentum}/icons/css/momentum-ui-icons.min.css`, to: "assets/styles" }, + { from: `${pCss}/*.css`, to: "assets/styles/[name].[ext]" } + ] + }), new RemovePlugin({ after: { log: false,