Wrong order of elements in productswitcher item (#4058)

SAP · Dec 13, 2024 · 5b395a6 · 5b395a6
1 parent 91e0edb
commit 5b395a6
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 13 deletions.
diff --git a/container/cypress/e2e/test-app/compound/create-dynamic-compound-container.cy.js b/container/cypress/e2e/test-app/compound/create-dynamic-compound-container.cy.js
@@ -77,23 +77,22 @@ describe('create luigi-compound-container dynamically', () => {
     cy.get('.content').invoke('append', scriptCode);
     cy.get('luigi-compound-container')
       .shadow()
-      .then($container => {
+      .then(($container) => {
         return cy
           .wrap($container)
           .find(
             'luigi-wc-68747470733a2f2f6c75696769776562636f6d706f6e656e74732e6769746c61622e696f2f6e6573746564322e6a73'
           )
           .shadow();
       })
-      .then($innerContainer => {
+      .then(($innerContainer) => {
         cy.wrap($innerContainer)
           .get(
             'luigi-wc-68747470733a2f2f6c75696769776562636f6d706f6e656e74732e6769746c61622e696f2f6c756967692d77632d6d66652f6d61696e2e6a73'
           )
           .should('exist')
           .shadow()
-          .find('section')
-          .should('contain.text', 'This is a luigi micro frontend, based on web components.');
+          .should('not.exist'); // ShadowRoot in 'closed' mode
       });
   });
   it('luigi compound container invalid JSON in context property', () => {
@@ -171,9 +170,7 @@ describe('create luigi-compound-container dynamically', () => {
     cy.visit(tetsPage);
     cy.get('.content').invoke('append', scriptCode);
 
-    cy.get('luigi-compound-container')
-      .shadow()
-      .should('not.exist');
+    cy.get('luigi-compound-container').shadow().should('not.exist');
   });
   it('luigi compound container with no shadow dom', () => {
     const scriptCode = `
@@ -249,8 +246,6 @@ describe('create luigi-compound-container dynamically', () => {
     cy.on('window:alert', stub);
     cy.visit(tetsPage);
     cy.get('.content').invoke('append', scriptCode);
-    cy.get('luigi-compound-container')
-      .shadow()
-      .should('not.exist');
+    cy.get('luigi-compound-container').shadow().should('not.exist');
   });
 });
diff --git a/core/src/navigation/MobileTopNavDropDown.svelte b/core/src/navigation/MobileTopNavDropDown.svelte
@@ -52,7 +52,7 @@
                   data-e2e="mobile-topnav-item"
                   data-testid={NavigationHelpers.getTestId(node)}
                 >
-                  <div class="lui-product-switch__icon">
+                  <div class="lui-product-switch__icon fd-product-switch__icon sap-icon">
                     {#if hasOpenUIicon(node)}
                       <i class="sap-icon {node.icon && hasOpenUIicon(node) ? getSapIconStr(node.icon) : ''}" />
                     {:else}

diff --git a/core/src/navigation/ProductSwitcher.svelte b/core/src/navigation/ProductSwitcher.svelte
@@ -137,7 +137,7 @@
                           }}
                           class="fd-menu__link"
                         >
-                          <div class="lui-product-switch__icon">
+                          <div class="lui-product-switch__icon fd-product-switch__icon sap-icon">
                             {#if hasOpenUIicon(productSwitcherItem)}
                               <i
                                 class="sap-icon {productSwitcherItem.icon && hasOpenUIicon(productSwitcherItem)
@@ -159,7 +159,7 @@
                           </div>
                         </a>
                       {:else}
-                        <div class="lui-product-switch__icon">
+                        <div class="lui-product-switch__icon fd-product-switch__icon sap-icon">
                           {#if hasOpenUIicon(productSwitcherItem)}
                             <i
                               class="sap-icon {productSwitcherItem.icon && hasOpenUIicon(productSwitcherItem)
@@ -213,4 +213,8 @@
       color: var(--sapShell_InteractiveTextColor, #d1e8ff);
     }
   }
+
+  .fd-product-switch__item .fd-menu__link {
+    display: block;
+  }
 </style>