Modals

• Modals focus user attention to ensure their content is addressed
• Modals should be direct in communicating information and dedicated to completing a task
• Modals should appear in response to a user task or an action, with relevant or contextual information

Accessibility

It should be possible to use the modal using only the keyboard. Consider:

• The primary input element in the modal should be focused when the modal is opened. If there are no inputs, the primary button should be focused. This can be implemented by listening for the funOpen event from <fun-modal-controller>.
• The escape key should dismiss the modal without applying any changes. This is the default behaviour of <fun-modal-controller> so requires no implementation from you.
• The primary action of the modal should called when the user presses the ’⌘+Enter’ keys. This can be implemented by listening to the funSubmit event from <fun-modal-controller>).

The following example using <fun-modal> and <fun-modal-controller> does all of this. Try using the keyboard.

Modal types

Standard Modals

A standard modal has a header, body, and a footer. The footer should contain:

• A primary button that performs the primary action of this modal. This button:
  • Must have an icon;
  • Must be size ‘medium’ btn-md;
  • Must be a primary button btn-primary;
  • Must not be flat or any other variations;
  • Must be furthest to the right.
  • May show a ‘busy’ spinner on clicking, if the action it performs is not immediate.
  • Should describe the action, e.g. ‘Create thing’ rather than ‘Save’
• A ‘cancel’ button:
  • Must be size ‘medium’ btn-md;
  • Must be a ‘cancel’ button btn-link btn-cancel;
  • Must be to the left of the primary button.

Modal with no primary action

If the modal has no primary action then the footer should contain a ‘Close’ primary button. The button should follow the rules of the primary button above and also:

• Must have label ‘Close’
• Must have icon “check” <fun-icon-check />

Modal with delete action

Should be presented when asked to delete an item.

• Header should say ‘Remove [NAME_OF_ITEM]‘.
• Body should ask the user if they want to remove the item.

The button should follow the rules of the primary button above and also:

• Must use the danger color btn-danger
• Should have text “Remove”
• Must have icon “trash” <fun-icon-trash />

Really strict modal

To force the user to make a choice remove the ‘close’ button and do not allow closing with the ‘escape’ key or clicking outside the modal.

Set closeOnClickOutside={false} and closeOnEscape={false} on <fun-modal-controller />, and closeButton={false} on <fun-modal /> to achieve this.

Modals with a secondary action

For modals with a secondary action other than the primary action or cancel, the secondary action:

• Must be left-aligned
• Must be size “medium”
• Must have an icon
• Must not be a primary button; may be a secondary button btn-default but could also be a warning or danger button.

Modals containing wizards

Models containing a wizard should have:

• A Cancel button:
  • Must be on the left;
  • Must be a ‘cancel’ button btn-link btn-cancel
• A Next button. When on the last step, this should appear and behave as a standard modal primary action button. When not on the last step the button:
  • Must be furthest on the right;
  • Must be medium and primary btn-md btn-primary;
  • Must have a directional icon after the text;
  • Must have label ‘Next’.
• A Back button:
  • Must be left of the Next button;
  • Must be a secondary button btn-default;
  • Must have label ‘Back’.

Hero modals

A “hero modal” is a special kind of modal that displays a preview or a visual to further explain whatever the modal is going to do.

Read more in fun-hero-modal

Implementation

For implementation details see web components:

• fun-modal
• fun-hero-modal
• fun-modal-controller