chore: Adds internal style api v2 to tabs by vvaliyev · Pull Request #5256 · cloudscape-design/components

vvaliyev · 2026-11-04T20:26:09Z

Description

Adds the internal Style API v2 to Tabs: tabsHeader, tab (a class name or a function of the tab), tabLink, content, dismissButton forwards to Button.root. No container slot: a styled Container around a default-variant Tabs covers that case.

Default rendering is unchanged.

The style-docs snapshot and the VR registration of the dev page follow in one PR for all components.

Tracker section: P3d34KdbCd6o.

Related links, issue #, if available: n/a

How has this been tested?

Unit tests for every slot and forward, dev page tabs/style-api-v2, build and lint green.

Review checklist

The following items are to be evaluated by the author(s) and the reviewer(s).

Correctness

Changes include appropriate documentation updates.
Changes are backward-compatible if not indicated, see CONTRIBUTING.md.
Changes do not include unsupported browser features, see CONTRIBUTING.md.
Changes were manually tested for accessibility, see accessibility guidelines.

Security

If the code handles URLs: all URLs are validated through the checkSafeUrl function.

Testing

Changes are covered with new/existing unit tests?
Changes are covered with new/existing integration tests?

By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of your choice.

codecov · 2026-11-04T20:55:08Z

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 97.86%. Comparing base (645627b) to head (0dc9ec0).

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #5256   +/-   ##
=======================================
  Coverage   97.86%   97.86%           
=======================================
  Files        1016     1016           
  Lines       32847    32850    +3     
  Branches    12176    12181    +5     
=======================================
+ Hits        32146    32149    +3     
  Misses        695      695           
  Partials        6        6

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

Copilot

🟢 Approval recommended

No active review issues are reported for the tab styling update.

No open issues 🎉

What changed in this PR

Moves default tab colors and typography to the tab container so future container-level styles can reach labels in every state, while keeping style.tab styling on the link.

Changes:

Makes tab links inherit container typography and state colors while preserving action and dismiss styling.
Adds tests confirming where style.tab, indicator, and separator styles are applied.
Adds disabled-tab examples with text actions and dismiss buttons.

File	Description
`src/tabs/tab-header-bar.scss`	Moves default typography and state colors to containers, preserving link-level overrides.
`src/tabs/__tests__/tabs.test.tsx`	Tests link and container style placement and padding passthrough.
`pages/tabs/actions.page.tsx`	Adds disabled tabs with text actions and dismiss buttons.

_{Review effort: Balanced}

Copilot

🟡 Changes recommended

Two-value padding customizations generate invalid longhand values and lose tab padding, while the hover rule overrides disabled-tab colors.

2 open issues

_{Review effort: Balanced}

Copilot

🟡 Changes recommended

The styled-tab selections use local state instead of the required AppContext URL parameters, so they are lost on reload and cannot be shared via links or directly targeted by integration tests.

1 open issue

Persist active tab selections in URL parameters · New

2 resolved since last review

_{Review effort: Balanced}

+  const [activeId, setActiveId] = useState('one');
+  const [containerActiveId, setContainerActiveId] = useState('one');


Copilot

🟡 Changes recommended

Inactive-tab hover labels have near-invisible contrast, and local-only tab selection prevents URL-based sharing and reload persistence required by the dev-page convention.

3 open issues

_{Review effort: Balanced}

+      const el = container.querySelector('.dismiss-root');
+      expect(el).not.toBeNull();


pan-kot · 2026-11-10T16:47:51Z

+const disabledTabs: TabsProps['tabs'] = [
+  { id: 'one', label: 'Overview', content: 'Overview content.' },
+  { id: 'two', label: 'Details', disabled: true, content: 'Details content.' },
+  { id: 'three', label: 'History', content: 'History content.' },


nit: I'd simplify the test page as most of the examples are identical. E.g. instead of having separate baseTabs and disabledTabs - we can have a single set of tabs with some tabs being disabled. In that case it is best to have more than 3 tabs so that we can see different combinations of edges. Likewise, we can add a tab with a dismiss button to the same set.

Then, we can style the same set of tabs differently with 2-3 style combinations, so as result we should have 2-3 styled versions of tabs instead of 9.

pan-kot · 2026-11-10T16:51:11Z

  flex: 1;
  @include focus-visible.when-visible {
-    @include styles.container-focus();
+    @include styles.windows-high-contrast-outline($offset: 2px);


Let's introduce a version of container-focus inside src/internal/styles/style-api.scss - same as we did for styled focus-highlgiht

pan-kot · 2026-11-10T16:54:44Z

+      active-indicator-width,
+      var(#{custom-props.$styleTabsActiveIndicatorWidth}, awsui.$border-active-width)
+    );
+    @if style-api.enabled() {


I'd drop the @if style-api.enabled() - it is just three lines of code, and by making those conditional we introduce a difference in styles between packages which can lead to package-specific regressions.

vvaliyev deployed to dev-pages-react16 November 4, 2026 20:48 — with GitHub Actions

View deployment

vvaliyev deployed to dev-pages-react18 November 4, 2026 20:48 — with GitHub Actions

View deployment

vvaliyev deployed to allure-report November 4, 2026 21:05 — with GitHub Actions

View deployment

vvaliyev requested a balanced review from Copilot November 5, 2026 07:08

Copilot started reviewing on behalf of vvaliyev November 5, 2026 07:08

View session

Copilot AI reviewed Nov 5, 2026

View reviewed changes

vvaliyev deployed to allure-report November 5, 2026 08:17 — with GitHub Actions

View deployment

vvaliyev force-pushed the style-v2-tabs-refactor-2 branch from c9e96ce to 1c7a262 Compare November 8, 2026 21:47

vvaliyev changed the title ~~refactor: Move tab color and font to the tab container~~ chore: Adds internal style api v2 to tabs Nov 8, 2026

vvaliyev deployed to dev-pages-react18 November 8, 2026 21:51 — with GitHub Actions

View deployment

vvaliyev deployed to dev-pages-react16 November 8, 2026 21:51 — with GitHub Actions

View deployment

vvaliyev deployed to allure-report November 8, 2026 21:57 — with GitHub Actions

View deployment

vvaliyev requested a balanced review from Copilot November 9, 2026 05:12

Copilot started reviewing on behalf of vvaliyev November 9, 2026 05:12

View session

Copilot AI reviewed Nov 9, 2026

View reviewed changes

Comment thread pages/tabs/style-api-v2.scss Resolved

Comment thread src/tabs/tab-header-bar.scss Resolved

vvaliyev force-pushed the style-v2-tabs-refactor-2 branch from 1c7a262 to 1d3fb84 Compare November 9, 2026 06:14

vvaliyev deployed to dev-pages-react18 November 9, 2026 06:17 — with GitHub Actions

View deployment

vvaliyev deployed to dev-pages-react16 November 9, 2026 06:17 — with GitHub Actions

View deployment

vvaliyev deployed to allure-report November 9, 2026 06:24 — with GitHub Actions

View deployment

vvaliyev requested a balanced review from Copilot November 9, 2026 06:41

Copilot started reviewing on behalf of vvaliyev November 9, 2026 06:41

View session

Copilot AI reviewed Nov 9, 2026

View reviewed changes

Comment thread pages/tabs/style-api-v2.page.tsx Outdated

Comment on lines +46 to +47

const [activeId, setActiveId] = useState('one');

const [containerActiveId, setContainerActiveId] = useState('one');

vvaliyev marked this pull request as ready for review November 9, 2026 06:46

vvaliyev requested a review from a team as a code owner November 9, 2026 06:46

vvaliyev requested review from cansuaa and removed request for a team November 9, 2026 06:46

vvaliyev enabled auto-merge November 9, 2026 06:49

vvaliyev force-pushed the style-v2-tabs-refactor-2 branch from 1d3fb84 to 32c4ae0 Compare November 9, 2026 11:17

vvaliyev deployed to dev-pages-react18 November 9, 2026 11:20 — with GitHub Actions

View deployment

vvaliyev deployed to dev-pages-react16 November 9, 2026 11:20 — with GitHub Actions

View deployment

vvaliyev deployed to allure-report November 9, 2026 11:27 — with GitHub Actions

View deployment

vvaliyev requested a balanced review from Copilot November 10, 2026 10:57

Copilot started reviewing on behalf of vvaliyev November 10, 2026 10:59

View session

Copilot AI reviewed Nov 10, 2026

View reviewed changes

Comment thread pages/tabs/style-api-v2.scss Resolved

Comment thread src/tabs/__tests__/style-api.test.tsx Outdated

Comment on lines +116 to +117

const el = container.querySelector('.dismiss-root');

expect(el).not.toBeNull();

vvaliyev force-pushed the style-v2-tabs-refactor-2 branch from 32c4ae0 to 560b8dc Compare November 10, 2026 15:37

vvaliyev deployed to dev-pages-react18 November 10, 2026 15:47 — with GitHub Actions

View deployment

vvaliyev deployed to dev-pages-react16 November 10, 2026 15:47 — with GitHub Actions

View deployment

vvaliyev deployed to allure-report November 10, 2026 16:38 — with GitHub Actions

View deployment

pan-kot reviewed Nov 10, 2026

View reviewed changes

chore: Adds internal style api v2 to tabs

5873ea4

vvaliyev force-pushed the style-v2-tabs-refactor-2 branch from 560b8dc to 5873ea4 Compare November 11, 2026 09:26

vvaliyev deployed to dev-pages-react18 November 11, 2026 09:29 — with GitHub Actions

View deployment

vvaliyev deployed to dev-pages-react16 November 11, 2026 09:29 — with GitHub Actions

View deployment

vvaliyev deployed to allure-report November 11, 2026 09:38 — with GitHub Actions

View deployment

pan-kot approved these changes Nov 11, 2026

View reviewed changes

Merge branch 'main' into style-v2-tabs-refactor-2

0dc9ec0

pan-kot deployed to dev-pages-react18 November 11, 2026 17:40 — with GitHub Actions

View deployment

pan-kot deployed to dev-pages-react16 November 11, 2026 17:40 — with GitHub Actions

View deployment

pan-kot deployed to allure-report November 11, 2026 19:51 — with GitHub Actions

View deployment

vvaliyev added this pull request to the merge queue Nov 11, 2026

Merged via the queue into main with commit a7dc9e1 Nov 11, 2026
68 checks passed

vvaliyev deleted the style-v2-tabs-refactor-2 branch November 11, 2026 21:21

Navigation Menu

Repository navigation

chore: Adds internal style api v2 to tabs - #5256

chore: Adds internal style api v2 to tabs#5256
vvaliyev merged 2 commits into
mainfrom
style-v2-tabs-refactor-2

vvaliyev commented Nov 4, 2026 •

edited

Loading

Uh oh!

codecov Bot commented Nov 4, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

pan-kot Nov 10, 2026

Uh oh!

pan-kot Nov 10, 2026

Uh oh!

pan-kot Nov 10, 2026

Uh oh!

Uh oh!

This branch was successfully deployed

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

		const [activeId, setActiveId] = useState('one');
		const [containerActiveId, setContainerActiveId] = useState('one');

		const el = container.querySelector('.dismiss-root');
		expect(el).not.toBeNull();

Conversation

vvaliyev commented Nov 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

How has this been tested?

Correctness

Security

Testing

Uh oh!

codecov Bot commented Nov 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

🟢 Approval recommended

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

🟡 Changes recommended

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

🟡 Changes recommended

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

🟡 Changes recommended

Uh oh!

Uh oh!

pan-kot Nov 10, 2026

Choose a reason for hiding this comment

Uh oh!

pan-kot Nov 10, 2026

Choose a reason for hiding this comment

Uh oh!

pan-kot Nov 10, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

This branch was successfully deployed

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

vvaliyev commented Nov 4, 2026 •

edited

Loading

codecov Bot commented Nov 4, 2026 •

edited

Loading