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

chore: overlay demo fixes

Browse source
This commit is contained in:
Thijs Louisse 2023-01-02 14:31:29 +01:00 committed by Thijs Louisse
parent fd09f652d4
commit 41d3fc7c1f
3 changed files with 13 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
docs/fundamentals/systems/overlays/assets/demo-el-using-overlaymixin.mjs
View file

@ -15,22 +15,6 @@ class DemoElUsingOverlayMixin extends OverlayMixin(LitElement) {
}); });
} }
_setupOpenCloseListeners() {
super._setupOpenCloseListeners();
if (this._overlayInvokerNode) {
this._overlayInvokerNode.addEventListener('click', this.toggle);
}
}
_teardownOpenCloseListeners() {
super._teardownOpenCloseListeners();
if (this._overlayInvokerNode) {
this._overlayInvokerNode.removeEventListener('click', this.toggle);
}
}
render() { render() {
return html` return html`
<slot name="invoker"></slot> <slot name="invoker"></slot>

31
docs/fundamentals/systems/overlays/configuration.md
View file

@ -20,7 +20,7 @@ or in the `overlays` container at the bottom of the `<body>`.
```js preview-story ```js preview-story
export const placementLocal = () => { export const placementLocal = () => {
const placementModeLocalConfig = { placementMode: 'local' }; const placementModeLocalConfig = { ...withDropdownConfig() };
return html` return html`
<style> <style>
.demo-overlay { .demo-overlay {
@ -77,22 +77,11 @@ As specified in the [overlay rationale](./rationale.md) there are only two offic
Since most overlays have interactive content the default is set to dialogs. To get a tooltip, you can add `isTooltip` to the config object. This only works for local placement and it also needs to have `handlesAccessibility` activated to work. Since most overlays have interactive content the default is set to dialogs. To get a tooltip, you can add `isTooltip` to the config object. This only works for local placement and it also needs to have `handlesAccessibility` activated to work.
```js preview-story ```js preview-story
export const isTooltip = () => { const tooltipConfig = { ...withTooltipConfig() };
function showTooltip() {
const tooltip = document.querySelector('#tooltip');
tooltip.opened = true;
}
function hideTooltip() {
const tooltip = document.querySelector('#tooltip');
tooltip.opened = false;
}
const tooltipConfig = { placementMode: 'local', isTooltip: true, handlesAccessibility: true };
return html` return html`
<demo-el-using-overlaymixin id="tooltip" .config=${tooltipConfig}> <demo-el-using-overlaymixin id="tooltip" .config=${tooltipConfig}>
<button slot="invoker" @mouseenter=${showTooltip} @mouseleave=${hideTooltip}> <button slot="invoker">
Hover me to open the tooltip! Hover me to open the tooltip!
</button> </button>
<div slot="content" class="demo-overlay">Hello!</div> <div slot="content" class="demo-overlay">Hello!</div>
@ -112,7 +101,7 @@ You use the feature on any type of overlay.
```js preview-story ```js preview-story
export const trapsKeyboardFocus = () => { export const trapsKeyboardFocus = () => {
const trapsKeyboardFocusConfig = { trapsKeyboardFocus: true }; const trapsKeyboardFocusConfig = { ...withDropdownConfig(), trapsKeyboardFocus: true };
return html` return html`
<demo-el-using-overlaymixin .config=${trapsKeyboardFocusConfig}> <demo-el-using-overlaymixin .config=${trapsKeyboardFocusConfig}>
<button slot="invoker">Click me to open the overlay!</button> <button slot="invoker">Click me to open the overlay!</button>
@ -138,7 +127,7 @@ Boolean property. Will allow closing the overlay on ESC key when enabled.
```js preview-story ```js preview-story
export const hidesOnEsc = () => { export const hidesOnEsc = () => {
const hidesOnEscConfig = { hidesOnEsc: true }; const hidesOnEscConfig = { ...withDropdownConfig(), hidesOnEsc: true };
return html` return html`
<demo-el-using-overlaymixin .config=${hidesOnEscConfig}> <demo-el-using-overlaymixin .config=${hidesOnEscConfig}>
<button slot="invoker">Click me to open the overlay!</button> <button slot="invoker">Click me to open the overlay!</button>
@ -162,7 +151,7 @@ Boolean property. When enabled allows closing the overlay on ESC key, even when
```js preview-story ```js preview-story
export const hidesOnOutsideEsc = () => { export const hidesOnOutsideEsc = () => {
const hidesOnEscConfig = { hidesOnOutsideEsc: true }; const hidesOnEscConfig = { ...withDropdownConfig(), hidesOnOutsideEsc: true };
return html` return html`
<demo-el-using-overlaymixin .config=${hidesOnEscConfig}> <demo-el-using-overlaymixin .config=${hidesOnEscConfig}>
<button slot="invoker">Click me to open the overlay!</button> <button slot="invoker">Click me to open the overlay!</button>
@ -186,7 +175,7 @@ Boolean property. Will allow closing the overlay by clicking outside the `conten
```js preview-story ```js preview-story
export const hidesOnOutsideClick = () => { export const hidesOnOutsideClick = () => {
const hidesOnOutsideClickConfig = { hidesOnOutsideClick: true }; const hidesOnOutsideClickConfig = { ...withDropdownConfig(), hidesOnOutsideClick: true };
return html` return html`
<demo-el-using-overlaymixin .config=${hidesOnOutsideClickConfig}> <demo-el-using-overlaymixin .config=${hidesOnOutsideClickConfig}>
<button slot="invoker">Click me to open the overlay!</button> <button slot="invoker">Click me to open the overlay!</button>
@ -216,7 +205,7 @@ export const elementToFocusAfterHide = () => {
const btn = document.createElement('button'); const btn = document.createElement('button');
btn.innerText = 'I should get focus'; btn.innerText = 'I should get focus';
const elementToFocusAfterHideConfig = { elementToFocusAfterHide: btn }; const elementToFocusAfterHideConfig = { ...withDropdownConfig(), elementToFocusAfterHide: btn };
return html` return html`
<demo-el-using-overlaymixin .config=${elementToFocusAfterHideConfig}> <demo-el-using-overlaymixin .config=${elementToFocusAfterHideConfig}>
<button slot="invoker">Click me to open the overlay!</button> <button slot="invoker">Click me to open the overlay!</button>
@ -252,7 +241,7 @@ This currently only supports CSS Animations, because it relies on the `animation
```js preview-story ```js preview-story
export const hasBackdrop = () => { export const hasBackdrop = () => {
const hasBackdropConfig = { hasBackdrop: true }; const hasBackdropConfig = { ...withDropdownConfig(), hasBackdrop: true };
return html` return html`
<demo-el-using-overlaymixin .config=${hasBackdropConfig}> <demo-el-using-overlaymixin .config=${hasBackdropConfig}>
<button slot="invoker">Click me to open the overlay!</button> <button slot="invoker">Click me to open the overlay!</button>
@ -276,7 +265,7 @@ Boolean property. When true, will block other overlays.
```js preview-story ```js preview-story
export const isBlocking = () => { export const isBlocking = () => {
const isBlockingConfig = { hasBackdrop: true, isBlocking: true }; const isBlockingConfig = { ...withDropdownConfig(), hasBackdrop: true, isBlocking: true };
return html` return html`
<demo-el-using-overlaymixin> <demo-el-using-overlaymixin>
<button slot="invoker">Overlay A: open first</button> <button slot="invoker">Overlay A: open first</button>

6
docs/fundamentals/systems/overlays/use-cases.md
View file

@ -539,7 +539,7 @@ Below an example is shown with the `isBlocking` option, which makes use of the O
```js preview-story ```js preview-story
export const overlayManager = () => { export const overlayManager = () => {
const hasBackdropConfig = { hasBackdrop: true }; const hasBackdropConfig = { ...withModalDialogConfig(), hasBackdrop: true };
return html` return html`
<demo-el-using-overlaymixin .config=${hasBackdropConfig}> <demo-el-using-overlaymixin .config=${hasBackdropConfig}>
<button slot="invoker">Click me to open the overlay!</button> <button slot="invoker">Click me to open the overlay!</button>
@ -558,7 +558,7 @@ export const overlayManager = () => {
</demo-el-using-overlaymixin> </demo-el-using-overlaymixin>
<demo-el-using-overlaymixin <demo-el-using-overlaymixin
id="secondOverlay" id="secondOverlay"
.config=${{ hasBackdrop: true, isBlocking: true }} .config=${{ ...withModalDialogConfig(), 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:
@ -581,7 +581,7 @@ Here is the example below
```js preview-story ```js preview-story
export const localBackdrop = () => { export const localBackdrop = () => {
const localBackdropConfig = { placementMode: 'local' }; const localBackdropConfig = { ...withDropdownConfig() };
return html` return html`
<demo-el-using-overlaymixin .config=${localBackdropConfig}> <demo-el-using-overlaymixin .config=${localBackdropConfig}>
<demo-overlay-backdrop slot="backdrop"></demo-overlay-backdrop> <demo-overlay-backdrop slot="backdrop"></demo-overlay-backdrop>