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

chore: fix typo in docs; no autocomplete show overlay in story

Browse source
This commit is contained in:
Thomas Allmer 2019-11-29 17:05:38 +01:00
parent ab5cb627af
commit 4b1acbdafa
5 changed files with 21 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
packages/dialog/README.md
View file

@ -28,10 +28,10 @@ import '@lion/dialog/lion-dialog.js';
```js ```js
html` html`
<lion-dialog> <lion-dialog.config=${{
<div slot="content" class="tooltip" .config=${{ viewportConfig: { placement: 'bottom-right' },
viewportConfig: { placement: 'bottom-right' }, }}>
}}> <div slot="content">
This is a dialog This is a dialog
<button <button
@click=${e => e.target.dispatchEvent(new Event('dialog-close', { bubbles: true }))} @click=${e => e.target.dispatchEvent(new Event('dialog-close', { bubbles: true }))}

10
packages/overlays/README.md
View file

@ -37,11 +37,11 @@ npm i --save @lion/overlays
import '@lion/overlays/lion-overlay.js'; import '@lion/overlays/lion-overlay.js';
html` html`
<lion-overlay> <lion-overlay.config=${{
<div slot="content" class="tooltip" .config=${{ placementMode: 'global',
placementMode: global, viewportConfig: { placement: 'bottom-right' },
viewportConfig: { placement: 'bottom-right' }, }}>
}}> <div slot="content">
This is an overlay This is an overlay
<button <button
@click=${e => e.target.dispatchEvent(new Event('overlay-close', { bubbles: true }))} @click=${e => e.target.dispatchEvent(new Event('overlay-close', { bubbles: true }))}

5
packages/overlays/stories/index.stories.js
View file

@ -364,6 +364,8 @@ storiesOf('Overlay System | Overlay as a WC', module)
<style> <style>
${overlayDemoStyle} ${overlayDemoStyle}
</style> </style>
<p>Open the overlay on a big screen and it will be a dialog</p>
<p>Close and open it again on a small screen (< 600px) and it will be a bottom sheet</p>
<lion-demo-overlay <lion-demo-overlay
.config=${{ ...withBottomSheetConfig() }} .config=${{ ...withBottomSheetConfig() }}
@before-show=${e => { @before-show=${e => {
@ -420,7 +422,7 @@ storiesOf('Overlay System | Overlay as a WC', module)
${overlayDemoStyle} ${overlayDemoStyle}
</style> </style>
<div class="demo-box_placements"> <div class="demo-box_placements">
In the beautiful ${popup} the weather is nice. <p>In the beautiful ${popup} the weather is nice.</p>
</div> </div>
`; `;
}) })
@ -440,6 +442,7 @@ storiesOf('Overlay System | Overlay as a WC', module)
slot="invoker" slot="invoker"
id="input" id="input"
type="text" type="text"
autocomplete="off"
@click=${e => e.stopImmediatePropagation()} @click=${e => e.stopImmediatePropagation()}
@focusout=${() => { @focusout=${() => {
popup.opened = false; popup.opened = false;

2
packages/tooltip/README.md
View file

@ -28,7 +28,7 @@ import '@lion/tooltip/lion-tooltip.js';
```html ```html
<lion-tooltip> <lion-tooltip>
<div slot="content" class="tooltip">This is a tooltip<div> <div slot="content">This is a tooltip<div>
<a slot="invoker" href="https://www.google.com/"> <a slot="invoker" href="https://www.google.com/">
Popup on link Popup on link
</a> </a>

20
packages/tooltip/stories/index.stories.js
View file

@ -32,7 +32,7 @@ const tooltipDemoStyle = css`
flex-direction: column; flex-direction: column;
} }
.tooltip { .demo-tooltip {
display: block; display: block;
position: absolute; position: absolute;
font-size: 16px; font-size: 16px;
@ -41,12 +41,6 @@ const tooltipDemoStyle = css`
border-radius: 4px; border-radius: 4px;
padding: 8px; padding: 8px;
} }
@media (max-width: 480px) {
.tooltip {
display: none;
}
}
`; `;
storiesOf('Overlays Specific WC|Tooltip', module) storiesOf('Overlays Specific WC|Tooltip', module)
@ -60,7 +54,7 @@ storiesOf('Overlays Specific WC|Tooltip', module)
<div class="demo-box"> <div class="demo-box">
<lion-tooltip .config=${{ popperConfig: { placement: 'right' } }}> <lion-tooltip .config=${{ popperConfig: { placement: 'right' } }}>
<lion-button slot="invoker">Tooltip</lion-button> <lion-button slot="invoker">Tooltip</lion-button>
<div slot="content" class="tooltip">Hello there!</div> <div slot="content" class="demo-tooltip">Hello there!</div>
</lion-tooltip> </lion-tooltip>
</div> </div>
`, `,
@ -74,19 +68,19 @@ storiesOf('Overlays Specific WC|Tooltip', module)
<div class="demo-box_placements"> <div class="demo-box_placements">
<lion-tooltip .config=${{ popperConfig: { placement: 'top' } }}> <lion-tooltip .config=${{ popperConfig: { placement: 'top' } }}>
<lion-button slot="invoker">Top</lion-button> <lion-button slot="invoker">Top</lion-button>
<div slot="content" class="tooltip">Its top placement</div> <div slot="content" class="demo-tooltip">Its top placement</div>
</lion-tooltip> </lion-tooltip>
<lion-tooltip .config=${{ popperConfig: { placement: 'right' } }}> <lion-tooltip .config=${{ popperConfig: { placement: 'right' } }}>
<lion-button slot="invoker">Right</lion-button> <lion-button slot="invoker">Right</lion-button>
<div slot="content" class="tooltip">Its right placement</div> <div slot="content" class="demo-tooltip">Its right placement</div>
</lion-tooltip> </lion-tooltip>
<lion-tooltip .config=${{ popperConfig: { placement: 'bottom' } }}> <lion-tooltip .config=${{ popperConfig: { placement: 'bottom' } }}>
<lion-button slot="invoker">Bottom</lion-button> <lion-button slot="invoker">Bottom</lion-button>
<div slot="content" class="tooltip">Its bottom placement</div> <div slot="content" class="demo-tooltip">Its bottom placement</div>
</lion-tooltip> </lion-tooltip>
<lion-tooltip .config=${{ popperConfig: { placement: 'left' } }}> <lion-tooltip .config=${{ popperConfig: { placement: 'left' } }}>
<lion-button slot="invoker">Left</lion-button> <lion-button slot="invoker">Left</lion-button>
<div slot="content" class="tooltip">Its left placement</div> <div slot="content" class="demo-tooltip">Its left placement</div>
</lion-tooltip> </lion-tooltip>
</div> </div>
`, `,
@ -126,7 +120,7 @@ storiesOf('Overlays Specific WC|Tooltip', module)
}}" }}"
> >
<lion-button slot="invoker">${text('Invoker text', 'Hover me!')}</lion-button> <lion-button slot="invoker">${text('Invoker text', 'Hover me!')}</lion-button>
<div slot="content" class="tooltip">${text('Content text', 'Hello, World!')}</div> <div slot="content" class="demo-tooltip">${text('Content text', 'Hello, World!')}</div>
</lion-tooltip> </lion-tooltip>
</div> </div>
`, `,