Content
View differences
Updated by Marc Alcobé almost 4 years ago
### Note
This work package has the documentation for the modal dialogue, which we'll be integrating into the design system. This documentation will eventually be moved to Storybook.
## Modal Dialogue
### Visual
<img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/37384/content">
### Description
The modal dialogue is used to to provide actions that require the user’s attention. They interrupt the user’s regular navigation in that they cover the screen and make interaction behind it not possible whilst it is displayed.
The most common use-case are alert dialogues (before deleting a file, for example), but the modal is also used for in a number of other places (see Where it's used).
### Composition
This pattern is composed of these components:
#### **Modal header**
This consists of the top header, with text and an optional horizontal divider. The text is ideally short and serves to clarify the context of the modal to the user.
#### **Modal body**
This part contains all the elements that form the modal: text, form elements, videos, images, work package cards. The user normally is invited to perform actions or view something.
#### **Modal footer**
The footer of a modal dialogue is always an action bar.
### Container
The modal is contained in frame with a white background, rounded corners (4px). The footer, being an action bar, can either have a grey (default) or a white background.
### Modal body content
In its simplest form, the modal’s content is simply text (as in the example above). However, the modal can contain a range of other components, including images, video, tables, work package cards, checkbox and scrollable areas.
This component does not by itself define the types of content it can contain. Some Dos and Don’ts are nevertheless to be respected.
#### Behaviour
The modal is launched by user action and displayed in a lightbox (a semi-transparent grey background).
The action bar always has only two actions, one of which is always “Cancel” (secondary) and the other one usually an confirmational action like “Apply” or “Save”. As with any action bar, a third action (usually a checkbox) can optionally be displayed on the left corner.
Clicking outside the modal, in the grey area, is the equivalent of pressing the cancel button.
### Dos and Don’ts
#### **Do:**
* Do try to keep the modal as simple as possible. The goal is to direct user attention to something specific in the context of another action or place. If a feature requires a lot of configuration options and that itself has different modes, consider a full page.
#### **Don’t**
* Don’t nest modals into modals, simple drop-downs are fine.
* Customise the modal with variations (like colours) unless they are absolutely necessary, In which case, the modal component can be expanded to allow for them.
Make titles very long (avoid having them span more than a line)
### Margins, Padding and Styling
The container has 4px rounded corners.
The header text has a 16px margin on top, left and bottom. Not that the optional header has none (it must go end-to-end).
The content area has has 16px margins all around it.
The action bar has no margins relative to the container (but does have its own internal margins defined in the Action bar component).
#### Options
**Header Divider:** The header can have an optional **divider** at the bottom _(Grey-5 #E0E0E0, 1px)_
**Header icon**: The header can have an optional icon (24px square) on the left side.
#### Where it’s used
Specified where it needs to be updated in <mention class="mention" data-id="43704" data-type="work_package" data-text="#43704">#43704</mention>. * Filepicker / location picker
* Alert dialogue
* Delete file links
* Remove file
* Work package deletion
* Invite user
* Log time
* Add widget
* New Board
* Work package table settings
* Help > Introduction video
* My account > Two-factor authentication > Backup codes password
* ...
### Example Use
The following example shows how this component can be used to create the **Log time** modal (with the content area adapting to a form group):
<img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/37383/content">
### To Do
* [x] add a modal component to DS components
* [x] modal needs to be able to nest other components or simply texts
* [ ] choose different types (confirmation/submit/info), which differ in action buttons
* [ ] add an example to /design/spot
* [x] create related DS documentation
This work package has the documentation for the modal dialogue, which we'll be integrating into the design system. This documentation will eventually be moved to Storybook.
## Modal Dialogue
### Visual
<img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/37384/content">
### Description
The modal dialogue is used to to provide actions that require the user’s attention. They interrupt the user’s regular navigation in that they cover the screen and make interaction behind it not possible whilst it is displayed.
The most common use-case are alert dialogues (before deleting a file, for example), but the modal is also used for in a number of other places (see Where it's used).
### Composition
This pattern is composed of these components:
#### **Modal header**
This consists of the top header, with text and an optional horizontal divider. The text is ideally short and serves to clarify the context of the modal to the user.
#### **Modal body**
This part contains all the elements that form the modal: text, form elements, videos, images, work package cards. The user normally is invited to perform actions or view something.
#### **Modal footer**
The footer of a modal dialogue is always an action bar.
### Container
The modal is contained in frame with a white background, rounded corners (4px). The footer, being an action bar, can either have a grey (default) or a white background.
### Modal body content
In its simplest form, the modal’s content is simply text (as in the example above). However, the modal can contain a range of other components, including images, video, tables, work package cards, checkbox and scrollable areas.
This component does not by itself define the types of content it can contain. Some Dos and Don’ts are nevertheless to be respected.
#### Behaviour
The modal is launched by user action and displayed in a lightbox (a semi-transparent grey background).
The action bar always has only two actions, one of which is always “Cancel” (secondary) and the other one usually an confirmational action like “Apply” or “Save”. As with any action bar, a third action (usually a checkbox) can optionally be displayed on the left corner.
Clicking outside the modal, in the grey area, is the equivalent of pressing the cancel button.
### Dos and Don’ts
#### **Do:**
* Do try to keep the modal as simple as possible. The goal is to direct user attention to something specific in the context of another action or place. If a feature requires a lot of configuration options and that itself has different modes, consider a full page.
#### **Don’t**
* Don’t nest modals into modals, simple drop-downs are fine.
* Customise the modal with variations (like colours) unless they are absolutely necessary, In which case, the modal component can be expanded to allow for them.
Make titles very long (avoid having them span more than a line)
### Margins, Padding and Styling
The container has 4px rounded corners.
The header text has a 16px margin on top, left and bottom. Not that the optional header has none (it must go end-to-end).
The content area has has 16px margins all around it.
The action bar has no margins relative to the container (but does have its own internal margins defined in the Action bar component).
#### Options
**Header Divider:** The header can have an optional **divider** at the bottom _(Grey-5 #E0E0E0, 1px)_
**Header icon**: The header can have an optional icon (24px square) on the left side.
#### Where it’s used
Specified where it needs to be updated in <mention class="mention" data-id="43704" data-type="work_package" data-text="#43704">#43704</mention>.
* Alert dialogue
* Delete file links
* Remove file
* Work package deletion
* Invite user
* Log time
* Add widget
* New Board
* Work package table settings
* Help > Introduction video
* My account > Two-factor authentication > Backup codes password
* ...
### Example Use
The following example shows how this component can be used to create the **Log time** modal (with the content area adapting to a form group):
<img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/37383/content">
### To Do
* [x] add a modal component to DS components
* [x] modal needs to be able to nest other components or simply texts
* [ ] choose different types (confirmation/submit/info), which differ in action buttons
* [ ] add an example to /design/spot
* [x] create related DS documentation