ayo/lion
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

chore(overlays): improve overlay-system storybook demo

Browse source
This commit is contained in:
qa46hx 2020-01-23 15:48:52 +01:00
parent 278ab917a6
commit 3a0c71e6aa
4 changed files with 100 additions and 100 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

78
packages/overlays/stories/20-index.stories.mdx
View file

@ -6,11 +6,11 @@ import {
withModalDialogConfig, withModalDialogConfig,
} from '../index.js'; } from '../index.js';
import './lion-demo-overlay.js'; import './demo-overlay-system.js';
import './applyDemoOverlayStyles.js';1 import './applyDemoOverlayStyles.js';1
import { ref as r } from './directives/ref.js'; import { ref as r } from './directives/ref.js';
<Meta title="Overlays/System/Overview" parameters={{ component: 'lion-demo-overlay' }} /> <Meta title="Overlays/System/Overview" parameters={{ component: 'demo-overlay-system' }} />
# Overlay System # Overlay System
@ -23,9 +23,9 @@ For a detailed rationale, please consult [Rationale](?path=/docs/overlay-rationa
<Story name="default"> <Story name="default">
{html` {html`
<lion-demo-overlay> <demo-overlay-system>
<button slot="invoker">Click me to open the overlay!</button> <button slot="invoker">Click me to open the overlay!</button>
<div slot="content"> <div slot="content" class="demo-overlay">
Hello! You can close this notification here: Hello! You can close this notification here:
<button <button
@click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))} @click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
@ -33,14 +33,14 @@ For a detailed rationale, please consult [Rationale](?path=/docs/overlay-rationa
⨯ ⨯
</button> </button>
</div> </div>
</lion-demo-overlay> </demo-overlay-system>
`} `}
</Story> </Story>
```html ```html
<lion-demo-overlay> <demo-overlay-system>
<button slot="invoker">Click me to open the overlay!</button> <button slot="invoker">Click me to open the overlay!</button>
<div slot="content"> <div slot="content" class="demo-overlay">
Hello! You can close this notification here: Hello! You can close this notification here:
<button <button
@click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))} @click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
@ -48,7 +48,7 @@ For a detailed rationale, please consult [Rationale](?path=/docs/overlay-rationa
⨯ ⨯
</button> </button>
</div> </div>
</lion-demo-overlay> </demo-overlay-system>
``` ```
## Features ## Features
@ -132,9 +132,9 @@ _defineOverlayConfig() {
or declaratively in your template with the `.config` property or declaratively in your template with the `.config` property
```html ```html
<lion-demo-overlay .config=${{ ...withModalDialogConfig() }}> <demo-overlay-system .config=${{ ...withModalDialogConfig() }}>
<button slot="invoker">Click me to open the overlay!</button> <button slot="invoker">Click me to open the overlay!</button>
<div slot="content"> <div slot="content" class="demo-overlay">
Hello! You can close this notification here: Hello! You can close this notification here:
<button <button
@click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))} @click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
@ -142,7 +142,7 @@ or declaratively in your template with the `.config` property
⨯ ⨯
</button> </button>
</div> </div>
</lion-demo-overlay> </demo-overlay-system>
``` ```
### Responsive switching ### Responsive switching
@ -157,7 +157,7 @@ Drag the viewport under 600px and open the overlay to see the `withBottomSheetCo
<Story name="Responsive switching"> <Story name="Responsive switching">
{html` {html`
<lion-demo-overlay <demo-overlay-system
.config=${{ ...withBottomSheetConfig() }} .config=${{ ...withBottomSheetConfig() }}
@before-opened=${e => { @before-opened=${e => {
if (window.innerWidth >= 600) { if (window.innerWidth >= 600) {
@ -176,12 +176,12 @@ Drag the viewport under 600px and open the overlay to see the `withBottomSheetCo
⨯ ⨯
</button> </button>
</div> </div>
</lion-demo-overlay> </demo-overlay-system>
`} `}
</Story> </Story>
```html ```html
<lion-demo-overlay <demo-overlay-system
.config=${{ ...withBottomSheetConfig() }} .config=${{ ...withBottomSheetConfig() }}
@before-opened=${e => { @before-opened=${e => {
if (window.innerWidth >= 600) { if (window.innerWidth >= 600) {
@ -192,7 +192,7 @@ Drag the viewport under 600px and open the overlay to see the `withBottomSheetCo
}} }}
> >
<button slot="invoker">Click me to open the overlay!</button> <button slot="invoker">Click me to open the overlay!</button>
<div slot="content"> <div slot="content" class="demo-overlay">
Hello! You can close this notification here: Hello! You can close this notification here:
<button <button
@click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))} @click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
@ -200,7 +200,7 @@ Drag the viewport under 600px and open the overlay to see the `withBottomSheetCo
⨯ ⨯
</button> </button>
</div> </div>
</lion-demo-overlay> </demo-overlay-system>
``` ```
Alternative ways to do it is by setting the event listener manually on the `OverlayController` instance. Alternative ways to do it is by setting the event listener manually on the `OverlayController` instance.
@ -262,7 +262,7 @@ Below is another demo where you can toggle between configurations using buttons.
Dropdown Dropdown
</button> </button>
</div> </div>
<lion-demo-overlay id="respSwitchOverlay" .config=${{ ...withBottomSheetConfig() }}> <demo-overlay-system id="respSwitchOverlay" .config=${{ ...withBottomSheetConfig() }}>
<button slot="invoker">Click me to open the overlay!</button> <button slot="invoker">Click me to open the overlay!</button>
<div slot="content" class="demo-overlay"> <div slot="content" class="demo-overlay">
Hello! You can close this notification here: Hello! You can close this notification here:
@ -272,7 +272,7 @@ Below is another demo where you can toggle between configurations using buttons.
⨯ ⨯
</button> </button>
</div> </div>
</lion-demo-overlay> </demo-overlay-system>
`} `}
</Story> </Story>
@ -293,9 +293,9 @@ Change config to:
Dropdown Dropdown
</button> </button>
</div> </div>
<lion-demo-overlay id="respSwitchOverlay" .config=${{ ...withBottomSheetConfig() }}> <demo-overlay-system id="respSwitchOverlay" .config=${{ ...withBottomSheetConfig() }}>
<button slot="invoker">Click me to open the overlay!</button> <button slot="invoker">Click me to open the overlay!</button>
<div slot="content"> <div slot="content" class="demo-overlay">
Hello! You can close this notification here: Hello! You can close this notification here:
<button <button
@click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))} @click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
@ -303,7 +303,7 @@ Change config to:
⨯ ⨯
</button> </button>
</div> </div>
</lion-demo-overlay> </demo-overlay-system>
``` ```
## Opened state ## Opened state
@ -326,7 +326,7 @@ This can be useful e.g. if somewhere in your application you need to rely on thi
} }
return html` return html`
appState.opened: <span #openedState=${r(refs)}>${appState.opened}</span> appState.opened: <span #openedState=${r(refs)}>${appState.opened}</span>
<lion-demo-overlay .opened="${appState.opened}" @opened-changed=${onOpenClosed}> <demo-overlay-system .opened="${appState.opened}" @opened-changed=${onOpenClosed}>
<button slot="invoker">Overlay</button> <button slot="invoker">Overlay</button>
<div slot="content" class="demo-overlay"> <div slot="content" class="demo-overlay">
Hello! You can close this notification here: Hello! You can close this notification here:
@ -336,7 +336,7 @@ This can be useful e.g. if somewhere in your application you need to rely on thi
⨯ ⨯
</button> </button>
</div> </div>
</lion-demo-overlay> </demo-overlay-system>
`; `;
}} }}
</Story> </Story>
@ -357,9 +357,9 @@ function onOpenClosed(ev) {
<div> <div>
appState.opened: ${openedStateNode} appState.opened: ${openedStateNode}
</div> </div>
<lion-demo-overlay .opened="${appState.opened}" @opened-changed=${onOpenClosed}> <demo-overlay-system .opened="${appState.opened}" @opened-changed=${onOpenClosed}>
<button slot="invoker">Overlay</button> <button slot="invoker">Overlay</button>
<div slot="content"> <div slot="content" class="demo-overlay">
Hello! You can close this notification here: Hello! You can close this notification here:
<button <button
@click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))} @click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
@ -367,7 +367,7 @@ function onOpenClosed(ev) {
⨯ ⨯
</button> </button>
</div> </div>
</lion-demo-overlay> </demo-overlay-system>
``` ```
## Intercepting open/close ## Intercepting open/close
@ -391,13 +391,13 @@ the `before-close` or `before-open` events.
blockOverlay = !blockOverlay; blockOverlay = !blockOverlay;
refs.statusButton.textContent = blockOverlay; refs.statusButton.textContent = blockOverlay;
}}">${blockOverlay}</button> }}">${blockOverlay}</button>
<lion-demo-overlay #overlay=${r(refs)} @before-closed=${intercept} @before-opened=${intercept}> <demo-overlay-system #overlay=${r(refs)} @before-closed=${intercept} @before-opened=${intercept}>
<button slot="invoker" @click=${() => console.log('blockOverlay', blockOverlay, 'opened', refs.overlay.opened)}>Overlay</button> <button slot="invoker" @click=${() => console.log('blockOverlay', blockOverlay, 'opened', refs.overlay.opened)}>Overlay</button>
<div slot="content" class="demo-overlay"> <div slot="content" class="demo-overlay">
Hello! You can close this notification here: Hello! You can close this notification here:
<button @click=${() => refs.overlay.opened = false}>⨯</button> <button @click=${() => refs.overlay.opened = false}>⨯</button>
</div> </div>
</lion-demo-overlay> </demo-overlay-system>
`; `;
}} }}
</Story> </Story>
@ -413,13 +413,13 @@ the `before-close` or `before-open` events.
``` ```
```html ```html
<lion-demo-overlay #overlay=${r(refs)} @before-closed=${intercept} @before-opened=${intercept}> <demo-overlay-system #overlay=${r(refs)} @before-closed=${intercept} @before-opened=${intercept}>
<button slot="invoker">Overlay</button> <button slot="invoker">Overlay</button>
<div slot="content" class="demo-overlay"> <div slot="content" class="demo-overlay">
Hello! You can close this notification here: Hello! You can close this notification here:
<button @click=${() => refs.overlay.opened = false}>⨯</button> <button @click=${() => refs.overlay.opened = false}>⨯</button>
</div> </div>
</lion-demo-overlay> </demo-overlay-system>
``` ```
@ -495,7 +495,7 @@ Below an example is shown with the `isBlocking` option, which makes use of the O
<Story name="OverlaysManager"> <Story name="OverlaysManager">
{html` {html`
<lion-demo-overlay .config=${{ hasBackdrop: true }}> <demo-overlay-system .config=${{ hasBackdrop: true }}>
<button slot="invoker">Click me to open the overlay!</button> <button slot="invoker">Click me to open the overlay!</button>
<div slot="content" class="demo-overlay"> <div slot="content" class="demo-overlay">
Hello! You can close this notification here: Hello! You can close this notification here:
@ -508,8 +508,8 @@ Below an example is shown with the `isBlocking` option, which makes use of the O
<button @click=${() => document.getElementById('secondOverlay').opened = true }>Click me to open another overlay which is blocking</button> <button @click=${() => document.getElementById('secondOverlay').opened = true }>Click me to open another overlay which is blocking</button>
</div> </div>
</div> </div>
</lion-demo-overlay> </demo-overlay-system>
<lion-demo-overlay id="secondOverlay" .config=${{ hasBackdrop: true, isBlocking: true }}> <demo-overlay-system id="secondOverlay" .config=${{ hasBackdrop: true, isBlocking: true }}>
<div slot="content" class="demo-overlay demo-overlay--second"> <div slot="content" class="demo-overlay demo-overlay--second">
Hello! You can close this notification here: Hello! You can close this notification here:
<button <button
@ -518,14 +518,14 @@ Below an example is shown with the `isBlocking` option, which makes use of the O
⨯ ⨯
</button> </button>
</div> </div>
</lion-demo-overlay> </demo-overlay-system>
`} `}
</Story> </Story>
```html ```html
<lion-demo-overlay .config=${{ hasBackdrop: true }}> <demo-overlay-system .config=${{ hasBackdrop: true }}>
<button slot="invoker">Click me to open the overlay!</button> <button slot="invoker">Click me to open the overlay!</button>
<div slot="content"> <div slot="content" class="demo-overlay">
Hello! You can close this notification here: Hello! You can close this notification here:
<button <button
@click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))} @click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
@ -536,9 +536,9 @@ Below an example is shown with the `isBlocking` option, which makes use of the O
<button @click=${() => document.getElementById('secondOverlay').opened = true }>Click me to open another overlay which is blocking</button> <button @click=${() => document.getElementById('secondOverlay').opened = true }>Click me to open another overlay which is blocking</button>
</div> </div>
</div> </div>
</lion-demo-overlay> </demo-overlay-system>
<lion-demo-overlay id="secondOverlay" .config=${{ hasBackdrop: true, isBlocking: true }}> <demo-overlay-system id="secondOverlay" .config=${{ hasBackdrop: true, isBlocking: true }}>
<div slot="content" class="demo-overlay demo-overlay--second"> <div slot="content" class="demo-overlay demo-overlay--second">
Hello! You can close this notification here: Hello! You can close this notification here:
<button <button
@ -547,5 +547,5 @@ Below an example is shown with the `isBlocking` option, which makes use of the O
⨯ ⨯
</button> </button>
</div> </div>
</lion-demo-overlay> </demo-overlay-system>
``` ```

104
packages/overlays/stories/40-system-configuration.stories.mdx
View file

@ -1,9 +1,9 @@
import { Story, Meta, html } from '@open-wc/demoing-storybook'; import { Story, Meta, html } from '@open-wc/demoing-storybook';
import './lion-demo-overlay.js'; import './demo-overlay-system.js';
import './applyDemoOverlayStyles.js'; import './applyDemoOverlayStyles.js';
<Meta title="Overlays/System/Configuration" parameters={{ component: 'lion-demo-overlay' }} /> <Meta title="Overlays/System/Configuration" parameters={{ component: 'demo-overlay-system' }} />
# Overlay System - Configuration # Overlay System - Configuration
@ -21,7 +21,7 @@ or in the `global-overlays` container at the bottom of the `<body>`.
Local: Local:
<Story name="placementMode: local"> <Story name="placementMode: local">
{html` {html`
<lion-demo-overlay .config=${{ placementMode: 'local' }}> <demo-overlay-system .config=${{ placementMode: 'local' }}>
<button slot="invoker">Click me to open the local overlay!</button> <button slot="invoker">Click me to open the local overlay!</button>
<div slot="content" class="demo-overlay"> <div slot="content" class="demo-overlay">
Hello! You can close this notification here: Hello! You can close this notification here:
@ -32,12 +32,12 @@ Local:
⨯ ⨯
</button> </button>
</div> </div>
</lion-demo-overlay> </demo-overlay-system>
`} `}
</Story> </Story>
```html ```html
<lion-demo-overlay .config=${{ placementMode: 'local' }}> <demo-overlay-system .config=${{ placementMode: 'local' }}>
<button slot="invoker">Click me to open the local overlay!</button> <button slot="invoker">Click me to open the local overlay!</button>
<div slot="content" class="demo-overlay"> <div slot="content" class="demo-overlay">
Hello! You can close this notification here: Hello! You can close this notification here:
@ -48,13 +48,13 @@ Local:
⨯ ⨯
</button> </button>
</div> </div>
</lion-demo-overlay> </demo-overlay-system>
``` ```
Global: Global:
<Story name="placementMode: global"> <Story name="placementMode: global">
{html` {html`
<lion-demo-overlay .config=${{ placementMode: 'global' }}> <demo-overlay-system .config=${{ placementMode: 'global' }}>
<button slot="invoker">Click me to open the global overlay!</button> <button slot="invoker">Click me to open the global overlay!</button>
<div slot="content" class="demo-overlay"> <div slot="content" class="demo-overlay">
Hello! You can close this notification here: Hello! You can close this notification here:
@ -65,12 +65,12 @@ Global:
⨯ ⨯
</button> </button>
</div> </div>
</lion-demo-overlay> </demo-overlay-system>
`} `}
</Story> </Story>
```html ```html
<lion-demo-overlay .config=${{ placementMode: 'global' }}> <demo-overlay-system .config=${{ placementMode: 'global' }}>
<button slot="invoker">Click me to open the local overlay!</button> <button slot="invoker">Click me to open the local overlay!</button>
<div slot="content" class="demo-overlay"> <div slot="content" class="demo-overlay">
Hello! You can close this notification here: Hello! You can close this notification here:
@ -81,7 +81,7 @@ Global:
⨯ ⨯
</button> </button>
</div> </div>
</lion-demo-overlay> </demo-overlay-system>
``` ```
## trapsKeyboardFocus ## trapsKeyboardFocus
@ -95,7 +95,7 @@ You use the feature on any type of overlay.
<Story name="trapsKeyboardFocus"> <Story name="trapsKeyboardFocus">
{html` {html`
<lion-demo-overlay .config=${{ trapsKeyboardFocus: true }}> <demo-overlay-system .config=${{ trapsKeyboardFocus: true }}>
<button slot="invoker">Click me to open the overlay!</button> <button slot="invoker">Click me to open the overlay!</button>
<div slot="content" class="demo-overlay"> <div slot="content" class="demo-overlay">
<div><a href="#">A focusable anchor</a></div> <div><a href="#">A focusable anchor</a></div>
@ -108,12 +108,12 @@ You use the feature on any type of overlay.
⨯ ⨯
</button> </button>
</div> </div>
</lion-demo-overlay> </demo-overlay-system>
`} `}
</Story> </Story>
```html ```html
<lion-demo-overlay .config=${{ trapsKeyboardFocus: true }}> <demo-overlay-system .config=${{ trapsKeyboardFocus: true }}>
<button slot="invoker">Click me to open the overlay!</button> <button slot="invoker">Click me to open the overlay!</button>
<div slot="content" class="demo-overlay"> <div slot="content" class="demo-overlay">
<div><a href="#">A focusable anchor</a></div> <div><a href="#">A focusable anchor</a></div>
@ -126,7 +126,7 @@ You use the feature on any type of overlay.
⨯ ⨯
</button> </button>
</div> </div>
</lion-demo-overlay> </demo-overlay-system>
``` ```
## hidesOnEsc ## hidesOnEsc
@ -137,7 +137,7 @@ Boolean property. Will allow closing the overlay on ESC key when enabled.
<Story name="hidesOnEsc"> <Story name="hidesOnEsc">
{html` {html`
<lion-demo-overlay .config=${{ hidesOnEsc: true }}> <demo-overlay-system .config=${{ hidesOnEsc: true }}>
<button slot="invoker">Click me to open the overlay!</button> <button slot="invoker">Click me to open the overlay!</button>
<div slot="content" class="demo-overlay"> <div slot="content" class="demo-overlay">
Hello! You can close this notification here: Hello! You can close this notification here:
@ -148,12 +148,12 @@ Boolean property. Will allow closing the overlay on ESC key when enabled.
⨯ ⨯
</button> </button>
</div> </div>
</lion-demo-overlay> </demo-overlay-system>
`} `}
</Story> </Story>
```html ```html
<lion-demo-overlay .config=${{ hidesOnEsc: true }}> <demo-overlay-system .config=${{ hidesOnEsc: true }}>
<button slot="invoker">Click me to open the overlay!</button> <button slot="invoker">Click me to open the overlay!</button>
<div slot="content" class="demo-overlay"> <div slot="content" class="demo-overlay">
Hello! You can close this notification here: Hello! You can close this notification here:
@ -164,7 +164,7 @@ Boolean property. Will allow closing the overlay on ESC key when enabled.
⨯ ⨯
</button> </button>
</div> </div>
</lion-demo-overlay> </demo-overlay-system>
``` ```
## hidesOnOutsideClick ## hidesOnOutsideClick
@ -173,7 +173,7 @@ Boolean property. Will allow closing the overlay by clicking outside the `conten
<Story name="hidesOnOutsideClick"> <Story name="hidesOnOutsideClick">
{html` {html`
<lion-demo-overlay .config=${{ hidesOnOutsideClick: true }}> <demo-overlay-system .config=${{ hidesOnOutsideClick: true }}>
<button slot="invoker">Click me to open the overlay!</button> <button slot="invoker">Click me to open the overlay!</button>
<div slot="content" class="demo-overlay"> <div slot="content" class="demo-overlay">
Hello! You can close this notification here: Hello! You can close this notification here:
@ -184,12 +184,12 @@ Boolean property. Will allow closing the overlay by clicking outside the `conten
⨯ ⨯
</button> </button>
</div> </div>
</lion-demo-overlay> </demo-overlay-system>
`} `}
</Story> </Story>
```html ```html
<lion-demo-overlay .config=${{ hidesOnOutsideClick: true }}> <demo-overlay-system .config=${{ hidesOnOutsideClick: true }}>
<button slot="invoker">Click me to open the overlay!</button> <button slot="invoker">Click me to open the overlay!</button>
<div slot="content" class="demo-overlay"> <div slot="content" class="demo-overlay">
Hello! You can close this notification here: Hello! You can close this notification here:
@ -200,7 +200,7 @@ Boolean property. Will allow closing the overlay by clicking outside the `conten
⨯ ⨯
</button> </button>
</div> </div>
</lion-demo-overlay> </demo-overlay-system>
``` ```
## elementToFocusAfterHide ## elementToFocusAfterHide
@ -211,7 +211,7 @@ In the example, we focus the body instead of the `invokerNode`.
<Story name="elementToFocusAfterHide"> <Story name="elementToFocusAfterHide">
{html` {html`
<lion-demo-overlay .config=${{ elementToFocusAfterHide: document.body }}> <demo-overlay-system .config=${{ elementToFocusAfterHide: document.body }}>
<button slot="invoker">Click me to open the overlay!</button> <button slot="invoker">Click me to open the overlay!</button>
<div slot="content" class="demo-overlay"> <div slot="content" class="demo-overlay">
Hello! You can close this notification here: Hello! You can close this notification here:
@ -222,12 +222,12 @@ In the example, we focus the body instead of the `invokerNode`.
⨯ ⨯
</button> </button>
</div> </div>
</lion-demo-overlay> </demo-overlay-system>
`} `}
</Story> </Story>
```html ```html
<lion-demo-overlay .config=${{ elementToFocusAfterHide: document.body }}> <demo-overlay-system .config=${{ elementToFocusAfterHide: document.body }}>
<button slot="invoker">Click me to open the overlay!</button> <button slot="invoker">Click me to open the overlay!</button>
<div slot="content" class="demo-overlay"> <div slot="content" class="demo-overlay">
Hello! You can close this notification here: Hello! You can close this notification here:
@ -238,7 +238,7 @@ In the example, we focus the body instead of the `invokerNode`.
⨯ ⨯
</button> </button>
</div> </div>
</lion-demo-overlay> </demo-overlay-system>
``` ```
## hasBackdrop ## hasBackdrop
@ -258,7 +258,7 @@ This currently only supports CSS Animations, because it relies on the `animation
<Story name="hasBackdrop"> <Story name="hasBackdrop">
{html` {html`
<lion-demo-overlay .config=${{ hasBackdrop: true }}> <demo-overlay-system .config=${{ hasBackdrop: true }}>
<button slot="invoker">Click me to open the overlay!</button> <button slot="invoker">Click me to open the overlay!</button>
<div slot="content" class="demo-overlay"> <div slot="content" class="demo-overlay">
Hello! You can close this notification here: Hello! You can close this notification here:
@ -269,12 +269,12 @@ This currently only supports CSS Animations, because it relies on the `animation
⨯ ⨯
</button> </button>
</div> </div>
</lion-demo-overlay> </demo-overlay-system>
`} `}
</Story> </Story>
```html ```html
<lion-demo-overlay .config=${{ hasBackdrop: true }}> <demo-overlay-system .config=${{ hasBackdrop: true }}>
<button slot="invoker">Click me to open the overlay!</button> <button slot="invoker">Click me to open the overlay!</button>
<div slot="content" class="demo-overlay"> <div slot="content" class="demo-overlay">
Hello! You can close this notification here: Hello! You can close this notification here:
@ -285,7 +285,7 @@ This currently only supports CSS Animations, because it relies on the `animation
⨯ ⨯
</button> </button>
</div> </div>
</lion-demo-overlay> </demo-overlay-system>
``` ```
## isBlocking ## isBlocking
@ -305,13 +305,13 @@ This currently only supports CSS Animations, because it relies on the `animation
<Story name="isBlocking"> <Story name="isBlocking">
{html` {html`
<lion-demo-overlay .config=${{ hasBackdrop: true }}> <demo-overlay-system .config=${{ hasBackdrop: true }}>
<button slot="invoker">Click me to open the overlay!</button> <button slot="invoker">Click me to open the overlay!</button>
<div slot="content" class="demo-overlay"> <div slot="content" class="demo-overlay">
<div> <div>
<lion-demo-overlay .config=${{ hasBackdrop: true, isBlocking: true }}> <demo-overlay-system .config=${{ hasBackdrop: true, isBlocking: true }}>
<button slot="invoker">Click me to open another overlay which is blocking</button> <button slot="invoker">Click me to open another overlay which is blocking</button>
<div slot="content" class="demo-overlay demo-overlay--second"> <div slot="content" class="demo-overlay demo-overlay--blocking">
Hello! You can close this notification here: Hello! You can close this notification here:
<button <button
class="close-button" class="close-button"
@ -320,7 +320,7 @@ This currently only supports CSS Animations, because it relies on the `animation
⨯ ⨯
</button> </button>
</div> </div>
</lion-demo-overlay> </demo-overlay-system>
</div> </div>
Hello! You can close this notification here: Hello! You can close this notification here:
<button <button
@ -330,18 +330,18 @@ This currently only supports CSS Animations, because it relies on the `animation
⨯ ⨯
</button> </button>
</div> </div>
</lion-demo-overlay> </demo-overlay-system>
`} `}
</Story> </Story>
```html ```html
<lion-demo-overlay .config=${{ hasBackdrop: true }}> <demo-overlay-system .config=${{ hasBackdrop: true }}>
<button slot="invoker">Click me to open the overlay!</button> <button slot="invoker">Click me to open the overlay!</button>
<div slot="content" class="demo-overlay"> <div slot="content" class="demo-overlay">
<div> <div>
<lion-demo-overlay .config=${{ hasBackdrop: true, isBlocking: true }}> <demo-overlay-system .config=${{ hasBackdrop: true, isBlocking: true }}>
<button slot="invoker">Click me to open another overlay which is blocking</button> <button slot="invoker">Click me to open another overlay which is blocking</button>
<div slot="content" class="demo-overlay demo-overlay--second"> <div slot="content" class="demo-overlay demo-overlay--blocking">
Hello! You can close this notification here: Hello! You can close this notification here:
<button <button
class="close-button" class="close-button"
@ -350,7 +350,7 @@ This currently only supports CSS Animations, because it relies on the `animation
⨯ ⨯
</button> </button>
</div> </div>
</lion-demo-overlay> </demo-overlay-system>
</div> </div>
Hello! You can close this notification here: Hello! You can close this notification here:
<button <button
@ -360,7 +360,7 @@ This currently only supports CSS Animations, because it relies on the `animation
⨯ ⨯
</button> </button>
</div> </div>
</lion-demo-overlay> </demo-overlay-system>
``` ```
This example shows nested overlays, but they don't have to be. For example, they could be siblings, or completely unrelated. This example shows nested overlays, but they don't have to be. For example, they could be siblings, or completely unrelated.
@ -372,7 +372,7 @@ Boolean property. When true, prevents scrolling content that is outside of the `
<Story name="preventsScroll"> <Story name="preventsScroll">
{html` {html`
<lion-demo-overlay .config=${{ preventsScroll: true }}> <demo-overlay-system .config=${{ preventsScroll: true }}>
<button slot="invoker">Click me to open the overlay!</button> <button slot="invoker">Click me to open the overlay!</button>
<div slot="content" class="demo-overlay"> <div slot="content" class="demo-overlay">
Hello! You can close this notification here: Hello! You can close this notification here:
@ -383,12 +383,12 @@ Boolean property. When true, prevents scrolling content that is outside of the `
⨯ ⨯
</button> </button>
</div> </div>
</lion-demo-overlay> </demo-overlay-system>
`} `}
</Story> </Story>
```html ```html
<lion-demo-overlay .config=${{ preventsScroll: true }}> <demo-overlay-system .config=${{ preventsScroll: true }}>
<button slot="invoker">Click me to open the overlay!</button> <button slot="invoker">Click me to open the overlay!</button>
<div slot="content" class="demo-overlay"> <div slot="content" class="demo-overlay">
Hello! You can close this notification here: Hello! You can close this notification here:
@ -399,7 +399,7 @@ Boolean property. When true, prevents scrolling content that is outside of the `
⨯ ⨯
</button> </button>
</div> </div>
</lion-demo-overlay> </demo-overlay-system>
``` ```
## viewportConfig ## viewportConfig
@ -420,7 +420,7 @@ Options:
<Story name="viewportConfig"> <Story name="viewportConfig">
{html` {html`
<lion-demo-overlay .config=${{ placementMode: 'global', viewportConfig: { placement: 'top-left'} }}> <demo-overlay-system .config=${{ placementMode: 'global', viewportConfig: { placement: 'top-left'} }}>
<button slot="invoker">Click me to open the overlay in the top left corner!</button> <button slot="invoker">Click me to open the overlay in the top left corner!</button>
<div slot="content" class="demo-overlay"> <div slot="content" class="demo-overlay">
Hello! You can close this notification here: Hello! You can close this notification here:
@ -431,12 +431,12 @@ Options:
⨯ ⨯
</button> </button>
</div> </div>
</lion-demo-overlay> </demo-overlay-system>
`} `}
</Story> </Story>
```html ```html
<lion-demo-overlay .config=${{ placementMode: 'global', viewportConfig: { placement: 'top-left'} }}> <demo-overlay-system .config=${{ placementMode: 'global', viewportConfig: { placement: 'top-left'} }}>
<button slot="invoker">Click me to open the overlay in the top left corner!</button> <button slot="invoker">Click me to open the overlay in the top left corner!</button>
<div slot="content" class="demo-overlay"> <div slot="content" class="demo-overlay">
Hello! You can close this notification here: Hello! You can close this notification here:
@ -447,7 +447,7 @@ Options:
⨯ ⨯
</button> </button>
</div> </div>
</lion-demo-overlay> </demo-overlay-system>
``` ```
@ -471,7 +471,7 @@ Here's a succinct overview of some often used popper properties:
<Story name="popperConfig"> <Story name="popperConfig">
{html` {html`
<lion-demo-overlay .config=${{ <demo-overlay-system .config=${{
placementMode: 'local', placementMode: 'local',
popperConfig: { popperConfig: {
/* Placement of content node, relative to invoker node */ /* Placement of content node, relative to invoker node */
@ -514,12 +514,12 @@ Here's a succinct overview of some often used popper properties:
⨯ ⨯
</button> </button>
</div> </div>
</lion-demo-overlay> </demo-overlay-system>
`} `}
</Story> </Story>
```js ```js
<lion-demo-overlay .config=${{ <demo-overlay-system .config=${{
placementMode: 'local', placementMode: 'local',
popperConfig: { popperConfig: {
/* Placement of content node, relative to invoker node */ /* Placement of content node, relative to invoker node */
@ -562,7 +562,7 @@ Here's a succinct overview of some often used popper properties:
⨯ ⨯
</button> </button>
</div> </div>
</lion-demo-overlay> </demo-overlay-system>
``` ```
> Note: popperConfig reflects <a href="https://popper.js.org/popper-documentation.html" target="_blank">Popper.js API</a> > Note: popperConfig reflects <a href="https://popper.js.org/popper-documentation.html" target="_blank">Popper.js API</a>

2
packages/overlays/stories/applyDemoOverlayStyles.js
View file

@ -7,7 +7,7 @@ const applyDemoOverlayStyles = () => {
padding: 10px; padding: 10px;
} }
.demo-overlay--second { .demo-overlay--blocking {
background-color: pink; background-color: pink;
} }
`; `;

4
packages/overlays/stories/lion-demo-overlay.js → packages/overlays/stories/demo-overlay-system.js
View file

@ -1,7 +1,7 @@
import { html, LitElement } from '@lion/core'; import { html, LitElement } from '@lion/core';
import { OverlayMixin } from '../src/OverlayMixin.js'; import { OverlayMixin } from '../src/OverlayMixin.js';
class LionDemoOverlay extends OverlayMixin(LitElement) { class DemoOverlaySystem extends OverlayMixin(LitElement) {
_defineOverlayConfig() { _defineOverlayConfig() {
return { return {
placementMode: 'global', placementMode: 'global',
@ -35,4 +35,4 @@ class LionDemoOverlay extends OverlayMixin(LitElement) {
`; `;
} }
} }
customElements.define('lion-demo-overlay', LionDemoOverlay); customElements.define('demo-overlay-system', DemoOverlaySystem);