feat(ui5-user-settings-account-view): introduce new component UserSettingsAccountView

[dobromiraboycheva]

The change introduces the component - UserSettingsAccountView , designed to simplify building user account settings within the UserSettingsDialog It follows the latest design guidelines and provides a ready-to-use account view that can be easily integrated or extended.

Overview

The UserSettingsAccountView component provides a prebuilt user account view for the UserSettingsDialog, simplifying implementation and delivers a structured, predefined layout for presenting user account details, ensuring a consistent design.

Structure

• UserSettingsAccountView (ui5-user-settings-account-view) is an extension of UserSettingsView offers a ready-to-use, fixed account design that aligns with the latest UI patterns and ensures a consistent user experience.

<ui5-user-settings-dialog id="settings" header-text="Settings" show-search-field>
    <ui5-user-settings-item icon="user-settings" text="User Account" tooltip="User Account" header-text="User Account">
		<ui5-user-settings-account-view id="account" show-manage-account="true">
			<ui5-user-menu-account slot="account"
								   avatar-src="./img/man_avatar.png"
								   title-text="Alain Chevalier"
								   subtitle-text="[email protected]"
								   description="Delivery Manager, SAP SE">
			</ui5-user-menu-account>

				<ui5-panel fixed class="ua-panel">
					<ui5-text>
						Reset your personalization settings for the launchpad (such as theme, language, user activities, and home page content).
					</ui5-text>
				</ui5-panel>
		</ui5-user-settings-account-view>
	</ui5-user-settings-item>
</ui5-user-settings-dialog>

API

UserSettingsView

props

• text?: string
• selected: boolean //false
• secondary: boolean //false
• showManageAccount: boolean //false

slot

• content!: Array;
• account?: Array;

Test Pages

fiori/test/pages/UserSettingsDialog.html

[ui5-webcomponents-bot]

🚀 Deployed on https://pr-12658--ui5-webcomponents-preview.netlify.app