From d932abab5b40fcd6f649ae9a24711e86e537bb39 Mon Sep 17 00:00:00 2001 From: ilhan orhan Date: Wed, 16 Oct 2024 16:22:18 +0300 Subject: [PATCH] refactor(ui5-form): change default columns number in XL and header text wrapping (#10031) Updates the Form web component to latest UX design: 1. New default layout 2. Header text wrapping Related to: https://github.com/SAP/ui5-webcomponents/issues/9963 --- packages/main/cypress/specs/Form.cy.ts | 52 ++++++++++ packages/main/src/Form.ts | 10 +- packages/main/src/FormGroup.ts | 1 + packages/main/src/themes/Form.css | 5 +- packages/main/src/themes/FormLayout.css | 6 +- .../main/test/pages/form/FormGroups3.html | 8 +- .../main/test/pages/form/FormGroups4.html | 9 +- .../main/test/pages/form/FormGroups5.html | 9 +- .../main/test/pages/form/FormGroups6.html | 9 +- .../test/pages/form/FormHeaderWrapping.html | 55 +++++++++++ .../test/pages/form/FormMultipleColumns.html | 6 +- .../docs/_components_pages/main/Form/Form.mdx | 8 ++ .../main/Form/CustomHeader/sample.html | 2 +- .../HeaderTextWrapping/HeaderTextWrapping.md | 4 + .../main/Form/HeaderTextWrapping/main.js | 29 ++++++ .../main/Form/HeaderTextWrapping/sample.html | 47 +++++++++ .../_samples/main/Form/Layout/sample.html | 97 +++++++++++++++++++ 17 files changed, 327 insertions(+), 30 deletions(-) create mode 100644 packages/main/test/pages/form/FormHeaderWrapping.html create mode 100644 packages/website/docs/_samples/main/Form/HeaderTextWrapping/HeaderTextWrapping.md create mode 100644 packages/website/docs/_samples/main/Form/HeaderTextWrapping/main.js create mode 100644 packages/website/docs/_samples/main/Form/HeaderTextWrapping/sample.html 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 + + +
+
+ + + + diff --git a/packages/main/test/pages/form/FormMultipleColumns.html b/packages/main/test/pages/form/FormMultipleColumns.html index ffafa7688748..d6a8be6ac8e3 100644 --- a/packages/main/test/pages/form/FormMultipleColumns.html +++ b/packages/main/test/pages/form/FormMultipleColumns.html @@ -20,9 +20,9 @@
Column Layout: - S1 M3 L4 XL4 - S2 M3 L5 XL5 - S2 M3 L5 XL6 + S1 M3 L4 XL4 + S2 M3 L5 XL5 + S2 M3 L5 XL6 S2 M4 L5 XL7 S2 M3 L6 XL8 S3 M4 L6 XL8 diff --git a/packages/website/docs/_components_pages/main/Form/Form.mdx b/packages/website/docs/_components_pages/main/Form/Form.mdx index 59fb87109f5b..1216bc9680fb 100644 --- a/packages/website/docs/_components_pages/main/Form/Form.mdx +++ b/packages/website/docs/_components_pages/main/Form/Form.mdx @@ -10,6 +10,7 @@ import Layout from "../../../_samples/main/Form/Layout/Layout.md"; import LabelSpan from "../../../_samples/main/Form/LabelSpan/LabelSpan.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"; import ItemColumnSpan from "../../../_samples/main/Form/ItemColumnSpan/ItemColumnSpan.md"; import FreeStyleForm from "../../../_samples/main/Form/FreeStyleForm/FreeStyleForm.md"; import CustomHeader from "../../../_samples/main/Form/CustomHeader/CustomHeader.md"; @@ -26,6 +27,7 @@ import CustomHeader from "../../../_samples/main/Form/CustomHeader/CustomHeader. ### Layout Use the Form#**layout** property to define the number of columns to distribute the form content by breakpoint. +- S1 M1 L2 XL3 - 1 cols in S, 1 cols in M, 2 cols in L and 3 cols in XL (default layout) - S1 M2 L3 XL5 - 1 cols in S, 2 cols in M, 3 cols in L and 5 cols in XL - S1 M2 L4 XL6 - 1 cols in S, 2 cols in M, 4 cols in L and 6 cols in XL - S2 M3 L5 XL7 - 2 cols in S, 3 cols in M, 5 cols in L and 7 cols in XL @@ -80,6 +82,12 @@ The FormItem#**columnSpan** defines to how many columns the form item should exp +### Header Text Wrapping + +The Form header text **is wrapping** when doesn't fit the available space. + + + ### Custom Header The Form provides a **header** slot that allows the usage of custom form header. diff --git a/packages/website/docs/_samples/main/Form/CustomHeader/sample.html b/packages/website/docs/_samples/main/Form/CustomHeader/sample.html index 562e768e10a1..06e6d46924fa 100644 --- a/packages/website/docs/_samples/main/Form/CustomHeader/sample.html +++ b/packages/website/docs/_samples/main/Form/CustomHeader/sample.html @@ -12,7 +12,7 @@ - + Address diff --git a/packages/website/docs/_samples/main/Form/HeaderTextWrapping/HeaderTextWrapping.md b/packages/website/docs/_samples/main/Form/HeaderTextWrapping/HeaderTextWrapping.md new file mode 100644 index 000000000000..17798ecc59ab --- /dev/null +++ b/packages/website/docs/_samples/main/Form/HeaderTextWrapping/HeaderTextWrapping.md @@ -0,0 +1,4 @@ +import html from '!!raw-loader!./sample.html'; +import js from '!!raw-loader!./main.js'; + + diff --git a/packages/website/docs/_samples/main/Form/HeaderTextWrapping/main.js b/packages/website/docs/_samples/main/Form/HeaderTextWrapping/main.js new file mode 100644 index 000000000000..0818d9b83fcb --- /dev/null +++ b/packages/website/docs/_samples/main/Form/HeaderTextWrapping/main.js @@ -0,0 +1,29 @@ +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"; + +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/HeaderTextWrapping/sample.html b/packages/website/docs/_samples/main/Form/HeaderTextWrapping/sample.html new file mode 100644 index 000000000000..b2225aa4c488 --- /dev/null +++ b/packages/website/docs/_samples/main/Form/HeaderTextWrapping/sample.html @@ -0,0 +1,47 @@ + + + + + + + + Sample + + + + + + + + +
+ + + Name: + Red Point Stores + + + + ZIP Code/City: + 411 Maintown + + + + Street: + Main St 1618 + + + + Country: + Germany + + +
+ + + + + + + + diff --git a/packages/website/docs/_samples/main/Form/Layout/sample.html b/packages/website/docs/_samples/main/Form/Layout/sample.html index 72c6b933d831..b92d267ff408 100644 --- a/packages/website/docs/_samples/main/Form/Layout/sample.html +++ b/packages/website/docs/_samples/main/Form/Layout/sample.html @@ -18,6 +18,103 @@
+ + + + + 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 + + + + +

+