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

chore(form-integrations): add input-datepicker to dialog demo

Browse source 
Co-authored-by: jorenbroekema <Joren.Broekema@ing.com>
This commit is contained in:
qa46hx 2020-12-24 10:44:31 +01:00 committed by Joren Broekema
parent 9b9db3dde4
commit 03100f6b1e
2 changed files with 29 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

35
packages/form-integrations/docs/60-dialog-integration.md
View file

@ -5,8 +5,8 @@
```js script ```js script
import { html } from 'lit-html'; import { html } from 'lit-html';
import '@lion/dialog/lion-dialog.js'; import '@lion/dialog/lion-dialog.js';
import '@lion/input-datepicker';
import '@lion/select-rich/lion-select-rich.js'; import '@lion/select-rich/lion-select-rich.js';
import '@lion/listbox/lion-options.js';
import '@lion/listbox/lion-option.js'; import '@lion/listbox/lion-option.js';
export default { export default {
@ -14,19 +14,19 @@ export default {
}; };
``` ```
## Select Rich
Opening a Rich Select inside a dialog Opening a Rich Select inside a dialog
```js story ```js story
export const main = () => html` export const selectRich = () => html`
<lion-dialog> <lion-dialog>
<button slot="invoker">Open Dialog</button> <button slot="invoker">Open Dialog</button>
<div slot="content"> <div slot="content">
<lion-select-rich name="favoriteColor" label="Favorite color"> <lion-select-rich name="favoriteColor" label="Favorite color">
<lion-options slot="input"> <lion-option .choiceValue=${'red'}>Red</lion-option>
<lion-option .choiceValue=${'red'}>Red</lion-option> <lion-option .choiceValue=${'hotpink'} checked>Hotpink</lion-option>
<lion-option .choiceValue=${'hotpink'} checked>Hotpink</lion-option> <lion-option .choiceValue=${'teal'}>Teal</lion-option>
<lion-option .choiceValue=${'teal'}>Teal</lion-option>
</lion-options>
</lion-select-rich> </lion-select-rich>
<button <button
class="close-button" class="close-button"
@ -38,3 +38,24 @@ export const main = () => html`
</lion-dialog> </lion-dialog>
`; `;
``` ```
## Input Datepicker
Opening a Input Datepicker inside a dialog
```js story
export const inputDatepicker = () => html`
<lion-dialog>
<button slot="invoker">Open Dialog</button>
<div slot="content">
<lion-input-datepicker></lion-input-datepicker>
<button
class="close-button"
@click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
>
⨯
</button>
</div>
</lion-dialog>
`;
```

2
packages/select-rich/src/LionSelectInvoker.js
View file

@ -17,11 +17,11 @@ export class LionSelectInvoker extends LionButton {
css` css`
:host { :host {
justify-content: space-between; justify-content: space-between;
align-items: center;
} }
#content-wrapper { #content-wrapper {
position: relative; position: relative;
pointer-events: none;
} }
`, `,
]; ];