Lead: Liav Nadler ONGOING
Description
A message popup is a small modal window containing a warning, error message, help text other important information
Usually it appears on user's action (e.g. clicking help icon) and it must be dismissed by the user before going back to the application
The popup contains of these elements:
- Header, including the title (e.g. "Warning") and a close icon
- Message type icon (e.g. question mark icon for help)
- The message text
- Primary action button
- Cancel button (optional)
Types
...
...
...
...
...
...
Usage & Behaviour
General guidelines
Interaction
- The user can dismiss the popup by either clicking the X icon on the upper-right corner or by clicking the OK button
- When relevant, clicking the Cancel button closes the popup without performing any other action
Validations and errors
N/A
Best practices
<<e.g. Slider should display a .label its on>>
Accessibility compliance
<<In general each component should be A11y complied, please follow the 3 guidelines linked below. At the very least we should document that each component is in compliance with each of the 3>>
Focus management
<<How will the component work with keyboard only - without a mouse. Can be reference if written above
We already set a general guidelines described in Keyboard & Focus Management Guidelines >>
Screen reader support
<<Make sure the components support screen reader for content or behaviour where needed - see Screen Reader Guidelines >>
Contrast & size compliance
<<Visual designers must comply with the minimal of Contrast + Font Size Guidelines for each component>>
Design
...
...
...
Code
<<a box containing the code - discuss with Femi>>Related pages: Popups, Dialogs, Toast
| Table of Contents |
|---|
Description
A message popup is a Popup containing important information such as a warning, error message, or help text.
Types
Type | Usage | Image |
|---|---|---|
Warning | A warning message informs the user about a potential problem, particularly one that could occur if the user continues with an action. |  |
Error | An error message informs the user about an error that has occurred. |  |
Information | An information message contains additional information relevant to the primary screen. |  |
Help | A help message contains an explanation of any element within the primary screen. |  |
Usage & Behavior
General guidelines
Structure
For basic popup structure → see Popups.
Message popups:
will have a type icon (e.g. warning icon) to the left of the title.
may contain a Checkbox, allowing the user to declare a statement such as I understand or Don’t show this again.
 |  |
Dimensions
Message popup have three possible dimensions: small, medium and large, depending on the amount of content.
A small popup has a fixed width of 400px.
In this case, the height of the popup may vary from 260px to 460px.A medium popup has a fixed of 500 px.
In this case, the height of the popup may vary from 325px to 575px.A large popup has a fixed width of 600 px.
In this case, the height of the popup may vary from 390px to 690px.If the content does not fit within the largest popup size, a scrollbar will appear.
Small popup | Medium popup | Large popup |
|---|---|---|
 |  |  |
Content
Popup header will contain the name of the object that triggered it. See Popups for more information.
The title can wrap up to two lines. Beyond that it will be truncated, showing an ellipsis (…). In this case, hovering over the title will show a tooltip with the full title.
Best practices
General
Message popups are very intrusive. Only use them for important alerts or long help messages. For lower-priority messages → use a Toast.
Keep the title short and informative. The title should not include the name of the entity.
Keep the message text short and informative.
Use
A common example is when the user tries to leave a page without saving their work. In this case, a warning popup will appear:
...
Design
Zeplin link | Screen thumbnail |
|---|---|
 |
Code
| Html macro | ||
|---|---|---|
| ||
<link rel="stylesheet" href="https://ux.verint.com/fonts/css/verint_lux.css">
<link rel="stylesheet" href="https://ux.verint.com/bootstrap-4.0.0/dist/css/bootstrap.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ux.verint.com/bootstrap-4.0.0/dist/js/bootstrap.bundle.js"></script>
<script src="https://ux.verint.com/bootstrap-4.0.0/dist/other/accessibility.js"></script>
<script src="https://ux.verint.com/bootstrap-4.0.0/dist/other/prism.min.js"></script>
<link rel="stylesheet" href="https://ux.verint.com/bootstrap-4.0.0/dist/other/prism-coy.min.css">
<div class="card">
<div class="card-header">Messaging Popup <button id="toggleMarkup" type="button" class="btn btn-sm btn-outline-primary btn btn-fixed-width float-right m-0" onclick="$('pre' ).toggle()">Toggle Markup</button></div>
<div class="card-body">
<div class="form-group row">
<label for="inputKey" class="col-lg-2 col-form-label col-form-label-sm">Help Example</label>
<div class="col-lg-4">
<button class="btn btn-sm btn-light btn-fixed-width" type="button" data-toggle="modal" data-target="#helpModal">Help Message</button>
<!-- Modal -->
<div class="modal fade" id="helpModal" tabindex="-1" role="dialog" aria-labelledby="helpModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-sm modal-narrow modal-dialog-centered modal-message-help" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="helpModalLabel">Help</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<h5><i class="icon-message-status-help"></i> Help Title</h5>
<p>Morbi in faucibus lorem. Aliquam sollicitudin, mi tincidunt volutpat semper, neque nibh pulvinar sapien</p>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-sm btn-primary btn-fixed-width" data-dismiss="modal">OK</button>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6">
<pre class="language-html"><code><script type="prism-html-markup"><button class="btn btn-sm btn-light btn-fixed-width" type="button" data-toggle="modal" data-target="#helpModal">Help Message</button>
<!-- Modal -->
<div class="modal fade" id="helpModal" tabindex="-1" role="dialog" aria-labelledby="helpModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-sm modal-narrow modal-dialog-centered modal-message-help" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="helpModalLabel">Help</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<h5><i class="icon-message-status-help"></i> Help Title</h5>
<p>Morbi in faucibus lorem. Aliquam sollicitudin, mi tincidunt volutpat semper, neque nibh pulvinar sapien</p>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-sm btn-primary btn-fixed-width" data-dismiss="modal">OK</button>
</div>
</div>
</div>
</div></script></code></pre>
</div>
</div>
<div class="form-group row">
<label for="inputKey" class="col-lg-2 col-form-label col-form-label-sm">Information Example</label>
<div class="col-lg-4">
<button class="btn btn-sm btn-light btn-fixed-width" type="button" data-toggle="modal" data-target="#infoModal">Information Message</button>
<!-- Modal -->
<div class="modal fade" id="infoModal" tabindex="-1" role="dialog" aria-labelledby="infoModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-sm modal-narrow modal-dialog-centered modal-message-info" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="infoModalLabel">Informative</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<h5><i class="icon-message-status-info"></i> Informative Title</h5>
<p>Morbi in faucibus lorem. Aliquam sollicitudin, mi tincidunt volutpat semper, neque nibh pulvinar sapien</p>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-sm btn-primary btn-fixed-width" data-dismiss="modal">OK</button>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6">
<pre class="language-html"><code><script type="prism-html-markup"><button class="btn btn-sm btn-light btn-fixed-width" type="button" data-toggle="modal" data-target="#infoModal">Information Message</button>
<!-- Modal -->
<div class="modal fade" id="infoModal" tabindex="-1" role="dialog" aria-labelledby="infoModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-sm modal-narrow modal-dialog-centered modal-message-info" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="infoModalLabel">Informative</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<h5><i class="icon-message-status-info"></i> Informative Title</h5>
<p>Morbi in faucibus lorem. Aliquam sollicitudin, mi tincidunt volutpat semper, neque nibh pulvinar sapien</p>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-sm btn-primary btn-fixed-width" data-dismiss="modal">OK</button>
</div>
</div>
</div>
</div></script></code></pre>
</div>
</div>
<div class="form-group row">
<label for="inputKey" class="col-lg-2 col-form-label col-form-label-sm">Warning Example</label>
<div class="col-lg-4">
<button class="btn btn-sm btn-light btn-fixed-width" type="button" data-toggle="modal" data-target="#warningModal">Warning Message</button>
<!-- Modal -->
<div class="modal fade" id="warningModal" tabindex="-1" role="dialog" aria-labelledby="warningModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-sm modal-narrow modal-dialog-centered modal-message-warning" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="warningModalLabel">Warning</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<h5><i class="icon-message-status-warning"></i> Warning Title</h5>
<p>Morbi in faucibus lorem. Aliquam sollicitudin, mi tincidunt volutpat semper, neque nibh pulvinar sapien</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-sm btn-light btn-fixed-width" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-sm btn-primary btn-fixed-width" data-dismiss="modal">OK</button>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6">
<pre class="language-html"><code><script type="prism-html-markup"><button class="btn btn-sm btn-light btn-fixed-width" type="button" data-toggle="modal" data-target="#warningModal">Warning Message</button>
<!-- Modal -->
<div class="modal fade" id="warningModal" tabindex="-1" role="dialog" aria-labelledby="warningModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-sm modal-narrow modal-dialog-centered modal-message-warning" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="warningModalLabel">Warning</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<h5><i class="icon-message-status-warning"></i> Warning Title</h5>
<p>Morbi in faucibus lorem. Aliquam sollicitudin, mi tincidunt volutpat semper, neque nibh pulvinar sapien</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-sm btn-light btn-fixed-width" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-sm btn-primary btn-fixed-width" data-dismiss="modal">OK</button>
</div>
</div>
</div>
</div></script></code></pre>
</div>
</div>
<div class="form-group row">
<label for="inputKey" class="col-lg-2 col-form-label col-form-label-sm">Error Example</label>
<div class="col-lg-4">
<button class="btn btn-sm btn-light btn-fixed-width" type="button" data-toggle="modal" data-target="#errorModal">Error Message</button>
<!-- Modal -->
<div class="modal fade" id="errorModal" tabindex="-1" role="dialog" aria-labelledby="errorModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-sm modal-narrow modal-dialog-centered modal-message-error" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="errorModalLabel">Error</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<h5><i class="icon-status-message-error"></i> Error Title</h5>
<p>Morbi in faucibus lorem. Aliquam sollicitudin, mi tincidunt volutpat semper, neque nibh pulvinar sapien</p>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-sm btn-primary btn-fixed-width" data-dismiss="modal">OK</button>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6">
<pre class="language-html"><code><script type="prism-html-markup"><button class="btn btn-sm btn-light btn-fixed-width" type="button" data-toggle="modal" data-target="#errorModal">Error Message</button>
<!-- Modal -->
<div class="modal fade" id="errorModal" tabindex="-1" role="dialog" aria-labelledby="errorModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-sm modal-narrow modal-dialog-centered modal-message-error" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="errorModalLabel">Error</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<h5><i class="icon-status-message-error"></i> Error Title</h5>
<p>Morbi in faucibus lorem. Aliquam sollicitudin, mi tincidunt volutpat semper, neque nibh pulvinar sapien</p>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-sm btn-primary btn-fixed-width" data-dismiss="modal">OK</button>
</div>
</div>
</div>
</div></script></code></pre>
</div>
</div>
</div>
</div> |