Skip to content

Conversation

@SvilenDarvenyashki
Copy link
Contributor

@SvilenDarvenyashki SvilenDarvenyashki commented Nov 30, 2025

The change introduces three new components - UserSettingsAppearanceView, UserSettingsAppearanceViewItem, and UserSettingsAppearanceViewGroup - designed to simplify building theme/appearance selection within the UserSettingsDialog. They follow the latest design guidelines and provide a ready-to-use appearance settings view that can be easily integrated or extended.

Overview
The UserSettingsAppearanceView components provide a prebuilt theme selection interface for the UserSettingsDialog, simplifying implementation and delivering a structured, predefined layout for presenting theme options with visual indicators and grouping capabilities.

Structure
UserSettingsAppearanceView (ui5-user-settings-appearance-view) is an extension of UserSettingsView that offers a ready-to-use, fixed appearance selection design aligned with the latest UI patterns, ensuring a consistent user experience for theme management.

UserSettingsAppearanceViewItem (ui5-user-settings-appearance-view-item) extends ListItemCustom to represent individual theme options with avatar icons, text labels, and selection states.

UserSettingsAppearanceViewGroup (ui5-user-settings-appearance-view-group) extends ListItemGroup to organize related themes under descriptive headers.

API
UserSettingsAppearanceView
Extends: UserSettingsView

Props:

text?: string - Header text for the appearance view
selected: boolean - Whether the view is currently selected (default: false)
secondary: boolean - Whether this is a secondary view (default: false)
selectedItemKey?: string - The key of the currently selected theme item (default: "")
Slots:

items!: Array<UserSettingsAppearanceViewItem | UserSettingsAppearanceViewGroup> - Theme items and groups (default slot)
additionalContent?: Array - Additional content displayed above the theme list
Events:

theme-selected - Fired when a theme is selected
detail.selectedTheme: string - The item-key of the selected theme
UserSettingsAppearanceViewItem
Extends: ListItemCustom

Props:

itemKey?: string - Unique identifier for the theme (default: "")
text?: string - Display text for the theme (default: "")
icon?: string - Icon name for the avatar (default: "product")
colorScheme?: string - Avatar color scheme (default: "Accent7")
selected: boolean - Whether the item is selected (managed by parent)
UserSettingsAppearanceViewGroup
Extends: ListItemGroup

Props:

headerText?: string - Group header text
Slots:

items!: Array - Appearance items within the group (default slot)
Test Pages
UserSettingsDialog

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants