Update dependencies (#1845)

* chore: remove type dependency * chore: increment version number * chore: update copy-webex-plugin and dropdown and combobox height * chore: update list padding
momentum-design · Dec 4, 2024 · 23a154a · 23a154a
1 parent a087446
commit 23a154a
Show file tree

Hide file tree

Showing 13 changed files with 74 additions and 63 deletions.
diff --git 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
@@ -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,18 +115,18 @@
     "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",
     "file-loader": "^4.3.0",
     "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
@@ -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
@@ -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
@@ -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
@@ -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,15 +183,15 @@
         height: $dropdown-min-height;
         outline: none;
 
-        &::placeholder{
+        &::placeholder {
           color: var(--md-secondary-text-color);
         }
       }
 
       ::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
@@ -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
@@ -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
@@ -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
@@ -453,6 +453,8 @@ export namespace Input {
               hasRemoveStyle
               @click=${(event: MouseEvent) => this.handleClear(event)}
               @keydown=${(event: KeyboardEvent) => this.handleClear(event)}
+              size="20"
+              circle
             >
               <md-icon
                 class="md-input__icon-clear"

diff --git a/web-components/src/components/list/scss/settings.scss b/web-components/src/components/list/scss/settings.scss
@@ -1,6 +1,6 @@
 $list-item__font-size: rem-calc(14);
 $list-item__line-height: var(--list-line-height, rem-calc(18));
-$list-item__padding: (rem-calc(8) rem-calc(12));
+$list-item__padding: (rem-calc(4) rem-calc(12));
 $list-item__margin: $base-unit;
 $list-item__min-height: (rem-calc(36));
 $list-item__focus-shadow: 0 0 0 rem-calc(2) var(--list-focus-border-color, $md-list-focus-border-color-light);

diff --git a/web-components/src/utils/generateColorTableData.js b/web-components/src/utils/generateColorTableData.js
@@ -17,7 +17,7 @@ const fsPath = require("fs-path");
 const _generateFileFromTemplate = async (dest, fileName, data, template) => {
   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
@@ -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,