List: NoDataText attribute doesn't show text on screen

Describe the bug Using a List, the NoDataText attribute should show a message on the screen when the list is empty. The current behaviour does not show anything.

Isolated Example In the UI, we are showing a list of Cards. But when there is nothing to show and the list is empty, there is no message on the screen.

To Reproduce Steps to reproduce the behavior:

1. Create a List
2. Add ‘noDataText’ with any String
3. There should be no text in the UI

Expected behavior When I have an empty list, there should be a message, using NoDataText

Screenshots UI:

The List using NoDataText:

The empty list without the text:

UI5 Web Components for React Information @ui5/webcomponents version:1.0.0-rc.8 @ui5/webcomponents-react version:^0.10.9 Operating System: MAC OS Browser: Chrome

[fifoosid]

Hi everyone,

1. When it comes to Angular, I found two things. First of all the syntax in the provided codesandbox is not correct. When you are binding a property, you don’t need the square brackets around the variable name. Those are only needed when it comes to interpolation. Secondly, when you need to bind a kebab-case property, you need to convert it to camelCase. In our case, this means that the code for the ui5-list would look like this:

<ui5-list
    class="full-width"
    header-text="Products"
    [noDataText]="noDataText"
    separators="None"
  ></ui5-list>

The same logic should apply if we want to bind the header-text property of the list.

1. When it comes to pure React + UI5 Web Components, looks like everything is working as expected. The following code snippet works:

 <ui5-list
          class="full-width"
          header-text="Products"
          no-data-text={noDataText}
          separators="None"
        ></ui5-list>

Moreover, the exact snippet from the initial issue works on my side as well on the current master version of UI5 Web Components:

 <ui5-list
          class="full-width"
          header-text="Products"
          no-data-text={'Some Cool Text here'}
          separators="None"
        ></ui5-list>

1. When it comes to pure React + UI5 Web Components for React, everything seems to work as expected as well: https://codesandbox.io/s/wandering-grass-ve3y1?file=/src/App.js

I am closing the issue as everything seems to work as expected. If you think that I am missing something, please reopen the issue.

[nazarkulyk]

@MarcusNotheis here an angular example for that:

codesandbox

to reproduce.