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.5k stars 258 forks source link

[Table & List]: Busy state is not displayed properly #9438

Closed lenafi5cher closed 3 days ago

lenafi5cher commented 1 month ago

Describe the bug

Related Bug: [BusyIndicator]: dimmed overlay is missing

In the above bug, it was discussed that the dimmed overlay was missing for the Busy Indicator which is necessary in order to display Busy State correctly. Busy State refers to busy indication on control level. This was solved by having the busy indicator add a dimmed overlay if it has children. However, this is not fixed for the Table-component and List-component which have a busy property managing the state.

Table No dimmed overlay visible. image

List Appears to have some overlay, which does not match the normal busy indicator dim color and also overlays the busy indicator itself. It looks "inactive" image

Isolated Example

No response

Reproduction steps

  1. Access the components on the documentation site
  2. Set "busy"-property to true

Expected Behaviour

There should be a dimmed overlay encompassing the entire component. The busy indicator should be display above that overlay without any change to its color. The dimmed overlay color should match the dimmed overlay found when wrapping around another component.

Screenshots or Videos

No response

UI5 Web Components for React Version

v1.29.3

UI5 Web Components Version

v1.24.7

Browser

Chrome

Operating System

No response

Additional Context

No response

Relevant log output

No response

Organization

SAP

Declaration

Lukas742 commented 1 month ago

Thanks for reporting! I'll forward this issue to our UI5 Web Components Colleagues as the affected component is developed in their repository.

GerganaKremenska commented 1 month ago

Hello @SAP/ui5-webcomponents-topic-rd,

There is an issue with block layer of ui5-busy-indicator. Issue is reproducible is reproducable here https://sap.github.io/ui5-webcomponents/v1/components/Table/ add "busy" attribute on any table. The dim block layer is missing. There is an issue that was already fixed in 1.24.5, but does not work, for v2 works.

Please take over.

Best Regards, Gergana

dimovpetar commented 1 month ago

Hello @SAP/ui5-webcomponents-topic-core ,

This issue is reported for 1.24.7, but it is also present on the main branch.

main branch

  1. List - adds some opacity on its own, but when you click on a busy list nothing happens. Also keyboard navigation with Tab allows you to focus items underneath the indicator. Link
  2. Compat table - same problems as in list + it doesn't add opacity. Link
  3. Table - keyboard navigation works fine, there is just an issue where the busy indicator does not take 100% width, if there is horizontal scrollbar. Also there is no dimmed background. Link

1.24.7

  1. List - same as on main branch. Link
  2. Table (compat) - same as on main branch. Link

To benefit from the dimmed background and keyboard handling provided by the busy indicator, elements should be its children. We did such change to the NotificationListItem 2 weeks ago. Sample.

I am sending this incident to you to check the issues in the Table. Please forward to the List owners afterwards.

nnaydenow commented 1 month ago

Created separated issue for the list so we can process it faster. https://github.com/SAP/ui5-webcomponents/issues/9476