Skip to content

feat(react-message-bar): add useMessageBarBase_unstable hook#35908

Draft
dmytrokirpa wants to merge 1 commit intomicrosoft:masterfrom
dmytrokirpa:feat/react-message-bar-base-hooks
Draft

feat(react-message-bar): add useMessageBarBase_unstable hook#35908
dmytrokirpa wants to merge 1 commit intomicrosoft:masterfrom
dmytrokirpa:feat/react-message-bar-base-hooks

Conversation

@dmytrokirpa
Copy link
Contributor

Summary

  • Adds useMessageBarBase_unstable hook and MessageBarBaseProps/MessageBarBaseState types (DistributiveOmit<..., 'shape'>)
  • Extracts all core ARIA/reflow/announce logic (layout computation, live-region announce, refs) into the base hook; intent stays in base as it drives accessibility behavior (politeness)
  • Styled useMessageBar_unstable delegates to base hook and sets default icon children via getIntentIcon(state.intent)
  • Updates renderMessageBar_unstable to accept MessageBarBaseState

Test plan

  • yarn nx build react-message-bar — passes, API md updated
  • yarn nx lint react-message-bar — passes
  • yarn nx test react-message-bar — 105 tests pass

Part of #35562

🤖 Generated with Claude Code

Adds `useMessageBarBase_unstable` hook and `MessageBarBaseProps`/`MessageBarBaseState` types that expose the core ARIA/reflow/announce logic without design-specific `shape` prop. The styled `useMessageBar_unstable` now delegates to the base hook and sets the default intent icon (getIntentIcon). Updates `renderMessageBar_unstable` to accept `MessageBarBaseState`.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@github-actions
Copy link

📊 Bundle size report

Package & Exports Baseline (minified/GZIP) PR Change
react-components
react-components: entire library
1.297 MB
324.029 kB
1.297 MB
324.069 kB
102 B
40 B
react-message-bar
MessageBar (all components)
23.294 kB
8.63 kB
23.396 kB
8.664 kB
102 B
34 B
Unchanged fixtures
Package & Exports Size (minified/GZIP)
react-components
react-components: Button, FluentProvider & webLightTheme
70.397 kB
19.96 kB
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover
236.65 kB
68.725 kB
react-components
react-components: FluentProvider & webLightTheme
43.612 kB
14.022 kB
react-portal-compat
PortalCompatProvider
8.386 kB
2.624 kB
react-timepicker-compat
TimePicker
108.174 kB
35.695 kB
🤖 This report was generated against dc6108e6bec042117f717ccdf0232446eef137d4

@github-actions
Copy link

Pull request demo site: URL

@@ -0,0 +1,7 @@
{

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🕵🏾‍♀️ visual changes to review in the Visual Change Report

vr-tests-react-components/Charts-DonutChart 1 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-react-components/Charts-DonutChart.Dynamic - Dark Mode.default.chromium.png 7530 Changed
vr-tests-react-components/Positioning 2 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-react-components/Positioning.Positioning end.chromium.png 622 Changed
vr-tests-react-components/Positioning.Positioning end.updated 2 times.chromium.png 12 Changed
vr-tests-react-components/TagPicker 2 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-react-components/TagPicker.disabled - RTL.disabled input hover.chromium.png 635 Changed
vr-tests-react-components/TagPicker.disabled.disabled input hover.chromium.png 677 Changed

There were 2 duplicate changes discarded. Check the build logs for more information.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant