1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
use *;
use ;
use component_doc;
use inject_style;
use message_bar_styles;
/// Severity preset controlling icon and color (`Info`, `Success`, `Warning`, `Error`).
pub use MessageBarLayout;
/// `MessageBar` shows persistent status at the top of a page or section — session warnings, connectivity loss, or validation summaries that should stay visible until resolved.
///
/// Pick [`MessageBarIntent`] for severity, switch to [`MessageBarLayout::Multiline`] when you need a title, body, and action row. For fleeting confirmations, use [`Toast`](crate::Toast) instead.
///
/// # When to use
///
/// - Page-level or section-level status that must remain visible until the user acts
/// - Warnings with optional retry or dismiss actions in [`MessageBarActions`]
///
/// Prefer [`Toast`](crate::Toast) for short-lived saves or errors that should not block the UI. Prefer [`Field`](crate::Field) validation for errors tied to a single form control.
///
/// # Usage
///
/// 1. Set `intent` to match severity (`Info`, `Success`, `Warning`, `Error`).
/// 2. Put primary copy in [`MessageBarBody`]; add [`MessageBarTitle`] when the message needs a headline.
/// 3. Use `layout=MessageBarLayout::Multiline` when stacking title, body, and [`MessageBarActions`].
/// 4. Place retry or dismiss [`Button`](crate::Button) children in [`MessageBarActions`] — there is no built-in close icon.
///
/// # Examples
///
/// ## Intent matrix
/// Show all four severity presets side by side so teams can pick the right tone for status, success, warning, and error states.
/// <!-- default -->
/// <!-- preview -->
/// ```rust
/// use crate::MessageBarBody;
/// view! {
/// <div data-testid="message-bar-preview">
/// <div data-testid="message-bar-intents" style="display: flex; flex-direction: column; gap: 8px;">
/// <MessageBar intent=MessageBarIntent::Info><MessageBarBody>"Your session expires in 10 minutes."</MessageBarBody></MessageBar>
/// <MessageBar intent=MessageBarIntent::Success><MessageBarBody>"Your profile was updated successfully."</MessageBarBody></MessageBar>
/// <MessageBar intent=MessageBarIntent::Warning><MessageBarBody>"Check your network connection."</MessageBarBody></MessageBar>
/// <MessageBar intent=MessageBarIntent::Error><MessageBarBody>"Upload failed. Try again."</MessageBarBody></MessageBar>
/// </div>
/// </div>
/// }
/// ```
///
/// ## With title
/// Pair a bold title with supporting body copy — one example per intent on the default single-line layout.
/// <!-- preview -->
/// ```rust
/// use crate::{MessageBarBody, MessageBarTitle};
/// view! {
/// <div data-testid="message-bar-with-title" style="display: flex; flex-direction: column; gap: 8px;">
/// <MessageBar intent=MessageBarIntent::Info>
/// <MessageBarTitle>"Session ending"</MessageBarTitle>
/// <MessageBarBody>"Your session expires in 10 minutes."</MessageBarBody>
/// </MessageBar>
/// <MessageBar intent=MessageBarIntent::Success>
/// <MessageBarTitle>"Saved"</MessageBarTitle>
/// <MessageBarBody>"Your profile was updated successfully."</MessageBarBody>
/// </MessageBar>
/// <MessageBar intent=MessageBarIntent::Warning>
/// <MessageBarTitle>"Connection lost"</MessageBarTitle>
/// <MessageBarBody>"Check your network and try again."</MessageBarBody>
/// </MessageBar>
/// <MessageBar intent=MessageBarIntent::Error>
/// <MessageBarTitle>"Upload failed"</MessageBarTitle>
/// <MessageBarBody>"The file exceeds the 10 MB limit."</MessageBarBody>
/// </MessageBar>
/// </div>
/// }
/// ```
///
/// ## Multiline
/// Multiline layout stacks title and body when the message needs more room or a footer action row below.
/// <!-- preview -->
/// ```rust
/// use crate::{MessageBarBody, MessageBarLayout, MessageBarTitle};
/// view! {
/// <div data-testid="message-bar-multiline" style="display: flex; flex-direction: column; gap: 8px;">
/// <MessageBar intent=MessageBarIntent::Info layout=MessageBarLayout::Multiline>
/// <MessageBarTitle>"Session ending"</MessageBarTitle>
/// <MessageBarBody>"Your session expires in 10 minutes. Save any unsaved work before you are signed out."</MessageBarBody>
/// </MessageBar>
/// <MessageBar intent=MessageBarIntent::Success layout=MessageBarLayout::Multiline>
/// <MessageBarTitle>"Saved"</MessageBarTitle>
/// <MessageBarBody>"Your profile was updated successfully. Changes may take a moment to appear elsewhere."</MessageBarBody>
/// </MessageBar>
/// <MessageBar intent=MessageBarIntent::Warning layout=MessageBarLayout::Multiline>
/// <MessageBarTitle>"Connection lost"</MessageBarTitle>
/// <MessageBarBody>"Check your network and try again. Some features may be unavailable until you reconnect."</MessageBarBody>
/// </MessageBar>
/// <MessageBar intent=MessageBarIntent::Error layout=MessageBarLayout::Multiline>
/// <MessageBarTitle>"Upload failed"</MessageBarTitle>
/// <MessageBarBody>"The file exceeds the 10 MB limit. Choose a smaller file and try again."</MessageBarBody>
/// </MessageBar>
/// </div>
/// }
/// ```
///
/// ## With actions
/// Place retry or dismiss actions in the footer so users can respond without leaving the banner context.
/// <!-- preview -->
/// ```rust
/// use crate::{Button, MessageBarActions, MessageBarBody, MessageBarTitle};
/// view! {
/// <div data-testid="message-bar-actions">
/// <MessageBar intent=MessageBarIntent::Warning layout=MessageBarLayout::Multiline>
/// <MessageBarTitle>"Connection lost"</MessageBarTitle>
/// <MessageBarBody>"Check your network and try again."</MessageBarBody>
/// <MessageBarActions>
/// <Button>"Retry"</Button>
/// </MessageBarActions>
/// </MessageBar>
/// </div>
/// }
/// ```
///
/// ## Theme token
/// Message bar borders and backgrounds inherit intent tokens from the Orbital theme provider.
/// <!-- preview -->
/// ```rust
/// use crate::MessageBarBody;
/// view! {
/// <div data-testid="message-bar-theme">
/// <MessageBar intent=MessageBarIntent::Info>
/// <MessageBarBody>"Themed message bar surface"</MessageBarBody>
/// </MessageBar>
/// </div>
/// }
/// ```