Skip to content

feat(ui5-user-settings): add UserSettingsAppearanceView components #12739

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
SvilenDarvenyashki merged 12 commits into from
Dec 11, 2025
Merged

feat(ui5-user-settings): add UserSettingsAppearanceView components #12739

SvilenDarvenyashki merged 12 commits into from
Dec 11, 2025
+973 −110

Conversation

@SvilenDarvenyashki
Copy link
Contributor

@SvilenDarvenyashki SvilenDarvenyashki commented Nov 30, 2025 •
edited
Loading

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.

<ui5-user-settings-dialog id="settings" header-text="Settings" show-search-field>
    <ui5-user-settings-item icon="palette" text="Appearance" tooltip="Appearance" header-text="Appearance">
       <ui5-user-settings-appearance-view text="Themes">
          <ui5-user-settings-appearance-view-item item-key="custom_blue" text="Custom Theme Blue"></ui5-user-settings-appearance-view-item>
          <ui5-user-settings-appearance-view-item item-key="custom_dark" text="Custom Theme Dark"></ui5-user-settings-appearance-view-item>
          <ui5-user-settings-appearance-view-group header-text="SAP Horizon">
             <ui5-user-settings-appearance-view-item item-key="sap_horizon" text="SAP Morning Horizon"></ui5-user-settings-appearance-view-item>
             <ui5-user-settings-appearance-view-item item-key="sap_horizon_dark" text="SAP Evening Horizon"></ui5-user-settings-appearance-view-item>
             <ui5-user-settings-appearance-view-item item-key="sap_horizon_hcb" text="SAP Horizon High Contrast Black"></ui5-user-settings-appearance-view-item>
             <ui5-user-settings-appearance-view-item item-key="sap_horizon_hcw" text="SAP Horizon High Contrast White"></ui5-user-settings-appearance-view-item>
          </ui5-user-settings-appearance-view-group>
          <ui5-user-settings-appearance-view-group header-text="SAP Quartz">
             <ui5-user-settings-appearance-view-item item-key="sap_fiori_3" text="SAP Quartz Light"></ui5-user-settings-appearance-view-item>
             <ui5-user-settings-appearance-view-item item-key="sap_fiori_3_dark" text="SAP Quartz Dark"></ui5-user-settings-appearance-view-item>
             <ui5-user-settings-appearance-view-item item-key="sap_fiori_3_hcb" text="SAP Quartz High Contrast Black"></ui5-user-settings-appearance-view-item>
             <ui5-user-settings-appearance-view-item item-key="sap_fiori_3_hcw" text="SAP Quartz High Contrast White"></ui5-user-settings-appearance-view-item>
          </ui5-user-settings-appearance-view-group>
       </ui5-user-settings-appearance-view>
    </ui5-user-settings-item>
</ui5-user-settings-dialog>
image

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)

Slots

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

Events
selection-change - Fired when a theme item is selected
detail.item: UserSettingsAppearanceViewItem - The selected appearance view item
cancelable: true - Event can be prevented with preventDefault()

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

fiori/test/pages/UserSettingsDialog.html

@ui5-webcomponents-bot
Copy link
Collaborator

ui5-webcomponents-bot commented Dec 3, 2025 •
edited
Loading

🧹 Preview deployment cleaned up: https://pr-12739--ui5-webcomponents.netlify.app

@ui5-webcomponents-bot ui5-webcomponents-bot temporarily deployed to preview December 3, 2025 12:29 Inactive
LilyanaOviPe
LilyanaOviPe reviewed Dec 3, 2025
View reviewed changes
Copy link
Contributor

@LilyanaOviPe LilyanaOviPe left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good to me.

adrian-bobev
adrian-bobev reviewed Dec 5, 2025
View reviewed changes
packages/fiori/src/UserSettingsAppearanceView.ts Outdated
* Fired when a theme is selected.
* @public
*/
@event("theme-selected")
Copy link
Contributor

@adrian-bobev adrian-bobev Dec 5, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

as discussed we can check with the core team about the naming of this event

packages/fiori/src/UserSettingsAppearanceView.ts Outdated
* @public
*/
@property()
selectedItemKey = "";
Copy link
Contributor

@adrian-bobev adrian-bobev Dec 5, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

its better to remove this property and use the selected property of the appearance items.

Check for reference UserSettingsDialog and UserSettingsItem - the same logic applies there

packages/fiori/src/UserSettingsAppearanceView.ts
@slot({
type: HTMLElement,
})
additionalContent?: Array<HTMLElement>;
Copy link
Contributor

@adrian-bobev adrian-bobev Dec 5, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

maybe only content (again check with the core team)

Copy link
Contributor Author

@SvilenDarvenyashki SvilenDarvenyashki Dec 8, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I set it to additionalContent, because it is not the default slot while content might lead to users thinking it is the default slot.

packages/fiori/src/UserSettingsAppearanceView.ts Outdated
this._getAllItems().forEach(item => {
item.selected = item.itemKey === this.selectedItemKey;
});
}
Copy link
Contributor

@adrian-bobev adrian-bobev Dec 5, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

THis might be removed when selected of the items is utilizaed

packages/fiori/src/UserSettingsAppearanceView.ts Outdated
return allItems;
}

_handleItemSelected = (e: CustomEvent) => {
Copy link
Contributor

@adrian-bobev adrian-bobev Dec 5, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

give a type of the custom event. In that way the item will have type and no casting will be needed. Check again settings item:

e: CustomEvent

packages/fiori/src/UserSettingsAppearanceViewItem.ts
* @public
*/
@property()
itemKey = "";
Copy link
Contributor

@adrian-bobev adrian-bobev Dec 5, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

when you remove the selected item key maybe this will be remove as well

Copy link
Contributor Author

@SvilenDarvenyashki SvilenDarvenyashki Dec 8, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is used to determine the theme

@ui5-webcomponents-bot ui5-webcomponents-bot temporarily deployed to preview December 8, 2025 12:47 Inactive
@dobromiraboycheva
Copy link
Contributor

dobromiraboycheva commented Dec 9, 2025

please update the demo samples: packages/website/docs/_samples/fiori/UserSettingsDialog/Basic/sample.html and packages/website/docs/_samples/patterns/UXCIntegration/Basic/sample.html

@SvilenDarvenyashki
Copy link
Contributor Author

SvilenDarvenyashki commented Dec 9, 2025

please update the demo samples: packages/website/docs/_samples/fiori/UserSettingsDialog/Basic/sample.html and packages/website/docs/_samples/patterns/UXCIntegration/Basic/sample.html

Thanks for the reminder.

@ui5-webcomponents-bot ui5-webcomponents-bot temporarily deployed to preview December 9, 2025 09:08 Inactive
@ui5-webcomponents-bot ui5-webcomponents-bot temporarily deployed to preview December 9, 2025 12:15 Inactive
@ui5-webcomponents-bot ui5-webcomponents-bot temporarily deployed to preview December 9, 2025 13:38 Inactive
@ui5-webcomponents-bot ui5-webcomponents-bot temporarily deployed to preview December 10, 2025 07:27 Inactive
@ui5-webcomponents-bot ui5-webcomponents-bot temporarily deployed to preview December 10, 2025 12:06 Inactive
@ui5-webcomponents-bot ui5-webcomponents-bot temporarily deployed to preview December 10, 2025 12:15 Inactive
@ui5-webcomponents-bot ui5-webcomponents-bot temporarily deployed to preview December 10, 2025 13:39 Inactive
@SvilenDarvenyashki SvilenDarvenyashki merged commit 5f8bf37 into main Dec 11, 2025
14 checks passed
@SvilenDarvenyashki SvilenDarvenyashki deleted the user-settings-appearance-view branch December 11, 2025 08:08
@ui5-webcomponents-bot ui5-webcomponents-bot temporarily deployed to preview December 11, 2025 08:08 Inactive
@ui5-webcomponents-bot
Copy link
Collaborator

ui5-webcomponents-bot commented Dec 18, 2025

🎉 This PR is included in version v2.18.0-rc.1 🎉

The release is available on v2.18.0-rc.1

Your semantic-release bot 📦🚀

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

Reviewers

@adrian-bobev adrian-bobev adrian-bobev left review comments

@LilyanaOviPe LilyanaOviPe LilyanaOviPe left review comments

@dobromiraboycheva dobromiraboycheva dobromiraboycheva approved these changes

Assignees

No one assigned

Labels

released

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

6 participants

@SvilenDarvenyashki @ui5-webcomponents-bot @dobromiraboycheva @adrian-bobev @LilyanaOviPe