-
${message}
- ${when(inlineButtonLabel, () =>
+
+ ${when(variant, () =>
+ Icon({
+ iconName,
+ setName: "workflow",
+ size: "m",
+ customClasses: [`${rootClass}-typeIcon`],
+ }, context)
+ )}
+
${message}
+
+ ${when(hasButton && inlineButtonLabel, () =>
Button({
variant: "secondary",
size: "m",
@@ -54,13 +57,12 @@ export const Template = ({
}, context)
)}
- ${CloseButton({
- size: "m",
- staticColor: "white",
- onclick,
- }, context)}
-
+ ${CloseButton({
+ size: "m",
+ iconSize: "large",
+ staticColor: "white",
+ onclick,
+ }, context)}
`;
};
diff --git a/components/toast/stories/toast.stories.js b/components/toast/stories/toast.stories.js
index 9271ef70225..2a63b88c875 100644
--- a/components/toast/stories/toast.stories.js
+++ b/components/toast/stories/toast.stories.js
@@ -30,6 +30,16 @@ export default {
},
control: "text",
},
+ hasButton: {
+ name: "Has button",
+ description: "Adds a button that is directly related to the toast's message.",
+ type: { name: "boolean" },
+ table: {
+ type: { summary: "boolean" },
+ category: "Component",
+ },
+ control: "boolean",
+ },
inlineButtonLabel: {
name: "Inline button label",
description: "Label for the inline button; if blank, no button is shown",
@@ -39,6 +49,7 @@ export default {
type: { summary: "string" },
},
control: "text",
+ if: { arg: "hasButton", truthy: true },
},
},
args: {
@@ -64,6 +75,7 @@ export default {
export const Default = ToastGroup.bind({});
Default.args = {
message: "File has been archived",
+ hasButton: true,
inlineButtonLabel: "Undo",
variant: "neutral"
};
@@ -142,7 +154,7 @@ Wrapping.parameters = {
};
/**
- * A toast can have up to one action: [a static white, secondary, outline button](?path=/docs/components-button--docs#static-white---secondary). This label should be kept concise, and it should only be used when there’s a direct action available that is related to the toast text.
+ * A toast can have up to one button: [a static white, secondary, outline button](?path=/docs/components-button--docs#static-white---secondary). That button's label should be kept concise, and it should only be used when there’s a direct action available that is related to the toast text.
*/
export const Action = ActionTemplate.bind({});
diff --git a/components/toast/stories/toast.test.js b/components/toast/stories/toast.test.js
index 7e784b44980..ef23bab9eb1 100644
--- a/components/toast/stories/toast.test.js
+++ b/components/toast/stories/toast.test.js
@@ -34,14 +34,14 @@ export const ToastGroup = Variants({
{
testHeading: "Wrapping without button",
variant: "info",
- message: "A new version of Lightroom Classic is now available. Use the Update button below to start using the new version.",
- inlineButtonLabel: undefined
+ message: "A new version of Lightroom Classic is now available.",
+ hasButton: false
},
{
testHeading: "Short message, no required action",
variant: "neutral",
message: "The toast is done.",
- inlineButtonLabel: undefined
+ hasButton: false
},
]
});