refactor(navbar-vertical): optimize notifications/badges visibility logic

api-goldens/element-ng/navbar-vertical/index.api.md

@@ -30,6 +30,7 @@ export interface NavbarVerticalItemAction extends NavbarVerticalItemBase {
 export interface NavbarVerticalItemBase {
     badge?: string | number;
     badgeColor?: string;
+    hideBadgeWhenCollapsed?: boolean;
     icon?: string;
     id?: string;
     label: TranslatableString;

playwright/e2e/element-examples/navbar-vertical.spec.ts

@@ -59,3 +59,34 @@ test.describe('navbar vertical', () => {
     await si.runVisualAndA11yTests('mobile-expanded');
   });
 });
+
+test.describe('navbar vertical badges', () => {
+  const example = 'si-navbar-vertical/si-navbar-vertical-badges';
+
+  test(example + ' expanded', async ({ page, si }) => {
+    await si.visitExample(example);
+    await page.getByRole('link', { name: 'Home' }).click();
+    await expect(page.getByRole('link', { name: 'Home' })).toHaveClass(/active/);
+    await page.getByRole('button', { name: 'Group with badges' }).click();
+    await page.getByRole('link', { name: 'Sub item critical' }).click();
+    await expect(page.getByRole('link', { name: 'Sub item critical' })).toHaveClass(/active/);
+    await page.locator('.si-layout-main-padding').click(); // to move focus
+
+    await si.waitForAllAnimationsToComplete();
+    await si.runVisualAndA11yTests();
+  });
+
+  test(example + ' collapsed', async ({ page, si }) => {
+    await si.visitExample(example);
+
+    await page.getByLabel('collapse', { exact: true }).click();
+    await page.getByRole('button', { name: 'Group with badges' }).click();
+    await expect(page.getByRole('group', { name: 'Group with badges' })).toBeVisible();
+    await page.getByRole('link', { name: 'Sub item info' }).click();
+
+    await si.waitForAllAnimationsToComplete();
+    await si.runVisualAndA11yTests('collapsed');
+    await page.getByRole('button', { name: 'Group with badges' }).click();
+    await si.runVisualAndA11yTests('collapsed-flyout');
+  });
+});

playwright/snapshots/navbar-vertical-legacy.spec.ts-snapshots/si-navbar-vertical--si-navbar-vertical-legacy--collapsed-flyout.yaml

@@ -9,17 +9,18 @@
   - button "expand"
   - button "Search..."
   - button "expand Home"
-  - button "Documentation"
-  - group "Documentation":
-    - link "Sub Item 4":
+  - group "expand Home"
+  - button "Documentation 6"
+  - group "Documentation 6":
+    - link "Sub Item 4 1":
       - /url: "#/viewer/viewer/subItem4"
-    - link "Sub Item 5":
+    - link "Sub Item 5 2":
       - /url: "#/viewer/viewer/subItem5"
-    - link "Sub Item 6":
+    - link "Sub Item 6 3":
       - /url: "#/viewer/viewer/subItem6"
   - link "Energy & Sustainability":
     - /url: "#/viewer/viewer/energy"
-  - link "4 Test Coverage":
+  - link "Test Coverage":
     - /url: "#/viewer/viewer/coverage"
 - main:
   - heading "Here is a title" [level=2]

playwright/snapshots/navbar-vertical-legacy.spec.ts-snapshots/si-navbar-vertical--si-navbar-vertical-legacy--collapsed.yaml

@@ -9,10 +9,12 @@
   - button "expand"
   - button "Search..."
   - button "expand Home"
-  - button "Documentation"
+  - group "expand Home"
+  - button "Documentation 6"
+  - group "Documentation 6"
   - link "Energy & Sustainability":
     - /url: "#/viewer/viewer/energy"
-  - link "4 Test Coverage":
+  - link "Test Coverage":
     - /url: "#/viewer/viewer/coverage"
 - main:
   - heading "Here is a title" [level=2]

playwright/snapshots/navbar-vertical-legacy.spec.ts-snapshots/si-navbar-vertical--si-navbar-vertical-legacy--mobile-expanded.yaml

@@ -9,17 +9,18 @@
   - link "Home":
     - /url: "#/viewer/viewer/Home"
   - button "expand Home"
+  - group "expand Home"
   - button "Documentation" [expanded]
   - group "Documentation":
-    - link "Sub Item 4":
+    - link "Sub Item 4 1":
       - /url: "#/viewer/viewer/subItem4"
-    - link "Sub Item 5":
+    - link "Sub Item 5 2":
       - /url: "#/viewer/viewer/subItem5"
-    - link "Sub Item 6":
+    - link "Sub Item 6 3":
       - /url: "#/viewer/viewer/subItem6"
   - link "Energy & Sustainability":
     - /url: "#/viewer/viewer/energy"
-  - link "Test Coverage 4":
+  - link "Test Coverage":
     - /url: "#/viewer/viewer/coverage"
 - main:
   - heading "Here is a title" [level=2]

playwright/snapshots/navbar-vertical-legacy.spec.ts-snapshots/si-navbar-vertical--si-navbar-vertical-legacy.yaml

@@ -11,17 +11,18 @@
   - link "Home":
     - /url: "#/viewer/viewer/Home"
   - button "expand Home"
+  - group "expand Home"
   - button "Documentation" [expanded]
   - group "Documentation":
-    - link "Sub Item 4":
+    - link "Sub Item 4 1":
       - /url: "#/viewer/viewer/subItem4"
-    - link "Sub Item 5":
+    - link "Sub Item 5 2":
       - /url: "#/viewer/viewer/subItem5"
-    - link "Sub Item 6":
+    - link "Sub Item 6 3":
       - /url: "#/viewer/viewer/subItem6"
   - link "Energy & Sustainability":
     - /url: "#/viewer/viewer/energy"
-  - link "Test Coverage 4":
+  - link "Test Coverage":
     - /url: "#/viewer/viewer/coverage"
 - main:
   - heading "Here is a title" [level=2]

playwright/snapshots/navbar-vertical.spec.ts-snapshots/si-navbar-vertical--si-navbar-vertical--collapsed-flyout.yaml

@@ -13,15 +13,16 @@
     - /url: "#/viewer/viewer/energy"
   - button "User management"
   - group "User management":
-    - link "Sub item 4":
+    - link "Sub item":
       - /url: "#/viewer/viewer/subItem"
     - link "Sub item 2":
       - /url: "#/viewer/viewer/subItem2"
     - link "Sub item 3":
       - /url: "#/viewer/viewer/subItem3"
-  - link "4 Test coverage":
+  - link "Test coverage":
     - /url: "#/viewer/viewer/coverage"
   - button "Documentation"
+  - group "Documentation"
   - button "Action"
 - main:
   - heading "Here is a title" [level=2]

playwright/snapshots/navbar-vertical.spec.ts-snapshots/si-navbar-vertical--si-navbar-vertical--collapsed.yaml

@@ -12,9 +12,11 @@
   - link "Energy & sustainability":
     - /url: "#/viewer/viewer/energy"
   - button "User management"
-  - link "4 Test coverage":
+  - group "User management"
+  - link "Test coverage":
     - /url: "#/viewer/viewer/coverage"
   - button "Documentation"
+  - group "Documentation"
   - button "Action"
 - main:
   - heading "Here is a title" [level=2]

playwright/snapshots/navbar-vertical.spec.ts-snapshots/si-navbar-vertical--si-navbar-vertical--mobile-expanded.yaml

@@ -13,7 +13,8 @@
   - link "Energy & sustainability":
     - /url: "#/viewer/viewer/energy"
   - button "User management"
-  - link "Test coverage 4":
+  - group "User management"
+  - link "Test coverage":
     - /url: "#/viewer/viewer/coverage"
   - button "Documentation" [expanded]
   - group "Documentation":

playwright/snapshots/navbar-vertical.spec.ts-snapshots/si-navbar-vertical--si-navbar-vertical-badges--collapsed-flyout.yaml

@@ -0,0 +1,30 @@
+- link "Jump to Main content"
+- link "Jump to Navigation"
+- banner:
+  - link "Siemens logo":
+    - /url: "#/"
+  - heading "Navbar Vertical Badges Example" [level=1]
+- navigation:
+  - button "expand"
+  - button "Search..."
+  - link "Home":
+    - /url: "#/viewer/viewer/home"
+  - link "Text badge Info":
+    - /url: "#/viewer/viewer/text-badge"
+  - button "Group with badges 6"
+  - group "Group with badges 6":
+    - link "Sub item critical 1":
+      - /url: "#/viewer/viewer/sub-badge-1"
+    - link "Sub item info 2":
+      - /url: "#/viewer/viewer/sub-badge-2"
+    - link "Sub item warning 3":
+      - /url: "#/viewer/viewer/sub-badge-3"
+  - button "Group item"
+  - group "Group item"
+  - link "Subtle badge 5":
+    - /url: "#/viewer/viewer/success"
+  - link /Danger emphasis badge \+\d+/:
+    - /url: "#/viewer/viewer/danger"
+- main:
+  - heading "Badge Examples" [level=2]
+  - text: Content with path 'sub-badge-2'

playwright/snapshots/navbar-vertical.spec.ts-snapshots/si-navbar-vertical--si-navbar-vertical-badges--collapsed.yaml

@@ -0,0 +1,24 @@
+- link "Jump to Main content"
+- link "Jump to Navigation"
+- banner:
+  - link "Siemens logo":
+    - /url: "#/"
+  - heading "Navbar Vertical Badges Example" [level=1]
+- navigation:
+  - button "expand"
+  - button "Search..."
+  - link "Home":
+    - /url: "#/viewer/viewer/home"
+  - link "Text badge Info":
+    - /url: "#/viewer/viewer/text-badge"
+  - button "Group with badges 6"
+  - group "Group with badges 6"
+  - button "Group item"
+  - group "Group item"
+  - link "Subtle badge 5":
+    - /url: "#/viewer/viewer/success"
+  - link /Danger emphasis badge \+\d+/:
+    - /url: "#/viewer/viewer/danger"
+- main:
+  - heading "Badge Examples" [level=2]
+  - text: Content with path 'sub-badge-2'

playwright/snapshots/navbar-vertical.spec.ts-snapshots/si-navbar-vertical--si-navbar-vertical-badges.yaml

@@ -0,0 +1,31 @@
+- link "Jump to Main content"
+- link "Jump to Navigation"
+- banner:
+  - link "Siemens logo":
+    - /url: "#/"
+  - heading "Navbar Vertical Badges Example" [level=1]
+- navigation:
+  - button "collapse" [expanded]
+  - textbox "Search..."
+  - link "Home Text":
+    - /url: "#/viewer/viewer/home"
+  - text: Badge Examples
+  - link "Text badge Info":
+    - /url: "#/viewer/viewer/text-badge"
+  - button "Group with badges" [expanded]
+  - group "Group with badges":
+    - link "Sub item critical 1":
+      - /url: "#/viewer/viewer/sub-badge-1"
+    - link "Sub item info 2":
+      - /url: "#/viewer/viewer/sub-badge-2"
+    - link "Sub item warning 3":
+      - /url: "#/viewer/viewer/sub-badge-3"
+  - button "Group item"
+  - group "Group item"
+  - link "Subtle badge 5":
+    - /url: "#/viewer/viewer/success"
+  - link /Danger emphasis badge \+\d+/:
+    - /url: "#/viewer/viewer/danger"
+- main:
+  - heading "Badge Examples" [level=2]
+  - text: Content with path 'sub-badge-1'

playwright/snapshots/navbar-vertical.spec.ts-snapshots/si-navbar-vertical--si-navbar-vertical.yaml

@@ -13,7 +13,8 @@
   - link "Energy & sustainability":
     - /url: "#/viewer/viewer/energy"
   - button "User management"
-  - link "Test coverage 4":
+  - group "User management"
+  - link "Test coverage":
     - /url: "#/viewer/viewer/coverage"
   - button "Documentation" [expanded]
   - group "Documentation":