From 8890887c44e11052548720189afe506d9fc1d6b4 Mon Sep 17 00:00:00 2001
From: Philipp Pracht <philipp.pracht@sap.com>
Date: Wed, 15 Jan 2025 14:58:25 +0100
Subject: [PATCH] iconClassAttribute for sap-icons (#4102)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* iconClassAttribute for sap-icons

* add cypress tests for iconClassAttribute

---------

Co-authored-by: Waldemar Mazurek <waldemar.mazurek@sap.com>
Co-authored-by: Vincent Öller <vincentt.oeller@gmail.com>
---
 core/src/UserSettingsDialog.svelte            |  2 +-
 .../1-angular/user_settings_dialog.cy.js      | 24 ++++++++++++++++++-
 .../src/luigi-config/extended/userSettings.js |  3 ++-
 3 files changed, 26 insertions(+), 3 deletions(-)

diff --git a/core/src/UserSettingsDialog.svelte b/core/src/UserSettingsDialog.svelte
index 4039dc75bf..5bd3b583d0 100644
--- 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
index 1c5e938933..60c74dc595 100644
--- 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
index 7c38703111..fdf9898904 100644
--- 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: {