From 30449e65590f7c27e64ccc7575056b58a5fe4d3f Mon Sep 17 00:00:00 2001 From: Lan Nguyen Thuy Date: Thu, 6 Mar 2025 14:54:38 +0700 Subject: [PATCH 1/5] fix issue text overflow when user name is too long --- packages/uui-card-user/lib/uui-card-user.element.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/uui-card-user/lib/uui-card-user.element.ts b/packages/uui-card-user/lib/uui-card-user.element.ts index 226b5e021..578ead106 100644 --- a/packages/uui-card-user/lib/uui-card-user.element.ts +++ b/packages/uui-card-user/lib/uui-card-user.element.ts @@ -159,12 +159,14 @@ export class UUICardUserElement extends UUICardElement { position: relative; align-items: center; margin: 0 0 3px 0; + height: 100%; } #content > span { vertical-align: center; margin-top: 3px; font-weight: 700; + overflow-wrap: anywhere; } .avatar { From aec5ef1d8ba4f3124132ed90f6d35dd2b993342c Mon Sep 17 00:00:00 2001 From: Lan Nguyen Thuy Date: Wed, 12 Mar 2025 17:23:59 +0700 Subject: [PATCH 2/5] add ellipsis at the end of name --- packages/uui-card-user/lib/uui-card-user.element.ts | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/packages/uui-card-user/lib/uui-card-user.element.ts b/packages/uui-card-user/lib/uui-card-user.element.ts index 578ead106..4f72c948c 100644 --- a/packages/uui-card-user/lib/uui-card-user.element.ts +++ b/packages/uui-card-user/lib/uui-card-user.element.ts @@ -76,7 +76,7 @@ export class UUICardUserElement extends UUICardElement { name="avatar" class="avatar" @slotchange=${this._avatarSlotChanged}> - ${this.name} + ${this.name} `; } @@ -163,6 +163,11 @@ export class UUICardUserElement extends UUICardElement { } #content > span { + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; + text-overflow: ellipsis; vertical-align: center; margin-top: 3px; font-weight: 700; From b9744a9801fe13e0e0a4365b354c7dca1292c452 Mon Sep 17 00:00:00 2001 From: Lan Nguyen Thuy Date: Fri, 14 Mar 2025 13:58:43 +0700 Subject: [PATCH 3/5] fix overflow for content card and block card --- .../lib/uui-card-block-type.element.ts | 13 +++++++++++-- .../lib/uui-card-content-node.element.ts | 12 +++++++++++- 2 files changed, 22 insertions(+), 3 deletions(-) diff --git a/packages/uui-card-block-type/lib/uui-card-block-type.element.ts b/packages/uui-card-block-type/lib/uui-card-block-type.element.ts index fa86d8bd2..3ef68439f 100644 --- a/packages/uui-card-block-type/lib/uui-card-block-type.element.ts +++ b/packages/uui-card-block-type/lib/uui-card-block-type.element.ts @@ -96,8 +96,8 @@ export class UUICardBlockTypeElement extends UUICardElement { #renderContent() { return html`
- ${this.name} - ${this.description} + ${this.name} + ${this.description}
`; } @@ -176,6 +176,15 @@ export class UUICardBlockTypeElement extends UUICardElement { #open-part:hover #name { text-decoration: underline; } + #open-part #name, + #open-part small { + display: -webkit-box; + -webkit-line-clamp: 1; + -webkit-box-orient: vertical; + overflow: hidden; + text-overflow: ellipsis; + overflow-wrap: anywhere; + } :host([image]:not([image=''])) #open-part { transition: opacity 0.5s 0.5s; diff --git a/packages/uui-card-content-node/lib/uui-card-content-node.element.ts b/packages/uui-card-content-node/lib/uui-card-content-node.element.ts index 98b7c6000..fa3a01cd4 100644 --- a/packages/uui-card-content-node/lib/uui-card-content-node.element.ts +++ b/packages/uui-card-content-node/lib/uui-card-content-node.element.ts @@ -76,7 +76,9 @@ export class UUICardContentNodeElement extends UUICardElement { ? this._renderFallbackIcon() : ''} -
${this.name}
+
+ ${this.name} +
${this.renderDetail()} @@ -173,6 +175,14 @@ export class UUICardContentNodeElement extends UUICardElement { padding: var(--uui-size-space-4) var(--uui-size-space-5); } + #open-part #name { + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; + text-overflow: ellipsis; + } + #content { align-self: stretch; display: flex; From bca7250fcce3a4934c18030b39b7997513212abc Mon Sep 17 00:00:00 2001 From: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com> Date: Fri, 14 Mar 2025 10:10:32 +0100 Subject: [PATCH 4/5] fix(uui-card-content-node): allow text to overflow anywhere just like the other cards --- .../uui-card-content-node/lib/uui-card-content-node.element.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/uui-card-content-node/lib/uui-card-content-node.element.ts b/packages/uui-card-content-node/lib/uui-card-content-node.element.ts index fa3a01cd4..674ec4530 100644 --- a/packages/uui-card-content-node/lib/uui-card-content-node.element.ts +++ b/packages/uui-card-content-node/lib/uui-card-content-node.element.ts @@ -181,6 +181,7 @@ export class UUICardContentNodeElement extends UUICardElement { -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; + overflow-wrap: anywhere; } #content { From af6640acc4c650dcdabef67d60f7bd3e2daa166e Mon Sep 17 00:00:00 2001 From: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com> Date: Fri, 14 Mar 2025 10:12:34 +0100 Subject: [PATCH 5/5] fix: allow string slots --- storyhelpers/render-slots.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/storyhelpers/render-slots.ts b/storyhelpers/render-slots.ts index 22fa459f2..4381dae50 100644 --- a/storyhelpers/render-slots.ts +++ b/storyhelpers/render-slots.ts @@ -34,7 +34,9 @@ function renderSlots(param: TemplateResult[] | Args) { // Join slots with consistent formatting; no extra line breaks between them const spacing = ' '; - const stringSlots = validSlots.map(slot => slot.strings[0]); + const stringSlots = validSlots.map(slot => + typeof slot === 'string' ? slot : slot.strings?.[0] ?? '', + ); const stringSlotsJoined = stringSlots.join('\n'); const stringSlotsJoinedWithSpacing = stringSlotsJoined .split('\n')