feat(ui5-user-settings-item): introduce option to hide icon (#12512)

chore(ui5-user-settings-item): icon can now be hidden

Co-authored-by: Dobromira Boycheva <[email protected]>
Co-authored-by: ilhan orhan <[email protected]>

Author: 3 people

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(<UserSettingsDialog open>
+			<UserSettingsItem icon="" text="Setting with no icon">
+			</UserSettingsItem>
+			<UserSettingsItem icon="bell" text="Setting with bell icon">
+			</UserSettingsItem>
+		</UserSettingsDialog>);
+		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(<UserSettingsDialog open>
+			<UserSettingsItem icon="" text="Setting with no icon">
+			</UserSettingsItem>
+			<UserSettingsItem icon="" text="Second Setting with no icon">
+			</UserSettingsItem>
+		</UserSettingsDialog>);
+		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(<UserSettingsDialog open>
 			<UserSettingsItem headerText="Header title | Setting 3">

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 => {

packages/fiori/src/UserSettingsDialogTemplate.tsx

@@ -62,7 +62,19 @@ export default function UserSettingsDialogTemplate(this: UserSettingsDialog) {
 function renderList(this: UserSettingsDialog, items: Array<UserSettingsItem> = [], classes: string) {
 	return <List accessibleRole="Menu" onItemClick={this._handleItemClick} class={classes} separators="None">
 		{items.map(item => (
-			<ListItemStandard id={`setting-${item._id}`} icon={item._icon} tooltip={item._tooltip} ref={this.captureRef.bind(item)} selected={item.selected} disabled={item.disabled} accessibleName={item.ariaLabelledByText} type={this._showSettingWithNavigation ? "Navigation" : "Active"}>{item.text}</ListItemStandard>
+			<ListItemStandard
+				class={!item._icon && item._siblingsWithIcon ? "ui5-user-settings-item-no-icon" : ""}
+				id={`setting-${item._id}`}
+				icon={!item._icon && item._siblingsWithIcon ? undefined : item._icon}
+				tooltip={item._tooltip}
+				ref={this.captureRef.bind(item)}
+				selected={item.selected}
+				disabled={item.disabled}
+				accessibleName={item.ariaLabelledByText}
+				type={this._showSettingWithNavigation ? "Navigation" : "Active"}
+			>
+				{item.text}
+			</ListItemStandard>
 		))}
 	</List>;
 }

packages/fiori/src/UserSettingsItem.ts

@@ -183,6 +183,12 @@ class UserSettingsItem extends UI5Element {
 	})
 	pages!: Array<UserSettingsView>;
 
+	/**
+	 * Indicates whether any of the element siblings have icon.
+	 */
+	@property({ type: Boolean, noAttribute: true })
+	_siblingsWithIcon = false;
+
 	/**
 	 * @private
 	 */

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