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

4
packages/dialog/README.md
View file

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

6
packages/overlays/README.md
View file

@ -37,11 +37,11 @@ npm i --save @lion/overlays
import '@lion/overlays/lion-overlay.js';
html`
<lion-overlay>
<div slot="content" class="tooltip" .config=${{
placementMode: global,
<lion-overlay.config=${{
placementMode: 'global',
viewportConfig: { placement: 'bottom-right' },
}}>
<div slot="content">
This is an overlay
<button
@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>
${overlayDemoStyle}
</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
.config=${{ ...withBottomSheetConfig() }}
@before-show=${e => {
@ -420,7 +422,7 @@ storiesOf('Overlay System | Overlay as a WC', module)
${overlayDemoStyle}
</style>
<div class="demo-box_placements">
In the beautiful ${popup} the weather is nice.
<p>In the beautiful ${popup} the weather is nice.</p>
</div>
`;
})
@ -440,6 +442,7 @@ storiesOf('Overlay System | Overlay as a WC', module)
slot="invoker"
id="input"
type="text"
autocomplete="off"
@click=${e => e.stopImmediatePropagation()}
@focusout=${() => {
popup.opened = false;

2
packages/tooltip/README.md
View file

@ -28,7 +28,7 @@ import '@lion/tooltip/lion-tooltip.js';
```html
<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/">
Popup on link
</a>

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

@ -32,7 +32,7 @@ const tooltipDemoStyle = css`
flex-direction: column;
}
.tooltip {
.demo-tooltip {
display: block;
position: absolute;
font-size: 16px;
@ -41,12 +41,6 @@ const tooltipDemoStyle = css`
border-radius: 4px;
padding: 8px;
}
@media (max-width: 480px) {
.tooltip {
display: none;
}
}
`;
storiesOf('Overlays Specific WC|Tooltip', module)
@ -60,7 +54,7 @@ storiesOf('Overlays Specific WC|Tooltip', module)
<div class="demo-box">
<lion-tooltip .config=${{ popperConfig: { placement: 'right' } }}>
<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>
</div>
`,
@ -74,19 +68,19 @@ storiesOf('Overlays Specific WC|Tooltip', module)
<div class="demo-box_placements">
<lion-tooltip .config=${{ popperConfig: { placement: 'top' } }}>
<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 .config=${{ popperConfig: { placement: 'right' } }}>
<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 .config=${{ popperConfig: { placement: 'bottom' } }}>
<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 .config=${{ popperConfig: { placement: 'left' } }}>
<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>
</div>
`,
@ -126,7 +120,7 @@ storiesOf('Overlays Specific WC|Tooltip', module)
}}"
>
<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>
</div>
`,