ember-tp-modal-dialog

ember-tp-modal-dialog

Implements a <TpModalDialog/> component that wraps ember-modal-dialog with a reduced set of arguments, and some customized behavior/styling.

Compatibility

• Ember.js v3.12 or above
• Ember CLI v2.13 or above
• Node.js v10 or above

Installation

ember install ember-tp-modal-dialog

Usage

Quick start

To get started, add

@import "ember-tp-modal-dialog.css";

to your app.css and start using the modal dialog component!

This addon provides one primary component, TpModalDiaog, which provides several contextual components. A simple invocation for an informational dialog (with an ok button that just dismisses) might look like this:

{{#if this.showModal}}
  <TpModalDialog
    @onClose={{this.closeModal}}
    as |m|
  >
    <m.Header @title="A Modal"/>
    <m.Body>
      <p>This is a modal.</p>
      <p>Are you impressed?</p>
    </m.Body>
    <m.Footer/>
  </TpModalDialog>
{{/if}}

where this.closeModal would presumable set this.showModal to false.

Customizing the header

The header accepts

• @title - the header title
• @noCloseButton - flag specifying that a close button should not be shown

Customizing the footer

If the footer is invoked in inline mode (<m.Footer/>), then it renders a single OK button that invokes @onClose when clicked. If the footer is invoked in block mode, it yields two components:

<TpModalDialog
  @onClose={{this.onCloseModal}}
  as |d|
>
  <m.Header @title="A Modal"/>
  <m.Body>
    <p>Body</p>
  </m.Body>
  <m.Footer as |f|>
    <f.CancelButton/>
    <f.OkButton @onClick={{this.doSomething}}>Do something</f.OkButton>
  </m.Footer>
</TpModalDialog>

Both <f.OkButton> and <f.CancelButton> close the dialog when clicked by default, and both accept a @onClick argument to override this behavior. Note that if you override @onClick, the dialog will not call @onClose itself, so the @onClick action will have to close the modal if that is desired. When invoked in inline mode, <f.CancelButton/>'s text will be Cancel and <f.OkButton/>'s will be OK, but either can be invoked in block mode to customize the text.

Autofocus behavior

The modal is instrumented to look for the first elementing with an [autofocus] attribute and, if found, give it focus when the modal is shown.

Styling

The default styling mimics bootstrap's modal styling, but doesn't depend on any external CSS with the exception of the footer buttons. The footer buttons use the btn, btn-primary and btn-cancel classes (which can be overridden), but this addon does not include any bootstrap styling by default. So consuming apps can either include bootstrap button styling, supply CSS rules for those classes, or override them with custom classes & styling.

The addon's CSS uses several CSS variables that the app can override -- see app/styles/ember-tp-modal-dialog.css for details.