Unread count badge updates (#1850)

* chore: update unread badge outline and deps * chore: update version
momentum-design · Dec 13, 2024 · 391492c · 391492c
1 parent 056bcb0
commit 391492c
Show file tree

Hide file tree

Showing 6 changed files with 23 additions and 11 deletions.
diff --git a/web-components/package.json b/web-components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@momentum-ui/web-components",
-  "version": "2.16.7",
+  "version": "2.16.8",
   "author": "Yana Harris",
   "license": "MIT",
   "repository": "https://github.com/momentum-design/momentum-ui.git",
@@ -59,9 +59,9 @@
     "@interactjs/interact": "1.10.3",
     "@interactjs/modifiers": "1.10.3",
     "@interactjs/utils": "1.10.3",
-    "@momentum-design/brand-visuals": "0.1.2",
-    "@momentum-design/icons": "0.7.0",
-    "@momentum-design/tokens": "0.2.6",
+    "@momentum-design/brand-visuals": "0.2.0",
+    "@momentum-design/icons": "0.8.0",
+    "@momentum-design/tokens": "0.3.0",
     "@popperjs/core": "^2.11.8",
     "country-codes-list": "1.6.8",
     "country-flags-svg": "1.1.4",

diff --git a/web-components/src/[sandbox]/examples/badge.ts b/web-components/src/[sandbox]/examples/badge.ts
@@ -165,6 +165,11 @@ export const badgeTemplate = html`
 
   <h4 class="snadbox-header">Unread count</h4>
 
+  <md-badge color="unreadcount"> 999 </md-badge>
   <md-badge color="unreadcount"> 99 </md-badge>
   <md-badge color="unreadcount"> 4 </md-badge>
+
+  <md-badge color="unreadcount" outlined> 99 </md-badge>
+  <md-badge color="unreadcount" outlined> 99 </md-badge>
+  <md-badge color="unreadcount" outlined> 4 </md-badge>
 `;
diff --git a/web-components/src/components/avatar/Presence.ts b/web-components/src/components/avatar/Presence.ts
@@ -7,7 +7,7 @@ import { getPresenceSize } from "./Presence.utils";
 import styles from "./scss/module.scss";
 
 export namespace Presence {
-  export type Size = typeof AvatarSize[number];
+  export type Size = (typeof AvatarSize)[number];
 
   @customElementWithCheck("md-presence")
   export class ELEMENT extends LitElement {

diff --git a/web-components/src/components/badge/scss/badge.scss b/web-components/src/components/badge/scss/badge.scss
@@ -128,12 +128,19 @@
         var(--badge-unreadcount-text-color, var(--button-primary-text-color))
       );
       font-family: var(--brand-font-medium);
-      font-size: var(--label-compact-font-size, rem-calc(12));
-      font-weight: 550;
+      font-size: rem-calc(12);
+      font-weight: 500;
       padding: 0rem 0.25rem;
-      min-width: rem-calc(20);
-      height: rem-calc(20);
+      min-width: rem-calc(16);
+      height: rem-calc(16);
       justify-content: center;
+
+      &.md-badge--outline {
+        border: 1px solid;
+        min-width: rem-calc(18);
+        height: rem-calc(18);
+        border-color: var(--md-primary-bg-color);
+      }
     }
 
     &--orange {

diff --git a/web-components/src/components/icon/Icon.ts b/web-components/src/components/icon/Icon.ts
@@ -236,7 +236,7 @@ export namespace Icon {
       // eslint-disable-next-line @typescript-eslint/no-var-requires
       const importedIcon =
         this.iconSet === "momentumBrandVisuals"
-          ? require(`@momentum-design/brand-visuals/dist/svg/${iconName}.svg`)
+          ? require(`@momentum-design/brand-visuals/dist/logos/${iconName}.svg`)
           : require(`@momentum-design/icons/dist/svg/${iconName}.svg`);
 
       if (this.isPath(importedIcon)) {

diff --git a/web-components/webpack.config.ts b/web-components/webpack.config.ts
@@ -65,7 +65,7 @@ const common: webpack.Configuration = {
         },
         include: [
           path.resolve("node_modules/@momentum-design/icons/dist/svg"),
-          path.resolve("node_modules/@momentum-design/brand-visuals/dist/svg")
+          path.resolve("node_modules/@momentum-design/brand-visuals/dist/logos")
         ]
       }
     ]