diff --git a/packages/main/cypress/specs/Form.cy.ts b/packages/main/cypress/specs/Form.cy.ts
index de83d8118a65..2519abcf643d 100644
--- a/packages/main/cypress/specs/Form.cy.ts
+++ b/packages/main/cypress/specs/Form.cy.ts
@@ -4,6 +4,58 @@ import "../../src/FormItem.js";
import "../../src/FormGroup.js";
describe("General API", () => {
+ it("tests calculated state of Form with default layout and label-span", () => {
+ cy.mount(html`
+
+
+ Name:
+ Red Point Stores
+
+
+
+
+
+ Twitter:
+ @sap
+
+
+
+
+
+ Name:
+ Red Point Stores
+
+
+ `);
+
+ cy.get("[ui5-form]")
+ .as("form");
+
+ cy.get("@form")
+ .should("have.prop", "columnsS", 1);
+
+ cy.get("@form")
+ .should("have.prop", "labelSpanS", 12);
+
+ cy.get("@form")
+ .should("have.prop", "columnsM", 1);
+
+ cy.get("@form")
+ .should("have.prop", "labelSpanM", 4);
+
+ cy.get("@form")
+ .should("have.prop", "columnsL", 2);
+
+ cy.get("@form")
+ .should("have.prop", "labelSpanL", 4);
+
+ cy.get("@form")
+ .should("have.prop", "columnsXl", 3);
+
+ cy.get("@form")
+ .should("have.prop", "labelSpanXl", 4);
+ });
+
it("tests calculated state of Form with layout='S1 M2 L3 XL6' and label-span='S12 M4 L4 XL4'", () => {
cy.mount(html`
diff --git a/packages/main/src/Form.ts b/packages/main/src/Form.ts
index 0eeaea192fc3..48c626eac56f 100644
--- a/packages/main/src/Form.ts
+++ b/packages/main/src/Form.ts
@@ -83,7 +83,7 @@ type ItemsInfo = {
* - **S** (< 600px) – 1 column is recommended (default: 1)
* - **M** (600px - 1022px) – up to 2 columns are recommended (default: 1)
* - **L** (1023px - 1439px) - up to 3 columns are recommended (default: 2)
- * - **XL** (> 1439px) – up to 6 columns are recommended (default: 2)
+ * - **XL** (> 1439px) – up to 6 columns are recommended (default: 3)
*
* To change the layout, use the `layout` property - f.e. layout="S1 M2 L3 XL6".
*
@@ -156,13 +156,13 @@ class Form extends UI5Element {
* - `S` - 1 column by default (1 column is recommended)
* - `M` - 1 column by default (up to 2 columns are recommended)
* - `L` - 2 columns by default (up to 3 columns are recommended)
- * - `XL` - 2 columns by default (up to 6 columns are recommended)
+ * - `XL` - 3 columns by default (up to 6 columns are recommended)
*
- * @default "S1 M1 L2 XL2"
+ * @default "S1 M1 L2 XL3"
* @public
*/
@property()
- layout = "S1 M1 L2 XL2"
+ layout = "S1 M1 L2 XL3"
/**
* Defines the width proportion of the labels and fields of a FormItem by breakpoint.
@@ -246,7 +246,7 @@ class Form extends UI5Element {
labelSpanL = 4;
@property({ type: Number })
- columnsXl = 2;
+ columnsXl = 3;
@property({ type: Number })
labelSpanXl = 4;
diff --git a/packages/main/src/FormGroup.ts b/packages/main/src/FormGroup.ts
index 079e11bcd548..579cb55deb18 100644
--- a/packages/main/src/FormGroup.ts
+++ b/packages/main/src/FormGroup.ts
@@ -83,6 +83,7 @@ class FormGroup extends UI5Element implements IFormItem {
@property()
itemSpacing: `${FormItemSpacing}` = "Normal";
+ @property()
labelSpan = "S12 M4 L4 XL4";
onBeforeRendering() {
diff --git a/packages/main/src/themes/Form.css b/packages/main/src/themes/Form.css
index 28fd2c90948b..ccf84c66e7ee 100644
--- a/packages/main/src/themes/Form.css
+++ b/packages/main/src/themes/Form.css
@@ -15,10 +15,11 @@
.ui5-form-header {
display: flex;
- height: 2.75rem;
+ min-height: 2.75rem;
align-items: center;
border-bottom: 1px solid var(--sapGroup_TitleBorderColor);
- padding: 0 1rem 0 1rem;
+ padding: 0.875rem 1rem;
+ box-sizing: border-box;
}
.ui5-form-layout {
diff --git a/packages/main/src/themes/FormLayout.css b/packages/main/src/themes/FormLayout.css
index 56b87013a9dc..30357addeab0 100644
--- a/packages/main/src/themes/FormLayout.css
+++ b/packages/main/src/themes/FormLayout.css
@@ -1,6 +1,6 @@
/*
* The Form layout is divided into one or more columns.
-* XL - max. 4 columns, L - max. 3 columns, M - max. 2 columns and S - 1 column.
+* XL - max. 6 columns, L - max. 3 columns, M - max. 2 columns and S - 1 column.
*/
/*
* S max-width: 600px - container padding 24px
@@ -76,10 +76,10 @@
}
}
-/* XL - 2 columns by default, up to 6 */
+/* XL - 3 columns by default, up to 6 */
@container (min-width: 1441px) {
.ui5-form-layout {
- grid-template-columns: repeat(2, 1fr);
+ grid-template-columns: repeat(3, 1fr);
}
:host([columns-xl="1"]) .ui5-form-layout {
diff --git a/packages/main/test/pages/form/FormGroups3.html b/packages/main/test/pages/form/FormGroups3.html
index ebe0ab6b4341..c5f008df32f5 100644
--- a/packages/main/test/pages/form/FormGroups3.html
+++ b/packages/main/test/pages/form/FormGroups3.html
@@ -18,9 +18,9 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Name:
+ Red Point Stores
+
+
+
+ ZIP Code/City:
+ 411 Maintown
+
+
+
+ Street:
+ Main St 1618
+
+
+
+ Country:
+ Germany
+
+
+
+
+
+
+
+