Allow <Badge /> to handle text truncation with max width

near · Nov 12, 2024 · 7be4b1f · 7be4b1f
1 parent c523e6e
commit 7be4b1f
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 2 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@near-pagoda/ui",
-  "version": "2.0.8",
+  "version": "2.0.9",
   "description": "A React component library that implements the official NEAR design system.",
   "license": "MIT",
   "repository": {

diff --git a/src/components/Badge.module.scss b/src/components/Badge.module.scss
@@ -22,6 +22,10 @@
   outline: none;
   transition: var(--transitions);
 
+  button:has(> &) {
+    min-width: min-content !important;
+  }
+
   &[role='button'] {
     border-radius: 100px;
     cursor: pointer;
@@ -94,6 +98,7 @@
   color: var(--badge-color-icon);
   width: 16px;
   height: 16px;
+  flex-shrink: 0;
 
   svg {
     width: 100%;
@@ -102,3 +107,9 @@
     stroke: currentColor;
   }
 }
+
+.label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  min-width: 0;
+}
diff --git a/src/components/Badge.tsx b/src/components/Badge.tsx
@@ -33,7 +33,7 @@ export const Badge = forwardRef<HTMLSpanElement, Props>(
         {...props}
       >
         {iconLeft && <span className={s.icon}>{iconLeft}</span>}
-        {label}
+        <span className={s.label}>{label}</span>
         {iconRight && <span className={s.icon}>{iconRight}</span>}
       </span>
     );