diff --git a/packages/react/cypress-image-diff-screenshots/baseline/IcTopNavigation.cy.tsx/icon-buttons.png b/packages/react/cypress-image-diff-screenshots/baseline/IcTopNavigation.cy.tsx/icon-buttons.png index 28bd78b3b5..22cc5c0c48 100755 Binary files a/packages/react/cypress-image-diff-screenshots/baseline/IcTopNavigation.cy.tsx/icon-buttons.png and b/packages/react/cypress-image-diff-screenshots/baseline/IcTopNavigation.cy.tsx/icon-buttons.png differ diff --git a/packages/react/src/component-tests/IcTopNavigation/IcTopNavigationTestData.tsx b/packages/react/src/component-tests/IcTopNavigation/IcTopNavigationTestData.tsx index c57da6829a..11053e6542 100644 --- 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 => { - + alert("test")} > - + - + { 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/packages/web-components/src/components/ic-badge/test/basic/__snapshots__/ic-badge.spec.tsx.snap b/packages/web-components/src/components/ic-badge/test/basic/__snapshots__/ic-badge.spec.tsx.snap index 4df67e617a..22686ac001 100644 --- a/packages/web-components/src/components/ic-badge/test/basic/__snapshots__/ic-badge.spec.tsx.snap +++ b/packages/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 `; +exports[`ic-badge should render slotted in a top navigation: should render slotted in a top navigation 1`] = ` + + +
+ +
+
+
+ +
+ +
+ +

+ Application Name +

+ + +
+ + alpha + +
+
+ + v0.0.7 + +
+
+
+
+ +
+ +
+
+
+
+
+ +
+ + + + + + + + + + + + + + + 1 + + + + + + + + + + + + + badge + + + + + + + + + + + +`; + exports[`ic-badge should render slotted in a vertical card with aria-label set on badge: should render slotted in a card 1`] = ` diff --git a/packages/web-components/src/components/ic-badge/test/basic/ic-badge.spec.tsx b/packages/web-components/src/components/ic-badge/test/basic/ic-badge.spec.tsx index bb059b25b1..11612ea8ff 100644 --- a/packages/web-components/src/components/ic-badge/test/basic/ic-badge.spec.tsx +++ b/packages/web-components/src/components/ic-badge/test/basic/ic-badge.spec.tsx @@ -6,6 +6,7 @@ import { Tab } from "../../../ic-tab/ic-tab"; import { CardVertical } from "../../../ic-card-vertical/ic-card-vertical"; import { NavigationButton } from "../../../ic-navigation-button/ic-navigation-button"; import { NavigationItem } from "../../../ic-navigation-item/ic-navigation-item"; +import { TopNavigation } from "../../../ic-top-navigation/ic-top-navigation"; describe("ic-badge", () => { it("should render with text slotted in a button", async () => { @@ -54,6 +55,7 @@ describe("ic-badge", () => { expect(page.root).toMatchSnapshot("should render warning variant"); }); + it("should render info variant", async () => { const page = await newSpecPage({ components: [Button, Badge], @@ -217,6 +219,103 @@ describe("ic-badge", () => { ); }); + it("should render slotted in a top navigation", async () => { + const page = await newSpecPage({ + components: [TopNavigation, NavigationItem, Badge], + html: ` + + + + + + + + + + + + + + + + + + + + + + + + + + `, + }); + + expect(page.root).toMatchSnapshot( + "should render slotted in a top navigation" + ); + }); + it("should render slotted in a navigation item", async () => { const page = await newSpecPage({ components: [NavigationItem, Badge], @@ -321,4 +420,109 @@ describe("ic-badge", () => { const badge = document.querySelector("ic-badge"); expect(badge.style.backgroundColor).toBe("rgba(222, 10, 43, 1)"); }); + + it("should set the correct variant when navigation menu is opened and closed", async () => { + const page = await newSpecPage({ + components: [Badge, NavigationButton], + html: ` + + + + + + + + + + + + + + + + + + + + + + + + + + `, + }); + + const badge = document.querySelector("ic-badge"); + + expect(page.rootInstance.mode).toBe("navbar"); + + document.dispatchEvent(new CustomEvent("icNavigationMenuOpened")); + expect(page.rootInstance.mode).toBe("menu"); + expect(badge.position).toBe("inline"); + + document.dispatchEvent(new CustomEvent("icNavigationMenuClosed")); + expect(page.rootInstance.mode).toBe("navbar"); + expect(badge.position).toBe("near"); + }); }); diff --git a/packages/web-components/src/components/ic-navigation-button/ic-navigation-button.css b/packages/web-components/src/components/ic-navigation-button/ic-navigation-button.css index 0fd9c5f150..de177043f4 100644 --- a/packages/web-components/src/components/ic-navigation-button/ic-navigation-button.css +++ b/packages/web-components/src/components/ic-navigation-button/ic-navigation-button.css @@ -28,3 +28,7 @@ color: var(--ic-top-navigation-icon-pressed); background-color: var(--ic-top-navigation-icon-pressed-background); } + +:host(.in-side-menu) ::slotted(ic-badge) { + margin-left: var(--ic-space-xs); +} diff --git a/packages/web-components/src/components/ic-navigation-button/ic-navigation-button.tsx b/packages/web-components/src/components/ic-navigation-button/ic-navigation-button.tsx index 9b5192abd9..1b5073ebfd 100644 --- a/packages/web-components/src/components/ic-navigation-button/ic-navigation-button.tsx +++ b/packages/web-components/src/components/ic-navigation-button/ic-navigation-button.tsx @@ -212,9 +212,7 @@ export class NavigationButton { > {label} - {isSlotUsed(this.el, "badge") && variant === "icon" && ( - - )} + {isSlotUsed(this.el, "badge") && } ); diff --git a/packages/web-components/src/components/ic-top-navigation/ic-top-navigation.stories.mdx b/packages/web-components/src/components/ic-top-navigation/ic-top-navigation.stories.mdx index e800baa6fe..d3cd501b60 100644 --- a/packages/web-components/src/components/ic-top-navigation/ic-top-navigation.stories.mdx +++ b/packages/web-components/src/components/ic-top-navigation/ic-top-navigation.stories.mdx @@ -191,8 +191,9 @@ import NavigationGroup from "../ic-navigation-group/readme.md";