chore: Styling v2 for button dropdown and button group by pan-kot · Pull Request #5187 · cloudscape-design/components

pan-kot · 2026-10-26T05:56:05Z

Description

New APIs are reflected in the tracker: P3d34KdbCd6o.

How has this been tested?

Unit tests and test pages

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-10-26T06:04:20Z

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 97.73%. Comparing base (a9a2cb1) to head (4f3b7b3).
⚠️ Report is 13 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #5187      +/-   ##
==========================================
- Coverage   97.73%   97.73%   -0.01%     
==========================================
  Files         996      998       +2     
  Lines       32219    32252      +33     
  Branches    11906    11924      +18     
==========================================
+ Hits        31490    31522      +32     
+ Misses        723      685      -38     
- Partials        6       45      +39

☔ 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

🟡 Changes recommended

Upload focus rings ignore the new styling tokens, and the committed Style API documentation snapshots need updating.

2 open issues

What changed in this PR

Extends Style API v2 support to ButtonDropdown, ButtonGroup, and Divider, reusing the existing button and dropdown styling infrastructure.

Changes:

Adds styling slots and forwards classes through button-group item types.
Adds divider tokens and renames the internal dropdown slot to container.
Adds slot-forwarding tests and styling demo pages.

File	Description
src/toggle-button/internal.tsx	Forwards button styling classes.
src/internal/styles/style-api.scss	Makes the documentation forwarding slot optional.
src/file-input/internal.tsx	Forwards styling classes to the upload button.
src/dropdown/styles.scss	Renames the documented slot to `container`.
src/dropdown/internal.tsx	Applies the renamed container slot.
src/dropdown/__tests__/style-api.test.tsx	Updates tests for the container slot.
src/divider/styles.scss	Adds line-color and line-width tokens.
src/divider/internal.tsx	Applies the root styling class.
src/divider/index.tsx	Forwards root styling configuration.
src/divider/__tests__/style-api.test.tsx	Tests root classes and DOM prop filtering.
src/button-group/styles.scss	Adds divider tokens and forwarded slot documentation.
src/button-group/menu-dropdown-item.tsx	Styles menu triggers and panels.
src/button-group/item-element.tsx	Resolves item classes and distributes styling slots.
src/button-group/internal.tsx	Forwards slots and styles dividers.
src/button-group/internal-interfaces.ts	Defines group styling slots.
src/button-group/index.tsx	Forwards styling configuration.
src/button-group/icon-toggle-button-item.tsx	Forwards toggle-button styling.
src/button-group/icon-button-item.tsx	Forwards icon-button styling.
src/button-group/file-input-item.tsx	Forwards upload-button styling.
src/button-group/copy-to-clipboard-item.tsx	Forwards copy-button styling.
src/button-group/__tests__/style-api.test.tsx	Tests item callbacks and styling slots.
src/button-dropdown/styles.scss	Documents forwarded button and panel slots.
src/button-dropdown/internal.tsx	Applies trigger, main-action, and panel classes.
src/button-dropdown/internal-interfaces.ts	Defines dropdown styling slots.
src/button-dropdown/index.tsx	Forwards styling configuration.
src/button-dropdown/__tests__/style-api.test.tsx	Tests standard and split-button slots.
pages/dropdown/style-api-v2.scss	Uses the renamed container mixin.
pages/dropdown/style-api-v2.page.tsx	Uses the renamed container slot.
pages/divider/style-api-v2.scss	Defines divider styling examples.
pages/divider/style-api-v2.page.tsx	Demonstrates labeled and oriented dividers.
pages/button-group/style-api-v2.scss	Defines item, divider, and menu styles.
pages/button-group/style-api-v2.page.tsx	Demonstrates styling across item types.
pages/button-dropdown/style-api-v2.scss	Defines trigger and panel styles.
pages/button-dropdown/style-api-v2.page.tsx	Demonstrates standard, split, and icon variants.

_{Review effort: Balanced}

SpyZzey · 2026-10-27T11:04:11Z

+        <Divider {...({ styleClassNames: { root: 'a', unknown: 'b' } } as any)} />
+        <Divider {...({ styleClassNames: { root: 'c' } } as any)}>Label</Divider>


nit: Should we rename the classes to be more descriptive, e.g., plain-root, labelled-root, unknown-key (Same things in the other tests)

I'd keep it a/b/c to be honest - as we consistently use it in many other similar tests already - this includes 9 already merged components and 10+ not merged ones.

SpyZzey · 2026-10-27T11:11:00Z

+
+export default function () {
+  const [pinned, setPinned] = useState(false);
+  const items: ButtonGroupProps.ItemOrGroup[] = [


nit: Should we move this out to the file itself, not the function? Similar to how we do it in the button-dropdown to be consistent? Same for the styleClassNames

We cannot move items in this case because it depends on state (pinned). I will apply the change to styleClassNames.

Copilot

Warning

Copilot couldn't run its full agentic review because it didn't start before the timeout. Make sure your repository has a runner available, or add a copilot-code-review.yml file specifying one with the runs-on attribute. See the docs for more details.

Copilot review overview

5 open issues

The tests need as any to pass styleClassNames, which suggests the public DividerProps type… · New
The tests need as any to pass styleClassNames, which suggests the public DividerProps type… · New
This forwards styleClassNames via a type assertion on rest, which bypasses the public… · New
This uses a type assertion to read styleClassNames from props. To keep the public API type-safe… · New
Forwarding styleClassNames via a cast makes this harder to maintain and weakens type-safety.… · New

2 resolved since last review

_{Review effort: Lite}

pan-kot deployed to dev-pages-react16 October 26, 2026 05:59 — with GitHub Actions

View deployment

pan-kot deployed to dev-pages-react18 October 26, 2026 05:59 — with GitHub Actions

View deployment

pan-kot deployed to allure-report October 26, 2026 06:05 — with GitHub Actions

View deployment

pan-kot force-pushed the chore-style-api-button-dropdown-group branch from 579232a to 7ac7242 Compare October 26, 2026 06:47

pan-kot deployed to dev-pages-react18 October 26, 2026 06:50 — with GitHub Actions

View deployment

pan-kot deployed to dev-pages-react16 October 26, 2026 06:50 — with GitHub Actions

View deployment

pan-kot deployed to allure-report October 26, 2026 06:57 — with GitHub Actions

View deployment

pan-kot requested a review from SpyZzey October 26, 2026 07:54

pan-kot marked this pull request as ready for review October 26, 2026 07:54

pan-kot requested a review from a team as a code owner October 26, 2026 07:54

pan-kot requested a balanced review from Copilot and removed request for a team October 26, 2026 07:54

Copilot started reviewing on behalf of pan-kot October 26, 2026 07:54

View session

Copilot AI reviewed Oct 26, 2026

View reviewed changes

Comment thread src/dropdown/styles.scss Resolved

Comment thread src/file-input/internal.tsx Resolved

chore: Styling v2 for button dropdown and button group

f26f8ce

pan-kot force-pushed the chore-style-api-button-dropdown-group branch from 7ac7242 to f26f8ce Compare October 26, 2026 10:34

pan-kot deployed to dev-pages-react18 October 26, 2026 10:37 — with GitHub Actions

View deployment

pan-kot deployed to dev-pages-react16 October 26, 2026 10:37 — with GitHub Actions

View deployment

pan-kot deployed to allure-report October 26, 2026 10:45 — with GitHub Actions

View deployment

fix for file upload focus outline

dd74d17

pan-kot deployed to dev-pages-react16 October 27, 2026 08:58 — with GitHub Actions

View deployment

pan-kot deployed to dev-pages-react18 October 27, 2026 08:58 — with GitHub Actions

View deployment

pan-kot deployed to allure-report October 27, 2026 09:06 — with GitHub Actions

View deployment

SpyZzey reviewed Oct 27, 2026

View reviewed changes

minor refactor for test page

4f3b7b3

pan-kot deployed to dev-pages-react18 October 27, 2026 11:25 — with GitHub Actions

View deployment

pan-kot deployed to dev-pages-react16 October 27, 2026 11:25 — with GitHub Actions

View deployment

pan-kot deployed to allure-report October 27, 2026 11:32 — with GitHub Actions

View deployment

SpyZzey approved these changes Oct 27, 2026

View reviewed changes

pan-kot requested a balanced review from Copilot October 27, 2026 15:02

Copilot AI reviewed Oct 27, 2026

View reviewed changes

Comment thread src/divider/__tests__/style-api.test.tsx Resolved

Comment thread src/divider/__tests__/style-api.test.tsx Resolved

Comment thread src/divider/index.tsx Resolved

Comment thread src/button-dropdown/index.tsx Resolved

Comment thread src/button-group/index.tsx Resolved

Copilot stopped reviewing on behalf of pan-kot due to an error October 27, 2026 15:21
The job was not acquired by a runner even after multiple attempts.

pan-kot added this pull request to the merge queue Oct 27, 2026

github-merge-queue Bot removed this pull request from the merge queue due to no response for status checks Oct 27, 2026

pan-kot added this pull request to the merge queue Oct 28, 2026

github-merge-queue Bot removed this pull request from the merge queue due to failed status checks Oct 28, 2026

pan-kot added this pull request to the merge queue Oct 28, 2026

Merged via the queue into main with commit c011fbc Oct 28, 2026
68 of 69 checks passed

pan-kot deleted the chore-style-api-button-dropdown-group branch October 28, 2026 10:31

Navigation Menu

Repository navigation

chore: Styling v2 for button dropdown and button group - #5187

chore: Styling v2 for button dropdown and button group#5187
pan-kot merged 3 commits into
mainfrom
chore-style-api-button-dropdown-group

pan-kot commented Oct 26, 2026

Uh oh!

codecov Bot commented Oct 26, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

SpyZzey Oct 27, 2026 •

edited

Loading

Uh oh!

pan-kot Oct 27, 2026

Uh oh!

SpyZzey Oct 27, 2026

Uh oh!

pan-kot Oct 27, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

This branch was successfully deployed

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

		<Divider {...({ styleClassNames: { root: 'a', unknown: 'b' } } as any)} />
		<Divider {...({ styleClassNames: { root: 'c' } } as any)}>Label</Divider>

Conversation

pan-kot commented Oct 26, 2026

Description

How has this been tested?

Correctness

Security

Testing

Uh oh!

codecov Bot commented Oct 26, 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

🟡 Changes recommended

Uh oh!

Uh oh!

Uh oh!

SpyZzey Oct 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

pan-kot Oct 27, 2026

Choose a reason for hiding this comment

Uh oh!

SpyZzey Oct 27, 2026

Choose a reason for hiding this comment

Uh oh!

pan-kot Oct 27, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Copilot review overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

This branch was successfully deployed

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

codecov Bot commented Oct 26, 2026 •

edited

Loading

SpyZzey Oct 27, 2026 •

edited

Loading