Merge pull request #2561 from dusk-network/fix-2557-handle-long-strin…

…gs-in-data Add maxlength to Badge and break long list items
dusk-network · Oct 3, 2024 · 4c73532 · 4c73532
2 parents 2de46c6 + 46ababf
commit 4c73532
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 2 deletions.
diff --git a/explorer/src/lib/components/list-item/ListItem.css b/explorer/src/lib/components/list-item/ListItem.css
@@ -31,6 +31,7 @@
   gap: 0.625rem;
   align-items: center;
   margin-bottom: 1.25rem;
+  line-break: anywhere;
 }
 
 .details-list__definition:last-of-type {

diff --git a/explorer/src/lib/components/transaction-type/TransactionType.svelte b/explorer/src/lib/components/transaction-type/TransactionType.svelte
@@ -7,6 +7,8 @@
 
   /** @type {boolean} */
   export let displayTooltips = false;
+
+  const BADGE_TEXT_MAX_LENGTH = 20;
 </script>
 
 <div class="transaction-type">
@@ -22,5 +24,5 @@
       : mdiShieldOutline}
     size="large"
   />
-  <Badge text={data.method} />
+  <Badge text={data.method} maxlength={BADGE_TEXT_MAX_LENGTH} />
 </div>
diff --git a/explorer/src/lib/dusk/components/__tests__/Badge.spec.js b/explorer/src/lib/dusk/components/__tests__/Badge.spec.js
@@ -44,4 +44,14 @@ describe("Badge", () => {
 
     expect(container.firstChild).toMatchSnapshot();
   });
+
+  it("should only display a string 10 characters long", () => {
+    const props = {
+      ...baseProps,
+      maxlength: 10,
+      text: "ABCDEFGHIJK",
+    };
+    const { container } = render(Badge, { ...props });
+    expect(container.firstChild?.textContent?.length).toBe(10);
+  });
 });
diff --git a/explorer/src/lib/dusk/components/badge/Badge.svelte b/explorer/src/lib/dusk/components/badge/Badge.svelte
@@ -10,11 +10,14 @@
   /** @type {String | Undefined} */
   export let className = undefined;
 
+  /** @type {number | Undefined} */
+  export let maxlength = undefined;
+
   $: classes = makeClassName([
     "dusk-badge",
     `dusk-badge--variant-${variant}`,
     className,
   ]);
 </script>
 
-<span {...$$restProps} class={classes}>{text}</span>
+<span {...$$restProps} class={classes}>{text.substring(0, maxlength)}</span>