From 48b0cc89b36dd859dd07c17021eedf7a99375150 Mon Sep 17 00:00:00 2001 From: ilhan orhan Date: Sat, 23 Nov 2024 14:23:58 +0200 Subject: [PATCH] feat(ui5-form): add new `emptySpan` property (#10194) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Adds new emptySpan property that provides additional layout flexibility by defining empty space at the form item’s end. Fixes: #9963 --- packages/main/cypress/specs/Form.cy.ts | 70 +- packages/main/src/Form.ts | 108 ++- packages/main/src/FormGroup.ts | 4 - packages/main/src/FormItem.ts | 6 - packages/main/src/themes/Form.css | 2 +- packages/main/src/themes/FormItemSpan.css | 59 ++ packages/main/src/themes/FormLabelSpan.css | 267 ------- .../main/src/themes/base/Form-parameters.css | 14 +- .../main/test/pages/form/FormEmptySpan.html | 736 ++++++++++++++++++ .../docs/_components_pages/main/Form/Form.mdx | 15 +- .../_samples/main/Form/EmptySpan/EmptySpan.md | 5 + .../_samples/main/Form/EmptySpan/main.css | 6 + .../docs/_samples/main/Form/EmptySpan/main.js | 32 + .../_samples/main/Form/EmptySpan/sample.html | 104 +++ .../main/Form/HeaderTextWrapping/sample.html | 3 - 15 files changed, 1104 insertions(+), 327 deletions(-) create mode 100644 packages/main/src/themes/FormItemSpan.css delete mode 100644 packages/main/src/themes/FormLabelSpan.css create mode 100644 packages/main/test/pages/form/FormEmptySpan.html create mode 100644 packages/website/docs/_samples/main/Form/EmptySpan/EmptySpan.md create mode 100644 packages/website/docs/_samples/main/Form/EmptySpan/main.css create mode 100644 packages/website/docs/_samples/main/Form/EmptySpan/main.js create mode 100644 packages/website/docs/_samples/main/Form/EmptySpan/sample.html diff --git a/packages/main/cypress/specs/Form.cy.ts b/packages/main/cypress/specs/Form.cy.ts index 01b2d65362fe..550f436ce6af 100644 --- a/packages/main/cypress/specs/Form.cy.ts +++ b/packages/main/cypress/specs/Form.cy.ts @@ -8,7 +8,7 @@ import "../../src/Text.js"; import "../../src/Input.js"; describe("General API", () => { - it("tests calculated state of Form with default layout and label-span", () => { + it("tests calculated state of Form with default layout, label-span and empty-span", () => { cy.mount(html` @@ -36,28 +36,18 @@ describe("General API", () => { .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); + .should("have.prop", "columnsS", 1) + .and("have.prop", "labelSpanS", 12) + .and("have.prop", "emptySpanS", 0) + .and("have.prop", "columnsM", 1) + .and("have.prop", "labelSpanM", 4) + .and("have.prop", "emptySpanM", 0) + .and("have.prop", "columnsL", 2) + .and("have.prop", "labelSpanL", 4) + .and("have.prop", "emptySpanL", 0) + .and("have.prop", "columnsXl", 3) + .and("have.prop", "emptySpanXl", 0) + .and("have.prop", "labelSpanXl", 4); }); it("tests calculated state of Form with layout='S1 M2 L3 XL6' and label-span='S12 M4 L4 XL4'", () => { @@ -175,6 +165,40 @@ describe("General API", () => { .should("have.prop", "labelSpanXl", 12); }); + it("tests calculated state of Form empty-span='S0 M0 L1 XL1'", () => { + 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", "emptySpanS", 0) + .and("have.prop", "emptySpanM", 0) + .and("have.prop", "emptySpanL", 1) + .and("have.prop", "emptySpanXl", 1); + }); + it("tests calculated state of two FormGroups in layout='S1 M2 L3 XL4'", () => { cy.mount(html` diff --git a/packages/main/src/Form.ts b/packages/main/src/Form.ts index 55b67476e398..279ea3474e56 100644 --- a/packages/main/src/Form.ts +++ b/packages/main/src/Form.ts @@ -25,7 +25,9 @@ const StepColumn = { }; const breakpoints = ["S", "M", "L", "Xl"]; - +const MAX_FORM_ITEM_CELLS = 12; +const DEFAULT_FORM_ITEM_LAYOUT = "4fr 8fr 0fr"; +const DEFAULT_FORM_ITEM_LAYOUT_S = "1fr"; /** * Interface for components that can be slotted inside `ui5-form` as items. * @public @@ -33,7 +35,6 @@ const breakpoints = ["S", "M", "L", "Xl"]; * @since 2.0.0 */ interface IFormItem extends UI5Element { - labelSpan: string itemSpacing: `${FormItemSpacing}`; readonly isGroup: boolean; colsXl?: number; @@ -130,6 +131,22 @@ type ItemsInfo = { * * **For example:** To always place the labels on top set: `labelSpan="S12 M12 L12 XL12"` property. * + * ### Items Empty Span + * + * By default, a form item spans 12 cells, fully divided between its label and field, with no empty space at the end: + * - **Label:** occupies 4 cells. + * - **Field:** occupies 8 cells. + * + * The `emptySpan` property provides additional layout flexibility by defining empty space at the form item’s end. + * + * **For example:** Setting "S0 M0 L3 XL3" (or just "L3 XL3") adjusts the layout as follows: + * - **Label:** remains 4 cells. + * - **Field:** is reduced to 5 cells. + * - **Empty space:** 3 cells are added at the end. + * + * Greater values increase the empty space at the end of the form item, reducing the space available for the label and its field. + * However, setting `emptySpan` to 1 cell is recommended and typically sufficient to achieve a balanced layout. + * * ### Navigation flow * * The Form component supports two layout options for keyboard navigation: @@ -210,7 +227,7 @@ class Form extends UI5Element { layout = "S1 M1 L2 XL3" /** - * Defines the width proportion of the labels and fields of a FormItem by breakpoint. + * Defines the width proportion of the labels and fields of a form item by breakpoint. * * By default, the labels take 4/12 (or 1/3) of the form item in M,L and XL sizes, * and 12/12 in S size, e.g in S the label is on top of its associated field. @@ -218,12 +235,30 @@ class Form extends UI5Element { * The supported values are between 1 and 12. Greater the number, more space the label will use. * * **Note:** If "12" is set, the label will be displayed on top of its assosiated field. + * * @default "S12 M4 L4 XL4" * @public */ @property() labelSpan = "S12 M4 L4 XL4"; + /** + * Defines the number of cells that are empty at the end of each form item, configurable by breakpoint. + * + * By default, a form item spans 12 cells, fully divided between its label (4 cells) and field (8 cells), with no empty space at the end. + * The `emptySpan` provides additional layout flexibility by defining empty space at the form item’s end. + * + * **Note:** + * - The maximum allowable empty space is 10 cells. At least 1 cell each must remain for the label and the field. + * - When `emptySpan` is specified (greater than 0), ensure that the combined value of `emptySpan` and `labelSpan` does not exceed 11. This guarantees a minimum of 1 cell for the field. + * + * @default "S0 M0 L0 XL0" + * @since 2.5.0 + * @public + */ + @property() + emptySpan = "S0 M0 L0 XL0"; + /** * Defines the header text of the component. * @@ -279,28 +314,36 @@ class Form extends UI5Element { columnsS = 1; @property({ type: Number }) labelSpanS = 12 + @property({ type: Number }) + emptySpanS = 0 @property({ type: Number }) columnsM = 1; @property({ type: Number }) labelSpanM = 4; + @property({ type: Number }) + emptySpanM = 0 @property({ type: Number }) columnsL = 2; @property({ type: Number }) labelSpanL = 4; + @property({ type: Number }) + emptySpanL = 0 @property({ type: Number }) columnsXl = 3; @property({ type: Number }) labelSpanXl = 4; + @property({ type: Number }) + emptySpanXl = 0; onBeforeRendering() { // Parse the layout and set it to the FormGroups/FormItems. this.setColumnLayout(); - // Parse the labelSpan and set it to the FormGroups/FormItems. - this.setLabelSpan(); + // Parse the labelSpan and emptySpan and set it to the FormGroups/FormItems. + this.setFormItemLayout(); // Define how many columns a group should take. this.setGroupsColSpan(); @@ -328,7 +371,7 @@ class Form extends UI5Element { }); } - setLabelSpan() { + parseFormItemSpan() { this.labelSpan.split(" ").forEach((breakpoint: string) => { if (breakpoint.startsWith("S")) { this.labelSpanS = parseInt(breakpoint.slice(1)); @@ -341,12 +384,59 @@ class Form extends UI5Element { } }); - this.items.forEach((item: IFormItem) => { - item.labelSpan = this.labelSpan; - item.itemSpacing = this.itemSpacing; + this.emptySpan.split(" ").forEach((breakpoint: string) => { + if (breakpoint.startsWith("S")) { + this.emptySpanS = parseInt(breakpoint.slice(1)); + } else if (breakpoint.startsWith("M")) { + this.emptySpanM = parseInt(breakpoint.slice(1)); + } else if (breakpoint.startsWith("L")) { + this.emptySpanL = parseInt(breakpoint.slice(1)); + } else if (breakpoint.startsWith("XL")) { + this.emptySpanXl = parseInt(breakpoint.slice(2)); + } + }); + } + + setFormItemLayout() { + this.parseFormItemSpan(); + + [ + { + breakpoint: "S", + labelSpan: this.labelSpanS, + emptySpan: this.emptySpanS, + }, + { + breakpoint: "M", + labelSpan: this.labelSpanM, + emptySpan: this.emptySpanM, + }, + { + breakpoint: "L", + labelSpan: this.labelSpanL, + emptySpan: this.emptySpanL, + }, + { + breakpoint: "XL", + labelSpan: this.labelSpanXl, + emptySpan: this.emptySpanXl, + }, + ].forEach(layout => { + if (this.isValidFormItemLayout(layout.labelSpan, layout.emptySpan)) { + const formItemLayout = layout.labelSpan === MAX_FORM_ITEM_CELLS ? `1fr` : `${layout.labelSpan}fr ${MAX_FORM_ITEM_CELLS - (layout.labelSpan + layout.emptySpan)}fr ${layout.emptySpan}fr`; + this.style.setProperty(getScopedVarName(`--ui5-form-item-layout-${layout.breakpoint}`), formItemLayout); + } else { + // eslint-disable-next-line + console.warn(`Form :: invalid usage of emptySpan and/or labelSpan in ${layout.breakpoint} size. The labelSpan must be <=12 and when emptySpace is used - their combined values must not exceed 11.`) + this.style.setProperty(getScopedVarName(`--ui5-form-item-layout-${layout.breakpoint}`), layout.breakpoint === "S" ? DEFAULT_FORM_ITEM_LAYOUT_S : DEFAULT_FORM_ITEM_LAYOUT); + } }); } + isValidFormItemLayout(labelSpan: number, emptySpan: number) { + return emptySpan === 0 ? labelSpan <= MAX_FORM_ITEM_CELLS : labelSpan + emptySpan <= MAX_FORM_ITEM_CELLS - 1; + } + setFastNavGroup() { if (this.hasGroupItems) { this.removeAttribute("data-sap-ui-fastnavgroup"); diff --git a/packages/main/src/FormGroup.ts b/packages/main/src/FormGroup.ts index eed1c9c7996f..230525b417ac 100644 --- a/packages/main/src/FormGroup.ts +++ b/packages/main/src/FormGroup.ts @@ -86,16 +86,12 @@ class FormGroup extends UI5Element implements IFormItem { @property() itemSpacing: `${FormItemSpacing}` = "Normal"; - @property() - labelSpan = "S12 M4 L4 XL4"; - onBeforeRendering() { this.processFormItems(); } processFormItems() { this.items.forEach((item: FormItem) => { - item.labelSpan = this.labelSpan; item.itemSpacing = this.itemSpacing; }); } diff --git a/packages/main/src/FormItem.ts b/packages/main/src/FormItem.ts index 4624f47ce21c..21228ab73567 100644 --- a/packages/main/src/FormItem.ts +++ b/packages/main/src/FormItem.ts @@ -80,12 +80,6 @@ class FormItem extends UI5Element implements IFormItem { }) content!: Array; - /** - * @private - */ - @property() - labelSpan = "S12 M4 L4 XL4"; - /** * @private */ diff --git a/packages/main/src/themes/Form.css b/packages/main/src/themes/Form.css index ccf84c66e7ee..4434bb83eec1 100644 --- a/packages/main/src/themes/Form.css +++ b/packages/main/src/themes/Form.css @@ -1,5 +1,5 @@ @import "./FormLayout.css"; -@import "./FormLabelSpan.css"; +@import "./FormItemSpan.css"; :host { display: block; diff --git a/packages/main/src/themes/FormItemSpan.css b/packages/main/src/themes/FormItemSpan.css new file mode 100644 index 000000000000..7657b599eec5 --- /dev/null +++ b/packages/main/src/themes/FormItemSpan.css @@ -0,0 +1,59 @@ +/* +* By default, +* - in M, L ans XL sizes the Form's labels take 4 cells out 12 of the whole width, e.g 4:8:0 +* - in S size, it the Form's labels take the whole width 12/12 cells, e.g the label and the input are displayed vertically. +* +* The ratio can be changed via the labelSpan and the emptySpan properties. +*/ + +@container (max-width: 600px) { + .ui5-form-item, + .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-S); + } + + :host([label-span-s="12"]) .ui5-form-item, + :host([label-span-s="12"]) .ui5-form-group { + --ui5-form-item-label-justify: var(--ui5-form-item-label-justify-span12); + --ui5-form-item-label-padding: var(--ui5-form-item-label-padding-span12); + } +} + +@container (width > 600px) and (width <= 1024px) { + .ui5-form-item, + .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-M); + } + + :host([label-span-m="12"]) .ui5-form-item, + :host([label-span-m="12"]) .ui5-form-group { + --ui5-form-item-label-justify: var(--ui5-form-item-label-justify-span12); + --ui5-form-item-label-padding: var(--ui5-form-item-label-padding-span12); + } +} + +@container (width > 1024px) and (width <= 1440px) { + .ui5-form-item, + .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-L); + } + + :host([label-span-l="12"]) .ui5-form-item, + :host([label-span-l="12"]) .ui5-form-group { + --ui5-form-item-label-justify: var(--ui5-form-item-label-justify-span12); + --ui5-form-item-label-padding: var(--ui5-form-item-label-padding-span12); + } +} + +@container (min-width: 1441px) { + .ui5-form-item, + .ui5-form-group { + --ui5-form-item-layout: var(--ui5-form-item-layout-XL); + } + + :host([label-span-xl="12"]) .ui5-form-item, + :host([label-span-xl="12"]) .ui5-form-group { + --ui5-form-item-label-justify: var(--ui5-form-item-label-justify-span12); + --ui5-form-item-label-padding: var(--ui5-form-item-label-padding-span12); + } +} diff --git a/packages/main/src/themes/FormLabelSpan.css b/packages/main/src/themes/FormLabelSpan.css deleted file mode 100644 index bfbe6c150755..000000000000 --- a/packages/main/src/themes/FormLabelSpan.css +++ /dev/null @@ -1,267 +0,0 @@ -/* -* The Form's labels take 4 cells out 12 in M, L ans XL sizes, -* and 12 cells (whole row) in S size. -* The ratio can be changed trough the labelSpan property. -*/ - -/* S - 12 cells */ -@container (max-width: 600px) { - :host([label-span-s="1"]) .ui5-form-item, - :host([label-span-s="1"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span1); - } - - :host([label-span-s="2"]) .ui5-form-item, - :host([label-span-s="2"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span2); - } - - :host([label-span-s="3"]) .ui5-form-item, - :host([label-span-s="3"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span3); - } - - :host([label-span-s="4"]) .ui5-form-item, - :host([label-span-s="4"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span4); - } - - :host([label-span-s="5"]) .ui5-form-item, - :host([label-span-s="5"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span5); - } - - :host([label-span-s="6"]) .ui5-form-item, - :host([label-span-s="6"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span6); - } - - :host([label-span-s="7"]) .ui5-form-item, - :host([label-span-s="7"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span7); - } - - :host([label-span-s="8"]) .ui5-form-item, - :host([label-span-s="8"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span8); - } - - :host([label-span-s="9"]) .ui5-form-item, - :host([label-span-s="9"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span9); - } - - :host([label-span-s="10"]) .ui5-form-item, - :host([label-span-s="10"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span10); - } - - :host([label-span-s="11"]) .ui5-form-item, - :host([label-span-s="11"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span11); - } - - :host(:not([label-span-s])) .ui5-form-item, - :host(:not([label-span-s])) .ui5-form-group, - :host([label-span-s="12"]) .ui5-form-item, - :host([label-span-s="12"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span12); - --ui5-form-item-label-justify: var(--ui5-form-item-label-justify-span12); - --ui5-form-item-label-padding: var(--ui5-form-item-label-padding-span12); - } -} - -/* M - 4 cells by default, up to 12 cells */ -@container (width > 600px) and (width <= 1024px) { - :host([label-span-m="1"]) .ui5-form-item, - :host([label-span-m="1"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span1); - } - - :host([label-span-m="2"]) .ui5-form-item, - :host([label-span-m="2"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span2); - } - - :host([label-span-m="3"]) .ui5-form-item, - :host([label-span-m="3"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span3); - } - - :host([label-span-m="4"]) .ui5-form-item, - :host([label-span-m="4"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span4); - } - - :host([label-span-m="5"]) .ui5-form-item, - :host([label-span-m="5"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span5); - } - - :host([label-span-m="6"]) .ui5-form-item, - :host([label-span-m="6"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span6); - } - - :host([label-span-m="7"]) .ui5-form-item, - :host([label-span-m="7"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span7); - } - - :host([label-span-m="8"]) .ui5-form-item, - :host([label-span-m="8"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span8); - } - - :host([label-span-m="9"]) .ui5-form-item, - :host([label-span-m="9"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span9); - } - - :host([label-span-m="10"]) .ui5-form-item, - :host([label-span-m="10"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span10); - } - - :host([label-span-m="11"]) .ui5-form-item, - :host([label-span-m="11"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span11); - } - - :host([label-span-m="12"]) .ui5-form-item, - :host([label-span-m="12"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span12); - --ui5-form-item-label-justify: var(--ui5-form-item-label-justify-span12); - --ui5-form-item-label-padding: var(--ui5-form-item-label-padding-span12); - } -} - -/* L - 4 cells by default, up to 12 cells */ -@container (width > 1024px) and (width <= 1440px) { - :host([label-span-l="1"]) .ui5-form-item, - :host([label-span-l="1"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span1); - } - - :host([label-span-l="2"]) .ui5-form-item, - :host([label-span-l="2"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span2); - } - - :host([label-span-l="3"]) .ui5-form-item, - :host([label-span-l="3"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span3); - } - - :host([label-span-l="4"]) .ui5-form-item, - :host([label-span-l="4"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span4); - } - - :host([label-span-l="5"]) .ui5-form-item, - :host([label-span-l="5"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span5); - } - - :host([label-span-l="6"]) .ui5-form-item, - :host([label-span-l="6"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span6); - } - - :host([label-span-l="7"]) .ui5-form-item, - :host([label-span-l="7"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span7); - } - - :host([label-span-l="8"]) .ui5-form-item, - :host([label-span-l="8"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span8); - } - - :host([label-span-l="9"]) .ui5-form-item, - :host([label-span-l="9"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span9); - } - - :host([label-span-l="10"]) .ui5-form-item, - :host([label-span-l="10"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span10); - } - - :host([label-span-l="11"]) .ui5-form-item, - :host([label-span-l="11"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span11); - } - - :host([label-span-l="12"]) .ui5-form-item, - :host([label-span-l="12"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span12); - --ui5-form-item-label-justify: var(--ui5-form-item-label-justify-span12); - --ui5-form-item-label-padding: var(--ui5-form-item-label-padding-span12); - } -} - -/* XL - 4 cells by default, up to 12 cells */ -@container (min-width: 1441px) { - :host([label-span-xl="1"]) .ui5-form-item, - :host([label-span-xl="1"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span1); - } - - :host([label-span-xl="2"]) .ui5-form-item, - :host([label-span-xl="2"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span2); - } - - :host([label-span-xl="3"]) .ui5-form-item, - :host([label-span-xl="3"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span3); - } - - :host([label-span-xl="4"]) .ui5-form-item, - :host([label-span-xl="4"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span4); - } - - :host([label-span-xl="5"]) .ui5-form-item, - :host([label-span-xl="5"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span5); - } - - :host([label-span-xl="6"]) .ui5-form-item, - :host([label-span-xl="6"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span6); - } - - :host([label-span-xl="7"]) .ui5-form-item, - :host([label-span-xl="7"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span7); - } - - :host([label-span-xl="8"]) .ui5-form-item, - :host([label-span-xl="8"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span8); - } - - :host([label-span-xl="9"]) .ui5-form-item, - :host([label-span-xl="9"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span9); - } - - :host([label-span-xl="10"]) .ui5-form-item, - :host([label-span-xl="10"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span10); - } - - :host([label-span-xl="11"]) .ui5-form-item, - :host([label-span-xl="11"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span11); - } - - :host([label-span-xl="12"]) .ui5-form-item, - :host([label-span-xl="12"]) .ui5-form-group { - --ui5-form-item-layout: var(--ui5-form-item-layout-span12); - --ui5-form-item-label-justify: var(--ui5-form-item-label-justify-span12); - --ui5-form-item-label-padding: var(--ui5-form-item-label-padding-span12); - } -} \ No newline at end of file diff --git a/packages/main/src/themes/base/Form-parameters.css b/packages/main/src/themes/base/Form-parameters.css index 958e9fb34292..71683d39d005 100644 --- a/packages/main/src/themes/base/Form-parameters.css +++ b/packages/main/src/themes/base/Form-parameters.css @@ -1,17 +1,5 @@ :root { - --ui5-form-item-layout: 1fr 2fr; - --ui5-form-item-layout-span1: 1fr 11fr; - --ui5-form-item-layout-span2: 2fr 10fr; - --ui5-form-item-layout-span3: 3fr 9fr; - --ui5-form-item-layout-span4: 4fr 8fr; - --ui5-form-item-layout-span5: 5fr 7fr; - --ui5-form-item-layout-span6: 6fr 6fr; - --ui5-form-item-layout-span7: 7fr 5fr; - --ui5-form-item-layout-span8: 8fr 4fr; - --ui5-form-item-layout-span9: 9fr 3fr; - --ui5-form-item-layout-span10: 10fr 2fr; - --ui5-form-item-layout-span11: 11fr 1fr; - --ui5-form-item-layout-span12: 1fr; + --ui5-form-item-layout: 4fr 8fr 0fr; --ui5-form-item-label-justify: end; --ui5-form-item-label-justify-span12: start; --ui5-form-item-label-padding: 0.125rem 0; diff --git a/packages/main/test/pages/form/FormEmptySpan.html b/packages/main/test/pages/form/FormEmptySpan.html new file mode 100644 index 000000000000..471e34a2f2d3 --- /dev/null +++ b/packages/main/test/pages/form/FormEmptySpan.html @@ -0,0 +1,736 @@ + + + + + + Form + + + + + + + + + + + +
+ + +
+ Label Span + + S12 M1 L1 XL1 + S12 M2 L2 XL2 + S12 M3 L3 XL3 + S12 M4 L4 XL4 + S12 M4 L4 XL5 + S12 M4 L4 XL6 + S12 M4 L5 XL6 + S12 M4 L6 XL6 + S12 M5 L6 XL6 + S12 M6 L6 XL6 + S12 M7 L7 XL7 + S12 M8 L8 XL8 + S12 M12 L12 XL12 + + + Empty Span + + S0 M0 L0 XL0 + S0 M1 L1 XL1 + S0 M1 L2 XL2 + S0 M2 L3 XL3 + S0 M2 L4 XL4 + S0 M2 L5 XL5 + S0 M2 L6 XL6 + S0 M2 L7 XL7 + S0 M2 L8 XL8 + S0 M2 L9 XL9 + S0 M2 L10 XL10 + + + + + Top + Side + +
+ +
+ + + Name: + Red Point Stores + + + + ZIP Code/City: + 411 Maintown + + + + Street: + Main St 1618 + + + + Country: + Germany + + + + WebSite: + sap.com + + + + Delivery address: + Newtown + + +
+ +
+ +


+ +
+ + + Name: + + + + + ZIP Code/City: + + + + + + Street: + + + + + + Country: + + Australia + Germany + England + + + + + WebSite: + + + + + Delivery address: + + + +
+ +
+ +


+ +
+ + + + + Name: + Red Point Stores + + + + ZIP Code/City: + 411 Maintown + + + + Street: + Main St 1618 + + + + Country: + Germany + + + + WebSite: + sap.com + + + + + + Twitter: + @sap + + + + Email: + john.smith@sap.com + + + + Tel: + +49 6227 747474 + + + + SMS: + +49 6227 747474 + + + + Mobile: + +49 6227 747474 + + + + Pager: + +49 6227 747474 + + + + Fax: + +49 6227 747474 + + + + + + + Name: + Red Point Stores + + + + ZIP Code/City: + 411 Maintown + + + + Street: + Main St 1618 + + + + Country: + Germany + + + + WebSite: + sap.com + + + +
+ +
+


+ +
+ + + + + Name: + Red Point Stores + + + + ZIP Code/City: + 411 Maintown + + + + Street: + Main St 1618 + + + + Country: + Germany + + + + WebSite: + sap.com + + + + + + Twitter: + @sap + + + + Email: + john.smith@sap.com + + + + Tel: + +49 6227 747474 + + + + SMS: + +49 6227 747474 + + + + Mobile: + +49 6227 747474 + + + + Pager: + +49 6227 747474 + + + + Fax: + +49 6227 747474 + + + + + + + Name: + Red Point Stores + + + + ZIP Code/City: + 411 Maintown + + + + Street: + Main St 1618 + + + + Country: + Germany + + + + WebSite: + sap.com + + + +
+ +
+


+ +
+

Label always Top

+ + + Name: + + + + + ZIP Code/City: + + + + + + Street: + + + + + + Country: + + Australia + Germany + England + + + + + WebSite: + + + + + Delivery address: + + + +
+
+ + + + diff --git a/packages/website/docs/_components_pages/main/Form/Form.mdx b/packages/website/docs/_components_pages/main/Form/Form.mdx index 1216bc9680fb..b0a6acfa2652 100644 --- a/packages/website/docs/_components_pages/main/Form/Form.mdx +++ b/packages/website/docs/_components_pages/main/Form/Form.mdx @@ -8,6 +8,7 @@ import Groups from "../../../_samples/main/Form/Groups/Groups.md"; import Edit from "../../../_samples/main/Form/Edit/Edit.md"; import Layout from "../../../_samples/main/Form/Layout/Layout.md"; import LabelSpan from "../../../_samples/main/Form/LabelSpan/LabelSpan.md"; +import EmptySpan from "../../../_samples/main/Form/EmptySpan/EmptySpan.md"; import LabelsOnTop from "../../../_samples/main/Form/LabelsOnTop/LabelsOnTop.md"; import GroupColumnSpan from "../../../_samples/main/Form/GroupColumnSpan/GroupColumnSpan.md"; import HeaderTextWrapping from "../../../_samples/main/Form/HeaderTextWrapping/HeaderTextWrapping.md"; @@ -44,7 +45,9 @@ You can define groups via the **ui5-form-group** web component. ### Label Span -Use the Form#**labelSpan** property to define the width proportion of the labels and fields of a FormItem by breakpoint. +Use the **labelSpan** property to define the width proportion of the labels and fields of a FormItem by breakpoint. + +For example: - S12 M4 L4 XL4 - the label takes 1/3 in M, L, XL - S12 M6 L6 XL6 - the label takes 1/2 in M, L, XL @@ -53,6 +56,16 @@ Use the Form#**labelSpan** property to define the width proportion of the labels +### Empty Span +Use the **emptySpan** property to define the empty space at the FormItem's end. + +For example: + +- emptySpan="S1 M1 L1 XL1" + labelSpan="S4 M4 L4 XL4" will define "4 | 7 | 1" proportion between the label, the field and the empty space +- emptySpan="S3 M3 L3 XL3" + labelSpan="S4 M4 L4 XL4" will define "4 | 5 | 3" proportion between the label, the field and the empty space + + + ### Labels On Top Force labels always on top Form#**labelSpan=S12 M12 L12 XL12**. diff --git a/packages/website/docs/_samples/main/Form/EmptySpan/EmptySpan.md b/packages/website/docs/_samples/main/Form/EmptySpan/EmptySpan.md new file mode 100644 index 000000000000..ef4652628b4d --- /dev/null +++ b/packages/website/docs/_samples/main/Form/EmptySpan/EmptySpan.md @@ -0,0 +1,5 @@ +import html from '!!raw-loader!./sample.html'; +import js from '!!raw-loader!./main.js'; +import css from '!!raw-loader!./main.css'; + + diff --git a/packages/website/docs/_samples/main/Form/EmptySpan/main.css b/packages/website/docs/_samples/main/Form/EmptySpan/main.css new file mode 100644 index 000000000000..42918f8ede52 --- /dev/null +++ b/packages/website/docs/_samples/main/Form/EmptySpan/main.css @@ -0,0 +1,6 @@ +ui5-form-item::part(layout) { + background: var(--sapHoverColor); +} +ui5-form-item::part(content) { + background: var(--sapAvatar_1_Background); +} \ No newline at end of file diff --git a/packages/website/docs/_samples/main/Form/EmptySpan/main.js b/packages/website/docs/_samples/main/Form/EmptySpan/main.js new file mode 100644 index 000000000000..d2809c970324 --- /dev/null +++ b/packages/website/docs/_samples/main/Form/EmptySpan/main.js @@ -0,0 +1,32 @@ +import "@ui5/webcomponents/dist/Form.js"; +import "@ui5/webcomponents/dist/FormItem.js"; + + +// The following code is required only for the sample +import "@ui5/webcomponents/dist/Label.js"; +import "@ui5/webcomponents/dist/Text.js"; +import "@ui5/webcomponents/dist/Slider.js"; +import "@ui5/webcomponents/dist/Input.js"; +import "@ui5/webcomponents/dist/Select.js"; +import "@ui5/webcomponents/dist/Option.js"; + +const slider = document.getElementById("slider"); +const txtLayout = document.getElementById("txtLayout"); +const container = document.getElementById("container"); + +slider.addEventListener("ui5-input", () => { + const width = (slider.value / 100 * 1500); + container.style.width = `${width}px`; + txtLayout.innerHTML = getLayoutByWidth(width); +}); + +const getLayoutByWidth = (width) => { + if (width > 599 && width <= 1023) { + return "M"; + } else if (width >= 1024 && width <= 1439) { + return "L" + } else if (width >= 1440) { + return "XL" + } + return "S"; +}; diff --git a/packages/website/docs/_samples/main/Form/EmptySpan/sample.html b/packages/website/docs/_samples/main/Form/EmptySpan/sample.html new file mode 100644 index 000000000000..a15c4cfd7923 --- /dev/null +++ b/packages/website/docs/_samples/main/Form/EmptySpan/sample.html @@ -0,0 +1,104 @@ + + + + + + + + Form Label Span Sample + + + + + + + Page SizeL + + +
+ + + + Name: + + + + + Country: + + Australia + Germany + England + + + + + ZIP Code/City: + + + + + + WebSite: + + + + + Street: + + + + + + Delivery address: + + + + +

+ + + + Name: + + + + + Country: + + Australia + Germany + England + + + + + ZIP Code/City: + + + + + + WebSite: + + + + + Street: + + + + + + Delivery address: + + + +
+ + + + + + + diff --git a/packages/website/docs/_samples/main/Form/HeaderTextWrapping/sample.html b/packages/website/docs/_samples/main/Form/HeaderTextWrapping/sample.html index b2225aa4c488..cb8c19c8bae6 100644 --- a/packages/website/docs/_samples/main/Form/HeaderTextWrapping/sample.html +++ b/packages/website/docs/_samples/main/Form/HeaderTextWrapping/sample.html @@ -10,9 +10,6 @@ - - -