iconClassAttribute for sap-icons (#4102)

* iconClassAttribute for sap-icons * add cypress tests for iconClassAttribute --------- Co-authored-by: Waldemar Mazurek <[email protected]> Co-authored-by: Vincent Öller <[email protected]>
SAP · Jan 15, 2025 · 8890887 · 8890887
1 parent 3b26d91
commit 8890887
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 3 deletions.
diff --git a/core/src/UserSettingsDialog.svelte b/core/src/UserSettingsDialog.svelte
@@ -321,7 +321,7 @@
                     <a tabindex="-1" class="fd-list__link" href="#">
                       {#if userSettingsGroupProperty[1].icon}
                         {#if hasOpenUIicon(userSettingsGroupProperty[1])}
-                          <span class="fd-list__thumbnail">
+                          <span class="fd-list__thumbnail {userSettingsGroupProperty[1].iconClassAttribute || ''}">
                             <i role="presentation" class={getSapIconStr(userSettingsGroupProperty[1].icon)} />
                           </span>
                         {:else}

diff --git a/test/e2e-test-application/cypress/e2e/tests/1-angular/user_settings_dialog.cy.js b/test/e2e-test-application/cypress/e2e/tests/1-angular/user_settings_dialog.cy.js
@@ -11,7 +11,7 @@ describe('Navigation', () => {
     //Check Dialog is open
     cy.get('.lui-usersettings-dialog').should('exist');
 
-    //Check we have 5 left bar items
+    //Check we have 6 left bar items
     cy.get('.lui-us-list')
       .find('[data-testid="us-navigation-item"]')
       .should('have.length', 6);
@@ -39,6 +39,28 @@ describe('Navigation', () => {
     openSettingsDialogBox();
   });
 
+  it('check iconClassAttribute', () => {
+    cy.get('[data-testid="us-navigation-item"]')
+      .eq(0) // User Account
+      .get('span')
+      .should('have.class', 'fd-avatar fd-avatar--s fd-avatar--circle fd-avatar--thumbnail lui-avatar-space');
+
+    cy.get('[data-testid="us-navigation-item"]')
+      .eq(1) // Language & Region
+      .get('span')
+      .should('have.class', 'fd-image--s fd-list__thumbnail');  // default value, no iconClassAttribute specified
+
+    cy.get('[data-testid="us-navigation-item"]')
+      .eq(2) // Privacy
+      .get('span')
+      .should('have.class', 'SAP-icon-iconClassAttribute-Test');
+
+    cy.get('[data-testid="us-navigation-item"]')
+      .eq(3) // Theming
+      .get('span')
+      .should('have.class', 'fd-list__thumbnail');  // default value, no iconClassAttribute specified
+  });
+
   describe('User Account Configuration', () => {
     const setting_name = 'name_' + new Date().getTime();
     const setting_date_format = 'df_' + new Date().getTime();

diff --git a/test/e2e-test-application/src/luigi-config/extended/userSettings.js b/test/e2e-test-application/src/luigi-config/extended/userSettings.js
@@ -71,6 +71,7 @@ class UserSettings {
       label: 'Privacy',
       title: 'Privacy',
       icon: 'private',
+      iconClassAttribute: 'SAP-icon-iconClassAttribute-Test',
       settings: {
         policy: {
           type: 'string',
@@ -88,7 +89,7 @@ class UserSettings {
     theming: {
       label: 'Theming',
       title: 'Theming',
-      icon: 'private',
+      icon: 'palette',
       viewUrl: 'http://localhost:8090/customUserSettingsMf.html',
       settings: {
         theme: {