fix(ui5-form): propagate itemSpacing properly (#11312)

Propagate itemSpacing properly from Form to Form items

Fixes: #11307

Author: ilhan007

packages/fiori/test/pages/FCL.html

@@ -136,7 +136,7 @@
 								<ui5-segmented-button id="sb">
 									<ui5-toggle-button icon="employee" pressed>Small</ui5-toggle-button>
 									<ui5-toggle-button>Medium</ui5-toggle-button>
-									<ui5-toggle-button>Largr</ui5-toggle-button>
+									<ui5-toggle-button>Large</ui5-toggle-button>
 								</ui5-segmented-button>
 							</div>
 						</div>

packages/fiori/test/pages/Wizard.html

@@ -631,7 +631,7 @@ <h2>Wizard non-standard 3</h2>
 							<ui5-segmented-button id="sb2">
 								<ui5-toggle-button icon="employee" pressed>Small</ui5-toggle-button>
 								<ui5-toggle-button>Medium</ui5-toggle-button>
-								<ui5-toggle-button>Largr</ui5-toggle-button>
+								<ui5-toggle-button>Large</ui5-toggle-button>
 							</ui5-segmented-button>
 						</div>
 					</div>

packages/fiori/test/pages/WizardPageMode_test.html

@@ -117,7 +117,7 @@
 							<ui5-segmented-button>
 								<ui5-toggle-button icon="employee" pressed>Small</ui5-toggle-button>
 								<ui5-toggle-button>Medium</ui5-toggle-button>
-								<ui5-toggle-button>Largr</ui5-toggle-button>
+								<ui5-toggle-button>Large</ui5-toggle-button>
 							</ui5-segmented-button>
 						</div>
 					</div>

packages/fiori/test/pages/Wizard_test.html

@@ -120,7 +120,7 @@
 							<ui5-segmented-button id="sb">
 								<ui5-toggle-button icon="employee" pressed>Small</ui5-toggle-button>
 								<ui5-toggle-button>Medium</ui5-toggle-button>
-								<ui5-toggle-button>Largr</ui5-toggle-button>
+								<ui5-toggle-button>Large</ui5-toggle-button>
 							</ui5-segmented-button>
 						</div>
 					</div>
@@ -285,7 +285,7 @@
 									<ui5-segmented-button>
 										<ui5-toggle-button icon="employee" pressed>Small</ui5-toggle-button>
 										<ui5-toggle-button>Medium</ui5-toggle-button>
-										<ui5-toggle-button>Largr</ui5-toggle-button>
+										<ui5-toggle-button>Large</ui5-toggle-button>
 									</ui5-segmented-button>
 								</div>
 							</div>

packages/main/cypress/specs/Form.cy.tsx

@@ -199,6 +199,27 @@ describe("General API", () => {
 			.and("have.prop", "emptySpanXl", 1);
 	});
 
+	it("tests calculated state of Form item-spacing='Large'", () => {
+		cy.mount(<Form id="addressForm" item-spacing="Large">
+			<FormGroup id="formGroup">
+				<FormItem id="formItem">
+					<Label slot="labelContent">Name:</Label>
+					<Text>Red Point Stores</Text>
+				</FormItem>
+
+				<FormItem>
+					<Label slot="labelContent">Country:</Label>
+					<Text>Germany</Text>
+				</FormItem>
+			</FormGroup>
+		</Form>);
+
+		cy.get("#formGroup")
+			.should("have.prop", "itemSpacing", "Large");
+		cy.get("#formItem")
+			.should("have.prop", "itemSpacing", "Large");
+	});
+
 	it("tests calculated state of two FormGroups in layout='S1 M2 L3 XL4'", () => {
 		cy.mount(<Form headerText="WebC :: Supplier 2gr (S1 M2 L3 XL4)" layout="S1 M2 L3 XL4">
 			<FormGroup id="testFormGroup4" headerText="Address">

packages/main/src/Form.ts

@@ -342,6 +342,9 @@ class Form extends UI5Element {
 
 		// Define how many columns a group should take.
 		this.setGroupsColSpan();
+
+		// Set item spacing
+		this.setItemSpacing();
 	}
 
 	onAfterRendering() {
@@ -489,6 +492,12 @@ class Form extends UI5Element {
 		return index === 0 ? MIN_COL_SPAN + (delta - groups) + 1 : MIN_COL_SPAN + 1;
 	}
 
+	setItemSpacing() {
+		this.items.forEach((item: IFormItem) => {
+			item.itemSpacing = this.itemSpacing;
+		});
+	}
+
 	get hasGroupItems(): boolean {
 		return this.items.some((item: IFormItem) => item.isGroup);
 	}