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.47k stars 254 forks source link

[components]: replace resize handler with container queries #7666

Open nnaydenow opened 9 months ago

nnaydenow commented 9 months ago

Feature Request Description

Currently, every component that has responsive paddings or visualization based on a specific breakpoint apply class / attribute to the corresponding size and this class / attribute is used to style the component. Usually this class / attribute rely on the component width, where width is observed by resize handler in order to detect changes.

With current issue we want to start to use container queries. Container queries enable you to apply styles to an element based on the size of the element's container.

Motivation

There is issue (https://github.com/SAP/ui5-webcomponents/issues/5774) that reports flickering when the components are resized and it will increase the performance of the components.

Reference

Following PR (https://github.com/SAP/ui5-webcomponents/pull/7665) can be used for reference how responsive styles of component should be migrated to content queries from resize handler

Resources

To be addressed

Note: Some components might be missed so fill the list if some component is missing

hristop commented 8 months ago

Internal BLI was created: FIORITECHP1-28821

dimovpetar commented 8 months ago

For Popover and Dialog (Popups), CSS container queries cannot be used. They determine their size based on their content (Child -> Parent). If we make popups containment contexts, their content would be sized based on the popup size (Parent ->Child). Therefore this would end in Child->Parent->Child->Parent->... resizing. Read more detailed explanation of why this is not possible here https://stackoverflow.com/a/73980194/9136171 .

nnaydenow commented 7 months ago

Blocked for the moment.