[Form]: Read order in forms is not correct and column layout does not work for groups.

[allen138]

Describe the bug

Hi team,

A couple issues:

1. It was brought to my attention that the read order of the forms is not correct. According to our designers, the read order should be top to bottom then followed by left to right. However, with the current implementation and the read order is left to right, then top to bottom.
2. When you have two groups and define multiple columns span for your breakpoints, the groups will not break into multiple columns.

Please refer to: https://experience.sap.com/fiori-design-web/form/#top

Isolated Example

Issue 1: https://stackblitz.com/edit/github-pzlhay?file=src%2FApp.tsx
Issue 2: https://stackblitz.com/edit/github-rmcazv?file=src%2FApp.tsx

Reproduction steps

1. Please see the isolated example, as well as the sapui5 demo links in the 'Expected Behavior' field below.

Expected Behaviour

For issue 1, here is an example of the expected behavior from ui5 classic framework. SimpleForm. https://ui5.sap.com/#/entity/sap.ui.layout.form.SimpleForm/sample/sap.ui.layout.sample.SimpleForm_Column_oneGroup234

For issue 2, here is an example of the expected behavior from ui5 classic framework. SimpleForm.
https://ui5.sap.com/#/entity/sap.ui.layout.form.SimpleForm/sample/sap.ui.layout.sample.SimpleForm_Column_twoGroups234

Screenshots or Videos

Issue 1:


Issue 2:

UI5 Web Components for React Version

main

UI5 Web Components Version

main

Browser

Chrome, Edge, Firefox, Safari

Operating System

No response

Additional Context

No response

Relevant log output

No response

Organization

SF

Declaration

• I’m not disclosing any internal or sensitive information.

[MarcusNotheis]

Hi @allen138,
Issue 1 should be fixed in v1.27.1.

[i832513]

@MarcusNotheis ,
We noticed that the latest code for Forms works fine when there are zero groups. But whenever we add 1 group the read ordering fix you provided for ungrouped fields is breaking.