A Dialog (Confirm, in older versions of Firefox OS) provides the user with some important information, asks the user to take or confirm an action, or allows the user to make a choice or enter some information.
Notes
Dialogs are modal and require the user to select an action to close them. Typically a dialogue consists of a body and one or more action buttons. A warning or destructive action button uses a red highlight color to indicate that it needs more attention before tapping it.
An icon (A) can optionally be placed within the dialogue.
If a dialog is simply an alert or informational, a single action button labeled OK can be used.
A preference checkbox (B) can be displayed at the bottom of a dialogue. The preference checkbox should be displayed to the left of its label.
An input dialogue allows the user to input text within the dialogue. It is typically used for renaming items.
Interaction — basic
User taps delete button when an item has been selected.
On tap, an animation loads the dialogue. The animation lasts less than a second and consists of a series of circles emanating from the selected object.
Upon completion of the animation, the dialogue is displayed in the center of the screen. The user can tap on either action button to complete the action. The user can tap the “Cancel” button to close the dialogue and return to the previous screen.
When photos have been deleted the dialogue disappears and the user is returned to the previous screen.
Interaction — input field
User taps clear button inside input field to clear the field.
If the field is empty, the clear button is not shown. To enter text, the user types on the keyboard, and text is displayed within the input area.
When text input exceeds the available width of a single line text field, the text should be pushed to the left to allow the user to see the cursor. To see previous text, the user can scroll through the text field by dragging the field with their finger.
Interaction — larger dialog
Open Camera app in Home for the first time.
Upon app launch, the dialog may fade in in from the center of the screen. The height of the dialog should expand to accommodate longer text if needed. If the body content exceeds the maximum that will fit within the dialog, the body of the dialog becomes scrollable.
The user can scroll the body text to view the full content of the dialog. Buttons remain stationary at the bottom of the dialog.
The user taps on an action button to select an action. The user can also tap on the preference checkbox to enable or disable a preference.
In this example, the user taps “Share” and the Camera now shares GPS information when taking a photo.
