From 61e1fab708c930d535ec91d357499129c202e1fa Mon Sep 17 00:00:00 2001 From: Dobromira Boycheva Date: Tue, 7 Jul 2026 13:11:44 +0300 Subject: [PATCH 1/2] fix(ui5-user-settings-dialog): align dialog with latest design spec --- .../cypress/specs/UserSettingsDialog.cy.tsx | 11 +- ...UserSettingsAppearanceViewItemTemplate.tsx | 4 +- .../UserSettingsAppearanceViewTemplate.tsx | 4 +- .../fiori/src/UserSettingsDialogTemplate.tsx | 2 +- .../fiori/src/UserSettingsItemTemplate.tsx | 2 +- .../src/themes/UserSettingsAccountView.css | 2 + .../themes/UserSettingsAppearanceViewItem.css | 13 +- .../fiori/src/themes/UserSettingsDialog.css | 5 + .../fiori/src/themes/UserSettingsItem.css | 5 +- .../fiori/src/themes/UserSettingsView.css | 21 +- .../fiori/test/pages/UserSettingsDialog.html | 271 +++++++++--------- .../fiori/UserSettingsDialog/Basic/main.css | 38 +-- .../fiori/UserSettingsDialog/Basic/main.js | 32 +-- .../UserSettingsDialog/Basic/sample.html | 224 +++++++-------- .../patterns/UXCIntegration/Basic/main.css | 31 +- .../patterns/UXCIntegration/Basic/main.js | 28 +- .../patterns/UXCIntegration/Basic/sample.html | 220 +++++++------- 17 files changed, 405 insertions(+), 508 deletions(-) diff --git a/packages/fiori/cypress/specs/UserSettingsDialog.cy.tsx b/packages/fiori/cypress/specs/UserSettingsDialog.cy.tsx index c87368277ae2e..7c06af057480e 100644 --- a/packages/fiori/cypress/specs/UserSettingsDialog.cy.tsx +++ b/packages/fiori/cypress/specs/UserSettingsDialog.cy.tsx @@ -35,6 +35,7 @@ describe("Initial rendering", () => { cy.get("@dialog").should("exist"); cy.get("@dialog").find("[ui5-title]").contains("Settings"); cy.get("@dialog").find("[ui5-title]").should("have.length", 1); + cy.get("@dialog").find("[ui5-title]").should("have.attr", "size", "H5"); }); it("tests show-search-field provided", () => { @@ -180,6 +181,7 @@ describe("Initial rendering", () => { cy.get("@settingItem").shadow().find("[ui5-title]").as("title"); cy.get("@title").should("have.length", 1); cy.get("@title").contains("Header title | Setting 3"); + cy.get("@title").should("have.attr", "size", "H5"); }); it("tests setting tabs", () => { @@ -1047,10 +1049,11 @@ describe("Appearance view", () => { cy.get("@appearanceView").find("[ui5-user-settings-appearance-view-item]").as("item"); cy.get("@item").shadow().find("[ui5-avatar]").as("avatar"); cy.get("@avatar").should("exist"); - cy.get("@avatar").should("have.length", 2); // Two avatars: one for cozy, one for compact mode - cy.get("@avatar").first().should("have.attr", "icon", "palette"); - cy.get("@avatar").first().should("have.attr", "shape", "Square"); - cy.get("@avatar").first().should("have.attr", "color-scheme", "Accent7"); + cy.get("@avatar").should("have.length", 1); + cy.get("@avatar").should("have.attr", "icon", "palette"); + cy.get("@avatar").should("have.attr", "shape", "Square"); + cy.get("@avatar").should("have.attr", "color-scheme", "Accent7"); + cy.get("@avatar").should("have.attr", "size", "S"); }); it("tests appearance view item text displayed", () => { diff --git a/packages/fiori/src/UserSettingsAppearanceViewItemTemplate.tsx b/packages/fiori/src/UserSettingsAppearanceViewItemTemplate.tsx index 8c471d0ca9267..f6963e63612ed 100644 --- a/packages/fiori/src/UserSettingsAppearanceViewItemTemplate.tsx +++ b/packages/fiori/src/UserSettingsAppearanceViewItemTemplate.tsx @@ -13,9 +13,7 @@ function listItemContent(this: UserSettingsAppearanceViewItem) { return (
- {/* Two avatars are rendered for different content density modes - CSS controls visibility */} - - +
{this.text}
diff --git a/packages/fiori/src/UserSettingsAppearanceViewTemplate.tsx b/packages/fiori/src/UserSettingsAppearanceViewTemplate.tsx index 74370164c8e05..276e910a655fc 100644 --- a/packages/fiori/src/UserSettingsAppearanceViewTemplate.tsx +++ b/packages/fiori/src/UserSettingsAppearanceViewTemplate.tsx @@ -1,6 +1,6 @@ import type UserSettingsAppearanceView from "./UserSettingsAppearanceView.js"; import List from "@ui5/webcomponents/dist/List.js"; -import Title from "@ui5/webcomponents/dist/Title.js"; +import ListItemGroupHeader from "@ui5/webcomponents/dist/ListItemGroupHeader.js"; export default function UserSettingsAppearanceViewTemplate(this: UserSettingsAppearanceView) { return ( @@ -8,7 +8,7 @@ export default function UserSettingsAppearanceViewTemplate(this: UserSettingsApp diff --git a/packages/fiori/src/UserSettingsDialogTemplate.tsx b/packages/fiori/src/UserSettingsDialogTemplate.tsx index 09a31411afda9..a2dfa2124a2a2 100644 --- a/packages/fiori/src/UserSettingsDialogTemplate.tsx +++ b/packages/fiori/src/UserSettingsDialogTemplate.tsx @@ -28,7 +28,7 @@ export default function UserSettingsDialogTemplate(this: UserSettingsDialog) { - - + + + + @@ -104,114 +133,102 @@ -
- Display Language: - - - - - - - - - - - - - - - Region: - - - - - - - - - - - - - - Date Format: - - - - - - - - - - - - Time Format: - - - - - - - - Time Zone: - - - - - - - - - - - - - - - - - - - - - - - - - - - Currency: - - - - - - - - - - - - - - - - - - - - - - - Number Format: - - - - - - - + + Close to apply your chosen language – the page will reload. + +
+
+ Display Language + + Browser Language + English (United Kingdom) + English (United States) + French (France) + French (Canada) + German (Germany) + German (Switzerland) + Japanese + Portuguese (Brazil) + Simplified Chinese (China) + Spanish (Mexico) + Spanish (Spain) + +
+
+ Region + + United Kingdom + United States + France + Canada + Germany + Switzerland + Japan + Brazil + China + Mexico + Spain + +
+
+ Date Format + + MM/DD/YYYY + MM.DD.YYYY + MM-DD-YYYY + DD/MM/YYYY + DD.MM.YYYY + DD-MM-YYYY + YYYY/MM/DD + YYYY.MM.DD + YYYY-MM-DD + +
+
+ Time Format + + 24 Hour + 12 Hour + +
+
+ Time Zone + + Pacific Time (UTC -08:00) + Mountain Time (UTC -07:00) + Central Time (UTC -06:00) + Eastern Standard Time (UTC -05:00) + Atlantic Time (UTC -04:00) + Greenwich Mean Time (UTC +00:00) + Central European Time (UTC +01:00) + India Standard Time (UTC +05:30) + Japan Standard Time (UTC +09:00) + +
+
+ Currency + + USD – United States Dollar + EUR – Euro + GBP – British Pound + JPY – Japanese Yen + CHF – Swiss Franc + CAD – Canadian Dollar + AUD – Australian Dollar + CNY – Chinese Yuan Renminbi + INR – Indian Rupee + +
+
+ Number Format + + 1.234,56 + 1,234.56 + 1 234,56 + 1'234.56 + 1234,56 + +
@@ -490,22 +507,6 @@ - - Changing the display language to [New Language] will update the language across the user interface. - - - - - - - - Text Direction diff --git a/packages/website/docs/_samples/patterns/UXCIntegration/Basic/main.css b/packages/website/docs/_samples/patterns/UXCIntegration/Basic/main.css index 798b5b5c534c6..f62922c4a7519 100644 --- a/packages/website/docs/_samples/patterns/UXCIntegration/Basic/main.css +++ b/packages/website/docs/_samples/patterns/UXCIntegration/Basic/main.css @@ -80,23 +80,36 @@ margin: 0 1rem 0 1rem; } -.language-region-container{ +#language-region-strip { + display: block; + margin-bottom: 1rem; +} + +.language-region-form { display: flex; - min-height: 2.5rem; - align-item:flex-start; flex-direction: column; - gap: 0.563rem; + width: 100%; } -.language-region-label{ +.language-region-row { display: flex; - flex: 1 0 0; + flex-direction: column; width: 100%; } -.language-region-control{ - display: flex; - gap: 0.188rem; +.language-region-row > ui5-label, +.language-region-row > [ui5-label] { + padding: 0.5rem 0 0.125rem 0; +} + +.language-region-row:first-child > ui5-label, +.language-region-row:first-child > [ui5-label] { + padding-top: 0; +} + +.language-region-row > ui5-select, +.language-region-row > [ui5-select] { + display: block; width: 100%; } /* End User Settings Dialog */ \ No newline at end of file diff --git a/packages/website/docs/_samples/patterns/UXCIntegration/Basic/main.js b/packages/website/docs/_samples/patterns/UXCIntegration/Basic/main.js index 7efb76a2e87ca..bd700649dca4f 100644 --- a/packages/website/docs/_samples/patterns/UXCIntegration/Basic/main.js +++ b/packages/website/docs/_samples/patterns/UXCIntegration/Basic/main.js @@ -19,6 +19,9 @@ import "@ui5/webcomponents/dist/RadioButton.js"; import "@ui5/webcomponents/dist/CheckBox.js"; import "@ui5/webcomponents/dist/Toast.js"; import "@ui5/webcomponents/dist/Switch.js"; +import "@ui5/webcomponents/dist/MessageStrip.js"; +import "@ui5/webcomponents/dist/Form.js"; +import "@ui5/webcomponents/dist/FormItem.js"; import "@ui5/webcomponents-fiori/dist/ShellBar.js"; @@ -287,12 +290,6 @@ const settingsDialogItems = [...document.getElementsByTagName("ui5-user-settings const appearanceView = document.querySelector("ui5-user-settings-appearance-view"); //Language and Region -const languageRegion = document.getElementById("language-region-container"); -const language = document.getElementById("language"); -const regionSettings = [...languageRegion.querySelectorAll(".language-region-control")]; -const additionalDialog = document.getElementById("additionalDialog"); -const additionalDialogClosers = [...additionalDialog.querySelectorAll(".dialogCloser")]; - const mobileSecondPage = document.getElementById("mobile-second-page"); const mobile1Button = document.getElementById("mobile1-button"); const mobile2Button = document.getElementById("mobile2-button"); @@ -302,23 +299,6 @@ const resetPersonalization = document.getElementById("resetPersonalization"); const toastReset = document.getElementById("toastReset"); const toastResetAll = document.getElementById("toastResetAll"); -//Language and Region -language.addEventListener("selection-change", function (event) { - additionalDialog.open = true; -}); - -additionalDialogClosers.forEach(btn => { - btn.addEventListener("click", () => { - additionalDialog.open = false; - }); -}); - -regionSettings.forEach((settingsItem) => { - settingsItem.addEventListener("selection-change", function (event) { - console.log(`Selection change: ${event?.detail.item?.text}`, event.detail); - }); -}); - // Theme change appearanceView.addEventListener("selection-change", (e) => { const selectedItem = e.detail.item; @@ -339,7 +319,7 @@ mobile2Button.addEventListener("click", function () { }); resetAllButton.addEventListener("click", function () { - additionalDialog.open = true; + toastReset.open = true; }); resetPersonalization.addEventListener("click", function () { diff --git a/packages/website/docs/_samples/patterns/UXCIntegration/Basic/sample.html b/packages/website/docs/_samples/patterns/UXCIntegration/Basic/sample.html index ea21c8cee935c..b49ba763ee5a6 100644 --- a/packages/website/docs/_samples/patterns/UXCIntegration/Basic/sample.html +++ b/packages/website/docs/_samples/patterns/UXCIntegration/Basic/sample.html @@ -336,114 +336,102 @@ -
- Display Language - - - - - - - - - - - - - - - Region - - - - - - - - - - - - - - Date Format - - - - - - - - - - - - Time Format - - - - - - - - Time Zone - - - - - - - - - - - - - - - - - - - - - - - - - - - Currency - - - - - - - - - - - - - - - - - - - - - - - Number Format - - - - - - - + + Close to apply your chosen language – the page will reload. + +
+
+ Display Language + + Browser Language + English (United Kingdom) + English (United States) + French (France) + French (Canada) + German (Germany) + German (Switzerland) + Japanese + Portuguese (Brazil) + Simplified Chinese (China) + Spanish (Mexico) + Spanish (Spain) + +
+
+ Region + + United Kingdom + United States + France + Canada + Germany + Switzerland + Japan + Brazil + China + Mexico + Spain + +
+
+ Date Format + + MM/DD/YYYY + MM.DD.YYYY + MM-DD-YYYY + DD/MM/YYYY + DD.MM.YYYY + DD-MM-YYYY + YYYY/MM/DD + YYYY.MM.DD + YYYY-MM-DD + +
+
+ Time Format + + 24 Hour + 12 Hour + +
+
+ Time Zone + + Pacific Time (UTC -08:00) + Mountain Time (UTC -07:00) + Central Time (UTC -06:00) + Eastern Standard Time (UTC -05:00) + Atlantic Time (UTC -04:00) + Greenwich Mean Time (UTC +00:00) + Central European Time (UTC +01:00) + India Standard Time (UTC +05:30) + Japan Standard Time (UTC +09:00) + +
+
+ Currency + + USD – United States Dollar + EUR – Euro + GBP – British Pound + JPY – Japanese Yen + CHF – Swiss Franc + CAD – Canadian Dollar + AUD – Australian Dollar + CNY – Chinese Yuan Renminbi + INR – Indian Rupee + +
+
+ Number Format + + 1.234,56 + 1,234.56 + 1 234,56 + 1'234.56 + 1234,56 + +
@@ -481,22 +469,6 @@ - - Changing the display language to [New Language] will update the language across the user interface. - - - - - - - - From 43a76445805600bbe1b4adb46a3b8023cee02d7b Mon Sep 17 00:00:00 2001 From: Dobromira Boycheva Date: Thu, 9 Jul 2026 15:00:43 +0300 Subject: [PATCH 2/2] docs(ui5-user-settings-dialog): sync React sample with design-aligned HTML Update the Basic React sample to match the design-aligned HTML sample: add the Custom appearance theme group, replace the Language & Region ComboBoxes with a MessageStrip + Select form, and drop the obsolete Change Display Language dialog. --- .../fiori/UserSettingsDialog/Basic/sample.tsx | 594 +++++------------- 1 file changed, 162 insertions(+), 432 deletions(-) diff --git a/packages/website/docs/_samples/fiori/UserSettingsDialog/Basic/sample.tsx b/packages/website/docs/_samples/fiori/UserSettingsDialog/Basic/sample.tsx index 9e166d85cc9a6..3a7b6686ff041 100644 --- a/packages/website/docs/_samples/fiori/UserSettingsDialog/Basic/sample.tsx +++ b/packages/website/docs/_samples/fiori/UserSettingsDialog/Basic/sample.tsx @@ -17,17 +17,15 @@ import UserSettingsViewClass from "@ui5/webcomponents-fiori/dist/UserSettingsVie import AvatarClass from "@ui5/webcomponents/dist/Avatar.js"; import ButtonClass from "@ui5/webcomponents/dist/Button.js"; import CheckBoxClass from "@ui5/webcomponents/dist/CheckBox.js"; -import ComboBoxClass from "@ui5/webcomponents/dist/ComboBox.js"; -import ComboBoxItemClass from "@ui5/webcomponents/dist/ComboBoxItem.js"; -import DialogClass from "@ui5/webcomponents/dist/Dialog.js"; +import SelectClass from "@ui5/webcomponents/dist/Select.js"; +import OptionClass from "@ui5/webcomponents/dist/Option.js"; import IconClass from "@ui5/webcomponents/dist/Icon.js"; import LabelClass from "@ui5/webcomponents/dist/Label.js"; +import MessageStripClass from "@ui5/webcomponents/dist/MessageStrip.js"; import PanelClass from "@ui5/webcomponents/dist/Panel.js"; import SwitchClass from "@ui5/webcomponents/dist/Switch.js"; import TextClass from "@ui5/webcomponents/dist/Text.js"; import ToastClass from "@ui5/webcomponents/dist/Toast.js"; -import ToolbarClass from "@ui5/webcomponents/dist/Toolbar.js"; -import ToolbarButtonClass from "@ui5/webcomponents/dist/ToolbarButton.js"; import "@ui5/webcomponents-icons/dist/action-settings.js"; import "@ui5/webcomponents-icons/dist/user-settings.js"; import "@ui5/webcomponents-icons/dist/person-placeholder.js"; @@ -58,25 +56,22 @@ const UserSettingsView = createReactComponent(UserSettingsViewClass); const Avatar = createReactComponent(AvatarClass); const Button = createReactComponent(ButtonClass); const CheckBox = createReactComponent(CheckBoxClass); -const ComboBox = createReactComponent(ComboBoxClass); -const ComboBoxItem = createReactComponent(ComboBoxItemClass); -const Dialog = createReactComponent(DialogClass); +const Select = createReactComponent(SelectClass); +const Option = createReactComponent(OptionClass); const Icon = createReactComponent(IconClass); const Label = createReactComponent(LabelClass); +const MessageStrip = createReactComponent(MessageStripClass); const Panel = createReactComponent(PanelClass); const Switch = createReactComponent(SwitchClass); const Text = createReactComponent(TextClass); const Toast = createReactComponent(ToastClass); -const Toolbar = createReactComponent(ToolbarClass); -const ToolbarButton = createReactComponent(ToolbarButtonClass); function App() { - const additionalDialogRef = useRef(null); - const mobileSecondPageRef = useRef(null); - const toastResetRef = useRef(null); - const toastResetAllRef = useRef(null); - const userMenuRef = useRef(null); - const settingsDialogRef = useRef(null); + const mobileSecondPageRef = useRef(null); + const toastResetRef = useRef(null); + const toastResetAllRef = useRef(null); + const userMenuRef = useRef(null); + const settingsDialogRef = useRef(null); const handleShellbarUi5ProfileClick = useCallback( (e: UI5CustomEvent) => { @@ -101,7 +96,7 @@ function App() { switch (item) { case "setting": if (settingsDialogRef.current) { - settingsDialogRef.current!.open = true; + settingsDialogRef.current.open = true; } break; } @@ -118,14 +113,8 @@ function App() { }, []); const handleResetAllButtonClick = useCallback(() => { - if (additionalDialogRef.current) { - additionalDialogRef.current!.open = true; - } - }, []); - - const handleLanguageSelectionChange = useCallback(() => { - if (additionalDialogRef.current) { - additionalDialogRef.current!.open = true; + if (toastResetRef.current) { + toastResetRef.current.open = true; } }, []); @@ -141,42 +130,29 @@ function App() { [], ); - const handleDialogCloserClick = useCallback(() => { - if (additionalDialogRef.current) { - additionalDialogRef.current!.open = false; - } - }, []); - - const handleSettingsItemSelectionChange = useCallback( - (e: UI5CustomEvent) => { - console.log(`Selection change: ${e?.detail.item?.text}`, e.detail); - }, - [], - ); - const handleMobile1ButtonClick = useCallback(() => { if (mobileSecondPageRef.current) { - mobileSecondPageRef.current!.selected = true; - mobileSecondPageRef.current!.text = "iOS"; + mobileSecondPageRef.current.selected = true; + mobileSecondPageRef.current.text = "iOS"; } }, []); const handleMobile2ButtonClick = useCallback(() => { if (mobileSecondPageRef.current) { - mobileSecondPageRef.current!.selected = true; - mobileSecondPageRef.current!.text = "Android"; + mobileSecondPageRef.current.selected = true; + mobileSecondPageRef.current.text = "Android"; } }, []); const handleResetPersonalizationClick = useCallback(() => { if (toastResetRef.current) { - toastResetRef.current!.open = true; + toastResetRef.current.open = true; } }, []); const handleResetAllClick = useCallback(() => { if (toastResetAllRef.current) { - toastResetAllRef.current!.open = true; + toastResetAllRef.current.open = true; } }, []); @@ -222,64 +198,41 @@ function App() { return ( <>