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%);