Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-11-28 15:23:51 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 1845541 - Write a README documenting moz-message-bar r=tgiles,hjones,reusable-components-reviewers

Browse Source 
Differential Revision: https://phabricator.services.mozilla.com/D192259
This commit is contained in:
ganna 2023-11-06 15:40:27 +00:00
parent 05fab4cfdd
commit c7f4eee33a
1 changed files with 67 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

67
toolkit/content/widgets/moz-message-bar/README.stories.md Normal file
View File

@ -0,0 +1,67 @@
# MozMessageBar
`moz-message-bar` is a versatile user interface element designed to display messages or notifications.
These messages and notifications are nonmodal, and keep users informed without blocking access to the base page.
It supports various types of messages - info, warning, success, and error - each with distinct visual styling
to convey the message's urgency or importance. You can customize `moz-message-bar` by adding a message, message heading,
`moz-support-link`, actions buttons, or by making the message bar dismissable.
```html story
<moz-message-bar dismissable
heading="Heading of the message bar"
message="Message for the user">
</moz-message-bar>
```
## When to use
* Use the message bar to display important announcements or notifications to the user.
* Use it to attract the user's attention without interrupting the user's task.
## When not to use
* Do not use the message bar for displaying critical alerts or warnings that require immediate and focused attention.
## Code
The source for `moz-message-bar` can be found under
[toolkit/content/widgets/moz-message-bar](https://searchfox.org/mozilla-central/source/toolkit/content/widgets/moz-message-bar/moz-message-bar.mjs).
You can find an examples of `moz-message-bar` in use in the Firefox codebase in
[about:addons](https://searchfox.org/mozilla-central/source/toolkit/mozapps/extensions/content/aboutaddons.html),
[unified extensions panel](https://searchfox.org/mozilla-central/source/browser/base/content/browser-addons.js) and
[shopping components](https://searchfox.org/mozilla-central/source/browser/components/shopping/content/shopping-message-bar.mjs).
`moz-message-bar` can be imported into `.html`/`.xhtml` files:
```html
<script type="module" src="chrome://global/content/elements/moz-message-bar.mjs"></script>
```
And used as follows:
```html
<moz-message-bar dismissable
heading="Heading of the message bar"
message="Message for the user">
</moz-message-bar>
```
### Fluent usage
Generally the `heading` and `message` properties of
`moz-message-bar` will be provided via [Fluent attributes](https://mozilla-l10n.github.io/localizer-documentation/tools/fluent/basic_syntax.html#attributes).
To get this working you will need to specify a `data-l10n-id` as well as
`data-l10n-attrs` if you're providing a heading and a message:
```html
<moz-message-bar data-l10n-id="with-heading-and-message"
data-l10n-attrs="heading, message"></moz-message-bar>
```
In which case your Fluent messages will look something like this:
```
with-heading-and-message =
.heading = Heading text goes here
.message = Message text goes here
```