Skip to content

fix(tab) :: underline only the active tab - #1583

Open
81reap wants to merge 1 commit into
mainfrom
81reap/issue/791
Open

81reap wants to merge 1 commit into
mainfrom
81reap/issue/791

Conversation

@81reap

@81reap 81reap commented Oct 30, 2026

Copy link
Copy Markdown
Collaborator

Now colour is properly passed through to theme Tabler's underline on the active tab.

Fixes :: #791

Assisted-By :: Claude Opus 5.5

Now colour is properly passed through to theme Tabler's underline on the active tab.

Fixes :: #791

Assisted-By :: Claude Opus 5.5
@81reap

81reap commented Oct 30, 2026

Copy link
Copy Markdown
Collaborator Author

reproduction from #791

$ cat tests/end-to-end/fixtures/repro_791/index.sql 
SELECT 'tab' AS component;
SELECT '2023' AS title, 'red' AS color;
SELECT '2024' AS title, 'green' AS color, TRUE AS active;
SELECT '2025' AS title, 'yellow' AS color;

$ cat tests/end-to-end/fixtures/repro_791/test.ts 
import { expect, test } from "../../fixture.ts";

test("only the active colored tab is underlined", async ({ page }) => {
  const underlines = await page.locator(".nav-link").evaluateAll((links) => links.map((a) => getComputedStyle(a).borderBottomColor));
  const transparent = "rgba(0, 0, 0, 0)";
  expect(underlines.map((c) => c !== transparent)).toEqual([false, true, false]);
});
repro_791 postgres
v0.36.0 ✘ failed
v0.47.0 ✘ failed
tree ✔ passed

On commit 231ed30: nix run .#reproduce -- repro_791 postgres v0.36.0 v0.47.0 tree

@81reap
81reap marked this pull request as ready for review October 30, 2026 01:02
@81reap 81reap linked an issue Oct 30, 2026 that may be closed by this pull request
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Using tabs with colors underlines all tab sections

1 participant