diff --git a/docs/components/alert.md b/docs/components/alert.md
index 662dc4a2f..ee3de0b48 100644
--- a/docs/components/alert.md
+++ b/docs/components/alert.md
@@ -18,31 +18,31 @@ Alerts are designed to be shown dynamically, so you must include the `open` attr
Warning
Danger
-
+
This is super informative
You can tell by how pretty the alert is.
-
+
Your changes have been saved
You can safely exit the app now.
-
+
Your settings have been updated
Some settings will take affect the next time you log in.
-
+
Your session has ended
Please login again to continue.
-
+
Your account has been deleted
We're very sorry to see you go!
diff --git a/src/components.d.ts b/src/components.d.ts
index 940bf8459..1c69c3191 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -23,14 +23,14 @@ export namespace Components {
* Indicates whether or not the alert is open. You can use this in lieu of the show/hide methods.
*/
"open": boolean;
- /**
- * Determines how the alert will be shown. If this is anything other than `inline`, the alert will be shown in a stack as a "toast" notification. When the alert is shown as a notification, it will be hoisted to a stack and removed from the DOM when hidden. (You can reuse alerts that have been removed by storing a reference to the element.)
- */
- "placement": 'inline' | 'top-start' | 'top' | 'top-end' | 'bottom-start' | 'bottom' | 'bottom-end';
/**
* Shows the alert.
*/
"show": () => Promise;
+ /**
+ * When true, the alert will be shown as a "toast" notification. In this case, the alert will be hoisted to a stack and removed from the DOM when closed. By storing a reference to the alert element, you can reuse it by calling `alert.show()` even after it's removed from the DOM.
+ */
+ "toast": boolean;
/**
* The type of alert.
*/
@@ -1451,9 +1451,9 @@ declare namespace LocalJSX {
*/
"open"?: boolean;
/**
- * Determines how the alert will be shown. If this is anything other than `inline`, the alert will be shown in a stack as a "toast" notification. When the alert is shown as a notification, it will be hoisted to a stack and removed from the DOM when hidden. (You can reuse alerts that have been removed by storing a reference to the element.)
+ * When true, the alert will be shown as a "toast" notification. In this case, the alert will be hoisted to a stack and removed from the DOM when closed. By storing a reference to the alert element, you can reuse it by calling `alert.show()` even after it's removed from the DOM.
*/
- "placement"?: 'inline' | 'top-start' | 'top' | 'top-end' | 'bottom-start' | 'bottom' | 'bottom-end';
+ "toast"?: boolean;
/**
* The type of alert.
*/
diff --git a/src/components/alert/alert.light-dom.scss b/src/components/alert/alert.light-dom.scss
index ec1238c10..154c52550 100644
--- a/src/components/alert/alert.light-dom.scss
+++ b/src/components/alert/alert.light-dom.scss
@@ -1,49 +1,49 @@
-:root {
- --width: 28rem;
- --spacing: var(--sl-spacing-medium);
-}
+// :root {
+// --width: 28rem;
+// --spacing: var(--sl-spacing-medium);
+// }
-.sl-alert-stack {
- position: fixed;
- z-index: var(--sl-z-index-toast);
- width: var(--width);
- max-width: 100%;
- max-height: 100%;
- overflow: auto;
- padding: 0 var(--spacing);
+// .sl-alert-stack {
+// position: fixed;
+// z-index: var(--sl-z-index-toast);
+// width: var(--width);
+// max-width: 100%;
+// max-height: 100%;
+// overflow: auto;
+// padding: 0 var(--spacing);
- sl-alert {
- --box-shadow: var(--sl-shadow-large);
- margin: var(--spacing) 0;
- }
-}
+// sl-alert {
+// --box-shadow: var(--sl-shadow-large);
+// margin: var(--spacing) 0;
+// }
+// }
-.sl-alert-stack[data-placement='top-start'] {
- top: 0;
- left: 0;
-}
+// .sl-alert-stack[data-placement='top-start'] {
+// top: 0;
+// left: 0;
+// }
-.sl-alert-stack[data-placement='top'] {
- top: 0;
- left: calc(50% - var(--width) / 2);
-}
+// .sl-alert-stack[data-placement='top'] {
+// top: 0;
+// left: calc(50% - var(--width) / 2);
+// }
-.sl-alert-stack[data-placement='top-end'] {
- top: 0;
- right: 0;
-}
+// .sl-alert-stack[data-placement='top-end'] {
+// top: 0;
+// right: 0;
+// }
-.sl-alert-stack[data-placement='bottom-start'] {
- bottom: 0;
- left: 0;
-}
+// .sl-alert-stack[data-placement='bottom-start'] {
+// bottom: 0;
+// left: 0;
+// }
-.sl-alert-stack[data-placement='bottom'] {
- bottom: 0;
- left: calc(50% - var(--width) / 2);
-}
+// .sl-alert-stack[data-placement='bottom'] {
+// bottom: 0;
+// left: calc(50% - var(--width) / 2);
+// }
-.sl-alert-stack[data-placement='bottom-end'] {
- bottom: 0;
- right: 0;
-}
+// .sl-alert-stack[data-placement='bottom-end'] {
+// bottom: 0;
+// right: 0;
+// }
diff --git a/src/components/alert/alert.scss b/src/components/alert/alert.scss
index d060ef768..12e81c060 100644
--- a/src/components/alert/alert.scss
+++ b/src/components/alert/alert.scss
@@ -2,9 +2,11 @@
/**
* @prop --box-shadow: The alert's box shadow.
+ * @prop --toast-spacing: The spacing to use when alerts are stacked as "toast" notifications.
*/
:host {
--box-shadow: none;
+ --stack-spacing: var(--sl-spacing-medium);
display: block;
@@ -32,6 +34,13 @@
transition: var(--sl-transition-medium) opacity ease, var(--sl-transition-medium) transform ease;
}
+.alert--toast {
+ width: 28rem;
+ max-width: calc(100% - var(--stack-spacing) * 2);
+ box-shadow: var(--sl-shadow-large);
+ margin: var(--stack-spacing);
+}
+
.alert--open {
opacity: 1;
transform: scale(1);
diff --git a/src/components/alert/alert.tsx b/src/components/alert/alert.tsx
index 3e9c87c15..0dba99bd5 100644
--- a/src/components/alert/alert.tsx
+++ b/src/components/alert/alert.tsx
@@ -37,11 +37,11 @@ export class Alert {
@Prop() type: 'primary' | 'success' | 'info' | 'warning' | 'danger' = 'primary';
/**
- * Determines how the alert will be shown. If this is anything other than `inline`, the alert will be shown in a stack
- * as a "toast" notification. When the alert is shown as a notification, it will be hoisted to a stack and removed
- * from the DOM when hidden. (You can reuse alerts that have been removed by storing a reference to the element.)
+ * When true, the alert will be shown as a "toast" notification. In this case, the alert will be hoisted to a stack
+ * and removed from the DOM when closed. By storing a reference to the alert element, you can reuse it by calling
+ * `alert.show()` even after it's removed from the DOM.
*/
- @Prop() placement: 'inline' | 'top-start' | 'top' | 'top-end' | 'bottom-start' | 'bottom' | 'bottom-end' = 'inline';
+ @Prop() toast = false;
/** The length of time, in milliseconds, the alert will show before closing itself. */
@Prop() duration = Infinity;
@@ -104,7 +104,7 @@ export class Alert {
this.isShowing = true;
this.open = true;
- if (this.placement !== 'inline') {
+ if (this.toast) {
this.appendToStack();
}
@@ -143,7 +143,7 @@ export class Alert {
if (event.propertyName === 'opacity' && target.classList.contains('alert')) {
this.host.hidden = !this.open;
- if (this.placement !== 'inline' && !this.open) {
+ if (this.toast && !this.open) {
this.removeFromStack();
}
@@ -156,7 +156,16 @@ export class Alert {
document.body.append(stack);
}
- stack.dataset.placement = this.placement;
+ Object.assign(stack.style, {
+ position: 'fixed',
+ top: '0',
+ right: '0',
+ zIndex: 'var(--sl-z-index-toast)',
+ maxWidth: '100%',
+ maxHeight: '100%',
+ overflow: 'auto'
+ });
+
stack.append(this.host);
}
@@ -180,6 +189,7 @@ export class Alert {
alert: true,
'alert--open': this.open,
'alert--closable': this.closable,
+ 'alert--toast': this.toast,
// States
'alert--primary': this.type === 'primary',
diff --git a/src/styles/shoelace.scss b/src/styles/shoelace.scss
index b00b8e9a7..152488cba 100644
--- a/src/styles/shoelace.scss
+++ b/src/styles/shoelace.scss
@@ -269,5 +269,4 @@
// Component light DOM styles - only follow this pattern when absolutely necessary!
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
-@import '../components/alert/alert.light-dom';
@import '../components/button-group/button-group.light-dom';