fix(core/menu): fix theme switching icon (#1121)

siemens · Feb 26, 2024 · 0def517 · 0def517
1 parent 1fd1637
commit 0def517
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 1 deletion.
diff --git a/packages/core/src/components/menu/menu.tsx b/packages/core/src/components/menu/menu.tsx
@@ -698,7 +698,7 @@ export class Menu {
               id="toggleTheme"
               onClick={() => themeSwitcher.toggleMode()}
               class="internal-tab bottom-tab"
-              icon={'bulb'}
+              icon={'light-dark'}
             >
               {this.i18nToggleTheme}
             </ix-menu-item>

diff --git a/packages/core/src/tests/menu/menu.e2e.ts b/packages/core/src/tests/menu/menu.e2e.ts
@@ -64,6 +64,21 @@ test.describe('menu', () => {
     }
   );
 
+  regressionTest('toggle - check icon & functionality', async ({ page }) => {
+    await page.setViewportSize(viewPorts.lg);
+    await page.goto('menu/toggle');
+
+    const category = page.locator('ix-menu-category');
+    await category.click();
+
+    const themeToggle = page.locator('#toggleTheme');
+    await themeToggle.click();
+
+    await page.waitForTimeout(10000);
+
+    await expect(page).toHaveScreenshot();
+  });
+
   regressionTest(
     'category open on expand when initially closed and activated',
     async ({ page }) => {

diff --git a/...enu-toggle---check-icon-functionality-1-chromium---theme-classic-dark-linux.png b/...enu-toggle---check-icon-functionality-1-chromium---theme-classic-dark-linux.png
diff --git a/...nu-toggle---check-icon-functionality-1-chromium---theme-classic-light-linux.png b/...nu-toggle---check-icon-functionality-1-chromium---theme-classic-light-linux.png
diff --git a/packages/core/src/tests/menu/toggle/index.html b/packages/core/src/tests/menu/toggle/index.html
@@ -0,0 +1,31 @@
+<!--
+SPDX-FileCopyrightText: 2023 Siemens AG
+
+SPDX-License-Identifier: MIT
+-->
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8"/>
+    <meta
+      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0"
+      name="viewport"
+    />
+    <title>Stencil Component Starter</title>
+  </head>
+  <body style="width: 100vw; height: 100vh">
+    <ix-basic-navigation>
+      <ix-menu enable-toggle-theme>
+        <ix-menu-item>Item 1</ix-menu-item>
+        <ix-menu-category label="Category with a long name">
+          <ix-menu-item icon="home">Sub 1</ix-menu-item>
+          <ix-menu-item>Sub 2</ix-menu-item>
+          <ix-menu-item icon="star">Sub 3</ix-menu-item>
+          <ix-menu-item>Sub 4</ix-menu-item>
+        </ix-menu-category>
+      </ix-menu>
+    </ix-basic-navigation>
+    <script src="http://127.0.0.1:8080/scripts/e2e/load-e2e-runtime.js"></script>
+  </body>
+</html>