Dialog component

[ghost]

Description

Dialogues are 'windows' of floating content / UI components that sit over the top of the main content of the screen. They present important information, workflows or decisions that the user needs to make.

Component classification

Is this component an atom, molecule or organism?

• Atom
• Molecule
• Organism

Details / user needs

'Dialogue' is an ambiguous term, but is intended to highlight important information to the user. It does this by removing them from the main workflow of the page, and presenting the relevant UI components in a minimal setting.

In Application designs so far, we have approached this by creating a transparent window over the top of the interface, and presenting the dialogue on top. Some points to consider int he design:

• How should the dialogue be closed? Should it have a button or 'X' icon? Should clicking outside of the dialogue, or pressing ESC close the dialogue (probably not in my opinion)?
• How should buttons be positioned on the dialogue? Should positive actions always sit on the right?
• There may be more than two buttons. For example Cancel, Previous and Next.
• How big should dialogues be? Preferably the App designer should have control over this with suitable guidance.

Used in 3x exemplar projects

Variations

We may need to have a few versions of this. Some examples I can think of include:

• Simple decision: yes / no decision
• Informational dialogue containing text or images
• Form. This could include a multi-step workflow
• Dialogue with tabbed content. Not sure if this would be considered best practise though.

Questions

• When the documentation is produced, can we define clearly what we consider to be a 'dialogue; as?

Definition of done

• The Sketch file is updated with the component
• There are screenshots of all component variations in this ticket
• All states are included if applicable (default, hover, active, focus)
• A design documentation PR is linked from this ticket
• All questions laid out in this ticket have been resolved
• A pull request for a component must contain a fully tested, documented and finished component in a state it can be shared with partner developers

[hxltrhuxze]

Dialog & Modal component

The Dialog and Modal are full screen components that focus the attention of the user. The Modal can be used in a variety of situations, including displaying forms. The Dialog is a confirmation modal, requiring the user to confirm or cancel an action.

Modal Component

The Modal component has the following sub components:

Empty Frame

The Empty Frame is the main Modal container.

Modal Header

The Modal Header contains a title and the close button.

Footer - Default

The default footer contains a "Confirm" and "Cancel" button

Footer - Stepped

Like the default footer, the stepped footer contains a "Confirm" and "Cancel" button, but with the addition of a "Back" button on the left hand side.

Dialog component

The Dialog component is a special type of Modal. It is used as a confirmation from the user of a particular action. The Dialog comes in two varieties - Default and Danger.

[m7kvqbe1]

@hxltrhuxze

Looks great, just a few points:

• The red confirmation button in 'danger mode' feels weird (but it makes sense with context)
• Could you specify behaviours in this ticket (escape key? clicking outside on overlay closes?)
• Can you define the opaque overlay - we could progressively enhance to a blur effect if you like?

[m7kvqbe1]

#290