commit 8624a4b819f760bbde4444ce5e8631d9512c311f
parent 6bc5281cb19ac4c8e258f08240ca471e9954a050
Author: mark <mkennedy@mozilla.com>
Date: Thu, 23 Oct 2025 19:16:21 +0000
Bug 1991104 - Add support for a message slot to moz-message-bar r=hjones
Differential Revision: https://phabricator.services.mozilla.com/D268133
Diffstat:
4 files changed, 70 insertions(+), 9 deletions(-)
diff --git a/toolkit/content/tests/widgets/test_moz_message_bar.html b/toolkit/content/tests/widgets/test_moz_message_bar.html
@@ -46,6 +46,13 @@
<moz-message-bar id="messageWithLink" message="Test message">
<a slot="support-link" href="#learn-less">Learn less</a>
</moz-message-bar>
+ <moz-message-bar id="slottedMessage">
+ <span slot="message"
+ >Here is a message with a nested
+ <a href="https://example.com" target="_blank">link</a>.</span
+ >
+ <a slot="support-link" href="#learn-less">Learn less</a>
+ </moz-message-bar>
</div>
<script class="testbody" type="application/javascript">
add_task(async function test_component_declaration() {
@@ -189,6 +196,20 @@
const msgEl2 = mozMessageBar2.messageEl;
is(msgEl2.className, "message", "Class when link was never assigned");
});
+
+ add_task(async function test_message_slot() {
+ const mozMessageBar = document.querySelector("#slottedMessage");
+ const slottedMessageElement = mozMessageBar.querySelector(
+ "span[slot='message']"
+ );
+
+ ok(slottedMessageElement, "renders the message slot");
+ const slottedSupportLinkElement = mozMessageBar.querySelector(
+ "a[slot='support-link']"
+ );
+
+ ok(slottedSupportLinkElement, "still renders a slotted support link");
+ });
</script>
</body>
</html>
diff --git a/toolkit/content/widgets/moz-message-bar/README.stories.md b/toolkit/content/widgets/moz-message-bar/README.stories.md
@@ -53,3 +53,23 @@ The `data-l10n-attrs` will be set up automatically via `MozLitElement`, so you c
```html
<moz-message-bar data-l10n-id="with-heading-and-message"></moz-message-bar>
```
+
+### Custom `message` slot
+
+Normally the "message" of `moz-message-bar` can only be a string (containing no HTML elements). However, if you'd like to use a message that contains nested HTML, such as an anchor link, you can use the message slot.
+
+
+```html
+<moz-message-bar>
+ <span slot="message" data-l10n-id="moz-message-bar-message-slot">
+ <a data-l10n-name="moz-message-bar-link" href="http://example.com"></a>
+ </span>
+</moz-message-bar>
+```
+
+
+```html story
+<moz-message-bar>
+ <span slot="message">Here is a message with a nested <a href="https://example.com" target="_blank">link</a>.</span>
+</moz-message-bar>
+```
diff --git a/toolkit/content/widgets/moz-message-bar/moz-message-bar.mjs b/toolkit/content/widgets/moz-message-bar/moz-message-bar.mjs
@@ -152,15 +152,17 @@ export default class MozMessageBar extends MozLitElement {
<div class="text-content">
${this.headingTemplate()}
<div>
- <span
- class="message"
- data-l10n-id=${ifDefined(this.messageL10nId)}
- data-l10n-args=${ifDefined(
- JSON.stringify(this.messageL10nArgs)
- )}
- >
- ${this.message}
- </span>
+ <slot name="message">
+ <span
+ class="message"
+ data-l10n-id=${ifDefined(this.messageL10nId)}
+ data-l10n-args=${ifDefined(
+ JSON.stringify(this.messageL10nArgs)
+ )}
+ >
+ ${this.message}
+ </span>
+ </slot>
<span class="link">
<slot
name="support-link"
diff --git a/toolkit/content/widgets/moz-message-bar/moz-message-bar.stories.mjs b/toolkit/content/widgets/moz-message-bar/moz-message-bar.stories.mjs
@@ -10,6 +10,7 @@ const fluentStrings = [
"moz-message-bar-message",
"moz-message-bar-message-heading",
"moz-message-bar-message-heading-long",
+ "moz-message-bar-message-with-link",
];
export default {
@@ -47,6 +48,7 @@ moz-message-bar-message-heading-long =
.heading = A longer heading to check text wrapping in the message bar
.message = Some message that we use to check text wrapping. Some message that we use to check text wrapping.
moz-message-bar-button = Click me!
+moz-message-bar-message-slot = This is a message inside of a slot that contains a <a data-l10n-name="moz-message-bar-link">link</a>
`,
},
};
@@ -59,6 +61,7 @@ const Template = ({
dismissable,
hasSupportLink,
hasActionButton,
+ hasSlottedMessage,
}) => html`
<moz-message-bar
type=${type}
@@ -67,6 +70,14 @@ const Template = ({
data-l10n-id=${ifDefined(l10nId)}
?dismissable=${dismissable}
>
+ ${hasSlottedMessage
+ ? html` <span slot="message" data-l10n-id="moz-message-bar-message-slot"
+ ><a
+ data-l10n-name="moz-message-bar-link"
+ href="http://example.com"
+ ></a
+ ></span>`
+ : ""}
${hasSupportLink
? html`
<a
@@ -91,6 +102,7 @@ Default.args = {
dismissable: false,
hasSupportLink: false,
hasActionButton: false,
+ hasSlottedMessage: false,
};
export const Dismissable = Template.bind({});
@@ -125,3 +137,9 @@ WithHeading.args = {
...Default.args,
l10nId: "moz-message-bar-message-heading",
};
+
+export const WithMessageSlot = Template.bind({});
+WithMessageSlot.args = {
+ ...Default.args,
+ hasSlottedMessage: true,
+};
