chore: update alert and fix sass warnings (#1812)

* chore: update alert and fix sass warnings * chore: update package version
momentum-design · Nov 4, 2024 · 547eb59 · 547eb59
1 parent afb3ed3
commit 547eb59
Show file tree

Hide file tree

Showing 23 changed files with 245 additions and 225 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.15",
+  "version": "2.14.16",
   "author": "Yana Harris",
   "license": "MIT",
   "repository": "https://github.com/momentum-design/momentum-ui.git",

diff --git a/web-components/src/[sandbox]/examples/alert.ts b/web-components/src/[sandbox]/examples/alert.ts
@@ -32,7 +32,7 @@ export const alertTemplate = html`
   <md-alert
     title="Header"
     message="Turpis id scelerisque porta purus ut vel nisl a. Pulvinar felis convallis praesent viverra porta."
-    type="success"
+    type="info"
     closable
     show
     newMomentum

diff --git a/web-components/src/components/alert/Alert.test.ts b/web-components/src/components/alert/Alert.test.ts
@@ -82,7 +82,7 @@ describe("Alert", () => {
     expect(expectedClassList.every((className) => alertElement?.classList.contains(className))).toBe(true);
 
     const type = element.shadowRoot?.querySelector(".md-alert__icon md-icon");
-    expect(type?.getAttribute("name")).toEqual("info-circle-regular");
+    expect(type?.getAttribute("name")).toEqual("info-circle-bold");
     expect(type?.getAttribute("color")).toEqual("var(--md-alert-info-text-color, blue)");
   });
 

diff --git a/web-components/src/components/alert/Alert.ts b/web-components/src/components/alert/Alert.ts
@@ -68,16 +68,16 @@ export namespace Alert {
           return html`
             <md-icon
               name="error-legacy-bold"
-              size="${!this.newMomentum ? 32 : 24}"
+              size="${this.newMomentum ? 24 : 32}"
               iconSet="momentumDesign"
               color="var(--md-alert-error-text-color, red)"
             ></md-icon>
           `;
         case "info":
           return html`
             <md-icon
-              name="info-circle-regular"
-              size="${!this.newMomentum ? 32 : 24}"
+              name="info-circle-bold"
+              size="${this.newMomentum ? 24 : 32}"
               iconSet="momentumDesign"
               color="var(--md-alert-info-text-color, blue)"
             ></md-icon>
@@ -86,7 +86,7 @@ export namespace Alert {
           return html`
             <md-icon
               name="check-circle-bold"
-              size="${!this.newMomentum ? 32 : 24}"
+              size="${this.newMomentum ? 24 : 32}"
               iconSet="momentumDesign"
               color="var(--md-alert-success-text-color, green)"
             ></md-icon>
@@ -96,7 +96,7 @@ export namespace Alert {
           return html`
             <md-icon
               name="warning-bold"
-              size="${!this.newMomentum ? 32 : 24}"
+              size="${this.newMomentum ? 24 : 32}"
               iconSet="momentumDesign"
               color="var(--md-alert-warning-text-color, orange)"
             ></md-icon>
@@ -105,7 +105,7 @@ export namespace Alert {
           return html`
             <md-icon
               name="chat-bold"
-              size="${!this.newMomentum ? 32 : 24}"
+              size="${this.newMomentum ? 32 : 24}"
               iconSet="momentumDesign"
               color="var(--alert-title-text-color)"
             ></md-icon>

diff --git a/web-components/src/components/alert/scss/alert.scss b/web-components/src/components/alert/scss/alert.scss
@@ -1,4 +1,8 @@
 /** @component alert */
+@use "@/wc_scss/typography/settings" as typography;
+@use "@/wc_scss/colors/settings-transparencies.scss" as alpha-color-tokens;
+@use "@/wc_scss/tools/mixins/flex" as *;
+@use "@/wc_scss/tools/mixins/border-radius.scss" as *;
 
 :host(md-alert) {
   display: flex;
@@ -9,30 +13,35 @@
   @include flex($jc: space-between, $ai: flex-start);
   @include border-radius($alert__border-radius);
   background-color: var(--alert-default-bg-color);
-  border: 1px solid var(--alert-default-border-color, $black-12);
-  box-shadow: 0 8px 16px 0 $black-08;
+  border: 1px solid var(--alert-default-border-color);
+  box-shadow: 0 8px 16px 0 alpha-color-tokens.$black-08;
   flex: 1 1 100%;
   margin-bottom: rem-calc(8);
   max-height: rem-calc(308);
   max-width: $alert__width;
   min-height: rem-calc(78);
   padding: rem-calc(12);
+  gap: rem-calc(12);
 
   &__icon {
     align-self: center;
     md-icon::part(icon) {
-      font-size: var(--alert-default-icon-size, $lm-alert-default-icon-size-light) !important;
-      line-height: var(--alert-default-icon-size, $lm-alert-default-icon-size-light) !important;
+      font-size: var(--alert-default-icon-size);
+      line-height: var(--alert-default-icon-size);
     }
   }
 
+  &__body {
+    @include flex($jc: space-between, $ai: flex-start);
+    width: 100%;
+  }
+
   &__content {
     display: flex;
     flex-basis: 0;
     flex-direction: column;
     flex-grow: 2;
     max-width: $alert__content_width;
-    padding-left: rem-calc(12);
     padding-right: rem-calc(2);
     align-self: center;
   }
@@ -41,32 +50,31 @@
     @include line-dots(2);
     text-overflow: ellipsis;
     color: var(--alert-title-text-color);
-    font-size: var(--alert-title-font-size, $lm-alert-title-font-size-light);
+    font-size: var(--alert-title-font-size);
     line-height: rem-calc(24);
     width: calc(100%);
   }
 
   &__message {
     @include line-dots(2);
     color: var(--alert-default-text-color);
-    font-family: $brand-font-light;
+    font-family: typography.$brand-font-light;
     font-size: $alert__font-size;
     line-height: 1.35;
     width: calc(100%);
     word-wrap: break-word;
   }
 
   &__button {
-    margin-left: rem-calc(4);
     align-self: center;
     md-button::part(button) {
       align-items: center;
       background-color: var(--alert-close-bg-color);
       border-radius: 50%;
       display: inline-flex;
-      height: var(--alert-close-size, $lm-alert-close-size-light);
+      height: var(--alert-close-size);
       justify-content: center;
-      width: var(--alert-close-size, $lm-alert-close-size-light);
+      width: var(--alert-close-size);
     }
 
     md-icon::part(icon) {
@@ -84,26 +92,28 @@
 .md-new-alert {
   @include border-radius($alert_new_border-radius);
 
+  box-sizing: border-box;
   background-color: var(--alert-default-bg-color);
-  border: 1px solid var(--alert-default-new-border-color, $black-12);
+  border: 1px solid var(--alert-default-new-border-color);
   box-shadow: 0px 0px 1px 0px #0000001F, 0px 8px 16px 0px #00000033;
   flex: 1 1 100%;
   margin-bottom: rem-calc(8);
-  max-height: rem-calc(220);
+  max-height: rem-calc(240);
   max-width: $alert_new-width;
   min-height: rem-calc(56);
   padding: rem-calc(16);
   flex-direction: column;
 
   &__body {
     @include flex($jc: space-between, $ai: flex-start);
+    gap: rem-calc(12);
     width: 100%;
   }
 
   &__icon {
     md-icon::part(icon) {
-      font-size: var(--alert-default-icon-size, $lm-alert-default-icon-size-light) !important;
-      line-height: var(--alert-default-icon-size, $lm-alert-default-icon-size-light) !important;
+      font-size: var(--alert-default-icon-size);
+      line-height: var(--alert-default-icon-size);
     }
   }
 
@@ -120,17 +130,17 @@
     @include line-dots(2);
     text-overflow: ellipsis;
     color: var(--alert-title-text-color);
-    font-family: $brand-font-medium;
+    font-family: typography.$brand-font-medium;
     font-weight: 500;
-    font-size: var(--alert-title-font-size, $lm-alert-title-font-size-light);
+    font-size: var(--alert-title-font-size);
     line-height: rem-calc(24);
     width: calc(100%);
   }
 
   &__message {
     @include line-dots(5);
-    color: var(--alert-title-text-color);
-    font-family: $brand-font-regular;
+    color: var(--alert-default-new-body-text-color);
+    font-family: typography.$brand-font-regular;
     font-size: var(--body-secondary-font-size, rem-calc(14));
     line-height: rem-calc(20);
     width: calc(100%);
@@ -150,9 +160,9 @@
       background-color: var(--alert-close-bg-color);
       border-radius: 50%;
       display: inline-flex;
-      height: var(--alert-close-size, $lm-alert-close-size-light);
+      height: var(--alert-close-size);
       justify-content: center;
-      width: var(--alert-close-size, $lm-alert-close-size-light);
+      width: var(--alert-close-size);
       margin-top: rem-calc(3);
     }
 
@@ -166,10 +176,7 @@
     margin-top: rem-calc(16);
     justify-content: end;
     width: 100%;
-
-    md-button:not(:first-child) {
-      margin-left: rem-calc(8);
-    }
+    gap: rem-calc(8);
   }
 
   &__footer.is-empty{
@@ -180,7 +187,7 @@
     margin-top: rem-calc(4);
     display: flex;
     justify-content: center;
-    font-family: $brand-font-regular;
+    font-family: typography.$brand-font-regular;
 
     md-icon {
       margin-left: rem-calc(8);

diff --git a/web-components/src/components/alert/scss/module.scss b/web-components/src/components/alert/scss/module.scss
@@ -1,19 +1,4 @@
 @import "@/wc_scss/tools/functions/core";
-@import "@/wc_scss/tools/mixins/core";
-
-// Settings
-@import "@/wc_scss/colors/settings-base";
-@import "@/wc_scss/colors/settings-transparencies";
-@import "@/wc_scss/settings/core";
-@import "@/wc_scss/typography/settings";
-@import "@/wc_scss/icon/settings";
-
-// Tools
-@import "@/wc_scss/tools/mixins/border-radius";
-@import "@/wc_scss/tools/mixins/flex";
-
-//vars
-@import "./vars/lm-alert-settings";
 
 // Alert Specific
 @import "settings";

diff --git a/web-components/src/components/alert/scss/settings.scss b/web-components/src/components/alert/scss/settings.scss
@@ -1,6 +1,6 @@
 :host {
-  --alert-icon-size: var(--alert-default-icon-size, $lm-alert-default-icon-size-light);
-  --alert-close-btn: var(--alert-close-bg-color, $lm-alert-close-bg-color-light);
+  --alert-icon-size: var(--alert-default-icon-size);
+  --alert-close-btn: var(--alert-close-bg-color);
 }
 
 $alert__class: "md-alert";
@@ -9,21 +9,7 @@ $alert__border-radius: rem-calc(5);
 $alert__font-size: var(--body-secondary-font-size, rem-calc(14)) !default;
 $alert__font-size--title: var(--body-primary-font-size, rem-calc(16)) !default;
 $alert__icon-font-size: rem-calc(44) !default;
-$alert__close-icon-color: var(--alert-close-text-color, $lm-alert-close-text-color-light);
-
-$alert__background-color: $md-white-100 !default;
-$alert__background-color--info: var(--wc-info-bg-color, $md-theme-50) !default;
-$alert__background-color--success: var(--wc-success-bg-color, $md-green-50) !default;
-$alert__background-color--warning: var(--wc-warning-bg-color, $md-yellow-50) !default;
-$alert__background-color--error: var(--wc-error-bg-color, $md-red-50) !default;
-
-$alert__font-color: $md-gray-90 !default;
-$alert__font-color--title: $md-black-100 !default;
-$alert__font-color--status: $md-green-70 !default;
-$alert__font-color--info: var(--wc-info-text-color, $md-theme-50) !default;
-$alert__font-color--success: var(--wc-success-text-color, $md-green-50) !default;
-$alert__font-color--warning: var(--wc-warning-text-color, $md-yellow-50) !default;
-$alert__font-color--error: var(--wc-error-text-color, $md-red-50) !default;
+$alert__close-icon-color: var(--alert-close-text-color);
 
 $alert__padding: rem-calc(8);
 $alert__padding-right: rem-calc(13);

diff --git a/web-components/src/components/alert/tokens/lm-alert-tokens.js b/web-components/src/components/alert/tokens/lm-alert-tokens.js
@@ -21,6 +21,16 @@ const alert = {
     "icon-size": {
       light: "24px",
       dark: "24px"
+    },
+    "border-color": {
+      light: colors.gray[20].name,
+      dark: colors.gray[80].name
+    },
+    "new-border-color": {
+      common: "$mds-color-theme-outline-primary-normal"
+    },
+    "new-body-text-color": {
+      common: "$mds-color-theme-text-primary-normal"
     }
   },
   title: {

diff --git a/web-components/src/components/alert/tokens/md-alert-tokens.js b/web-components/src/components/alert/tokens/md-alert-tokens.js
@@ -21,6 +21,16 @@ const alert = {
     "icon-size": {
       light: "40px",
       dark: "40px"
+    },
+    "border-color": {
+      light: colors.gray[20].name,
+      dark: colors.gray[80].name
+    },
+    "new-border-color": {
+      common: "$mds-color-theme-outline-primary-normal"
+    },
+    "new-body-text-color": {
+      common: "$mds-color-theme-text-primary-normal"
     }
   },
   title: {

diff --git a/web-components/src/components/alert/tokens/mdv2-alert-tokens.js b/web-components/src/components/alert/tokens/mdv2-alert-tokens.js
@@ -22,6 +22,9 @@ const alert = {
     },
     "new-border-color": {
       common: "$mds-color-theme-outline-primary-normal"
+    },
+    "new-body-text-color": {
+      common: "$mds-color-theme-text-primary-normal"
     }
   },
   title: {

diff --git a/web-components/src/components/loading/scss/loading.scss b/web-components/src/components/loading/scss/loading.scss
@@ -1,6 +1,10 @@
+@use "@/wc_scss/settings/core" as *;
+@use "~@momentum-ui/icons/scss/mixins" as *;
+@use "@/wc_scss/tools/mixins/flex";
+
 @include exports("md-loading") {
   .md-loading {
-    @include flex();
+    @include flex.flex();
 
     button &,
     .md-button {

diff --git a/web-components/src/components/loading/scss/module.scss b/web-components/src/components/loading/scss/module.scss
@@ -1,8 +1 @@
-@import "@/wc_scss/tools/functions/core";
-
-@import "~@momentum-ui/icons/scss/mixins";
-@import "@/wc_scss/colors/settings.scss";
-@import "@/wc_scss/settings/core";
-@import "@/wc_scss/tools/mixins/flex";
-
 @import "loading";
diff --git a/web-components/src/components/progress-bar/scss/settings.scss b/web-components/src/components/progress-bar/scss/settings.scss
@@ -1,8 +1,9 @@
+@use "sass:color";
+
 $progress-bar-height: rem-calc(4) !default;
 $progress-bar-color: $md-gray-10;
 
-$progress-bar-border-color: scale-color($md-white-100,
-$lightness: 20%) !default;
+$progress-bar-border-color: color.scale($md-white-100, $lightness: 20%) !default;
 $progress-bar-border-size: 1px !default;
 $progress-bar-border-style: solid !default;
 $progress-bar-border-radius: var(--progress-bar-border-radius, $global-radius) !default;
@@ -22,7 +23,7 @@ $progress-bg: var(--progress-bar-track-bg-color, $md-gray-20);
 $progress-bar-color: $md-white-100;
 $progress-border-radius: var(--progress-bar-border-radius, $border-radius-base);
 $progress-bar-bg: var(--progress-bar-indicator-in-progress, $md-theme-50);
-$progress-bar-success-bg: var(--progress-bar-indicator-complete ,$md-green-50);
+$progress-bar-success-bg: var(--progress-bar-indicator-complete, $md-green-50);
 $progress-bar-warning-bg: var(--progress-bar-indicator-caution, $md-yellow-50);
 $progress-bar-danger-bg: var(--progress-bar-indicator-failed, $md-red-50);
 $progress-bar-info-bg: $md-mint-50;
diff --git a/web-components/src/components/radio/scss/radio.scss b/web-components/src/components/radio/scss/radio.scss
@@ -3,6 +3,7 @@
     &-wrapper {
       max-height: $radio-input-max-height;
       display: inline-flex;
+      max-width: 100%;
     }
 
     &-input {