fix(uui-card): text overflow when user name is too long (#1036)

* fix issue text overflow when user name is too long

* add ellipsis at the end of name

* fix overflow for content card and block card

* fix(uui-card-content-node): allow text to overflow anywhere just like the other cards

* fix: allow string slots

---------

Co-authored-by: Lan Nguyen Thuy <[email protected]>
Co-authored-by: Jacob Overgaard <[email protected]>

Author: 3 people

packages/uui-card-block-type/lib/uui-card-block-type.element.ts

@@ -96,8 +96,8 @@ export class UUICardBlockTypeElement extends UUICardElement {
   #renderContent() {
     return html`
       <div id="content">
-        <span id="name">${this.name}</span>
-        <small>${this.description}<slot name="description"></slot></small>
+        <span title="${this.name}" id="name">${this.name}</span>
+        <small title="${this.description}">${this.description}<slot name="description"></slot></small>
       </div></div>
     `;
   }
@@ -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;

packages/uui-card-content-node/lib/uui-card-content-node.element.ts

@@ -76,7 +76,9 @@ export class UUICardContentNodeElement extends UUICardElement {
               ? this._renderFallbackIcon()
               : ''}
           </span>
-          <div id="name">${this.name}<slot name="name"></slot></div>
+          <div title="${this.name}" id="name">
+            ${this.name}<slot name="name"></slot>
+          </div>
         </span>
         ${this.renderDetail()}
       </span>
@@ -173,6 +175,15 @@ 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;
+        overflow-wrap: anywhere;
+      }
+
       #content {
         align-self: stretch;
         display: flex;

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}></slot>
-      <span>${this.name}</span>
+      <span title="${this.name}">${this.name}</span>
       <slot></slot>
     </div>`;
   }
@@ -159,12 +159,19 @@ export class UUICardUserElement extends UUICardElement {
         position: relative;
         align-items: center;
         margin: 0 0 3px 0;
+        height: 100%;
       }
 
       #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;
+        overflow-wrap: anywhere;
       }
 
       .avatar {

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')