fix(VerticalNavigation): truncate text on slider navigation (#3351)

* fix(VerticalNavigation): truncate text on slider navigation * Update packages/core/src/components/VerticalNavigation/NavigationSlider/NavigationSlider.styles.tsx Co-authored-by: Bruno Henriques <zettca@gmail.com> * fix(VerticalNavigation): truncate text on slider navigation --------- Co-authored-by: Paulo Lagoá <paulo.lagoa@@hitachivantara.com> Co-authored-by: Bruno Henriques <zettca@gmail.com>
lumada-design · May 22, 2023 · b61e29d · b61e29d
1 parent 59979ca
commit b61e29d
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 10 deletions.
diff --git a/packages/core/src/components/VerticalNavigation/NavigationSlider/NavigationSlider.tsx b/packages/core/src/components/VerticalNavigation/NavigationSlider/NavigationSlider.tsx
@@ -1,6 +1,11 @@
 import { DropRightXS } from "@hitachivantara/uikit-react-icons";
 import { clsx } from "clsx";
-import { HvButton, HvListContainer, NavigationData } from "@core/components";
+import {
+  HvButton,
+  HvListContainer,
+  HvOverflowTooltip,
+  NavigationData,
+} from "@core/components";
 import { StyledListItem } from "./NavigationSlider.styles";
 import verticalNavigationSliderClasses, {
   HvVerticalNavigationSliderClasses,
@@ -71,7 +76,7 @@ export const HvVerticalNavigationSlider = ({
               if (onNavigateToTarget) onNavigateToTarget(event, item);
             }}
             selected={selected === item.id}
-            startAdornment={item.icon}
+            startAdornment={<div>{item.icon}</div>}
             endAdornment={
               item.data && item.data.length > 0 ? (
                 <HvButton
@@ -83,12 +88,10 @@ export const HvVerticalNavigationSlider = ({
                 >
                   <DropRightXS />
                 </HvButton>
-              ) : (
-                <div />
-              )
+              ) : undefined
             }
           >
-            <span>{item.label}</span>
+            <HvOverflowTooltip data={item.label} />
           </StyledListItem>
         ))}
     </HvListContainer>

diff --git a/packages/core/src/components/VerticalNavigation/VerticalNavigation.stories.tsx b/packages/core/src/components/VerticalNavigation/VerticalNavigation.stories.tsx
@@ -675,7 +675,7 @@ export const SliderMode: StoryObj<HvVerticalNavigationProps> = {
         },
         {
           id: "menu2",
-          label: "Menu 2",
+          label: "Menu 2 with a very big name that should be truncated",
           path: "",
           icon: <BarChart />,
           parent: null,

diff --git a/packages/core/src/components/VerticalNavigation/VerticalNavigation.test.tsx b/packages/core/src/components/VerticalNavigation/VerticalNavigation.test.tsx
@@ -1,4 +1,4 @@
-import { describe, expect, it } from "vitest";
+import { describe, expect, it, vi } from "vitest";
 import { render } from "@testing-library/react";
 import { useMemo, useState } from "react";
 import { LogOut, User } from "@hitachivantara/uikit-react-icons";
@@ -208,6 +208,23 @@ const SliderSample = () => {
 };
 
 describe("VerticalNavigation", () => {
+  const { ResizeObserver } = window;
+
+  beforeEach(() => {
+    // @ts-ignore
+    delete window.ResizeObserver;
+    window.ResizeObserver = vi.fn().mockImplementation(() => ({
+      observe: vi.fn(),
+      unobserve: vi.fn(),
+      disconnect: vi.fn(),
+    }));
+  });
+
+  afterEach(() => {
+    window.ResizeObserver = ResizeObserver;
+    vi.restoreAllMocks();
+  });
+
   it("should be defined", () => {
     const { container } = render(<Sample />);
     expect(container).toBeDefined();
@@ -254,8 +271,6 @@ describe("VerticalNavigation", () => {
     expect(nav).toHaveStyle(`display : block`);
   });
 
-  //it("should not have icons", () => {});
-
   describe("Slider Navigation", async () => {
     it("should change header text", async () => {
       const { getByText, getByRole, queryByText } = render(<SliderSample />);