search

SAP / ui5-webcomponents

UI5 Web Components - the enterprise-flavored sugar on top of native APIs! Build SAP Fiori user interfaces with the technology of your choice.
https://sap.github.io/ui5-webcomponents/
Apache License 2.0
1.51k stars 260 forks source link

TimelineItem, unfortunate check for default slot leads to empty slot-content #8269

Closed maltenorstroem closed 6 months ago

maltenorstroem commented 7 months ago

Bug Description

The generated TimelineItemTemplate.lit.js checks in block0 whether this.textContent is not null. Standard Build/minifier remove all spaces and set the HTML to one line. A custom element without TextContent e.g. returns zero during the check and is not displayed.

Affected Component

@ui5/webcomponents-fiori/dist/TimelineItem.js

Expected Behaviour

According to the documentation, an array [Nodes] can be inserted in the default slot. I would expect these elements to be displayed in the TimelineItem.

Isolated Example

https://js-nte7ud.stackblitz.io

Steps to Reproduce

  1. use the Timeline
  2. add a custom element (with no TextContent) to the default slot of TimelineItem

Log Output, Stack Trace or Screenshots

Screenshot from 2024-02-12 14-40-49

Priority

High

UI5 Web Components Version

1.22.0

Browser

Chrome

Operating System

Linux norstroem 6.7.4-200.fc39.x86_64 #1 SMP PREEMPT_DYNAMIC Mon Feb 5 22:21:14 UTC 2024 x86_64 GNU/Linux

Additional Context

No response

Organization

No response

Declaration

nikoletavnv commented 7 months ago

Hi @maltenorstroem,

I opened your sample and from what I notice the timeline items are not rendered correctly.

timeline_formatting

Can you please check the formatting in your html page, especially the last timeline item. Also can you send the editor URL from Stackblitz project in order to look at your sample. Thanks!

Best regards, Nikoleta

maltenorstroem commented 7 months ago

Editor URL: https://stackblitz.com/edit/js-nte7ud?file=my-component.js

maltenorstroem commented 7 months ago

`

 ` These are the important two lines.   is a workaround that the component is rendered correctly (because of the check). I have intentionally left out all attributes. Just add a space or something similar on line 13 to get the component rendered: `SPACE`
nikoletavnv commented 7 months ago

Thanks for the quick response. I saw the issue and will further investigate!

Best regards, Nikoleta

nikoletavnv commented 7 months ago

Hello @SAP/ui5-webcomponents-topic-b, Please take a look at this issue. I was able to reproduce it on our test pages with ui5-icon and ui5-avatar components as well. In order to reproduce the issue, just put a component e.g. inside ui5-timeline-item without any spaces or newlines and you will notice that the avatar will not be displayed. Best regards, Nikoleta