@lion/overlays

Overlays System

🛠 Status: Pilot Phase

Lion Web Components are still in an early alpha stage; they should not be considered production ready yet.

The goal of our pilot phase is to gather feedback from a private group of users. Therefore, during this phase, we kindly ask you to:

• not publicly promote or link us yet: (no tweets, blog posts or other forms of communication about Lion Web Components)
• not publicly promote or link products derived from/based on Lion Web Components

As soon as Pilot Phase ends we will let you know (feel free to subscribe to this issue https://github.com/ing-bank/lion/issues/1)

Supports different types of overlays like dialogs, toasts, tooltips, dropdown, etc.

Manages their position on the screen relative to other elements, including other overlays.

Exports lion-overlay, which is a generic component wrapping OverlayController. Its purpose is to make it easy to use our Overlay System declaratively. It can be easily extended where needed, to override event listeners and more.

Features

• lion-overlay web component:

  • Show content when clicking the invoker
  • Have a .config object to set or update the OverlayController's configuration

• OverlaysManager, a global repository keeping track of all different types of overlays

• OverlayController, a single controller class for handling overlays

• OverlayMixin, a mixin that can be used to create webcomponents that use the OverlayController under the hood

How to use

Installation

npm i --save @lion/overlays

Example

import '@lion/overlays/lion-overlay.js';

html`
  <lion-overlay .config=${{
    placementMode: 'global',
    viewportConfig: { placement: 'bottom-right' },
  }}>
    <div slot="content">
      This is an overlay
      <button
        @click=${e => e.target.dispatchEvent(new Event('hide', { bubbles: true }))}
      >x</button>
    <div>
    <button slot="invoker">
      Click me
    </button>
  </lion-overlay>
`;

Or by creating a controller yourself

import { OverlayController } from '@lion/overlays';

const ctrl = new OverlayController({
  ...withModalDialogConfig(),
  invokerNode,
  contentNode,
});

Rationales

For rationales, please check the docs folder, where we go more in-depth.

Aria roles

• No aria-controls as support for it is not quite there yet
• No aria-haspopup. People knowing the haspop up and hear about it don’t expect a dialog to open (at this moment in time) but expect a sub-menu. Until support for the dialog value has better implementation, it’s probably best to not use aria-haspopup on the element that opens the modal dialog.