Merge pull request #3163 from mi6/3098-badges-arent-visible-on-top-na…

…v-navigation-buttons-on-small-screens fix(web-components): changes to ic-badge and ic-navigation-button to …
mi6 · Feb 13, 2025 · b57edf6 · b57edf6
2 parents 67edd1c + 1d861c3
commit b57edf6
Show file tree

Hide file tree

Showing 9 changed files with 361 additions and 20 deletions.
diff --git a/...cypress-image-diff-screenshots/baseline/IcTopNavigation.cy.tsx/icon-buttons.png b/...cypress-image-diff-screenshots/baseline/IcTopNavigation.cy.tsx/icon-buttons.png
diff --git a/packages/react/src/component-tests/IcTopNavigation/IcTopNavigationTestData.tsx b/packages/react/src/component-tests/IcTopNavigation/IcTopNavigationTestData.tsx
@@ -107,7 +107,13 @@ export const IconButtons = (): ReactElement => {
       <IcSearchBar slot="search" label="Search" placeholder="Search" />
       <IcNavigationButton label="Button One" slot="buttons">
         <ReusableIcon />
-        <IcBadge label="1" slot="badge" position="near" variant="light" />
+        <IcBadge
+          label="1"
+          slot="badge"
+          customColor="#d4351c"
+          variant="custom"
+          theme="dark"
+        />
       </IcNavigationButton>
       <IcNavigationButton label="Button Two" slot="buttons">
         <SlottedSVG

diff --git a/packages/react/src/stories/ic-top-navigation.stories.mdx b/packages/react/src/stories/ic-top-navigation.stories.mdx
@@ -113,7 +113,7 @@ import { NavLink, MemoryRouter, Switch, Route, Routes } from "react-router-dom";
         slot="buttons"
         onClick={() => alert("test")}
       >
-        <IcBadge label="1" slot="badge" variant="light" />
+        <IcBadge label="1" slot="badge" customColor="#d4351c" variant="custom" theme="dark"/>
         <svg
           slot="icon"
           xmlns="http://www.w3.org/2000/svg"
@@ -132,7 +132,7 @@ import { NavLink, MemoryRouter, Switch, Route, Routes } from "react-router-dom";
         href="https://www.google.com"
         target="_blank"
       >
-        <IcBadge slot="badge" variant="light" type="dot" />
+        <IcBadge slot="badge" customColor="#d4351c" variant="custom" type="dot" theme="dark"/>
         <svg
           slot="icon"
           xmlns="http://www.w3.org/2000/svg"
@@ -838,8 +838,9 @@ export const defaultArgs = {
           <IcBadge
             label="1"
             slot="badge"
-            position="near"
-            variant="light"
+            customColor="#d4351c"
+            variant="custom"
+            theme="dark"
           ></IcBadge>
         </IcNavigationButton>
         <IcNavigationButton
@@ -864,9 +865,10 @@ export const defaultArgs = {
           </svg>
           <IcBadge
             slot="badge"
-            position="near"
-            variant="light"
+            customColor="#d4351c"
+            variant="custom"
             type="dot"
+            theme="dark"
           ></IcBadge>
         </IcNavigationButton>
         <IcNavigationButton

diff --git a/packages/web-components/src/components/ic-badge/ic-badge.tsx b/packages/web-components/src/components/ic-badge/ic-badge.tsx
@@ -1,4 +1,12 @@
-import { Component, Element, Host, Prop, Watch, h } from "@stencil/core";
+import {
+  Component,
+  Element,
+  Host,
+  Prop,
+  Watch,
+  h,
+  Listen,
+} from "@stencil/core";
 import {
   IcBadgePositions,
   IcBadgeTypes,
@@ -17,6 +25,9 @@ import {
   onComponentRequiredPropUndefined,
 } from "../../utils/helpers";
 
+const NAVIGATION_BUTTON = "IC-NAVIGATION-BUTTON";
+const TOP_NAVIGATION = "IC-TOP-NAVIGATION";
+
 /**
  * @slot badge-icon - Icon will be rendered inside the badge if type is set to icon.
  */
@@ -64,7 +75,7 @@ export class Badge {
   /**
    * The positioning of the badge in reference to the parent element.
    */
-  @Prop() position?: IcBadgePositions = "far";
+  @Prop({ mutable: true }) position?: IcBadgePositions = "far";
 
   /**
    * The size of the badge to be displayed.
@@ -124,6 +135,20 @@ export class Badge {
       );
   }
 
+  componentWillRender(): void {
+    this.isInTopNav() && this.setPositionInTopNavigation();
+  }
+
+  @Listen("icNavigationMenuOpened", { target: "document" })
+  navBarMenuOpenHandler(): void {
+    this.isInTopNav() && (this.position = "inline");
+  }
+
+  @Listen("icNavigationMenuClosed", { target: "document" })
+  navBarMenuCloseHandler(): void {
+    this.isInTopNav() && (this.position = "near");
+  }
+
   private setBadgeColour = () => {
     const colorRGBA = convertToRGBA(this.customColor);
 
@@ -167,6 +192,22 @@ export class Badge {
     }
   };
 
+  private setPositionInTopNavigation = () => {
+    const parentTopNavEl = this.el.parentElement.parentElement;
+    parentTopNavEl.classList.contains("mobile-mode")
+      ? (this.position = "inline")
+      : (this.position = "near");
+  };
+
+  private isInTopNav = (): boolean => {
+    const parentEl = this.el.parentElement;
+    const grandparentEl = parentEl.parentElement;
+    return (
+      parentEl.tagName === NAVIGATION_BUTTON &&
+      grandparentEl.tagName === TOP_NAVIGATION
+    );
+  };
+
   private isAccessibleLabelDefined = () =>
     isPropDefined(this.accessibleLabel) && this.accessibleLabel !== null;
 

diff --git a/...es/web-components/src/components/ic-badge/test/basic/__snapshots__/ic-badge.spec.tsx.snap b/...es/web-components/src/components/ic-badge/test/basic/__snapshots__/ic-badge.spec.tsx.snap
@@ -227,6 +227,88 @@ exports[`ic-badge should render slotted in a tab with aria-label set on badge: s
 </ic-tab>
 `;
 
+exports[`ic-badge should render slotted in a top navigation: should render slotted in a top navigation 1`] = `
+<ic-top-navigation app-title="Application Name" status="alpha" version="v0.0.7">
+  <mock:shadow-root>
+    <div class="top-navigation">
+      <ic-section-container aligned="full-width" full-height="">
+        <header role="banner">
+          <div class="top-panel-container">
+            <div class="app-details-container">
+              <a class="title-link" href="/">
+                <div class="app-icon-container">
+                  <slot name="app-icon"></slot>
+                </div>
+                <ic-typography variant="h3">
+                  <h1 class="title-wrap">
+                    Application Name
+                  </h1>
+                </ic-typography>
+              </a>
+              <div class="app-status">
+                <ic-typography aria-label="app tag" class="app-status-text" variant="label-uppercase">
+                  alpha
+                </ic-typography>
+              </div>
+              <div class="app-version">
+                <ic-typography aria-label="app version" class="app-version-text" variant="label">
+                  v0.0.7
+                </ic-typography>
+              </div>
+            </div>
+            <div class="search-menu-container">
+              <div class="search-actions-container">
+                <slot name="search"></slot>
+                <div class="icon-buttons-container">
+                  <slot name="buttons"></slot>
+                </div>
+              </div>
+            </div>
+          </div>
+        </header>
+      </ic-section-container>
+    </div>
+  </mock:shadow-root>
+  <svg fill="#000000" height="24px" slot="app-icon" viewBox="0 0 24 24" width="24px" xmlns="http://www.w3.org/2000/svg">
+    <path d="M0 0h24v24H0V0z" fill="none"></path>
+    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z"></path>
+  </svg>
+  <ic-search-bar label="Search" placeholder="Search" slot="search"></ic-search-bar>
+  <ic-navigation-button href="https://www.google.com" label="Button One" slot="buttons" target="_blank" title="Google 1">
+    <svg fill="#000000" height="24px" slot="icon" viewBox="0 0 24 24" width="24px" xmlns="http://www.w3.org/2000/svg">
+      <path d="M0 0h24v24H0V0z" fill="none"></path>
+      <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z"></path>
+    </svg>
+    <ic-badge class="ic-badge-medium ic-badge-near ic-badge-neutral ic-badge-show ic-badge-text" label="1" role="status" slot="badge">
+      <mock:shadow-root>
+        <ic-typography variant="badge">
+          1
+        </ic-typography>
+      </mock:shadow-root>
+    </ic-badge>
+  </ic-navigation-button>
+  <ic-navigation-button href="https://www.google.com" label="Button Two" slot="buttons" target="_blank" title="Google 2">
+    <svg fill="#000000" height="24px" slot="icon" viewBox="0 0 24 24" width="24px" xmlns="http://www.w3.org/2000/svg">
+      <path d="M0 0h24v24H0z" fill="none"></path>
+      <path d="M21 6h-2v9H6v2c0 .55.45 1 1 1h11l4 4V7c0-.55-.45-1-1-1zm-4 6V3c0-.55-.45-1-1-1H3c-.55 0-1 .45-1 1v14l4-4h10c.55 0 1-.45 1-1z"></path>
+    </svg>
+    <ic-badge class="ic-badge-dot ic-badge-medium ic-badge-near ic-badge-neutral ic-badge-show" role="status" slot="badge" type="dot">
+      <mock:shadow-root>
+        <span class="sr-only">
+          badge
+        </span>
+      </mock:shadow-root>
+    </ic-badge>
+  </ic-navigation-button>
+  <ic-navigation-button label="Button Three" onclick="alert('test')" slot="buttons">
+    <svg fill="#000000" height="24px" slot="icon" viewBox="0 0 24 24" width="24px" xmlns="http://www.w3.org/2000/svg">
+      <path d="M0 0h24v24H0V0z" fill="none"></path>
+      <path d="M12 22c1.1 0 2-.9 2-2h-4c0 1.1.89 2 2 2zm6-6v-5c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z"></path>
+    </svg>
+  </ic-navigation-button>
+</ic-top-navigation>
+`;
+
 exports[`ic-badge should render slotted in a vertical card with aria-label set on badge: should render slotted in a card 1`] = `
 <ic-card-vertical heading="Badge">
   <mock:shadow-root>