js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 12:09:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

Use toast prop and no light dom

Browse Source
This commit is contained in:
Cory LaViska
2020-09-16 10:16:08 -04:00
parent ad9de54752
commit d8b8c8a050
6 changed files with 78 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
docs/components/alert.md
View File

@@ -18,31 +18,31 @@ Alerts are designed to be shown dynamically, so you must include the `open` attr
<sl-button type="warning">Warning</sl-button>
<sl-button type="danger">Danger</sl-button>
<sl-alert type="primary" placement="top-end" duration="3000" closable>
<sl-alert type="primary" toast duration="3000" closable>
<sl-icon slot="icon" name="info-circle"></sl-icon>
<strong>This is super informative</strong><br>
You can tell by how pretty the alert is.
</sl-alert>
<sl-alert type="success" placement="top-end" duration="3000" closable>
<sl-alert type="success" toast duration="3000" closable>
<sl-icon slot="icon" name="check2-circle"></sl-icon>
<strong>Your changes have been saved</strong><br>
You can safely exit the app now.
</sl-alert>
<sl-alert type="info" placement="top-end" duration="3000" closable>
<sl-alert type="info" toast duration="3000" closable>
<sl-icon slot="icon" name="gear"></sl-icon>
<strong>Your settings have been updated</strong><br>
Some settings will take affect the next time you log in.
</sl-alert>
<sl-alert type="warning" placement="top-end" duration="3000" closable>
<sl-alert type="warning" toast duration="3000" closable>
<sl-icon slot="icon" name="exclamation-triangle"></sl-icon>
<strong>Your session has ended</strong><br>
Please login again to continue.
</sl-alert>
<sl-alert type="danger" placement="bottom" duration="3000" closable>
<sl-alert type="danger" toast duration="3000" closable>
<sl-icon slot="icon" name="exclamation-octagon"></sl-icon>
<strong>Your account has been deleted</strong><br>
We're very sorry to see you go!

12
src/components.d.ts vendored
View File

@@ -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<void>;
/**
* 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.
*/

82
src/components/alert/alert.light-dom.scss
View File

@@ -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;
// }

9
src/components/alert/alert.scss
View File

@@ -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);

24
src/components/alert/alert.tsx
View File

@@ -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',

1
src/styles/shoelace.scss
View File

@@ -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';