diff --git a/ui/CHANGELOG.md b/ui/CHANGELOG.md index 8b2ba973aa..66d908b8fd 100644 --- a/ui/CHANGELOG.md +++ b/ui/CHANGELOG.md @@ -10,6 +10,14 @@ All notable changes to the **Prowler UI** are documented in this file. --- +## [1.29.3] (Prowler UNRELEASED) + +### 🐞 Fixed + +- Finding drawer tabs now keep the active tab text and underline styling when tooltip state changes [(#11493)](https://github.com/prowler-cloud/prowler/pull/11493) + +--- + ## [1.29.2] (Prowler v5.29.2) ### 🔄 Changed diff --git a/ui/components/shadcn/tabs/tabs.test.tsx b/ui/components/shadcn/tabs/tabs.test.tsx new file mode 100644 index 0000000000..8d9a54816d --- /dev/null +++ b/ui/components/shadcn/tabs/tabs.test.tsx @@ -0,0 +1,27 @@ +import { render, screen } from "@testing-library/react"; +import { describe, expect, it } from "vitest"; + +import { Tabs, TabsList, TabsTrigger } from "./tabs"; + +describe("TabsTrigger", () => { + it("keeps active styling available when rendered with a tooltip", () => { + render( + + + + Overview + + + Remediation + + + , + ); + + const activeTrigger = screen.getByRole("tab", { name: "Overview" }); + + expect(activeTrigger).toHaveAttribute("aria-selected", "true"); + expect(activeTrigger).toHaveClass("aria-selected:text-slate-900"); + expect(activeTrigger).toHaveClass("aria-selected:after:scale-x-100"); + }); +}); diff --git a/ui/components/shadcn/tabs/tabs.tsx b/ui/components/shadcn/tabs/tabs.tsx index 92ca5575c8..22379000d6 100644 --- a/ui/components/shadcn/tabs/tabs.tsx +++ b/ui/components/shadcn/tabs/tabs.tsx @@ -18,9 +18,9 @@ const TRIGGER_STYLES = { border: "border-r border-[#E9E9F0] last:border-r-0 dark:border-[#171D30]", text: "text-slate-600 hover:text-slate-900 dark:text-slate-400 dark:hover:text-white", active: - "data-[state=active]:text-slate-900 dark:data-[state=active]:text-white", + "data-[state=active]:text-slate-900 aria-selected:text-slate-900 dark:data-[state=active]:text-white dark:aria-selected:text-white", underline: - "after:absolute after:bottom-0 after:left-0 after:right-4 after:h-0.5 after:scale-x-0 after:bg-emerald-400 after:transition-transform data-[state=active]:after:scale-x-100 [&:not(:first-child)]:after:left-4 [&:last-child]:after:right-0", + "after:absolute after:bottom-0 after:left-0 after:right-4 after:h-0.5 after:scale-x-0 after:bg-emerald-400 after:transition-transform data-[state=active]:after:scale-x-100 aria-selected:after:scale-x-100 [&:not(:first-child)]:after:left-4 [&:last-child]:after:right-0", focus: "focus-visible:ring-2 focus-visible:ring-emerald-400 focus-visible:ring-offset-2 focus-visible:ring-offset-white focus-visible:outline-none dark:focus-visible:ring-offset-slate-950", icon: "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",