Skip to content

fix(ui5-user-settings-dialog): align dialog with latest design spec #13805

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

Open
dobromiraboycheva wants to merge 3 commits into
base: main
Choose a base branch
from
Open

fix(ui5-user-settings-dialog): align dialog with latest design spec #13805

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
61e1fab
fix(ui5-user-settings-dialog): align dialog with latest design spec
dobromiraboycheva Jul 7, 2026
1e3e594
Merge branch 'main' into user-settings-dialog-design-alignment
dobromiraboycheva Jul 9, 2026
43a7644
docs(ui5-user-settings-dialog): sync React sample with design-aligned…
dobromiraboycheva Jul 9, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 7 additions & 4 deletions packages/fiori/cypress/specs/UserSettingsDialog.cy.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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", () => {
Expand Down Expand Up @@ -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", () => {
Expand Down Expand Up @@ -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", () => {
Expand Down
4 changes: 1 addition & 3 deletions packages/fiori/src/UserSettingsAppearanceViewItemTemplate.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,9 +13,7 @@ function listItemContent(this: UserSettingsAppearanceViewItem) {
return (
<div class="list-item">
<div class="item-left">
{/* Two avatars are rendered for different content density modes - CSS controls visibility */}
<Avatar class="avatar-cozy" shape="Square" icon={this.icon} color-scheme={this.colorScheme} size={AvatarSize.S}></Avatar>
<Avatar class="avatar-compact" shape="Square" icon={this.icon} color-scheme={this.colorScheme} size={AvatarSize.XS}></Avatar>
<Avatar shape="Square" icon={this.icon} color-scheme={this.colorScheme} size={AvatarSize.S}></Avatar>
<div class="item-texts">
<span class="item-title">{this.text}</span>
</div>
Expand Down
4 changes: 2 additions & 2 deletions packages/fiori/src/UserSettingsAppearanceViewTemplate.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
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 (
<div class="ui5-user-settings-view-container">
<div class="ui5-user-settings-view">
<slot name="additionalContent"></slot>
<List class="user-settings-appearance-view-list" onItemClick={this._handleItemClick} data-sap-ui-fastnavgroup="false">
{this.text && <Title slot="header" level="H3" class="user-settings-appearance-view-list-header">{this.text}</Title>}
{this.text && <ListItemGroupHeader class="user-settings-appearance-view-top-header">{this.text}</ListItemGroupHeader>}
<slot></slot>
</List>
</div>
Expand Down
2 changes: 1 addition & 1 deletion packages/fiori/src/UserSettingsDialogTemplate.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ export default function UserSettingsDialogTemplate(this: UserSettingsDialog) {
<div class="ui5-user-settings-side" data-sap-ui-fastnavgroup="true" aria-orientation="vertical" aria-roledescription={this.ariaRoleDescList}>
<div class="ui5-user-settings-side-header">
{this.headerText &&
<Title level="H1" size="H4">{this.headerText}</Title>
<Title level="H1" size="H5">{this.headerText}</Title>
}
{this.showSearchField &&
<Input placeholder="Search" type="Search" class="ui5-user-settings-side-search"
Expand Down
2 changes: 1 addition & 1 deletion packages/fiori/src/UserSettingsItemTemplate.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ export default function UserSettingsItemTemplate(this: UserSettingsItem) {
<div class="ui5-user-settings-item-header">
<Button icon="nav-back" design="Transparent" onClick={this._handleBackButtonClick} class="ui5-user-settings-item-collapse-btn" style={{ display: this._shouldShowBackButton ? "block" : "" }}></Button>

<Title level="H2" size="H4">{this._hasSelectedPageView ? this._selectedPageView.text : this.headerText}</Title>
<Title level="H2" size="H5">{this._hasSelectedPageView ? this._selectedPageView.text : this.headerText}</Title>
</div>
</header>

Expand Down
2 changes: 2 additions & 0 deletions packages/fiori/src/themes/UserSettingsAccountView.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
display: flex;
align-items: center;
flex-direction: column;
margin-top: 2.5rem;
}

.ui5-user-settings-account-avatar {
Expand All @@ -16,6 +17,7 @@
.ui5-user-settings-account-title {
text-align: center;
margin-top: 0.25rem;
margin-bottom: 0.25rem;
font-family: var(--sapFontFamily);
font-size: var(--sapFontLargeSize);
color: var(--sapTextColor);
Expand Down
13 changes: 3 additions & 10 deletions packages/fiori/src/themes/UserSettingsAppearanceViewItem.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,22 +13,15 @@
flex: 1;
}

.avatar-cozy {
display: var(--_ui5_user_settings_avatar_cozy_display);
}

.avatar-compact {
display: var(--_ui5_user_settings_avatar_compact_display);
}

.item-texts {
display: flex;
flex-direction: column;
}

.item-title {
font-weight: 600;
font-size: var(--_ui5_list_item_title_size);
font-family: var(--sapFontFamily);
font-size: var(--sapFontLargeSize);
font-weight: normal;
color: var(--sapList_TextColor);
margin: 0.5rem;
}
Expand Down
5 changes: 5 additions & 0 deletions packages/fiori/src/themes/UserSettingsDialog.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,13 +32,18 @@
flex-direction: column;
gap: 0.5rem;
padding: 1rem;
border-bottom: 0.0625rem solid var(--sapList_BorderColor);
}

.ui5-user-settings-side-search {
width: 100%;
}

.ui5-user-settings-side-items,
.ui5-user-settings-side-fixedItems {
border-top: 0;
}

.ui5-user-settings-side-fixedItems {
border-top: 0.0625rem solid var(--sapList_BorderColor);
}
Expand Down
5 changes: 3 additions & 2 deletions packages/fiori/src/themes/UserSettingsItem.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,9 +12,10 @@
display: flex;
gap: 0.5rem;
align-items: center;
padding: 1rem 1rem 0.5rem;
padding: 1rem;
font-size: var(--sapFontHeader5Size);
font-family: var(--sapFontBoldFamily);
border-bottom: 0.0625rem solid var(--sapList_BorderColor);
}

.ui5-user-settings-item-loading-container {
Expand Down Expand Up @@ -72,6 +73,6 @@

@container (width > 37.5rem) {
.ui5-user-settings-item-header {
padding-inline: 2rem;
padding-inline: 1rem;
}
}
21 changes: 4 additions & 17 deletions packages/fiori/src/themes/UserSettingsView.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,23 +6,10 @@
padding: 1rem;
}

@container (width > 37.5rem) {
.ui5-user-settings-view {
padding-inline: 2rem;
}
.user-settings-appearance-view-top-header {
margin-top: 0.5rem;
}

.user-settings-appearance-view-list-header {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
box-sizing: border-box;
font-size: var(--sapFontHeader4Size);
font-family: var(--sapFontFamily);
color: var(--sapGroup_TitleTextColor);
height: 3rem;
line-height: 3rem;
padding: 0 1rem;
background-color: var(--sapGroup_TitleBackground);
border-bottom: 1px solid var(--sapGroup_TitleBorderColor);
.user-settings-appearance-view-top-header::part(title) {
font-size: var(--sapFontHeader5Size);
}
Loading
Loading