Skip to content

feat: add per-group expandable control to button dropdown - #4947

Draft
revezard wants to merge 7 commits into
cloudscape-design:mainfrom
revezard:revezard/button-dropdown-expandable-groups
Draft

feat: add per-group expandable control to button dropdown#4947
revezard wants to merge 7 commits into
cloudscape-design:mainfrom
revezard:revezard/button-dropdown-expandable-groups

Conversation

@revezard

Copy link
Copy Markdown
Contributor

Description

Adds an expandable flag to ButtonDropdown's ItemGroup that overrides the dropdown-level
expandableGroups on a per-group basis:

  • expandable: true — the group renders as an expandable submenu even when expandableGroups is unset
  • expandable: false — the group renders inline (flat) even when expandableGroups is set
  • unset — the group inherits the expandableGroups value

This lets a single dropdown mix expandable and flat groups (e.g. keep high-traffic groups inline
while long/secondary groups collapse into submenus). Expandability is resolved per node via a
small planeOf plane model rather than a single global flag, so expandable and flat groups
coexist correctly for keyboard navigation on both desktop and in the mobile restricted view.
The change is backward-compatible: with no expandable flag set, behavior is identical to today.

Implemented per design alignment with the Cloudscape team (<name / discussion or issue link>).

Related links, issue #, if available: <link, or n/a>

How has this been tested?

  • Unit: full button-dropdown unit suite passes. Added is-group-expandable.test.ts (locks the
    inherit/override resolution) and new mixed expandable/flat navigation cases in
    move-highlight.test.ts covering both desktop plane confinement and the mobile restricted-view
    path (flat-group children reachable, collapsed expandable-group children gated).
  • Accessibility (integration): the axe a11y suite passes on button-dropdown/expandable and a
    new button-dropdown/expandable-mixed dev page, in both light and dark modes.
  • Manual: keyboard navigation on desktop and in forced-mobile mode; arrow-key traversal across
    flat groups and into/out of expandable groups; filtering flattens all groups; toggling
    expandableGroups with per-group expandable overrides behaves as documented.

Reviewers can exercise it on the button-dropdown/expandable-mixed dev page: toggle
expandableGroups and observe the forced-expandable (true) and forced-flat (false) groups hold
their behavior while the rest inherit.

Review checklist

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

Correctness

  • Changes include appropriate documentation updates. (new expandable prop documented via JSDoc on ItemGroup)
  • Changes are backward-compatible. (unset flag inherits expandableGroups; absent flag preserves current behavior)
  • Changes do not include unsupported browser features.
  • Changes were manually tested for accessibility. (keyboard nav desktop + mobile; axe suite light/dark)

Security

  • N/A — this change does not handle URLs.

Testing

  • Changes are covered with new/existing unit tests. (is-group-expandable.test.ts, move-highlight.test.ts mixed-mode cases)
  • Changes are covered with new/existing integration tests. (axe a11y integ on the expandable + expandable-mixed dev pages)

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

@revezard
revezard requested a review from a team as a code owner August 28, 2026 13:30
@revezard
revezard requested review from georgylobko and removed request for a team August 28, 2026 13:30
@gethinwebster
gethinwebster marked this pull request as draft August 28, 2026 13:32
@github-actions
github-actions Bot temporarily deployed to fork-dev-pages-react18 August 31, 2026 08:08 Inactive
@github-actions
github-actions Bot temporarily deployed to fork-dev-pages-react16 August 31, 2026 08:08 Inactive
@github-actions
github-actions Bot temporarily deployed to fork-dev-pages-react18 August 31, 2026 11:48 Inactive
@github-actions
github-actions Bot temporarily deployed to fork-dev-pages-react16 August 31, 2026 11:48 Inactive
@github-actions
github-actions Bot temporarily deployed to fork-dev-pages-react18 August 31, 2026 14:26 Inactive
@github-actions
github-actions Bot temporarily deployed to fork-dev-pages-react16 August 31, 2026 14:26 Inactive
@github-actions
github-actions Bot temporarily deployed to fork-dev-pages-react18 August 31, 2026 16:18 Inactive
@github-actions
github-actions Bot temporarily deployed to fork-dev-pages-react16 August 31, 2026 16:18 Inactive
@github-actions
github-actions Bot temporarily deployed to fork-dev-pages-react16 September 1, 2026 09:49 Inactive
@github-actions
github-actions Bot temporarily deployed to fork-dev-pages-react18 September 1, 2026 09:49 Inactive
@github-actions
github-actions Bot temporarily deployed to fork-dev-pages-react18 September 1, 2026 14:53 Inactive
@github-actions
github-actions Bot temporarily deployed to fork-dev-pages-react16 September 1, 2026 14:53 Inactive
@github-actions
github-actions Bot temporarily deployed to fork-dev-pages-react16 September 1, 2026 15:16 Inactive
@github-actions
github-actions Bot temporarily deployed to fork-dev-pages-react18 September 1, 2026 15:16 Inactive
@codecov

codecov Bot commented Sep 1, 2026

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 93.76%. Comparing base (6de850b) to head (c731f10).

Additional details and impacted files
@@            Coverage Diff             @@
##             main    #4947      +/-   ##
==========================================
- Coverage   97.66%   93.76%   -3.91%     
==========================================
  Files         959      958       -1     
  Lines       31342    27144    -4198     
  Branches    11578     9763    -1815     
==========================================
- Hits        30610    25451    -5159     
+ Misses        686      613      -73     
- Partials       46     1080    +1034     

☔ 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.

@github-actions
github-actions Bot temporarily deployed to fork-dev-pages-react18 September 1, 2026 16:20 Inactive
@github-actions
github-actions Bot temporarily deployed to fork-dev-pages-react16 September 1, 2026 16:21 Inactive
@github-actions
github-actions Bot temporarily deployed to fork-dev-pages-react18 September 2, 2026 10:11 Inactive
@github-actions
github-actions Bot temporarily deployed to fork-dev-pages-react16 September 2, 2026 10:12 Inactive
@github-actions
github-actions Bot temporarily deployed to fork-dev-pages-react18 September 2, 2026 10:33 Inactive
@github-actions
github-actions Bot temporarily deployed to fork-dev-pages-react16 September 2, 2026 10:34 Inactive
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.

2 participants