From 13b571baf0b225dfabc4739be64dd64a34cc5506 Mon Sep 17 00:00:00 2001 From: Nayden Naydenov <31909318+nnaydenow@users.noreply.github.com> Date: Fri, 15 Nov 2024 10:55:50 +0200 Subject: [PATCH 01/31] feat(ui5-form): enable vertical alignment of form items (#10165) This PR introduces support for two navigation flows: a simple layout with only ui5-form-item elements and a grouped layout with ui5-form-group elements. When ui5-form is used with only ui5-form-item elements, the focus moves horizontally across each ui5-form-item, as there may be forms with custom arrangements. In this case, each ui5-form-item is treated as a separate group. When ui5-form is used with ui5-form-group elements to create groups, the items are rendered by filling each column first, then filling the rows. In this case, the focus moves vertically through each item, column by column. Fixes: https://github.com/SAP/ui5-webcomponents/issues/10032 --- packages/main/cypress/specs/Form.cy.ts | 241 ++++++++++++++++++++++++ packages/main/src/Form.ts | 59 ++++++ packages/main/src/themes/FormItem.css | 32 +++- packages/main/test/pages/form/Form.html | 74 ++++++++ 4 files changed, 405 insertions(+), 1 deletion(-) create mode 100644 packages/main/test/pages/form/Form.html diff --git a/packages/main/cypress/specs/Form.cy.ts b/packages/main/cypress/specs/Form.cy.ts index 052c7d26da7f..01b2d65362fe 100644 --- a/packages/main/cypress/specs/Form.cy.ts +++ b/packages/main/cypress/specs/Form.cy.ts @@ -386,6 +386,247 @@ describe("General API", () => { cy.get("@formGr3") .should("have.prop", "colsXl", 1); }); + + describe("tests items ordering within a group", () => { + beforeEach(() => { + cy.mount(html` + + + Item: + 1 + + + Item: + 2 + + + Item: + 3 + + + Item: + 4 + + + Item: + 5 + + + Item: + 6 + + + Item: + 7 + + + Item: + 8 + + + Item: + 9 + + + Item: + 10 + + +`); + }); + + it("10 items in 6 columns", () => { + cy.get("[ui5-form]") + .invoke("width", 1500); + + cy.get("[ui5-form-item]") + .as("items"); + + cy.get("@items") + .eq(0) + .should("have.css", "order", "0"); + + cy.get("@items") + .eq(1) + .should("have.css", "order", "6"); + + cy.get("@items") + .eq(2) + .should("have.css", "order", "1"); + + cy.get("@items") + .eq(3) + .should("have.css", "order", "7"); + + cy.get("@items") + .eq(4) + .should("have.css", "order", "2"); + + cy.get("@items") + .eq(5) + .should("have.css", "order", "8"); + + cy.get("@items") + .eq(6) + .should("have.css", "order", "3"); + + cy.get("@items") + .eq(7) + .should("have.css", "order", "9"); + + cy.get("@items") + .eq(8) + .should("have.css", "order", "4"); + + cy.get("@items") + .eq(9) + .should("have.css", "order", "5"); + }); + + it("10 items in 5 columns", () => { + cy.get("[ui5-form]") + .invoke("width", 1300); + + cy.get("[ui5-form-item]") + .as("items"); + + cy.get("@items") + .eq(0) + .should("have.css", "order", "0"); + + cy.get("@items") + .eq(1) + .should("have.css", "order", "5"); + + cy.get("@items") + .eq(2) + .should("have.css", "order", "1"); + + cy.get("@items") + .eq(3) + .should("have.css", "order", "6"); + + cy.get("@items") + .eq(4) + .should("have.css", "order", "2"); + + cy.get("@items") + .eq(5) + .should("have.css", "order", "7"); + + cy.get("@items") + .eq(6) + .should("have.css", "order", "3"); + + cy.get("@items") + .eq(7) + .should("have.css", "order", "8"); + + cy.get("@items") + .eq(8) + .should("have.css", "order", "4"); + + cy.get("@items") + .eq(9) + .should("have.css", "order", "9"); + }); + + it("10 items in 4 columns", () => { + cy.get("[ui5-form]") + .invoke("width", 800); + + cy.get("[ui5-form-item]") + .as("items"); + + cy.get("@items") + .eq(0) + .should("have.css", "order", "0"); + + cy.get("@items") + .eq(1) + .should("have.css", "order", "4"); + + cy.get("@items") + .eq(2) + .should("have.css", "order", "8"); + + cy.get("@items") + .eq(3) + .should("have.css", "order", "1"); + + cy.get("@items") + .eq(4) + .should("have.css", "order", "5"); + + cy.get("@items") + .eq(5) + .should("have.css", "order", "9"); + + cy.get("@items") + .eq(6) + .should("have.css", "order", "2"); + + cy.get("@items") + .eq(7) + .should("have.css", "order", "6"); + + cy.get("@items") + .eq(8) + .should("have.css", "order", "3"); + + cy.get("@items") + .eq(9) + .should("have.css", "order", "7"); + }); + + it("10 items in 3 columns", () => { + cy.get("[ui5-form]") + .invoke("width", 500); + + cy.get("[ui5-form-item]") + .as("items"); + + cy.get("@items") + .eq(0) + .should("have.css", "order", "0"); + + cy.get("@items") + .eq(1) + .should("have.css", "order", "3"); + + cy.get("@items") + .eq(2) + .should("have.css", "order", "6"); + + cy.get("@items") + .eq(3) + .should("have.css", "order", "9"); + + cy.get("@items") + .eq(4) + .should("have.css", "order", "1"); + + cy.get("@items") + .eq(5) + .should("have.css", "order", "4"); + + cy.get("@items") + .eq(6) + .should("have.css", "order", "7"); + + cy.get("@items") + .eq(7) + .should("have.css", "order", "2"); + + cy.get("@items") + .eq(8) + .should("have.css", "order", "5"); + + cy.get("@items") + .eq(9) + .should("have.css", "order", "8"); + }); + }); }); describe("Accessibility", () => { diff --git a/packages/main/src/Form.ts b/packages/main/src/Form.ts index 0a5c29171ba9..55b67476e398 100644 --- a/packages/main/src/Form.ts +++ b/packages/main/src/Form.ts @@ -1,6 +1,7 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; import property from "@ui5/webcomponents-base/dist/decorators/property.js"; +import { getScopedVarName } from "@ui5/webcomponents-base/dist/CustomElementsScope.js"; import slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js"; @@ -23,6 +24,8 @@ const StepColumn = { "XL": 6, }; +const breakpoints = ["S", "M", "L", "Xl"]; + /** * Interface for components that can be slotted inside `ui5-form` as items. * @public @@ -127,6 +130,40 @@ type ItemsInfo = { * * **For example:** To always place the labels on top set: `labelSpan="S12 M12 L12 XL12"` property. * + * ### Navigation flow + * + * The Form component supports two layout options for keyboard navigation: + * + * #### Simple form + * + * In this "simple form" layout, each `ui5-form-item` acts as a standalone group + * with one item, so focus moves horizontally across the grid from one `ui5-form-item` to the next. + * This layout is ideal for simpler forms and supports custom arrangements, e.g., + * + * ``` + * | 1 | 2 | + * | 3 | + * | 4 | 5 | + * ``` + * + * #### Complex form + * + * In this layout, items are grouped into `ui5-form-group` elements, allowing more complex configurations: + * + * - **Single-Column Group**: Focus moves vertically down from one item to the next. + * ``` + * | 1 | + * | 2 | + * | 3 | + * ``` + * + * - **Multi-Column Group**: Focus moves horizontally within each row, advancing to the next row after completing the current one. + * ``` + * | 1 | 4 | + * | 2 | 5 | + * | 3 | 6 | + * ``` + * * ### Keyboard Handling * * - [Tab] - Moves the focus to the next interactive element within the Form/FormGroup (if available) or to the next element in the tab chain outside the Form @@ -389,6 +426,28 @@ class Form extends UI5Element { get groupItemsInfo(): Array { return this.items.map((groupItem: IFormItem) => { + const items = this.getItemsInfo((Array.from(groupItem.children) as Array)); + breakpoints.forEach(breakpoint => { + const cols = ((groupItem[`cols${breakpoint}` as keyof IFormItem]) as number || 1); + const rows = Math.ceil(items.length / cols); + const total = cols * rows; + const lastRowColumns = (cols - (total - items.length) - 1); // all other indecies start from 0 + let currentItem = 0; + + for (let i = 0; i < total; i++) { + const column = Math.floor(i / rows); + const row = i % rows; + + if (row === rows - 1 && column > lastRowColumns) { + // eslint-disable-next-line no-continue + continue; + } + + items[currentItem].item.style.setProperty(getScopedVarName(`--ui5-form-item-order-${breakpoint}`), `${column + row * cols}`); + currentItem++; + } + }); + return { groupItem, accessibleNameRef: (groupItem as FormGroup).headerText ? `${groupItem._id}-group-header-text` : undefined, diff --git a/packages/main/src/themes/FormItem.css b/packages/main/src/themes/FormItem.css index 446eda5d6b96..e7fa0525538d 100644 --- a/packages/main/src/themes/FormItem.css +++ b/packages/main/src/themes/FormItem.css @@ -9,7 +9,7 @@ :host([column-span="3"]) { grid-column: span 3; } - + :host([column-span="4"]) { grid-column: span 4; } @@ -62,4 +62,34 @@ } ::slotted([ui5-select]) { width: 100%; +} + + +@container (max-width: 600px) { + :host { + order: var(--ui5-form-item-order-S, unset); + } +} + +/* M - 1 column by default, up to 2 columns */ +@container (width > 600px) and (width <= 1024px) { + :host { + order: var(--ui5-form-item-order-M, unset); + } + +} + +/* L - 2 columns by default, up to 3 columns */ +@container (width > 1024px) and (width <= 1440px) { + :host { + order: var(--ui5-form-item-order-L, unset); + } +} + +/* XL - 3 columns by default, up to 6 */ +@container (min-width: 1441px) { + :host { + order: var(--ui5-form-item-order-Xl, unset); + } + } \ No newline at end of file diff --git a/packages/main/test/pages/form/Form.html b/packages/main/test/pages/form/Form.html new file mode 100644 index 000000000000..237e792fe1de --- /dev/null +++ b/packages/main/test/pages/form/Form.html @@ -0,0 +1,74 @@ + + + + + + + Form Basic + + + + + +
+ + + + + \ No newline at end of file From 5fa257c1c5446d4bee1acfdb277bf6a1acd98255 Mon Sep 17 00:00:00 2001 From: ilhan orhan Date: Fri, 15 Nov 2024 11:41:23 +0200 Subject: [PATCH 02/31] chore: update chromedriver to 131 (#10190) --- packages/ai/package.json | 2 +- packages/base/package.json | 2 +- packages/compat/package.json | 2 +- packages/fiori/package.json | 2 +- packages/localization/package.json | 2 +- packages/main/package.json | 2 +- yarn.lock | 8 ++++---- 7 files changed, 10 insertions(+), 10 deletions(-) diff --git a/packages/ai/package.json b/packages/ai/package.json index 2894f149e07d..7da3f8030768 100644 --- a/packages/ai/package.json +++ b/packages/ai/package.json @@ -52,6 +52,6 @@ }, "devDependencies": { "@ui5/webcomponents-tools": "2.5.0-rc.0", - "chromedriver": "^129.0.0" + "chromedriver": "^131.0.0" } } diff --git a/packages/base/package.json b/packages/base/package.json index f6190f104c83..5c9526694004 100644 --- a/packages/base/package.json +++ b/packages/base/package.json @@ -53,7 +53,7 @@ "devDependencies": { "@openui5/sap.ui.core": "1.120.17", "@ui5/webcomponents-tools": "2.5.0-rc.0", - "chromedriver": "^129.0.0", + "chromedriver": "^131.0.0", "clean-css": "^5.2.2", "copy-and-watch": "^0.1.5", "cross-env": "^7.0.3", diff --git a/packages/compat/package.json b/packages/compat/package.json index ffae0a205147..71486bae6150 100644 --- a/packages/compat/package.json +++ b/packages/compat/package.json @@ -52,6 +52,6 @@ }, "devDependencies": { "@ui5/webcomponents-tools": "2.5.0-rc.0", - "chromedriver": "^129.0.0" + "chromedriver": "^131.0.0" } } diff --git a/packages/fiori/package.json b/packages/fiori/package.json index 1befa9744599..990af4105c7e 100644 --- a/packages/fiori/package.json +++ b/packages/fiori/package.json @@ -61,7 +61,7 @@ }, "devDependencies": { "@ui5/webcomponents-tools": "2.5.0-rc.0", - "chromedriver": "^129.0.0", + "chromedriver": "^131.0.0", "lit": "^2.0.0" } } diff --git a/packages/localization/package.json b/packages/localization/package.json index f76b82935b34..26ab05483ad4 100644 --- a/packages/localization/package.json +++ b/packages/localization/package.json @@ -35,7 +35,7 @@ "@openui5/sap.ui.core": "1.120.17", "@ui5/webcomponents-tools": "2.5.0-rc.0", "babel-plugin-amd-to-esm": "^2.0.3", - "chromedriver": "^129.0.0", + "chromedriver": "^131.0.0", "estree-walk": "^2.2.0", "mkdirp": "^1.0.4", "resolve": "^1.20.0" diff --git a/packages/main/package.json b/packages/main/package.json index f0a81c34ddb5..58e4d3bbc8ff 100644 --- a/packages/main/package.json +++ b/packages/main/package.json @@ -59,7 +59,7 @@ }, "devDependencies": { "@ui5/webcomponents-tools": "2.5.0-rc.0", - "chromedriver": "^129.0.0", + "chromedriver": "^131.0.0", "lit": "^2.0.0" } } diff --git a/yarn.lock b/yarn.lock index ee80f4f7c49f..1371888cd24a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6292,10 +6292,10 @@ chrome-trace-event@^1.0.2: resolved "https://registry.yarnpkg.com/chrome-trace-event/-/chrome-trace-event-1.0.3.tgz#1015eced4741e15d06664a957dbbf50d041e26ac" integrity sha512-p3KULyQg4S7NIHixdwbGX+nFHkoBiA4YQmyWtjb8XngSKV124nJmRysgAeujbUVb15vh+RvFUfCPqU7rXk+hZg== -chromedriver@^129.0.0: - version "129.0.4" - resolved "https://registry.yarnpkg.com/chromedriver/-/chromedriver-129.0.4.tgz#64e598061b74f0f65fae605242327af84ebbfd28" - integrity sha512-j5I55cQwodFJUaYa1tWUmj2ss9KcPRBWmUa5Qonq3X8kqv2ASPyTboFYb4YB/YLztkYTUUw2E43txXw0wYzT/A== +chromedriver@^131.0.0: + version "131.0.0" + resolved "https://registry.yarnpkg.com/chromedriver/-/chromedriver-131.0.0.tgz#08bbc6d9fcd1c42abfe70ac7e3412fba96f44723" + integrity sha512-ukYmdCox2eRsjpCYUB4AOLV1fSfWQ1ZPfcUc0PIUWZKoyjyXKEl8i4DJ14bcNzNbEvaVx2Z2pnx/nLK2CM+ruQ== dependencies: "@testim/chrome-version" "^1.1.4" axios "^1.7.4" From b6494ddf67db1dc8679543173b86c464b75f2963 Mon Sep 17 00:00:00 2001 From: Plamen Ivanov Date: Fri, 15 Nov 2024 15:00:40 +0200 Subject: [PATCH 03/31] fix(ui5-list): load-more no longer fired on initial mount (#10180) Fixes: #9959 --- packages/main/src/List.ts | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/main/src/List.ts b/packages/main/src/List.ts index ea3577be1ea9..4cb37b61210e 100644 --- a/packages/main/src/List.ts +++ b/packages/main/src/List.ts @@ -1053,7 +1053,10 @@ class List extends UI5Element { } loadMore() { - this.fireDecoratorEvent("load-more"); + // don't fire load-more on initial mount + if (this.children.length > 0) { + this.fireDecoratorEvent("load-more"); + } } /* From b59d718dca80bd9a8ee65993ddc2358ecd127024 Mon Sep 17 00:00:00 2001 From: Nayden Naydenov <31909318+nnaydenow@users.noreply.github.com> Date: Fri, 15 Nov 2024 15:34:20 +0200 Subject: [PATCH 04/31] fix(ui5-table): text cut due to column overflow (#10193) If the table has a fixed size and the text in its columns cannot wrap, the content will be cut off due to overflow when the total width of the columns exceeds the table's width. ![image](https://github.com/user-attachments/assets/d3a52eba-b944-4f07-ade6-e79b73903665) This issue, caused by an incorrect size of the busy indicator, has been resolved with the current update. Related to: #10168 --- packages/compat/src/themes/Table.css | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/packages/compat/src/themes/Table.css b/packages/compat/src/themes/Table.css index edeae057af64..1c17ab63aa21 100644 --- a/packages/compat/src/themes/Table.css +++ b/packages/compat/src/themes/Table.css @@ -10,13 +10,17 @@ border-bottom: var(--ui5_table_bottom_border); } -.ui5-table-root, -.ui5-table-busy-indicator { +.ui5-table-root { width: 100%; height: 100%; + display: flex; box-sizing: border-box; } +.ui5-table-busy-indicator { + flex-grow: 1; +} + table { width: 100%; border-spacing: 0; From 63de8f0aa13fc6bd92748cc7416cf873887c0de5 Mon Sep 17 00:00:00 2001 From: SAP LX Lab Service Account Date: Sat, 16 Nov 2024 11:36:12 -0800 Subject: [PATCH 05/31] Translation Delivery (#10200) [INTERNAL] Translation delivery: commit by LX Lab Change-Id: I6b25d970ca4a4660df466ef12ea99ffffb1ce75a --- packages/main/src/i18n/messagebundle_en.properties | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/main/src/i18n/messagebundle_en.properties b/packages/main/src/i18n/messagebundle_en.properties index aadd5d2df75c..deb53c8e15d7 100644 --- a/packages/main/src/i18n/messagebundle_en.properties +++ b/packages/main/src/i18n/messagebundle_en.properties @@ -296,6 +296,8 @@ TOKENIZER_POPOVER_REMOVE=All items TOKENIZER_SHOW_ALL_ITEMS={0} Items +TOKENIZER_CLEAR_ALL=Clear All + TREE_ITEM_ARIA_LABEL=Tree Item TREE_ITEM_EXPAND_NODE=Expand Node From 648fc8fc301be518aec23aabed1b6c562c300b98 Mon Sep 17 00:00:00 2001 From: SAP LX Lab Service Account Date: Mon, 18 Nov 2024 05:54:19 -0800 Subject: [PATCH 06/31] Translation Delivery (#10201) [INTERNAL] Translation delivery: commit by LX Lab Change-Id: I1490f11b7f2cc13fe6f8aa1a84a863c13304cda7 --- packages/main/src/i18n/messagebundle_en_US_saprigi.properties | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/main/src/i18n/messagebundle_en_US_saprigi.properties b/packages/main/src/i18n/messagebundle_en_US_saprigi.properties index cbaeff16153f..b9f4dd67e40d 100644 --- a/packages/main/src/i18n/messagebundle_en_US_saprigi.properties +++ b/packages/main/src/i18n/messagebundle_en_US_saprigi.properties @@ -296,6 +296,8 @@ TOKENIZER_POPOVER_REMOVE=‌‍​‍​‍‌​​‌‍‌​​‍ TOKENIZER_SHOW_ALL_ITEMS=‍​‍‌‌‌​​‍‌‍‍‌​‍​‌‌‌‍‌‌‌‌‍‌‌​‍‍‌​​‍​‌‍‍​‌​​​{0}‌‌‌ Items +TOKENIZER_CLEAR_ALL=‌‌​‍‍​‍‍​‍‍​​​‌​‍​‌​‍‍​‌​‌‌‍​‍​​​‍​​‌‌​​‍Clear All + TREE_ITEM_ARIA_LABEL=‌‌‌​​‌​​​‍‍‌‌​‍‍‍​‍‌​‍​​‍‌‌‍‌‌‌‌‌​‍‌‌‍​‍​Tree Item TREE_ITEM_EXPAND_NODE=‍‍‍‍​​‍​‌‍‍​‌‍‍​‍‌‍​​​‌​‍‍‌‌​​‌‌‍‌​‍‌‌​‍Expand Node From b3625ac7426aa592b80f50e15147c18ccc7d2abd Mon Sep 17 00:00:00 2001 From: Plamen Ivanov Date: Mon, 18 Nov 2024 16:13:53 +0200 Subject: [PATCH 07/31] feat(ui5-toolbar): fixed spacer behavior (#10177) * feat(ui5-toolbar): fixed spacer behavior There was a bug where if there is a spacer before the last item, the last item would always overflow. This change fixes the issue Fixes: #10104 --- packages/main/cypress/specs/Toolbar.cy.ts | 26 +++++++++++++++++++++++ packages/main/src/ToolbarSpacer.ts | 4 ++-- packages/main/test/pages/Toolbar.html | 11 ++++++++++ 3 files changed, 39 insertions(+), 2 deletions(-) diff --git a/packages/main/cypress/specs/Toolbar.cy.ts b/packages/main/cypress/specs/Toolbar.cy.ts index b2d93b14b1dc..93b1dcd0d277 100644 --- a/packages/main/cypress/specs/Toolbar.cy.ts +++ b/packages/main/cypress/specs/Toolbar.cy.ts @@ -4,6 +4,7 @@ import "../../src/ToolbarButton.js"; import "../../src/ToolbarSelect.js"; import "../../src/ToolbarSelectOption.js"; import "../../src/ToolbarSeparator.js"; +import "../../src/ToolbarSpacer.js"; import "../../src/Popover.js"; import type ToolbarItem from "../../src/ToolbarItem.js"; import "@ui5/webcomponents-icons/dist/add.js"; @@ -65,4 +66,29 @@ describe("Toolbar general interaction", () => { cy.get("#popup") .should("be.visible"); }); + + it("shouldn't have toolbar button as popover opener when there is spacer before last toolbar item", () => { + cy.mount(html` + + + + + + + + + + `); + + cy.get("#otb_spacer") + .as("toolbar"); + + // eslint-disable-next-line cypress/no-unnecessary-waiting + cy.wait(500); + + cy.get("@toolbar") + .shadow() + .find(".ui5-tb-overflow-btn-hidden") + .should("exist", "hidden class attached to tb button, meaning it's not shown as expected"); + }); }); diff --git a/packages/main/src/ToolbarSpacer.ts b/packages/main/src/ToolbarSpacer.ts index ab67e5083691..011d602c5291 100644 --- a/packages/main/src/ToolbarSpacer.ts +++ b/packages/main/src/ToolbarSpacer.ts @@ -38,11 +38,11 @@ class ToolbarSpacer extends ToolbarItem { } get ignoreSpace() { - return this.width === ""; + return this.width === "" || this.width === undefined || this.width === "auto"; } get hasFlexibleWidth() { - return this.width === ""; + return this.width === "" || this.width === undefined || this.width === "auto"; } static get toolbarTemplate() { diff --git a/packages/main/test/pages/Toolbar.html b/packages/main/test/pages/Toolbar.html index 3621f1474269..ad1a4b860972 100644 --- a/packages/main/test/pages/Toolbar.html +++ b/packages/main/test/pages/Toolbar.html @@ -13,6 +13,17 @@
+ + + + + + + + + + + Basic

From 1e440f4979b6010c4c7e6829cfe6a91ca136e10d Mon Sep 17 00:00:00 2001 From: ilhan orhan Date: Mon, 18 Nov 2024 18:55:06 +0200 Subject: [PATCH 08/31] docs: update fress-style form sample (#10207) Show-case how applications can apply styles to get better alignment in specific scenarios. By default, you get this misalignment due to the touch areas of these kind of components - Switch, CheckBox, Radio. While the components are implemented by design, the misalignment, shown below, should be definitely addressed. With few lines of CSS, applying small negative margins to shift the components to the left, you can get the perfect alignment. --- .../main/Form/FreeStyleForm/FreeStyleForm.md | 3 ++- .../docs/_samples/main/Form/FreeStyleForm/main.css | 13 +++++++++++++ .../_samples/main/Form/FreeStyleForm/sample.html | 8 +++++--- 3 files changed, 20 insertions(+), 4 deletions(-) create mode 100644 packages/website/docs/_samples/main/Form/FreeStyleForm/main.css diff --git a/packages/website/docs/_samples/main/Form/FreeStyleForm/FreeStyleForm.md b/packages/website/docs/_samples/main/Form/FreeStyleForm/FreeStyleForm.md index 17798ecc59ab..ef4652628b4d 100644 --- a/packages/website/docs/_samples/main/Form/FreeStyleForm/FreeStyleForm.md +++ b/packages/website/docs/_samples/main/Form/FreeStyleForm/FreeStyleForm.md @@ -1,4 +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/FreeStyleForm/main.css b/packages/website/docs/_samples/main/Form/FreeStyleForm/main.css new file mode 100644 index 000000000000..41c3fe254384 --- /dev/null +++ b/packages/website/docs/_samples/main/Form/FreeStyleForm/main.css @@ -0,0 +1,13 @@ +:root { + --my-margin: -0.6875rem; +} +.ui5-content-density-compact { + --my-margin: -0.5rem; +} + +.margin--density-aware { + margin-inline-start: var(--my-margin); +} +.margin--fixed { + margin-inline-start: -0.5rem; +} \ No newline at end of file diff --git a/packages/website/docs/_samples/main/Form/FreeStyleForm/sample.html b/packages/website/docs/_samples/main/Form/FreeStyleForm/sample.html index 4aae25886b75..c8ea0fdf29ce 100644 --- a/packages/website/docs/_samples/main/Form/FreeStyleForm/sample.html +++ b/packages/website/docs/_samples/main/Form/FreeStyleForm/sample.html @@ -6,6 +6,7 @@ Sample + @@ -59,13 +60,14 @@ - + Label: + Label: -
+
@@ -73,7 +75,7 @@ Label: - + From 77af592c238ad53502c09f142d33f7c66c6b0715 Mon Sep 17 00:00:00 2001 From: Georgieva Date: Tue, 19 Nov 2024 11:23:32 +0200 Subject: [PATCH 09/31] fix(ui5-dialog): width on mobile is not bigger than the phone width (#10199) Issue: When the base font in the 'html' element is changed to something different than the default 16px (for example 32px) the width of the dialog can become larger than the width of the phone's display. This is caused by the 'min-width' (20rem) of the dialog. For the dialog on phone it is recommended by the design to set the dialog's property 'stretch' to true to use the full screen size. The solution: When we have stretched dialog on phone the 'min-width' should not be applied (the width is 100%). fixes: #10000 --- packages/main/src/Dialog.ts | 9 ++++----- packages/main/src/themes/Dialog.css | 1 + 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/main/src/Dialog.ts b/packages/main/src/Dialog.ts index 2c909c3655bf..8ee6683cb1a5 100644 --- a/packages/main/src/Dialog.ts +++ b/packages/main/src/Dialog.ts @@ -71,8 +71,7 @@ const ICON_PER_STATE: Record = { * * ### Responsive Behavior - * The `stretch` property can be used to stretch the - * `ui5-dialog` on full screen. + * The `stretch` property can be used to stretch the `ui5-dialog` to full screen. For better usability, it's recommended to stretch the dialog to full screen on phone devices. * * **Note:** When a `ui5-bar` is used in the header or in the footer, you should remove the default dialog's paddings. * @@ -131,10 +130,10 @@ class Dialog extends Popup { headerText?: string; /** - * Determines whether the component should be stretched to fullscreen. + * Determines if the dialog will be stretched to full screen on mobile. On desktop, + * the dialog will be stretched to approximately 90% of the viewport. * - * **Note:** The component will be stretched to approximately - * 90% of the viewport. + * **Note:** For better usability of the component it is recommended to set this property to "true" when the dialog is opened on phone. * @default false * @public */ diff --git a/packages/main/src/themes/Dialog.css b/packages/main/src/themes/Dialog.css index 6105faad10ca..4f18624a43ab 100644 --- a/packages/main/src/themes/Dialog.css +++ b/packages/main/src/themes/Dialog.css @@ -21,6 +21,7 @@ max-height: 100%; max-width: 100%; border-radius: 0; + min-width: 0; /*this is for preventing the dialog to hold its width on small screens*/ } :host([draggable]) .ui5-popup-header-root, From 44c6199730004a632ec1688e25aa2198b34d4cc4 Mon Sep 17 00:00:00 2001 From: ilhan orhan Date: Tue, 19 Nov 2024 15:55:49 +0200 Subject: [PATCH 10/31] chore: use fireDecoratorEvent over fireEvent (#10208) --- packages/main/src/SliderBase.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/main/src/SliderBase.ts b/packages/main/src/SliderBase.ts index e9ac5ff37560..d2e7b926404a 100644 --- a/packages/main/src/SliderBase.ts +++ b/packages/main/src/SliderBase.ts @@ -343,12 +343,12 @@ abstract class SliderBase extends UI5Element { _onInputChange() { if (this._valueOnInteractionStart !== this.value) { - this.fireEvent("change"); + this.fireDecoratorEvent("change"); } } _onInputInput() { - this.fireEvent("input"); + this.fireDecoratorEvent("input"); } _updateValueFromInput(e: Event) { From c5dff6e231fe7522455465b9702960670f5ee865 Mon Sep 17 00:00:00 2001 From: SAP LX Lab Service Account Date: Tue, 19 Nov 2024 23:50:41 -0800 Subject: [PATCH 11/31] Translation Delivery (#10218) [INTERNAL] Translation delivery: commit by LX Lab Change-Id: I12b827a7cdd99e94cdfaf4d1fe488f9edf33fe92 --- packages/main/src/i18n/messagebundle_en_US_sappsd.properties | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/main/src/i18n/messagebundle_en_US_sappsd.properties b/packages/main/src/i18n/messagebundle_en_US_sappsd.properties index 6b2164502790..de82fba95944 100644 --- a/packages/main/src/i18n/messagebundle_en_US_sappsd.properties +++ b/packages/main/src/i18n/messagebundle_en_US_sappsd.properties @@ -296,6 +296,8 @@ TOKENIZER_POPOVER_REMOVE=[[[Āĺĺ įţēɱş∙∙∙∙∙]]] TOKENIZER_SHOW_ALL_ITEMS=[[[{0} Ĭţēɱş]]] +TOKENIZER_CLEAR_ALL=[[[Ĉĺēąŗ Āĺĺ∙∙∙∙∙]]] + TREE_ITEM_ARIA_LABEL=[[[Ţŗēē Ĭţēɱ∙∙∙∙∙]]] TREE_ITEM_EXPAND_NODE=[[[Ĕχρąŋƌ Ńŏƌē∙∙∙∙∙∙∙∙]]] From 82453ecd4acc30f1214ab19c64ac9fe3701f5d68 Mon Sep 17 00:00:00 2001 From: ilhan orhan Date: Wed, 20 Nov 2024 16:07:49 +0200 Subject: [PATCH 12/31] docs: update Releases.md [ci skip] --- docs/08-Releases.md | 26 ++++++++++++++++++-------- 1 file changed, 18 insertions(+), 8 deletions(-) diff --git a/docs/08-Releases.md b/docs/08-Releases.md index 37016593ac3c..94310d789f5d 100644 --- a/docs/08-Releases.md +++ b/docs/08-Releases.md @@ -9,12 +9,12 @@ and produce the following type of releases: - **Patch releases** -Includes backward compatible bug fixes and increments the third digit, e.g. 1.0.1. +Includes backward compatible bug fixes and increments the third digit, e.g. 2.0.1. - **Minor releases** -Includes backward compatible new features and increments the middle digit and resets the last digit to zero, e.g. 1.1.0. +Includes backward compatible new features and increments the middle digit and resets the last digit to zero, e.g. 2.1.0, 2.2.0, 2.3.0, etc. - **Major releases** @@ -26,20 +26,30 @@ Includes changes that break backward compatibility and increments the first digi Here is the established release process of UI5 Web Components: -- **Monthly Stable Releases** - 1.11.0, 1.12.0....1.18.0 +### Version 2 -Every start of the month, a new minor version is released, which we consider stable and recommended for consumers. -Check the [Release Timelines](https://github.com/SAP/ui5-webcomponents/projects?type=classic) for up-to-date information (the related content is at the bottom of the page). +The UI5 Web Components version 2 is the latest major and recommended for usage. -- **Weekly Preview Releases** - 1.13.0-rc.0, 1.13.0-rc.1, 1.13.0-rc.2 (preview of 1.13) +- **Monthly Stable Releases** - 2.1.0, 2.2.0....2.x.0. + +Every start of the month, a new minor version is released - stable and recommended for consumers. +Check the [Release Timelines](https://github.com/orgs/SAP/projects/91?pane=info) for up-to-date information (the related content is at the bottom of the page). + +- **Weekly Preview Releases** - 2.x.0-rc.0, 2.x.0-rc.1....2.x.0-rc.z. Every week on Thursday, a new release candidate version is released, considered a preview of the upcoming minor version. It's more up-to-date with the latest development and it's useful for consumers that would like to get frequent updates and test upcoming features in the minor version. - -- **On-demand Patch Releases** - 1.13.1, 1.13.2, 1.13.3 +- **On-demand Patch Releases** - 2.x.1, 2.x.2....2.x.y. Patches are released on-demand for high-priority issues. +### Version 1 + +The UI5 Web Components version 1 is in maintenance until 30 June 2025. + +- **Monthly Patch Releases** - 1.24.1, 1.24.2....1.24.y. + +Every start of the month, a new patch of 1.24 version is released - stable and recommended for consumers that still rely on version 1. **Note:** The changelog of all releases can be found on the [GitHub Release](https://github.com/SAP/ui5-webcomponents/releases) page. From 6c65a517f883940378462a005bc1d251c6acac09 Mon Sep 17 00:00:00 2001 From: ui5-webcomponents-bot Date: Thu, 21 Nov 2024 08:08:21 +0000 Subject: [PATCH 13/31] chore(release): publish v2.5.0-rc.1 [ci skip] --- CHANGELOG.md | 18 ++++++++++++++++++ lerna.json | 2 +- packages/ai/CHANGELOG.md | 8 ++++++++ packages/ai/package.json | 12 ++++++------ packages/base/CHANGELOG.md | 8 ++++++++ packages/base/package.json | 4 ++-- packages/compat/CHANGELOG.md | 11 +++++++++++ packages/compat/package.json | 12 ++++++------ packages/create-package/CHANGELOG.md | 8 ++++++++ packages/create-package/package.json | 2 +- packages/fiori/CHANGELOG.md | 8 ++++++++ packages/fiori/package.json | 12 ++++++------ packages/icons-business-suite/CHANGELOG.md | 8 ++++++++ packages/icons-business-suite/package.json | 6 +++--- packages/icons-tnt/CHANGELOG.md | 8 ++++++++ packages/icons-tnt/package.json | 6 +++--- packages/icons/CHANGELOG.md | 8 ++++++++ packages/icons/package.json | 6 +++--- packages/localization/CHANGELOG.md | 8 ++++++++ packages/localization/package.json | 6 +++--- packages/main/CHANGELOG.md | 17 +++++++++++++++++ packages/main/package.json | 16 ++++++++-------- packages/theming/CHANGELOG.md | 8 ++++++++ packages/theming/package.json | 6 +++--- packages/tools/CHANGELOG.md | 8 ++++++++ packages/tools/package.json | 2 +- packages/website/CHANGELOG.md | 8 ++++++++ packages/website/package.json | 2 +- 28 files changed, 181 insertions(+), 47 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index e0ccc26aa628..97813aa79d97 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,24 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [2.5.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v2.5.0-rc.0...v2.5.0-rc.1) (2024-11-21) + + +### Bug Fixes + +* **ui5-dialog:** width on mobile is not bigger than the phone width ([#10199](https://github.com/SAP/ui5-webcomponents/issues/10199)) ([77af592](https://github.com/SAP/ui5-webcomponents/commit/77af592c238ad53502c09f142d33f7c66c6b0715)), closes [#10000](https://github.com/SAP/ui5-webcomponents/issues/10000) +* **ui5-table:** text cut due to column overflow ([#10193](https://github.com/SAP/ui5-webcomponents/issues/10193)) ([b59d718](https://github.com/SAP/ui5-webcomponents/commit/b59d718dca80bd9a8ee65993ddc2358ecd127024)), closes [#10168](https://github.com/SAP/ui5-webcomponents/issues/10168) + + +### Features + +* **ui5-form:** enable vertical alignment of form items ([#10165](https://github.com/SAP/ui5-webcomponents/issues/10165)) ([13b571b](https://github.com/SAP/ui5-webcomponents/commit/13b571baf0b225dfabc4739be64dd64a34cc5506)) +* **ui5-toolbar:** fixed spacer behavior ([#10177](https://github.com/SAP/ui5-webcomponents/issues/10177)) ([b3625ac](https://github.com/SAP/ui5-webcomponents/commit/b3625ac7426aa592b80f50e15147c18ccc7d2abd)), closes [#10104](https://github.com/SAP/ui5-webcomponents/issues/10104) + + + + + # [2.5.0-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v2.4.1-rc.0...v2.5.0-rc.0) (2024-11-14) diff --git a/lerna.json b/lerna.json index 7a0387337128..86fca71503bc 100644 --- a/lerna.json +++ b/lerna.json @@ -14,7 +14,7 @@ "packages/create-package", "packages/compat" ], - "version": "2.5.0-rc.0", + "version": "2.5.0-rc.1", "command": { "publish": { "allowBranch": "*", diff --git a/packages/ai/CHANGELOG.md b/packages/ai/CHANGELOG.md index a98fb1ade957..1093ec92ba13 100644 --- a/packages/ai/CHANGELOG.md +++ b/packages/ai/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [2.5.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v2.5.0-rc.0...v2.5.0-rc.1) (2024-11-21) + +**Note:** Version bump only for package @ui5/webcomponents-ai + + + + + # [2.5.0-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v2.4.1-rc.0...v2.5.0-rc.0) (2024-11-14) **Note:** Version bump only for package @ui5/webcomponents-ai diff --git a/packages/ai/package.json b/packages/ai/package.json index 7da3f8030768..10b519dc7420 100644 --- a/packages/ai/package.json +++ b/packages/ai/package.json @@ -1,6 +1,6 @@ { "name": "@ui5/webcomponents-ai", - "version": "2.5.0-rc.0", + "version": "2.5.0-rc.1", "description": "UI5 Web Components: webcomponents.ai", "ui5": { "webComponentsPackage": true @@ -45,13 +45,13 @@ "directory": "packages/ai" }, "dependencies": { - "@ui5/webcomponents": "2.5.0-rc.0", - "@ui5/webcomponents-base": "2.5.0-rc.0", - "@ui5/webcomponents-icons": "2.5.0-rc.0", - "@ui5/webcomponents-theming": "2.5.0-rc.0" + "@ui5/webcomponents": "2.5.0-rc.1", + "@ui5/webcomponents-base": "2.5.0-rc.1", + "@ui5/webcomponents-icons": "2.5.0-rc.1", + "@ui5/webcomponents-theming": "2.5.0-rc.1" }, "devDependencies": { - "@ui5/webcomponents-tools": "2.5.0-rc.0", + "@ui5/webcomponents-tools": "2.5.0-rc.1", "chromedriver": "^131.0.0" } } diff --git a/packages/base/CHANGELOG.md b/packages/base/CHANGELOG.md index bbbd1ebaa1a2..3cde9b63c558 100644 --- a/packages/base/CHANGELOG.md +++ b/packages/base/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [2.5.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v2.5.0-rc.0...v2.5.0-rc.1) (2024-11-21) + +**Note:** Version bump only for package @ui5/webcomponents-base + + + + + # [2.5.0-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v2.4.1-rc.0...v2.5.0-rc.0) (2024-11-14) diff --git a/packages/base/package.json b/packages/base/package.json index 5c9526694004..dc28b254234c 100644 --- a/packages/base/package.json +++ b/packages/base/package.json @@ -1,6 +1,6 @@ { "name": "@ui5/webcomponents-base", - "version": "2.5.0-rc.0", + "version": "2.5.0-rc.1", "description": "UI5 Web Components: webcomponents.base", "author": "SAP SE (https://www.sap.com)", "license": "Apache-2.0", @@ -52,7 +52,7 @@ }, "devDependencies": { "@openui5/sap.ui.core": "1.120.17", - "@ui5/webcomponents-tools": "2.5.0-rc.0", + "@ui5/webcomponents-tools": "2.5.0-rc.1", "chromedriver": "^131.0.0", "clean-css": "^5.2.2", "copy-and-watch": "^0.1.5", diff --git a/packages/compat/CHANGELOG.md b/packages/compat/CHANGELOG.md index c5905e41577e..4ae700afbc2b 100644 --- a/packages/compat/CHANGELOG.md +++ b/packages/compat/CHANGELOG.md @@ -3,6 +3,17 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [2.5.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v2.5.0-rc.0...v2.5.0-rc.1) (2024-11-21) + + +### Bug Fixes + +* **ui5-table:** text cut due to column overflow ([#10193](https://github.com/SAP/ui5-webcomponents/issues/10193)) ([b59d718](https://github.com/SAP/ui5-webcomponents/commit/b59d718dca80bd9a8ee65993ddc2358ecd127024)), closes [#10168](https://github.com/SAP/ui5-webcomponents/issues/10168) + + + + + # [2.5.0-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v2.4.1-rc.0...v2.5.0-rc.0) (2024-11-14) diff --git a/packages/compat/package.json b/packages/compat/package.json index 71486bae6150..c61f77c39522 100644 --- a/packages/compat/package.json +++ b/packages/compat/package.json @@ -1,6 +1,6 @@ { "name": "@ui5/webcomponents-compat", - "version": "2.5.0-rc.0", + "version": "2.5.0-rc.1", "description": "UI5 Web Components: webcomponents.compat", "ui5": { "webComponentsPackage": true @@ -45,13 +45,13 @@ "directory": "packages/compat" }, "dependencies": { - "@ui5/webcomponents": "2.5.0-rc.0", - "@ui5/webcomponents-base": "2.5.0-rc.0", - "@ui5/webcomponents-icons": "2.5.0-rc.0", - "@ui5/webcomponents-theming": "2.5.0-rc.0" + "@ui5/webcomponents": "2.5.0-rc.1", + "@ui5/webcomponents-base": "2.5.0-rc.1", + "@ui5/webcomponents-icons": "2.5.0-rc.1", + "@ui5/webcomponents-theming": "2.5.0-rc.1" }, "devDependencies": { - "@ui5/webcomponents-tools": "2.5.0-rc.0", + "@ui5/webcomponents-tools": "2.5.0-rc.1", "chromedriver": "^131.0.0" } } diff --git a/packages/create-package/CHANGELOG.md b/packages/create-package/CHANGELOG.md index f659ae459e9a..2682b2322f35 100644 --- a/packages/create-package/CHANGELOG.md +++ b/packages/create-package/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [2.5.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v2.5.0-rc.0...v2.5.0-rc.1) (2024-11-21) + +**Note:** Version bump only for package @ui5/create-webcomponents-package + + + + + # [2.5.0-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v2.4.1-rc.0...v2.5.0-rc.0) (2024-11-14) **Note:** Version bump only for package @ui5/create-webcomponents-package diff --git a/packages/create-package/package.json b/packages/create-package/package.json index cabf5b005da7..e634bf1dd98a 100644 --- a/packages/create-package/package.json +++ b/packages/create-package/package.json @@ -1,6 +1,6 @@ { "name": "@ui5/create-webcomponents-package", - "version": "2.5.0-rc.0", + "version": "2.5.0-rc.1", "description": "UI5 Web Components: create package", "author": "SAP SE (https://www.sap.com)", "license": "Apache-2.0", diff --git a/packages/fiori/CHANGELOG.md b/packages/fiori/CHANGELOG.md index 6f66b2602aa6..f71caf43ea59 100644 --- a/packages/fiori/CHANGELOG.md +++ b/packages/fiori/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [2.5.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v2.5.0-rc.0...v2.5.0-rc.1) (2024-11-21) + +**Note:** Version bump only for package @ui5/webcomponents-fiori + + + + + # [2.5.0-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v2.4.1-rc.0...v2.5.0-rc.0) (2024-11-14) diff --git a/packages/fiori/package.json b/packages/fiori/package.json index 990af4105c7e..3a30808e718d 100644 --- a/packages/fiori/package.json +++ b/packages/fiori/package.json @@ -1,6 +1,6 @@ { "name": "@ui5/webcomponents-fiori", - "version": "2.5.0-rc.0", + "version": "2.5.0-rc.1", "description": "UI5 Web Components: webcomponents.fiori", "ui5": { "webComponentsPackage": true @@ -53,14 +53,14 @@ "directory": "packages/fiori" }, "dependencies": { - "@ui5/webcomponents": "2.5.0-rc.0", - "@ui5/webcomponents-base": "2.5.0-rc.0", - "@ui5/webcomponents-icons": "2.5.0-rc.0", - "@ui5/webcomponents-theming": "2.5.0-rc.0", + "@ui5/webcomponents": "2.5.0-rc.1", + "@ui5/webcomponents-base": "2.5.0-rc.1", + "@ui5/webcomponents-icons": "2.5.0-rc.1", + "@ui5/webcomponents-theming": "2.5.0-rc.1", "@zxing/library": "^0.21.3" }, "devDependencies": { - "@ui5/webcomponents-tools": "2.5.0-rc.0", + "@ui5/webcomponents-tools": "2.5.0-rc.1", "chromedriver": "^131.0.0", "lit": "^2.0.0" } diff --git a/packages/icons-business-suite/CHANGELOG.md b/packages/icons-business-suite/CHANGELOG.md index a46e9bdd698a..e76f246786f7 100644 --- a/packages/icons-business-suite/CHANGELOG.md +++ b/packages/icons-business-suite/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [2.5.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v2.5.0-rc.0...v2.5.0-rc.1) (2024-11-21) + +**Note:** Version bump only for package @ui5/webcomponents-icons-business-suite + + + + + # [2.5.0-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v2.4.1-rc.0...v2.5.0-rc.0) (2024-11-14) **Note:** Version bump only for package @ui5/webcomponents-icons-business-suite diff --git a/packages/icons-business-suite/package.json b/packages/icons-business-suite/package.json index 941cff4a1c01..73888b00f91d 100644 --- a/packages/icons-business-suite/package.json +++ b/packages/icons-business-suite/package.json @@ -1,6 +1,6 @@ { "name": "@ui5/webcomponents-icons-business-suite", - "version": "2.5.0-rc.0", + "version": "2.5.0-rc.1", "description": "UI5 Web Components: SAP Fiori Tools icon set", "author": "SAP SE (https://www.sap.com)", "license": "Apache-2.0", @@ -28,9 +28,9 @@ "directory": "packages/icons-business-suite" }, "dependencies": { - "@ui5/webcomponents-base": "2.5.0-rc.0" + "@ui5/webcomponents-base": "2.5.0-rc.1" }, "devDependencies": { - "@ui5/webcomponents-tools": "2.5.0-rc.0" + "@ui5/webcomponents-tools": "2.5.0-rc.1" } } diff --git a/packages/icons-tnt/CHANGELOG.md b/packages/icons-tnt/CHANGELOG.md index fd62c77d73b1..a4a0d497edce 100644 --- a/packages/icons-tnt/CHANGELOG.md +++ b/packages/icons-tnt/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [2.5.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v2.5.0-rc.0...v2.5.0-rc.1) (2024-11-21) + +**Note:** Version bump only for package @ui5/webcomponents-icons-tnt + + + + + # [2.5.0-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v2.4.1-rc.0...v2.5.0-rc.0) (2024-11-14) **Note:** Version bump only for package @ui5/webcomponents-icons-tnt diff --git a/packages/icons-tnt/package.json b/packages/icons-tnt/package.json index 3fde8f027be0..d718110c9eae 100644 --- a/packages/icons-tnt/package.json +++ b/packages/icons-tnt/package.json @@ -1,6 +1,6 @@ { "name": "@ui5/webcomponents-icons-tnt", - "version": "2.5.0-rc.0", + "version": "2.5.0-rc.1", "description": "UI5 Web Components: SAP Fiori Tools icon set", "author": "SAP SE (https://www.sap.com)", "license": "Apache-2.0", @@ -28,9 +28,9 @@ "directory": "packages/icons-tnt" }, "dependencies": { - "@ui5/webcomponents-base": "2.5.0-rc.0" + "@ui5/webcomponents-base": "2.5.0-rc.1" }, "devDependencies": { - "@ui5/webcomponents-tools": "2.5.0-rc.0" + "@ui5/webcomponents-tools": "2.5.0-rc.1" } } diff --git a/packages/icons/CHANGELOG.md b/packages/icons/CHANGELOG.md index 8f53c414ae4c..5a2c308a8476 100644 --- a/packages/icons/CHANGELOG.md +++ b/packages/icons/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [2.5.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v2.5.0-rc.0...v2.5.0-rc.1) (2024-11-21) + +**Note:** Version bump only for package @ui5/webcomponents-icons + + + + + # [2.5.0-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v2.4.1-rc.0...v2.5.0-rc.0) (2024-11-14) **Note:** Version bump only for package @ui5/webcomponents-icons diff --git a/packages/icons/package.json b/packages/icons/package.json index e3671bd38caa..f714b703085f 100644 --- a/packages/icons/package.json +++ b/packages/icons/package.json @@ -1,6 +1,6 @@ { "name": "@ui5/webcomponents-icons", - "version": "2.5.0-rc.0", + "version": "2.5.0-rc.1", "description": "UI5 Web Components: webcomponents.SAP-icons", "author": "SAP SE (https://www.sap.com)", "license": "Apache-2.0", @@ -28,9 +28,9 @@ "directory": "packages/icons" }, "dependencies": { - "@ui5/webcomponents-base": "2.5.0-rc.0" + "@ui5/webcomponents-base": "2.5.0-rc.1" }, "devDependencies": { - "@ui5/webcomponents-tools": "2.5.0-rc.0" + "@ui5/webcomponents-tools": "2.5.0-rc.1" } } diff --git a/packages/localization/CHANGELOG.md b/packages/localization/CHANGELOG.md index 10131c11fc96..b3ba3de7b90e 100644 --- a/packages/localization/CHANGELOG.md +++ b/packages/localization/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [2.5.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v2.5.0-rc.0...v2.5.0-rc.1) (2024-11-21) + +**Note:** Version bump only for package @ui5/webcomponents-localization + + + + + # [2.5.0-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v2.4.1-rc.0...v2.5.0-rc.0) (2024-11-14) **Note:** Version bump only for package @ui5/webcomponents-localization diff --git a/packages/localization/package.json b/packages/localization/package.json index 26ab05483ad4..11a13054496e 100644 --- a/packages/localization/package.json +++ b/packages/localization/package.json @@ -1,6 +1,6 @@ { "name": "@ui5/webcomponents-localization", - "version": "2.5.0-rc.0", + "version": "2.5.0-rc.1", "description": "Localization for UI5 Web Components", "author": "SAP SE (https://www.sap.com)", "license": "Apache-2.0", @@ -33,7 +33,7 @@ "@babel/generator": "^7.23.6", "@babel/parser": "^7.23.6", "@openui5/sap.ui.core": "1.120.17", - "@ui5/webcomponents-tools": "2.5.0-rc.0", + "@ui5/webcomponents-tools": "2.5.0-rc.1", "babel-plugin-amd-to-esm": "^2.0.3", "chromedriver": "^131.0.0", "estree-walk": "^2.2.0", @@ -42,6 +42,6 @@ }, "dependencies": { "@types/openui5": "^1.113.0", - "@ui5/webcomponents-base": "2.5.0-rc.0" + "@ui5/webcomponents-base": "2.5.0-rc.1" } } diff --git a/packages/main/CHANGELOG.md b/packages/main/CHANGELOG.md index a5ac29081379..8748d295a429 100644 --- a/packages/main/CHANGELOG.md +++ b/packages/main/CHANGELOG.md @@ -3,6 +3,23 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [2.5.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v2.5.0-rc.0...v2.5.0-rc.1) (2024-11-21) + + +### Bug Fixes + +* **ui5-dialog:** width on mobile is not bigger than the phone width ([#10199](https://github.com/SAP/ui5-webcomponents/issues/10199)) ([77af592](https://github.com/SAP/ui5-webcomponents/commit/77af592c238ad53502c09f142d33f7c66c6b0715)), closes [#10000](https://github.com/SAP/ui5-webcomponents/issues/10000) + + +### Features + +* **ui5-form:** enable vertical alignment of form items ([#10165](https://github.com/SAP/ui5-webcomponents/issues/10165)) ([13b571b](https://github.com/SAP/ui5-webcomponents/commit/13b571baf0b225dfabc4739be64dd64a34cc5506)) +* **ui5-toolbar:** fixed spacer behavior ([#10177](https://github.com/SAP/ui5-webcomponents/issues/10177)) ([b3625ac](https://github.com/SAP/ui5-webcomponents/commit/b3625ac7426aa592b80f50e15147c18ccc7d2abd)), closes [#10104](https://github.com/SAP/ui5-webcomponents/issues/10104) + + + + + # [2.5.0-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v2.4.1-rc.0...v2.5.0-rc.0) (2024-11-14) diff --git a/packages/main/package.json b/packages/main/package.json index 58e4d3bbc8ff..b262dc6d3c1c 100644 --- a/packages/main/package.json +++ b/packages/main/package.json @@ -1,6 +1,6 @@ { "name": "@ui5/webcomponents", - "version": "2.5.0-rc.0", + "version": "2.5.0-rc.1", "description": "UI5 Web Components: webcomponents.main", "ui5": { "webComponentsPackage": true @@ -50,15 +50,15 @@ "directory": "packages/main" }, "dependencies": { - "@ui5/webcomponents-base": "2.5.0-rc.0", - "@ui5/webcomponents-icons": "2.5.0-rc.0", - "@ui5/webcomponents-icons-business-suite": "2.5.0-rc.0", - "@ui5/webcomponents-icons-tnt": "2.5.0-rc.0", - "@ui5/webcomponents-localization": "2.5.0-rc.0", - "@ui5/webcomponents-theming": "2.5.0-rc.0" + "@ui5/webcomponents-base": "2.5.0-rc.1", + "@ui5/webcomponents-icons": "2.5.0-rc.1", + "@ui5/webcomponents-icons-business-suite": "2.5.0-rc.1", + "@ui5/webcomponents-icons-tnt": "2.5.0-rc.1", + "@ui5/webcomponents-localization": "2.5.0-rc.1", + "@ui5/webcomponents-theming": "2.5.0-rc.1" }, "devDependencies": { - "@ui5/webcomponents-tools": "2.5.0-rc.0", + "@ui5/webcomponents-tools": "2.5.0-rc.1", "chromedriver": "^131.0.0", "lit": "^2.0.0" } diff --git a/packages/theming/CHANGELOG.md b/packages/theming/CHANGELOG.md index 40afaecb7217..653e3a19798c 100644 --- a/packages/theming/CHANGELOG.md +++ b/packages/theming/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [2.5.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v2.5.0-rc.0...v2.5.0-rc.1) (2024-11-21) + +**Note:** Version bump only for package @ui5/webcomponents-theming + + + + + # [2.5.0-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v2.4.1-rc.0...v2.5.0-rc.0) (2024-11-14) **Note:** Version bump only for package @ui5/webcomponents-theming diff --git a/packages/theming/package.json b/packages/theming/package.json index 5afb6e1bf213..3a2a0ecd3d54 100644 --- a/packages/theming/package.json +++ b/packages/theming/package.json @@ -1,6 +1,6 @@ { "name": "@ui5/webcomponents-theming", - "version": "2.5.0-rc.0", + "version": "2.5.0-rc.1", "description": "UI5 Web Components: webcomponents.theming", "author": "SAP SE (https://www.sap.com)", "license": "Apache-2.0", @@ -31,10 +31,10 @@ }, "dependencies": { "@sap-theming/theming-base-content": "11.17.1", - "@ui5/webcomponents-base": "2.5.0-rc.0" + "@ui5/webcomponents-base": "2.5.0-rc.1" }, "devDependencies": { - "@ui5/webcomponents-tools": "2.5.0-rc.0", + "@ui5/webcomponents-tools": "2.5.0-rc.1", "globby": "^13.1.1", "json-beautify": "^1.1.1", "nps": "^5.10.0", diff --git a/packages/tools/CHANGELOG.md b/packages/tools/CHANGELOG.md index 98bd9d396964..5af9ecaff6e7 100644 --- a/packages/tools/CHANGELOG.md +++ b/packages/tools/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [2.5.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v2.5.0-rc.0...v2.5.0-rc.1) (2024-11-21) + +**Note:** Version bump only for package @ui5/webcomponents-tools + + + + + # [2.5.0-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v2.4.1-rc.0...v2.5.0-rc.0) (2024-11-14) **Note:** Version bump only for package @ui5/webcomponents-tools diff --git a/packages/tools/package.json b/packages/tools/package.json index 0ccd4ce65cf1..483a8ebf29af 100644 --- a/packages/tools/package.json +++ b/packages/tools/package.json @@ -1,6 +1,6 @@ { "name": "@ui5/webcomponents-tools", - "version": "2.5.0-rc.0", + "version": "2.5.0-rc.1", "description": "UI5 Web Components: webcomponents.tools", "author": "SAP SE (https://www.sap.com)", "license": "Apache-2.0", diff --git a/packages/website/CHANGELOG.md b/packages/website/CHANGELOG.md index e71334a1cb10..18d2880a1405 100644 --- a/packages/website/CHANGELOG.md +++ b/packages/website/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [2.5.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v2.5.0-rc.0...v2.5.0-rc.1) (2024-11-21) + +**Note:** Version bump only for package @ui5/webcomponents-website + + + + + # [2.5.0-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v2.4.1-rc.0...v2.5.0-rc.0) (2024-11-14) diff --git a/packages/website/package.json b/packages/website/package.json index 8e2d53ca2879..45ae0f809fc3 100644 --- a/packages/website/package.json +++ b/packages/website/package.json @@ -1,6 +1,6 @@ { "name": "@ui5/webcomponents-website", - "version": "2.5.0-rc.0", + "version": "2.5.0-rc.1", "private": true, "scripts": { "generate-local-cdn": "rimraf ./local-cdn && node ./build-scripts/local-cdn.mjs", From ee90aeaae00a3a888a8dafae73cb7dba1bf8e51f Mon Sep 17 00:00:00 2001 From: Ivaylo Plashkov Date: Thu, 21 Nov 2024 12:28:37 +0200 Subject: [PATCH 14/31] fix(ui5-tokenizer): adjust touch area for cozy and compact (#10215) * fix(ui5-tokenizer): adjust touch area for cozy and compact * fix(ui5-tokenizer): apply feedback --- packages/main/src/themes/Tokenizer.css | 35 +++++++++---------- .../src/themes/base/Tokenizer-parameters.css | 2 ++ 2 files changed, 19 insertions(+), 18 deletions(-) diff --git a/packages/main/src/themes/Tokenizer.css b/packages/main/src/themes/Tokenizer.css index 2b0f74f06d37..49671ca52812 100644 --- a/packages/main/src/themes/Tokenizer.css +++ b/packages/main/src/themes/Tokenizer.css @@ -9,25 +9,24 @@ :host([multi-line]) { height: auto; +} - .ui5-tokenizer--content { - display: flex; - align-content: baseline; - flex-wrap: wrap; - padding: .25rem; - box-sizing: border-box; - row-gap: .5rem; - column-gap: .25rem; - overflow-y: auto; - overflow-x: hidden; - } - - ::slotted(ui5-token) { - margin: 0; - white-space: nowrap; - text-overflow: ellipsis; - max-width: 100%; - } +:host([multi-line]) .ui5-tokenizer--content { + display: flex; + align-content: baseline; + flex-wrap: wrap; + padding: .25rem; + box-sizing: border-box; + gap: var(--_ui5_tokenizer_gap); + overflow-y: auto; + overflow-x: hidden; +} + +:host([multi-line])::slotted([ui5-token]) { + margin: 0; + white-space: nowrap; + text-overflow: ellipsis; + max-width: 100%; } :host([disabled]) { diff --git a/packages/main/src/themes/base/Tokenizer-parameters.css b/packages/main/src/themes/base/Tokenizer-parameters.css index 181da6d5fef5..3d76ae334150 100644 --- a/packages/main/src/themes/base/Tokenizer-parameters.css +++ b/packages/main/src/themes/base/Tokenizer-parameters.css @@ -1,5 +1,6 @@ :root { --_ui5_tokenizer_padding: 0.3125rem; + --_ui5_tokenizer_gap: 0.625rem 0.25rem; --_ui5_tokenizer_n_more_text_color: var(--sapField_TextColor); --_ui5_tokenizer-popover_offset: .3125rem; } @@ -7,5 +8,6 @@ [data-ui5-compact-size], .ui5-content-density-compact, .sapUiSizeCompact { + --_ui5_tokenizer_gap: 0.375em 0.25rem; --_ui5_tokenizer-popover_offset: .1875rem; } \ No newline at end of file From 7059e0987960f62cd5b8740594b907fa98e1f11c Mon Sep 17 00:00:00 2001 From: Nikola Anachkov <87311182+NakataCode@users.noreply.github.com> Date: Thu, 21 Nov 2024 14:06:23 +0200 Subject: [PATCH 15/31] feat(ui5-list): add Home and End key handling for Load More button (#10206) Improving the keyboard navigation for the ui5-list when the Load More button is present: Home Key: - If the focus is on the Load More button and the Home key is pressed, the focus moves to the first item in the list. End Key: - When pressed once, the focus moves to the last item in the list. - When pressed again while the focus is already on the last item, the focus moves to the Load More button. --- packages/main/src/List.ts | 39 +++++++++++++++++++++++++++++++++++++++ 1 file changed, 39 insertions(+) diff --git a/packages/main/src/List.ts b/packages/main/src/List.ts index 4cb37b61210e..839977fccab9 100644 --- a/packages/main/src/List.ts +++ b/packages/main/src/List.ts @@ -16,6 +16,8 @@ import { isEnter, isTabPrevious, isCtrl, + isEnd, + isHome, } from "@ui5/webcomponents-base/dist/Keys.js"; import DragRegistry from "@ui5/webcomponents-base/dist/util/dragAndDrop/DragRegistry.js"; import { findClosestPosition, findClosestPositionsByKey } from "@ui5/webcomponents-base/dist/util/dragAndDrop/findClosestPosition.js"; @@ -952,6 +954,17 @@ class List extends UI5Element { } _onkeydown(e: KeyboardEvent) { + if (isEnd(e)) { + this._handleEnd(); + e.preventDefault(); + return; + } + + if (isHome(e)) { + this._handleHome(); + return; + } + if (isCtrl(e)) { this._moveItem(e.target as ListItemBase, e); return; @@ -1084,6 +1097,22 @@ class List extends UI5Element { } } + _handleHome() { + if (!this.growsWithButton) { + return; + } + + this.focusFirstItem(); + } + + _handleEnd() { + if (!this.growsWithButton) { + return; + } + + this._shouldFocusGrowingButton(); + } + _onfocusin(e: FocusEvent) { const target = getNormalizedTarget(e.target as HTMLElement); // If the focusin event does not origin from one of the 'triggers' - ignore it. @@ -1315,6 +1344,16 @@ class List extends UI5Element { } } + _shouldFocusGrowingButton() { + const items = this.getItems(); + const lastIndex = items.length - 1; + const currentIndex = items.indexOf(document.activeElement as ListItemBase); + + if (currentIndex !== -1 && currentIndex === lastIndex) { + this.focusGrowingButton(); + } + } + getGrowingButton() { return this.shadowRoot!.querySelector(`[id="${this._id}-growing-btn"]`) as HTMLElement; } From 48b0cc89b36dd859dd07c17021eedf7a99375150 Mon Sep 17 00:00:00 2001 From: ilhan orhan Date: Sat, 23 Nov 2024 14:23:58 +0200 Subject: [PATCH 16/31] 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 @@ - - -
From bbd224990c02928efa3c0c57f68d6ea5c584e3a0 Mon Sep 17 00:00:00 2001 From: Stoyan <88034608+hinzzx@users.noreply.github.com> Date: Mon, 25 Nov 2024 09:48:32 +0200 Subject: [PATCH 17/31] docs: apply feedback comments for ai patterns' contents (#10192) With this change we're improving the content of the AI Acknowledgment and AI Quick Prompt patterns. --- packages/ai/test/pages/Button.html | 4 ++-- .../_samples/patterns/AIAcknowledgement/Basic/sample.html | 5 +++-- .../website/docs/components/patterns/AI QuickPrompt/main.js | 6 +++--- .../docs/components/patterns/AI QuickPrompt/sample.html | 4 ++-- 4 files changed, 10 insertions(+), 9 deletions(-) diff --git a/packages/ai/test/pages/Button.html b/packages/ai/test/pages/Button.html index eb6bf48fa1ec..d4ada3f6c79b 100644 --- a/packages/ai/test/pages/Button.html +++ b/packages/ai/test/pages/Button.html @@ -100,7 +100,7 @@ - + @@ -266,7 +266,7 @@ case "Rephrase": startTextGeneration(button, "reviseGenerating", predefinedTextsRephrased); break; - case "Summarise": + case "Summarize": startTextGeneration(button, "reviseGenerating", predefinedTextsSummarized); break; case "Bulgarian": diff --git a/packages/website/docs/_samples/patterns/AIAcknowledgement/Basic/sample.html b/packages/website/docs/_samples/patterns/AIAcknowledgement/Basic/sample.html index 02f989aace43..b574c6a7919d 100644 --- a/packages/website/docs/_samples/patterns/AIAcknowledgement/Basic/sample.html +++ b/packages/website/docs/_samples/patterns/AIAcknowledgement/Basic/sample.html @@ -11,7 +11,7 @@
- SAP CX AI Toolkit now provides embedded AI services. For more information, see the SAP Help Portal. + [ <Application Help> ] now provides embedded AI ("Artificial Intelligence") services. For more information, see <link>.
Disclaimer @@ -19,8 +19,9 @@ Artificial Intelligence (AI) generates results based on multiple sources. Outputs may contain errors and inaccuracies. Consider reviewing all generated results and adjust as necessary.
-
+
OK + Cancel
diff --git a/packages/website/docs/components/patterns/AI QuickPrompt/main.js b/packages/website/docs/components/patterns/AI QuickPrompt/main.js index cb68b08cf695..85a5605f4fdb 100644 --- a/packages/website/docs/components/patterns/AI QuickPrompt/main.js +++ b/packages/website/docs/components/patterns/AI QuickPrompt/main.js @@ -111,7 +111,7 @@ menu1.addEventListener("item-click", function (e) { case "Clear Error": clearValueState(output); break; - case "Fix Spelling & Grammar": + case "Fix Spelling and Grammar": fixSpellingAndGrammar(button, output); break; case "Generate Error": @@ -126,7 +126,7 @@ menu1.addEventListener("item-click", function (e) { case "Rephrase": startTextGeneration(button, "reviseGenerating", predefinedTextsRephrased); break; - case "Summarise": + case "Summarize": startTextGeneration(button, "reviseGenerating", predefinedTextsSummarized); break; case "Bulgarian": @@ -166,7 +166,7 @@ function setNegativeValueState(output) { output.valueState = "Negative"; const div = document.createElement("div"); div.setAttribute("slot", "valueStateMessage"); - div.textContent = "Spelling or grammar issues found, please try again!"; + div.textContent = "Something went wrong during the generation process. Please try again."; if (!output.querySelector("[slot='valueStateMessage']")) { output.appendChild(div); diff --git a/packages/website/docs/components/patterns/AI QuickPrompt/sample.html b/packages/website/docs/components/patterns/AI QuickPrompt/sample.html index 7ffd9f2fb6e0..415f17258a93 100644 --- a/packages/website/docs/components/patterns/AI QuickPrompt/sample.html +++ b/packages/website/docs/components/patterns/AI QuickPrompt/sample.html @@ -42,12 +42,12 @@ - + - + From e2a6c94d6b4d88db61d85313f2776a092152478d Mon Sep 17 00:00:00 2001 From: Martin Date: Mon, 25 Nov 2024 14:20:29 +0200 Subject: [PATCH 18/31] fix(ui5-input): set value after preventDefault of input event (#10196) FIXES: #9988 --- packages/main/cypress/specs/Input.cy.ts | 32 +++++++++++++++++++++++++ packages/main/src/Input.ts | 9 +++++-- 2 files changed, 39 insertions(+), 2 deletions(-) create mode 100644 packages/main/cypress/specs/Input.cy.ts diff --git a/packages/main/cypress/specs/Input.cy.ts b/packages/main/cypress/specs/Input.cy.ts new file mode 100644 index 000000000000..a909860b5287 --- /dev/null +++ b/packages/main/cypress/specs/Input.cy.ts @@ -0,0 +1,32 @@ +import { html } from "lit"; +import "../../src/Input.js"; +import type Input from "../../src/Input.js"; + +describe("Input Tests", () => { + it("tets input event prevention", () => { + cy.mount(html` + + `); + + cy.get("[ui5-input]") + .as("input"); + + cy.get("@input") + .then($input => { + $input.get(0).addEventListener("input", e => { + e.preventDefault(); + (e.target as Input).value = "test"; + }); + }); + + cy.get("@input") + .realClick(); + + cy.realPress("a"); + + cy.get("@input") + .shadow() + .find("input") + .should("have.value", "test"); + }); +}); diff --git a/packages/main/src/Input.ts b/packages/main/src/Input.ts index 0ac3733bcc5d..85ea43e65c83 100644 --- a/packages/main/src/Input.ts +++ b/packages/main/src/Input.ts @@ -1320,14 +1320,19 @@ class Input extends UI5Element implements SuggestionComponent, IFormInputElement this.value = inputValue; this.typedInValue = inputValue; this.valueBeforeSelectionStart = inputValue; + const valueAfterInput = this.value; if (isUserInput) { // input const inputType = e.inputType || ""; const prevented = !this.fireDecoratorEvent(INPUT_EVENTS.INPUT, { inputType }); if (prevented) { - this.value = valueBeforeInput; - inputRef && (inputRef.value = valueBeforeInput); + // if the value is not changed after preventing the input event, revert the value + if (valueAfterInput === this.value) { + this.value = valueBeforeInput; + } + + inputRef && (inputRef.value = this.value); } // Angular two way data binding From 74616dc7ea533ecbd18265878c90339e10eb9d1b Mon Sep 17 00:00:00 2001 From: Ivaylo Plashkov Date: Tue, 26 Nov 2024 11:12:51 +0200 Subject: [PATCH 19/31] feat(ui5-combobox): adjust arrow-down behavior (#10166) * feat(ui5-combobox): adjust arrow-down behavior * feat(ui5-combobox): correct tests * fix(ui5-combobox): apply feedback --- packages/main/src/ComboBox.ts | 11 +++++--- packages/main/test/specs/ComboBox.spec.js | 31 ++++++++++++----------- 2 files changed, 24 insertions(+), 18 deletions(-) diff --git a/packages/main/src/ComboBox.ts b/packages/main/src/ComboBox.ts index a2982a5ce1b9..fc80e3abd371 100644 --- a/packages/main/src/ComboBox.ts +++ b/packages/main/src/ComboBox.ts @@ -721,7 +721,8 @@ class ComboBox extends UI5Element implements IFormInputElement { this._filteredItems.forEach(item => { if (isInstanceOfComboBoxItemGroup(item)) { - const groupedItems = [item, ...item.items]; + const visibleItems = this.open ? item.items.filter(i => i._isVisible) : item.items; + const groupedItems = [item, ...visibleItems]; allItems.push(...groupedItems); return; } @@ -741,7 +742,7 @@ class ComboBox extends UI5Element implements IFormInputElement { const isOpen = this.open; const currentItem = allItems.find(item => { - return isOpen ? item.focused : item.selected; + return item.selected || item.focused; }); const indexOfItem = currentItem ? allItems.indexOf(currentItem) : -1; @@ -849,18 +850,22 @@ class ComboBox extends UI5Element implements IFormInputElement { return; } - if (indexOfItem === 0 && this.hasValueStateText && isOpen) { + if (indexOfItem === 0 && this.hasValueStateText && isOpen && !this._isValueStateFocused) { this._clearFocus(); this._itemFocused = false; this._isValueStateFocused = true; this._announceValueStateText(); this._filteredItems[0].selected = false; + this.value = this._userTypedValue; + return; } if (this._isValueStateFocused) { this.focused = true; this._isValueStateFocused = false; + this.value = this._userTypedValue; + return; } diff --git a/packages/main/test/specs/ComboBox.spec.js b/packages/main/test/specs/ComboBox.spec.js index 15e0d4253bfc..5e8cc90d76a0 100644 --- a/packages/main/test/specs/ComboBox.spec.js +++ b/packages/main/test/specs/ComboBox.spec.js @@ -237,7 +237,7 @@ describe("General interaction", () => { const combo = await browser.$("#change-cb"); const placeholder = await browser.$("#change-placeholder"); const arrow = await combo.shadow$(".inputIcon"); - + await combo.scrollIntoView(); await arrow.click(); @@ -495,9 +495,9 @@ describe("General interaction", () => { const input = await combo.shadow$("#ui5-combobox-input"); const arrow = await combo.shadow$(".inputIcon"); const popover = await combo.shadow$("ui5-responsive-popover"); - + await arrow.click(); - + let listItems = await getVisibleItems(combo); assert.strictEqual(listItems.length, 4, "Items should be 4"); @@ -713,8 +713,6 @@ describe("Grouping", () => { await input.keys("ArrowDown"); await input.keys("ArrowDown"); await input.keys("ArrowDown"); - await input.keys("ArrowDown"); - await input.keys("ArrowDown"); const groupItem = (await getVisibleGroupItems(combo))[1]; @@ -725,11 +723,11 @@ describe("Grouping", () => { it ("Pressing enter on a group item should not close the picker", async () => { const combo = await browser.$("#combo-grouping"); + const arrow = await combo.shadow$(".inputIcon"); const input = await combo.shadow$("#ui5-combobox-input"); const popover = await combo.shadow$("ui5-responsive-popover"); - await input.click(); - await input.keys("a"); + await arrow.click(); await input.keys("ArrowDown"); await input.keys("Enter"); @@ -763,8 +761,8 @@ describe("Accessibility", async () => { const arrow = await combo.shadow$(".inputIcon"); const input = await combo.shadow$("#ui5-combobox-input"); const invisibleMessageSpan = await browser.$(".ui5-invisiblemessage-polite"); - const itemAnnouncement1 = "List item 1 of 11"; - const itemAnnouncement2 = "List item 2 of 11"; + const itemAnnouncement1 = "List item 10 of 11"; + const itemAnnouncement2 = "List item 11 of 11"; await arrow.click(); @@ -804,8 +802,8 @@ describe("Accessibility", async () => { const arrow = await combo.shadow$(".inputIcon"); const input = await combo.shadow$("#ui5-combobox-input"); const invisibleMessageSpan = await browser.$(".ui5-invisiblemessage-polite"); - const itemAnnouncement1 = "DZ List item 1 of 10"; - const itemAnnouncement2 = "AR List item 2 of 10"; + const itemAnnouncement1 = "CA List item 9 of 10"; + const itemAnnouncement2 = "CL List item 10 of 10"; await arrow.click(); @@ -940,9 +938,9 @@ describe("Accessibility", async () => { const combo = await browser.$("#combo"); const innerInput = await combo.shadow$("input"); const popover = await combo.shadow$("ui5-responsive-popover"); - + await combo.scrollIntoView(); - + assert.strictEqual(await innerInput.getAttribute("aria-controls"), await popover.getAttribute("id"), "aria-controls attribute is correct."); }); }); @@ -1377,6 +1375,7 @@ describe("Keyboard navigation", async () => { const input = await combo.shadow$("#ui5-combobox-input"); const arrow = await combo.shadow$(".inputIcon"); + await combo.scrollIntoView(); await arrow.click(); @@ -1407,8 +1406,10 @@ describe("Keyboard navigation", async () => { assert.notOk(isInVisibleArea, "Item should not be displayed in the viewport"); // click ArrowDown 16 times - await input.keys(["ArrowDown", "ArrowDown", "ArrowDown", "ArrowDown", "ArrowDown", "ArrowDown", "ArrowDown", "ArrowDown"]); - await input.keys(["ArrowDown", "ArrowDown", "ArrowDown", "ArrowDown", "ArrowDown", "ArrowDown", "ArrowDown", "ArrowDown"]); + for (let i = 0; i < 16; i++) { + await browser.keys("ArrowDown"), + await browser.pause(10); + } isInVisibleArea = await browser.executeAsync(async done => { const combobox = document.getElementById("combo-grouping"); From 3bad6ed97de8c27f3dee4a3b143175c0bf481edd Mon Sep 17 00:00:00 2001 From: Georgieva Date: Tue, 26 Nov 2024 11:35:02 +0200 Subject: [PATCH 20/31] docs(ui5-navigation-layout): add samples with Tab Container as subheader (#10238) * fix(ui5-navigation-layout): add samples with Tab Container as subheader Navigation Layout could have horizontal navigation instead of the vertical navigation (which uses the Side Navigation component). This horizontal navigation can be achieved with Tab Container component, used as a subheader, under the Shell Bar component Jira: BGSOFUIRODOPI-3366 --- .../test/pages/NavigationLayoutSubHeader.html | 161 ++++++++++++++++++ .../styles/NavigationLayoutSubHeader.css | 16 ++ packages/main/src/themes/TabContainer.css | 2 +- 3 files changed, 178 insertions(+), 1 deletion(-) create mode 100644 packages/fiori/test/pages/NavigationLayoutSubHeader.html create mode 100644 packages/fiori/test/pages/styles/NavigationLayoutSubHeader.css diff --git a/packages/fiori/test/pages/NavigationLayoutSubHeader.html b/packages/fiori/test/pages/NavigationLayoutSubHeader.html new file mode 100644 index 000000000000..7e8463bb6546 --- /dev/null +++ b/packages/fiori/test/pages/NavigationLayoutSubHeader.html @@ -0,0 +1,161 @@ + + + + + Navigation Layout + + + + + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+

Home

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

+
+
+

Item 1

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

+
+
+

Item 2

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

+
+
+

Item 3

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

+
+
+

Item 4

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

+
+
+

Item 5

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

+
+
+

Item 6

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

+
+
+

Item 7

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

+
+
+

Sub Item 1

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

+
+
+

Sub Item 2

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

+
+
+ + + + + diff --git a/packages/fiori/test/pages/styles/NavigationLayoutSubHeader.css b/packages/fiori/test/pages/styles/NavigationLayoutSubHeader.css new file mode 100644 index 000000000000..49c598604efa --- /dev/null +++ b/packages/fiori/test/pages/styles/NavigationLayoutSubHeader.css @@ -0,0 +1,16 @@ +.content { + padding: 1rem; +} + +.contentItem { + display: none; +} + +.contentItemVisible { + display: block; +} + +/* Styles for Tab Container inside Navigation Layout */ +#tabContainerAsSubheader::part(tabstrip) { + box-shadow: none; +} diff --git a/packages/main/src/themes/TabContainer.css b/packages/main/src/themes/TabContainer.css index 78cabcf4a3eb..c23d495a23c1 100644 --- a/packages/main/src/themes/TabContainer.css +++ b/packages/main/src/themes/TabContainer.css @@ -176,4 +176,4 @@ :host([media-range="XL"]) .ui5-tc__content { padding: 1rem 3rem; -} \ No newline at end of file +} From 3bcfd1d26b8520b73be336558f590e1b89c4d0c3 Mon Sep 17 00:00:00 2001 From: Georgieva Date: Tue, 26 Nov 2024 11:43:29 +0200 Subject: [PATCH 21/31] fix(ui5-radio-button): fix aria-disabled and focus of the read-only radio buttons (#10111) * fix(ui5-radio-button): fix aria-disabled and focus of the read-only radio buttons This pull request fixes two issues: 1. radio buttons cannot be focused using the keyboard 2. radio buttons lack the aria-disabled attribute and the screen reader doesn't announce that they can't be selected fixes: #10025 --- packages/main/src/RadioButton.hbs | 2 +- packages/main/src/RadioButton.ts | 9 +- packages/main/src/RadioButtonGroup.ts | 91 ++++++++++++-------- packages/main/test/pages/RadioButton.html | 5 ++ packages/main/test/specs/RadioButton.spec.js | 11 ++- 5 files changed, 79 insertions(+), 39 deletions(-) diff --git a/packages/main/src/RadioButton.hbs b/packages/main/src/RadioButton.hbs index cff24eed07c8..2804a65a506d 100644 --- a/packages/main/src/RadioButton.hbs +++ b/packages/main/src/RadioButton.hbs @@ -17,7 +17,7 @@ - +
{{#if text}} diff --git a/packages/main/src/RadioButton.ts b/packages/main/src/RadioButton.ts index 27a1edb06366..5dc1d3f37563 100644 --- a/packages/main/src/RadioButton.ts +++ b/packages/main/src/RadioButton.ts @@ -102,8 +102,8 @@ class RadioButton extends UI5Element implements IFormInputElement { /** * Defines whether the component is read-only. * - * **Note:** A read-only component is not editable, - * but still provides visual feedback upon user interaction. + * **Note:** A read-only component isn't editable or selectable. + * However, because it's focusable, it still provides visual feedback upon user interaction. * @default false * @public */ @@ -125,6 +125,9 @@ class RadioButton extends UI5Element implements IFormInputElement { * **Note:** The property value can be changed with user interaction, * either by clicking/tapping on the component, * or by using the Space or Enter key. + * + * **Note:** Only enabled radio buttons can be checked. + * Read-only radio buttons are not selectable, and therefore are always unchecked. * @default false * @formEvents change * @formProperty @@ -406,7 +409,7 @@ class RadioButton extends UI5Element implements IFormInputElement { } get effectiveAriaDisabled() { - return this.disabled ? "true" : null; + return (this.disabled || this.readonly) ? "true" : null; } get ariaLabelText() { diff --git a/packages/main/src/RadioButtonGroup.ts b/packages/main/src/RadioButtonGroup.ts index d7e45c98b69d..5a32b63a906f 100644 --- a/packages/main/src/RadioButtonGroup.ts +++ b/packages/main/src/RadioButtonGroup.ts @@ -1,3 +1,4 @@ +import getActiveElement from "@ui5/webcomponents-base/dist/util/getActiveElement.js"; import type RadioButton from "./RadioButton.js"; class RadioButtonGroup { @@ -83,12 +84,12 @@ class RadioButtonGroup { return; } - const nextItemToSelect = this._nextSelectable(currentItemPosition, group); - if (!nextItemToSelect) { + const nextItemToFocus = this._nextFocusable(currentItemPosition, group); + if (!nextItemToFocus) { return; } - this.updateSelectionInGroup(nextItemToSelect, groupName); + this.updateSelectionInGroup(nextItemToFocus, groupName); } static updateFormValidity(groupName: string) { @@ -117,8 +118,21 @@ class RadioButtonGroup { const hasCheckedRadio = group.some(radioBtn => radioBtn.checked); group.filter(radioBtn => !radioBtn.disabled).forEach((radioBtn, idx) => { + let activeElement: Element | RadioButton = getActiveElement()!; + + if (activeElement.classList.contains("ui5-radio-root")) { + activeElement = activeElement.getRootNode() as Element; + if (activeElement instanceof ShadowRoot) { + activeElement = activeElement.host; + } + } + if (hasCheckedRadio) { - radioBtn._tabIndex = radioBtn.checked ? "0" : "-1"; + if (activeElement.hasAttribute("ui5-radio-button") && (activeElement as RadioButton).readonly) { + radioBtn._tabIndex = activeElement === radioBtn && radioBtn.readonly ? "0" : "-1"; + } else { + radioBtn._tabIndex = radioBtn.checked ? "0" : "-1"; + } } else { radioBtn._tabIndex = idx === 0 ? "0" : "-1"; } @@ -139,12 +153,12 @@ class RadioButtonGroup { return; } - const previousItemToSelect = this._previousSelectable(currentItemPosition, group); - if (!previousItemToSelect) { + const previousItemToFocus = this._previousFocusable(currentItemPosition, group); + if (!previousItemToFocus) { return; } - this.updateSelectionInGroup(previousItemToSelect, groupName); + this.updateSelectionInGroup(previousItemToFocus, groupName); } static selectItem(item: RadioButton, groupName: string) { @@ -155,12 +169,24 @@ class RadioButtonGroup { static updateSelectionInGroup(radioBtnToSelect: RadioButton, groupName: string) { const checkedRadio = this.getCheckedRadioFromGroup(groupName); - if (checkedRadio) { + if (checkedRadio && !radioBtnToSelect.readonly) { this._deselectRadio(checkedRadio); + this.checkedRadios.set(groupName, radioBtnToSelect); } - this._selectRadio(radioBtnToSelect); - this.checkedRadios.set(groupName, radioBtnToSelect); + // the focusable radio buttons are the enabled and the read-only ones, but only the enabled are selectable + if (radioBtnToSelect) { + radioBtnToSelect.focus(); + + if (!radioBtnToSelect.readonly) { + this._selectRadio(radioBtnToSelect); + } else { + // Ensure updateTabOrder is called after focus + setTimeout(() => { + this.updateTabOrder(groupName); + }, 0); + } + } } static _deselectRadio(radioBtn: RadioButton) { @@ -170,51 +196,48 @@ class RadioButtonGroup { } static _selectRadio(radioBtn: RadioButton) { - if (radioBtn) { - radioBtn.focus(); - radioBtn.checked = true; - radioBtn._checked = true; - radioBtn.fireDecoratorEvent("change"); - } + radioBtn.checked = true; + radioBtn._checked = true; + radioBtn.fireDecoratorEvent("change"); } - static _nextSelectable(pos: number, group: RadioButton[]): RadioButton | null { + static _nextFocusable(pos: number, group: RadioButton[]): RadioButton | null { if (!group) { return null; } const groupLength = group.length; - let nextRadioToSelect = null; + let nextRadioToFocus = null; if (pos === groupLength - 1) { - if (group[0].disabled || group[0].readonly) { - return this._nextSelectable(1, group); + if (group[0].disabled) { + return this._nextFocusable(1, group); } - nextRadioToSelect = group[0]; - } else if (group[pos + 1].disabled || group[pos + 1].readonly) { - return this._nextSelectable(pos + 1, group); + nextRadioToFocus = group[0]; + } else if (group[pos + 1].disabled) { + return this._nextFocusable(pos + 1, group); } else { - nextRadioToSelect = group[pos + 1]; + nextRadioToFocus = group[pos + 1]; } - return nextRadioToSelect; + return nextRadioToFocus; } - static _previousSelectable(pos: number, group: RadioButton[]): RadioButton | null { + static _previousFocusable(pos: number, group: RadioButton[]): RadioButton | null { const groupLength = group.length; - let previousRadioToSelect = null; + let previousRadioToFocus = null; if (pos === 0) { - if (group[groupLength - 1].disabled || group[groupLength - 1].readonly) { - return this._previousSelectable(groupLength - 1, group); + if (group[groupLength - 1].disabled) { + return this._previousFocusable(groupLength - 1, group); } - previousRadioToSelect = group[groupLength - 1]; - } else if (group[pos - 1].disabled || group[pos - 1].readonly) { - return this._previousSelectable(pos - 1, group); + previousRadioToFocus = group[groupLength - 1]; + } else if (group[pos - 1].disabled) { + return this._previousFocusable(pos - 1, group); } else { - previousRadioToSelect = group[pos - 1]; + previousRadioToFocus = group[pos - 1]; } - return previousRadioToSelect; + return previousRadioToFocus; } static enforceSingleSelection(radioBtn: RadioButton, groupName: string) { diff --git a/packages/main/test/pages/RadioButton.html b/packages/main/test/pages/RadioButton.html index 59cc111a1264..11376127dcb4 100644 --- a/packages/main/test/pages/RadioButton.html +++ b/packages/main/test/pages/RadioButton.html @@ -27,6 +27,11 @@ + + + + +
diff --git a/packages/main/test/specs/RadioButton.spec.js b/packages/main/test/specs/RadioButton.spec.js index cf4116e1fd38..b5999caa6f4c 100644 --- a/packages/main/test/specs/RadioButton.spec.js +++ b/packages/main/test/specs/RadioButton.spec.js @@ -23,6 +23,7 @@ describe("Rendering", () => { assert.notOk(await readOnlyRadioButtonRoot.getAttribute("aria-readonly"), "aria-readonly is not set to the root level"); assert.strictEqual(await readOnlyRadioButtonInput.getAttribute("readonly"), "true", "internal input is readonly"); + assert.strictEqual(await readOnlyRadioButtonRoot.getAttribute("aria-disabled"), "true", "aria-disabled = true"); }); }); @@ -87,6 +88,7 @@ describe("RadioButton general interaction", () => { const field = await browser.$("#tabField"); const radioButtonPreviouslySelected = await browser.$("#groupRb1"); const radioButtonToBeSelected = await browser.$("#groupRb3"); + const radioButtonToBeSelectedNext = await browser.$("#groupRbReadOnly"); await field.click(); await field.keys("Tab"); @@ -96,7 +98,14 @@ describe("RadioButton general interaction", () => { assert.notOk(await radioButtonPreviouslySelected.getProperty("checked"), "Previously selected item has been de-selected."); assert.ok(await radioButtonToBeSelected.getProperty("checked"), "Pressing ArrowRight selects the next (not disabled) radio in the group."); - await radioButtonToBeSelected.keys("Tab"); + await radioButtonToBeSelected.keys("ArrowRight"); + const activeElementId = await browser.$(await browser.getActiveElement()).getAttribute("id"); + + assert.ok(await radioButtonToBeSelected.getProperty("checked"), "Previously selected item is still selected"); + assert.notOk(await radioButtonToBeSelectedNext.getProperty("checked"), "Read-only radio button is not selected."); + assert.ok(activeElementId === "groupRbReadOnly", " Focus is on the last radio button, which is read-only"); + + await radioButtonToBeSelectedNext.keys("Tab"); }); it("tests radio buttons selection within group with ARROW-LEFT key", async () => { From 98f94957bfbc78f26bc8c8aa8eae417353b21a02 Mon Sep 17 00:00:00 2001 From: SAP LX Lab Service Account Date: Wed, 27 Nov 2024 00:24:10 -0800 Subject: [PATCH 22/31] Translation Delivery (#10259) [INTERNAL] Translation delivery: commit by LX Lab Change-Id: I635a372483881a1858a45d86d0d13beb2dcb0193 --- packages/main/src/i18n/messagebundle_en_US_saptrc.properties | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/main/src/i18n/messagebundle_en_US_saptrc.properties b/packages/main/src/i18n/messagebundle_en_US_saptrc.properties index 6d25d69477b7..1e48ca99a9d9 100644 --- a/packages/main/src/i18n/messagebundle_en_US_saptrc.properties +++ b/packages/main/src/i18n/messagebundle_en_US_saptrc.properties @@ -296,6 +296,8 @@ TOKENIZER_POPOVER_REMOVE=bn0YEn1E+sLzSCHk+3jGag_All items TOKENIZER_SHOW_ALL_ITEMS=516vV/mWdfVu9olV3JhrZA_{0} Items +TOKENIZER_CLEAR_ALL=E5kwB9f60GvHRDcIYdEY9A_Clear All + TREE_ITEM_ARIA_LABEL=EfdKcPq8l5pVMMqYgxkNpQ_Tree Item TREE_ITEM_EXPAND_NODE=ApvHBxS7YmQKM7e9vkCptA_Expand Node From 3473fbf7dd6f97d0de70a540d412c36901455926 Mon Sep 17 00:00:00 2001 From: Stefan Dimitrov <115184100+StefanDimitrov04@users.noreply.github.com> Date: Wed, 27 Nov 2024 16:21:57 +0200 Subject: [PATCH 23/31] fix(ui5-wizard): stacked Wizard Steps are aligned properly (#10250) FIXES: #9779 The solution: Added if statement that checks if there is subtitle-text attribute, so it is not rendered when not needed. --- packages/fiori/src/WizardTab.hbs | 4 +- packages/fiori/test/pages/Wizard.html | 74 +++++++++++++++++++++++++++ 2 files changed, 77 insertions(+), 1 deletion(-) diff --git a/packages/fiori/src/WizardTab.hbs b/packages/fiori/src/WizardTab.hbs index a944fd611b87..d523590c48d7 100644 --- a/packages/fiori/src/WizardTab.hbs +++ b/packages/fiori/src/WizardTab.hbs @@ -20,7 +20,9 @@ {{#if hasTexts}}
{{titleText}}
-
{{subtitleText}}
+ {{#if subtitleText}} +
{{subtitleText}}
+ {{/if}}
{{/if}}
diff --git a/packages/fiori/test/pages/Wizard.html b/packages/fiori/test/pages/Wizard.html index 1e20df44fe81..627dc636f6c4 100644 --- a/packages/fiori/test/pages/Wizard.html +++ b/packages/fiori/test/pages/Wizard.html @@ -673,6 +673,80 @@

Wizard non-standard 3

+

Wizard steps with long titles

+ + +
+ Sed fermentum, mi et tristique ullamcorper, sapien sapien faucibus + sem, quis pretium nibh lorem malesuada diam. Nulla quis arcu aliquet, + feugiat massa semper, volutpat diam. Nam vitae ante posuere, molestie + neque sit amet, dapibus velit. Maecenas eleifend tempor lorem. Mauris + vitae elementum mi, sed eleifend ligula. Nulla tempor vulputate dolor, + nec dignissim quam convallis ut. Praesent vitae commodo felis, ut + iaculis felis. Fusce quis eleifend sapien, eget facilisis nibh. + Suspendisse est velit, scelerisque ut commodo eget, dignissim quis + metus. Cras faucibus consequat gravida. Curabitur vitae quam felis. + Phasellus ac leo eleifend, commodo tortor et, varius quam. Aliquam + erat volutpat. +
+ + +
Content for Overview step.
+ + + +
Content for Details step.
+ + + +
Content for Specifications and Requirements step.
+ + + +
+ Content for User Instructions and Guidelines for Installation step. +
+ + + +
Content for Testing step.
+ + + +
Content for Validation step.
+ + + +
Content for Deployment Plan step.
+ + + +
Content for Maintenance and Support Overview step.
+ + + +
Content for Feedback and Improvements step.
+ + + +
+ Content for Final Review and Conclusion for the Entire Process step. +
+ +