[vvaliyev]

Description

Adds the internal Style API v2 to Flashbar: item (per message, a class or ({ item }) => string), icon, dismissButton (forwards to Button), notificationBar.

Behaviour changes:

• The notification bar's text elements use color: inherit. Default rendering is unchanged. The v1 style.notificationBar.root.color was a no-op before and now takes effect; the flashbar/style-custom VR baseline changes accordingly.
• The focus rings of items and of the bar's toggle are composed from the width and colour custom properties; the --awsui-style-focus-ring-box-shadow property is removed. Computed rings are identical.

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 the four slots, dev page flashbar/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]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 97.76%. Comparing base (00e5e24) to head (2803b90).
⚠️ Report is 12 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #5206      +/-   ##
==========================================
+ Coverage   97.74%   97.76%   +0.01%     
==========================================
  Files        1000     1003       +3     
  Lines       32346    32585     +239     
  Branches    11965    12120     +155     
==========================================
+ Hits        31616    31856     +240     
+ Misses        685      684       -1     
  Partials       45       45              

☔ 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

The focus-ring example cannot be exercised by keyboard because its focus container has tabIndex={-1} and the static, non-dismissible item has no other focus trigger.

1 open issue

• Make the focus-ring example keyboard-accessible · New

What changed in this PR

Adds internal Style API v2 support to Flashbar, allowing core-system consumers to customize message items and stacked notifications without adding props to the public interface.

Changes:

• Adds four styling slots: item, icon, dismissButton, and notificationBar, including per-item callbacks.
• Integrates focus-ring tokens and notification-bar color inheritance.
• Adds slot-forwarding tests and a styled demo page.

File	Description
src/​flashbar/​styles.scss	Declares item and icon slots, dismiss-button forwarding, and item focus-ring tokens.
src/​flashbar/​non-collapsible-flashbar.tsx	Resolves and forwards styling classes to individual messages.
src/​flashbar/​internal-interfaces.ts	Defines the internal styling-slot interface.
src/​flashbar/​flash.tsx	Applies classes to message elements and dismiss buttons.
src/​flashbar/​collapsible.scss	Adds notification-bar styling tokens and color inheritance.
src/​flashbar/​collapsible-flashbar.tsx	Applies classes to stacked messages, placeholders, and the notification bar.
src/​flashbar/​__tests__/​style-api.test.tsx	Tests class forwarding, callbacks, unknown keys, and DOM prop filtering.
pages/​flashbar/​style-api-v2.page.tsx	Demonstrates styling slots and focus-ring customization.
pages/​flashbar/​style-api-v2.page.scss	Defines demo styles using generated styling mixins.

_{Review effort: Balanced}

[Copilot]

🟡 Changes recommended

Outstanding review findings call for prefixing the internal prop with __ and removing decorative containers and subtitles from the dev-page examples.

2 open issues

• Render Flashbars directly without decorative containers · New
• Prefix internal prop with double underscores · New

1 resolved since last review

• Make the focus-ring example keyboard-accessible

_{Review effort: Balanced}

[gethinwebster]

The prop is not on the public FlashbarProps interface; it is typed on InternalFlashbarProps for core-system consumers.

I don't understand this bit: core doesn't have access to internal props either

[vvaliyev]

The prop is not on the public FlashbarProps interface; it is typed on InternalFlashbarProps for core-system consumers.

I don't understand this bit: core doesn't have access to internal props either

@gethinwebster You're right. Fixed the description.

[pan-kot]

Why is this description specific to box-shadow prop? Don't all item props also apply to the collapsed stack?