diff --git a/packages/main/src/Form.ts b/packages/main/src/Form.ts index c40d94db8e2a..b1a8af4d0f94 100644 --- a/packages/main/src/Form.ts +++ b/packages/main/src/Form.ts @@ -3,6 +3,7 @@ import customElement from "@ui5/webcomponents-base/dist/decorators/customElement import property from "@ui5/webcomponents-base/dist/decorators/property.js"; import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js"; import { getScopedVarName } from "@ui5/webcomponents-base/dist/CustomElementsScope.js"; +import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AccessibilityTextsHelper.js"; import slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js"; // Template @@ -221,6 +222,15 @@ class Form extends UI5Element { @property() accessibleName?: string; + /** + * Defines id(or many ids) of the element (or elements) that label the component. + * @default undefined + * @public + * @since 2.16.0 + */ + @property() + accessibleNameRef?: string; + /** * Defines the number of columns to distribute the form content by breakpoint. * @@ -543,13 +553,18 @@ class Form extends UI5Element { } get effectiveAccessibleName() { - if (this.accessibleName) { - return this.accessibleName; + if (this.accessibleName || this.accessibleNameRef) { + return getEffectiveAriaLabelText(this); } + return this.hasHeader ? undefined : Form.i18nBundle.getText(FORM_ACCESSIBLE_NAME); } get effectiveАccessibleNameRef(): string | undefined { + if (this.accessibleName || this.accessibleNameRef) { + return; + } + return this.hasHeaderText && !this.hasCustomHeader ? `${this._id}-header-text` : undefined; } diff --git a/packages/main/src/FormItemTemplate.tsx b/packages/main/src/FormItemTemplate.tsx index 6afca7e86298..1a5d934a7120 100644 --- a/packages/main/src/FormItemTemplate.tsx +++ b/packages/main/src/FormItemTemplate.tsx @@ -1,21 +1,42 @@ +import type { SlottedChild } from "@ui5/webcomponents-base/dist/UI5Element.js"; import type FormItem from "./FormItem.js"; -import type SlottedChild from "@ui5/webcomponents-base/dist/UI5Element.js"; export default function FormItemTemplate(this: FormItem) { return (
-
- -
-
- {this.content.map(item => -
- -
- )} -
+ { this.itemSpacing === "Large" ? content.call(this) : contentAsDefinitionList.call(this) }
); } + +function content(this: FormItem) { + return <> +
+ +
+
+ {this.content.map(item => +
+ +
+ )} +
+ ; +} + +function contentAsDefinitionList(this: FormItem) { + return <> +
+ +
+
+ {this.content.map(item => +
+ +
+ )} +
+ ; +} diff --git a/packages/main/src/FormTemplate.tsx b/packages/main/src/FormTemplate.tsx index a666bab91a29..0fca739ef3b9 100644 --- a/packages/main/src/FormTemplate.tsx +++ b/packages/main/src/FormTemplate.tsx @@ -1,5 +1,6 @@ import type Form from "./Form.js"; import Title from "./Title.js"; +import type { IFormItem } from "./Form.js"; export default function FormTemplate(this: Form) { return ( @@ -19,58 +20,77 @@ export default function FormTemplate(this: Form) { } -
- { - this.hasGroupItems ? - <> - { - this.groupItemsInfo.map(groupItemInfo => { - const groupItem = groupItemInfo.groupItem; - return ( -
-
- {groupItem.headerText && -
- {groupItem.headerText} -
- } + { this.hasGroupItems ? groupLayout.call(this) : layout.call(this) } +
+ ); +} -
- -
-
-
- ); - } - )} - - : - <> - { - this.itemsInfo.map(itemInfo => { - const item = itemInfo.item; - return ( -
- -
- ); - }) - } - +function groupLayout(this: Form) { + return
+ { this.groupItemsInfo.map(groupItemInfo => { + const groupItem = groupItemInfo.groupItem; + return
+ { this.itemSpacing === "Large" ? +
+ { groupLayoutContent.call(this, groupItem) } +
+ : +
+ { groupLayoutContent.call(this, groupItem) } +
} +
; + })} +
; +} + +function groupLayoutContent(this: Form, groupItem: IFormItem) { + return <> + { groupItem.headerText && +
+ {groupItem.headerText}
+ } + +
+
+ ; +} + +function layout(this: Form) { + return ( + this.itemSpacing === "Large" ? +
+ { layoutContent.call(this) } +
+ : +
+ { layoutContent.call(this) } +
); } + +function layoutContent(this: Form) { + return this.itemsInfo.map(itemInfo => { + const item = itemInfo.item; + return ( +
+ +
+ ); + }); +} diff --git a/packages/main/src/themes/Form.css b/packages/main/src/themes/Form.css index 4434bb83eec1..b344bb25210b 100644 --- a/packages/main/src/themes/Form.css +++ b/packages/main/src/themes/Form.css @@ -49,3 +49,8 @@ ::slotted([ui5-form-group]) { display: contents; } + +dl { + padding: 0; + margin: 0; +} \ No newline at end of file diff --git a/packages/main/src/themes/FormItem.css b/packages/main/src/themes/FormItem.css index 5ec8ba7a20c6..db419564f3a7 100644 --- a/packages/main/src/themes/FormItem.css +++ b/packages/main/src/themes/FormItem.css @@ -95,5 +95,8 @@ :host { order: var(--ui5-form-item-order-Xl, unset); } +} +dd { + margin-inline-start: 0; } \ No newline at end of file diff --git a/packages/main/test/pages/form/FormBasic.html b/packages/main/test/pages/form/FormBasic.html index 62b76faa9576..c26dc999ea23 100644 --- a/packages/main/test/pages/form/FormBasic.html +++ b/packages/main/test/pages/form/FormBasic.html @@ -525,23 +525,23 @@
- Name: - Red Point Stores + Name: + Red Point Stores - ZIP Code/City: - 411 Maintown + ZIP Code/City: + 411 Maintown - Street: - Main St 1618 + Street: + Main St 1618 - Country: - Germany + Country: + Germany
@@ -596,22 +596,22 @@ Name: - Red Point Stores + Red Point Stores ZIP Code/City: - 411 Maintown + 411 Maintown Street: - Main St 1618 + Main St 1618 Country: - Germany + Germany @@ -621,7 +621,7 @@ Delivery address: - Newtown + Newtown @@ -635,22 +635,22 @@ Name: - Red Point Stores + Red Point Stores ZIP Code/City: - 411 Maintown + 411 Maintown Street: - Main St 1618 + Main St 1618 Country: - Germany + Germany @@ -662,22 +662,22 @@ Twitter: - @sap + @sap Email: - john.smith@sap.com + john.smith@sap.com Tel: - +49 6227 747474 + +49 6227 747474 SMS: - +49 6227 747474 + +49 6227 747474 @@ -708,22 +708,22 @@ Name: - Red Point Stores + Red Point Stores ZIP Code/City: - 411 Maintown + 411 Maintown Street: - Main St 1618 + Main St 1618 Country: - Germany + Germany @@ -735,22 +735,22 @@ Twitter: - @sap + @sap Email: - john.smith@sap.com + john.smith@sap.com Tel: - +49 6227 747474 + +49 6227 747474 SMS: - +49 6227 747474 + +49 6227 747474 @@ -773,22 +773,22 @@ Name: - Red Point Stores + Red Point Stores ZIP Code/City: - 411 Maintown + 411 Maintown Street: - Main St 1618 + Main St 1618 Country: - Germany + Germany @@ -809,22 +809,22 @@ Name: - Red Point Stores + Red Point Stores ZIP Code/City: - 411 Maintown + 411 Maintown Street: - Main St 1618 + Main St 1618 Country: - Germany + Germany @@ -836,22 +836,22 @@ Twitter: - @sap + @sap Email: - john.smith@sap.com + john.smith@sap.com Tel: - +49 6227 747474 + +49 6227 747474 SMS: - +49 6227 747474 + +49 6227 747474 @@ -874,22 +874,22 @@ Name: - Red Point Stores + Red Point Stores ZIP Code/City: - 411 Maintown + 411 Maintown Street: - Main St 1618 + Main St 1618 Country: - Germany + Germany @@ -909,22 +909,22 @@ Name: - Red Point Stores + Red Point Stores ZIP Code/City: - 411 Maintown + 411 Maintown Street: - Main St 1618 + Main St 1618 Country: - Germany + Germany @@ -936,22 +936,22 @@ Twitter: - @sap + @sap Email: - john.smith@sap.com + john.smith@sap.com Tel: - +49 6227 747474 + +49 6227 747474 SMS: - +49 6227 747474 + +49 6227 747474 @@ -974,22 +974,22 @@ Name: - Red Point Stores + Red Point Stores ZIP Code/City: - 411 Maintown + 411 Maintown Street: - Main St 1618 + Main St 1618 Country: - Germany + Germany @@ -1003,7 +1003,7 @@
- + Name: