lion/packages/form-integrations/docs/60-dialog-integration.md

Forms in a dialog

import { html } from '@lion/core';
import '@lion/dialog/lion-dialog.js';
import '@lion/input-datepicker';
import '@lion/select-rich/lion-select-rich.js';
import '@lion/listbox/lion-option.js';

export default {
  title: 'Forms/System/Dialog integrations',
};

Select Rich

Opening a Rich Select inside a dialog

export const selectRich = () => html`
  <lion-dialog>
    <button slot="invoker">Open Dialog</button>
    <div slot="content">
      <lion-select-rich name="favoriteColor" label="Favorite color">
        <lion-option .choiceValue=${'red'}>Red</lion-option>
        <lion-option .choiceValue=${'hotpink'} checked>Hotpink</lion-option>
        <lion-option .choiceValue=${'teal'}>Teal</lion-option>
      </lion-select-rich>
      <button
        class="close-button"
        @click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
      >
        ⨯
      </button>
    </div>
  </lion-dialog>
`;

Input Datepicker

Opening a Input Datepicker inside a dialog

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>
`;