feat(ui5-user-settings): add UserSettingsAppearanceView components #12739
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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