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/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 ( <>