From d8b8c8a050994b16f9a28387d99e187367a3011e Mon Sep 17 00:00:00 2001 From: Cory LaViska Date: Wed, 16 Sep 2020 10:16:08 -0400 Subject: [PATCH] Use toast prop and no light dom --- docs/components/alert.md | 10 +-- src/components.d.ts | 12 ++-- src/components/alert/alert.light-dom.scss | 82 +++++++++++------------ src/components/alert/alert.scss | 9 +++ src/components/alert/alert.tsx | 24 +++++-- src/styles/shoelace.scss | 1 - 6 files changed, 78 insertions(+), 60 deletions(-) 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';