Skip to content

feat: add defaultExpanded and onToggle to stacked Flashbar#4811

Draft
ernst-dev wants to merge 1 commit into
mainfrom
feat/flashbar-stack-collapse
Draft

feat: add defaultExpanded and onToggle to stacked Flashbar#4811
ernst-dev wants to merge 1 commit into
mainfrom
feat/flashbar-stack-collapse

Conversation

@ernst-dev

Copy link
Copy Markdown
Member

Description

Adds two opt-in, backward-compatible props to Flashbar for controlling the stacked notifications group (stackItems), filling a gap in the existing stacking/collapse behavior — previously the expand/collapse state was purely internal and could neither be initialized nor observed by consumers.

  • defaultExpanded?: boolean — sets the initial expanded/collapsed state of the stacked group. Only has effect when stackItems is true. Defaults to false, so existing behavior is unchanged.
  • onToggle?: NonCancelableEventHandler<FlashbarProps.ToggleDetail> — fires with { expanded } when the user expands or collapses the stack via the notification bar.

Implementation reuses the existing collapsible-flashbar expand/collapse mechanics (initializes isFlashbarStackExpanded from defaultExpanded, fires onToggle from the existing toggleCollapseExpand handler). No changes to the non-stacked Flashbar.

Ticket note: This work references SIM AWSUI-61751. That ticket is actually a resolved "Cloudscape a11y feedback request" and does not describe the Flashbar stack/collapse feature. The Flashbar already ships stackItems (collapsible stacking), so — per the task guidance to fill the described gap rather than duplicate — this PR adds programmatic control/observation of the existing collapse state instead of re-implementing stacking.

Related links, issue #, if available: SIM AWSUI-61751 (mismatched — see note above)

How has this been tested?

  • New unit tests in src/flashbar/__tests__/collapsible.test.tsx covering: default-collapsed, defaultExpanded true/false, onToggle firing with expanded: true/false, and no callback on initial render.
  • Full Flashbar suite + documenter snapshot: 324 tests / 97 snapshots passing.
  • eslint clean on all changed files; gulp quick-build succeeds.
  • New dev page pages/flashbar/stack-collapse-control.page.tsx for manual/visual verification.
Review checklist

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

Correctness

  • Changes include appropriate documentation updates. (prop TSDoc + API definition snapshot)
  • Changes are backward-compatible. (both props optional; defaults preserve current behavior)
  • Changes do not include unsupported browser features.
  • Changes were manually tested for accessibility. (aria-expanded on the toggle reflects the new initial state)

Security

  • No URL handling in this change.

Testing

  • Changes are covered with new/existing unit tests? Yes.
  • Changes are covered with new/existing integration tests? Existing collapsible integ coverage still applies.

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

Adds two opt-in, backward-compatible props to Flashbar for controlling the
stacked notifications group (stackItems):

- defaultExpanded: sets the initial expanded/collapsed state of the stack
- onToggle: fires with { expanded } when the user expands/collapses the stack

Reuses the existing collapsible-flashbar expand/collapse mechanics; default
behavior is unchanged (collapsed on first render, no callback). Includes unit
tests, a dev page, and updated API documentation snapshot.
@codecov

codecov Bot commented Jul 23, 2026

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 97.61%. Comparing base (f97729a) to head (5e469ea).

Additional details and impacted files
@@           Coverage Diff           @@
##             main    #4811   +/-   ##
=======================================
  Coverage   97.61%   97.61%           
=======================================
  Files         952      952           
  Lines       30816    30818    +2     
  Branches    11318    11318           
=======================================
+ Hits        30081    30083    +2     
- Misses        688      728   +40     
+ Partials       47        7   -40     

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

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.

1 participant