ben.carrasco/prowler
1
0
Fork 0
mirror of https://github.com/prowler-cloud/prowler.git synced 2026-07-04 19:21:51 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): preserve active tab styling with tooltips (#11493)

Browse Source
This commit is contained in:
Alejandro Bailo
2026-06-08 11:54:51 +02:00
committed by GitHub
parent 6f172a5c19
commit 5a2226c02c
3 changed files with 37 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ui/components/shadcn/tabs/tabs.test.tsx
+27
View File
@@ -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(
<Tabs defaultValue="overview">
<TabsList>
<TabsTrigger value="overview" tooltip="Overview">
Overview
</TabsTrigger>
<TabsTrigger value="remediation" tooltip="Remediation">
Remediation
</TabsTrigger>
</TabsList>
</Tabs>,
);
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");
});
});
ui/components/shadcn/tabs/tabs.tsx
+2 -2
View File
@@ -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",