diff --git a/packages/fiori/cypress/specs/UserSettingsDialog.cy.tsx b/packages/fiori/cypress/specs/UserSettingsDialog.cy.tsx
index 4aa5e9d41c8b..c2bae2d1f8ab 100644
--- a/packages/fiori/cypress/specs/UserSettingsDialog.cy.tsx
+++ b/packages/fiori/cypress/specs/UserSettingsDialog.cy.tsx
@@ -131,6 +131,34 @@ describe("Initial rendering", () => {
cy.get("@settingItem").should("have.attr", "icon", "accessibility");
});
+ it('tests setting no icon', () => {
+ cy.mount(
+
+
+
+
+ );
+ cy.get("[ui5-user-settings-dialog]").as("settings");
+ cy.get("@settings").should("exist");
+ cy.get("@settings").find("[ui5-user-settings-item]").as("settingItem");
+ cy.get("@settingItem").should("exist");
+ cy.get("@settingItem").should("have.attr", "icon", "");
+ cy.get("@settings").shadow().find("[ui5-li].ui5-user-settings-item-no-icon").should("exist");
+ cy.get("@settings").shadow().find("[ui5-li].ui5-user-settings-item-no-icon").should("not.have.attr", "icon");
+ });
+
+ it('tests when all settings does not have icon we do not add css class', () => {
+ cy.mount(
+
+
+
+
+ );
+ cy.get("[ui5-user-settings-dialog]").as("settings");
+ cy.get("@settings").should("exist");
+ cy.get("@settings").shadow().find("[ui5-li].ui5-user-settings-item-no-icon").should("not.exist");
+ });
+
it("tests setting header-text", () => {
cy.mount(
diff --git a/packages/fiori/src/UserSettingsDialog.ts b/packages/fiori/src/UserSettingsDialog.ts
index 1ba01cb1d6a3..a28a658b004f 100644
--- a/packages/fiori/src/UserSettingsDialog.ts
+++ b/packages/fiori/src/UserSettingsDialog.ts
@@ -198,7 +198,7 @@ class UserSettingsDialog extends UI5Element {
const searchValue = this._searchValue.toLowerCase();
this._filteredItems = [];
this._filteredFixedItems = [];
-
+ const siblingsWithIcon = this.items.some(item => !!item.icon);
this.items.forEach(item => {
if (item.text.toLowerCase().includes(searchValue)) {
this._filteredItems.push(item);
@@ -207,6 +207,7 @@ class UserSettingsDialog extends UI5Element {
if (item.selected) {
this._selectedSetting = item;
}
+ item._siblingsWithIcon = siblingsWithIcon;
});
this.fixedItems.forEach(item => {
diff --git a/packages/fiori/src/UserSettingsDialogTemplate.tsx b/packages/fiori/src/UserSettingsDialogTemplate.tsx
index cd950006cec6..43d87df4ab8e 100644
--- a/packages/fiori/src/UserSettingsDialogTemplate.tsx
+++ b/packages/fiori/src/UserSettingsDialogTemplate.tsx
@@ -62,7 +62,19 @@ export default function UserSettingsDialogTemplate(this: UserSettingsDialog) {
function renderList(this: UserSettingsDialog, items: Array = [], classes: string) {
return
{items.map(item => (
- {item.text}
+
+ {item.text}
+
))}
;
}
diff --git a/packages/fiori/src/UserSettingsItem.ts b/packages/fiori/src/UserSettingsItem.ts
index 00235e1533d7..9f6d513fba97 100644
--- a/packages/fiori/src/UserSettingsItem.ts
+++ b/packages/fiori/src/UserSettingsItem.ts
@@ -183,6 +183,12 @@ class UserSettingsItem extends UI5Element {
})
pages!: Array;
+ /**
+ * Indicates whether any of the element siblings have icon.
+ */
+ @property({ type: Boolean, noAttribute: true })
+ _siblingsWithIcon = false;
+
/**
* @private
*/
diff --git a/packages/fiori/src/themes/UserSettingsDialog.css b/packages/fiori/src/themes/UserSettingsDialog.css
index 28f4a1385426..ef42c44ff989 100644
--- a/packages/fiori/src/themes/UserSettingsDialog.css
+++ b/packages/fiori/src/themes/UserSettingsDialog.css
@@ -65,6 +65,10 @@
border-radius: 0;
}
+.ui5-user-settings-item-no-icon::part(title) {
+ padding-left: 1.875rem; /* width of icon */
+}
+
@media screen and (width >= 37.5rem) and (width < 64rem) {
.ui5-user-settings-dialog:not([on-phone]) {
max-width: min(40rem, 80%);