Skip to content

Commit 33b962f

Browse files
SvilenDarvenyashkidobromiraboychevailhan007
authored
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]>
1 parent bbd6067 commit 33b962f

File tree

5 files changed

+53
-2
lines changed

5 files changed

+53
-2
lines changed

packages/fiori/cypress/specs/UserSettingsDialog.cy.tsx

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -131,6 +131,34 @@ describe("Initial rendering", () => {
131131
cy.get("@settingItem").should("have.attr", "icon", "accessibility");
132132
});
133133

134+
it('tests setting no icon', () => {
135+
cy.mount(<UserSettingsDialog open>
136+
<UserSettingsItem icon="" text="Setting with no icon">
137+
</UserSettingsItem>
138+
<UserSettingsItem icon="bell" text="Setting with bell icon">
139+
</UserSettingsItem>
140+
</UserSettingsDialog>);
141+
cy.get("[ui5-user-settings-dialog]").as("settings");
142+
cy.get("@settings").should("exist");
143+
cy.get("@settings").find("[ui5-user-settings-item]").as("settingItem");
144+
cy.get("@settingItem").should("exist");
145+
cy.get("@settingItem").should("have.attr", "icon", "");
146+
cy.get("@settings").shadow().find("[ui5-li].ui5-user-settings-item-no-icon").should("exist");
147+
cy.get("@settings").shadow().find("[ui5-li].ui5-user-settings-item-no-icon").should("not.have.attr", "icon");
148+
});
149+
150+
it('tests when all settings does not have icon we do not add css class', () => {
151+
cy.mount(<UserSettingsDialog open>
152+
<UserSettingsItem icon="" text="Setting with no icon">
153+
</UserSettingsItem>
154+
<UserSettingsItem icon="" text="Second Setting with no icon">
155+
</UserSettingsItem>
156+
</UserSettingsDialog>);
157+
cy.get("[ui5-user-settings-dialog]").as("settings");
158+
cy.get("@settings").should("exist");
159+
cy.get("@settings").shadow().find("[ui5-li].ui5-user-settings-item-no-icon").should("not.exist");
160+
});
161+
134162
it("tests setting header-text", () => {
135163
cy.mount(<UserSettingsDialog open>
136164
<UserSettingsItem headerText="Header title | Setting 3">

packages/fiori/src/UserSettingsDialog.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -198,7 +198,7 @@ class UserSettingsDialog extends UI5Element {
198198
const searchValue = this._searchValue.toLowerCase();
199199
this._filteredItems = [];
200200
this._filteredFixedItems = [];
201-
201+
const siblingsWithIcon = this.items.some(item => !!item.icon);
202202
this.items.forEach(item => {
203203
if (item.text.toLowerCase().includes(searchValue)) {
204204
this._filteredItems.push(item);
@@ -207,6 +207,7 @@ class UserSettingsDialog extends UI5Element {
207207
if (item.selected) {
208208
this._selectedSetting = item;
209209
}
210+
item._siblingsWithIcon = siblingsWithIcon;
210211
});
211212

212213
this.fixedItems.forEach(item => {

packages/fiori/src/UserSettingsDialogTemplate.tsx

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,19 @@ export default function UserSettingsDialogTemplate(this: UserSettingsDialog) {
6262
function renderList(this: UserSettingsDialog, items: Array<UserSettingsItem> = [], classes: string) {
6363
return <List accessibleRole="Menu" onItemClick={this._handleItemClick} class={classes} separators="None">
6464
{items.map(item => (
65-
<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>
65+
<ListItemStandard
66+
class={!item._icon && item._siblingsWithIcon ? "ui5-user-settings-item-no-icon" : ""}
67+
id={`setting-${item._id}`}
68+
icon={!item._icon && item._siblingsWithIcon ? undefined : item._icon}
69+
tooltip={item._tooltip}
70+
ref={this.captureRef.bind(item)}
71+
selected={item.selected}
72+
disabled={item.disabled}
73+
accessibleName={item.ariaLabelledByText}
74+
type={this._showSettingWithNavigation ? "Navigation" : "Active"}
75+
>
76+
{item.text}
77+
</ListItemStandard>
6678
))}
6779
</List>;
6880
}

packages/fiori/src/UserSettingsItem.ts

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -183,6 +183,12 @@ class UserSettingsItem extends UI5Element {
183183
})
184184
pages!: Array<UserSettingsView>;
185185

186+
/**
187+
* Indicates whether any of the element siblings have icon.
188+
*/
189+
@property({ type: Boolean, noAttribute: true })
190+
_siblingsWithIcon = false;
191+
186192
/**
187193
* @private
188194
*/

packages/fiori/src/themes/UserSettingsDialog.css

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,10 @@
6565
border-radius: 0;
6666
}
6767

68+
.ui5-user-settings-item-no-icon::part(title) {
69+
padding-left: 1.875rem; /* width of icon */
70+
}
71+
6872
@media screen and (width >= 37.5rem) and (width < 64rem) {
6973
.ui5-user-settings-dialog:not([on-phone]) {
7074
max-width: min(40rem, 80%);

0 commit comments

Comments
 (0)