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..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 @@ -76,7 +76,9 @@ export class UUICardContentNodeElement extends UUICardElement { ? this._renderFallbackIcon() : ''} -
${this.name}
+
+ ${this.name} +
${this.renderDetail()} @@ -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; 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..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} `; } @@ -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 { 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')