Versions Compared

Version Old Version 1 New Version Current
Changes made by

Liav Nadler

Carlie Bradshaw

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Related Pages: Popups, Message PopupsLead:  Liav Nadler 

Status

colourYellow
titleongoing
Table of Contents

Description

<< 1-2 lines short description of the component and when it is used>>

<< Most communicative 1 screen shot of the component >>

<<Types>> 

<<use this section only if the component has several types that each requires its own page e.g. table, collapsable table>>

<<If you are using this section, then Usage & Behaviour should be used only for the Common functionalities in the page>>

...

Usage & Behaviour

<<use a visual for each sub-section>>

General guidelines

<<describes the component, use sub-section when they are relevant to the components>>

Expand
titleExample for heading in general

<<use heading 3>>

  • Text (Headings, labels, microcopty, help text Etc..) ( how to write microcopy for that component. For example, in lists the list items must be grammatically parallel and don’t mix active and passive voice etc)
  • Format / structure (describe the objects the component is made of and are optional e.g. search bar in a table) (for search component include - variations, results)(for tabs - Number of tabs)
  • Content (for example, in dropdowns and lists)
  • Length (e.g. length of list)
  • Order (e.g. order of drop down menu)
  • Placement or Positioning (when this is important, e.g. toast message)
  • Internal Logic (when explaining how to use different components inside the current component. For example, when to use radio buttons, checkboxes, and fields in a form)
  • Default section or Default values 

States

<<e.g. active disabled, error, hover, temporary (spinner size), empty etc...>>

Interaction

<<for example, how to change a value – type, arrows, use slider>>

<<use Click target to describe the interaction>>

Validations and errors

<<used for specific components e.g. slider>>

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 /wiki/spaces/UX/pages/308969693 >>

Screen reader support 

<<Make sure the components support screen reader for content or behaviour where needed - see /wiki/spaces/UX/pages/308248620 >>

Contrast & size compliance

<<Visual designers must comply with the minimal of /wiki/spaces/UX/pages/301498483 for each component>>

Design

...

Code

<<a box containing the code - discuss with Femi>>A dialog popup is a Popup which allows the user to enter information or make decisions.

...

Usage & Behavior

General guidelines

Structure

  • In addition to the basic elements of a Popup, a dialog popups contains a set of form components, such as Radio Buttons, Checkboxes, and Drop-down Menus.

  • A help icon (?) may appear next to the close icon (X) in the dialog's header, for additional contextual help.

  • Dialog popups may vary in width or height. In some cases, the size of the dialog popup can be responsive to choices made by the user or by error messages. See Field Validation.

  • The least destructive option will be the primary action button, on the bottom-right of the popup.

Interaction

Validations and errors

  • The primary action button will be enabled even when the dialog box contains empty mandatory fields. In this case, clicking the main action button will:

    • show an error message at the bottom of the dialog.

    • disable the button.

  • For further information see Field Validation.

Best practices

Accessibility compliance

Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility.

Design

Zeplin link

Screen thumbnail

https://zpl.io/VKOlj6V

image-20240118-142138.pngImage Added

Code

Html macro
sanitizefalse
<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">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">Regular Example</label>
					<div class="col-lg-4">
						<button class="btn btn-sm btn-light btn-fixed-width" type="button" data-toggle="modal" data-target="#regularModal">Regular Popup</button>
						<!-- Modal -->
						<div class="modal fade" id="regularModal" tabindex="-1" role="dialog" aria-labelledby="regularModalLabel" aria-hidden="true">
							<div class="modal-dialog modal-dialog-sm modal-dialog-centered" role="document">
								<div class="modal-content">
									<div class="modal-header">
										<h5 class="modal-title" id="regularModalLabel">Popup Name</h5>
										<button type="button" class="close" data-dismiss="modal" aria-label="Close">
											<span aria-hidden="true">×</span>
										</button>
									</div>
									<div class="modal-body">
										<h5>Popup Main Header</h5>
										<p>Morbi in faucibus lorem. Aliquam sollicitudin, mi tincidunt volutpat semper, neque nibh pulvinar sapien, nec vehicula sapien odio et mi. Curabitur volutpat nunc non magna porta, eu pellentesque eros porttitor. Sed imperdiet mollis massa in hendrerit. Nullam sed nunc auctor, sollicitudin odio nec, auctor tortor. Nulla facilisi. Vestibulum mattis elit quis tristique viverra. Aliquam accumsan enim velit, eget dictum leo tristique et. Proin varius mauris erat, in molestie ligula ut.</p>
										<form>
											<div class="custom-control custom-control-sm custom-radio">
											  <input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
											  <label class="custom-control-label" for="customRadio1">Morbi in faucibus lorem</label>
											</div>
											<div class="custom-control custom-control-sm custom-radio">
											  <input type="radio" id="customRadio2" name="customRadio" class="custom-control-input">
											  <label class="custom-control-label" for="customRadio2">Aliquam sollicitudin</label>
											</div>
											<div class="custom-control custom-control-sm custom-radio">
											  <input type="radio" id="customRadio3" name="customRadio" class="custom-control-input">
											  <label class="custom-control-label" for="customRadio3">Curabitur volutpat nunc non magna</label>
											</div>
											<div class="custom-control custom-control-sm custom-radio">
											  <input type="radio" id="customRadio4" name="customRadio" class="custom-control-input">
											  <label class="custom-control-label" for="customRadio4">Nullam sed nunc auctor</label>
											</div>
										</form>
									</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="#regularModal">Regular Popup</button>
<!-- Modal -->
<div class="modal fade" id="regularModal" tabindex="-1" role="dialog" aria-labelledby="regularModalLabel" aria-hidden="true">
   <div class="modal-dialog modal-dialog-sm modal-dialog-centered" role="document">
      <div class="modal-content">
         <div class="modal-header">
            <h5 class="modal-title" id="regularModalLabel">Popup Name</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">×</span>
            </button>
         </div>
         <div class="modal-body">
            <h5>Popup Main Header</h5>
            <p>Morbi in faucibus lorem. Aliquam sollicitudin, mi tincidunt volutpat semper, neque nibh pulvinar sapien, nec vehicula sapien odio et mi. Curabitur volutpat nunc non magna porta, eu pellentesque eros porttitor. Sed imperdiet mollis massa in hendrerit. Nullam sed nunc auctor, sollicitudin odio nec, auctor tortor. Nulla facilisi. Vestibulum mattis elit quis tristique viverra. Aliquam accumsan enim velit, eget dictum leo tristique et. Proin varius mauris erat, in molestie ligula ut.</p>
            <form>
               <div class="custom-control custom-control-sm custom-radio">
                  <input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
                  <label class="custom-control-label" for="customRadio1">Morbi in faucibus lorem</label>
               </div>
               <div class="custom-control custom-control-sm custom-radio">
                  <input type="radio" id="customRadio2" name="customRadio" class="custom-control-input">
                  <label class="custom-control-label" for="customRadio2">Aliquam sollicitudin</label>
               </div>
               <div class="custom-control custom-control-sm custom-radio">
                  <input type="radio" id="customRadio3" name="customRadio" class="custom-control-input">
                  <label class="custom-control-label" for="customRadio3">Curabitur volutpat nunc non magna</label>
               </div>
               <div class="custom-control custom-control-sm custom-radio">
                  <input type="radio" id="customRadio4" name="customRadio" class="custom-control-input">
                  <label class="custom-control-label" for="customRadio4">Nullam sed nunc auctor</label>
               </div>
            </form>
         </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">Narrow Example</label>
					<div class="col-lg-4">
						<button class="btn btn-sm btn-light btn-fixed-width" type="button" data-toggle="modal" data-target="#narrowModal">Narrow Popup</button>
						<!-- Modal -->
						<div class="modal fade" id="narrowModal" tabindex="-1" role="dialog" aria-labelledby="narrowModalLabel" aria-hidden="true">
							<div class="modal-dialog modal-dialog-sm modal-narrow modal-dialog-centered" role="document">
								<div class="modal-content">
									<div class="modal-header">
										<h5 class="modal-title" id="narrowModalLabel">Popup Name</h5>
										<button type="button" class="close" data-dismiss="modal" aria-label="Close">
											<span aria-hidden="true">×</span>
										</button>
									</div>
									<div class="modal-body">
										<h5>Popup Main Header</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="#narrowModal">Narrow Popup</button>
<!-- Modal -->
<div class="modal fade" id="narrowModal" tabindex="-1" role="dialog" aria-labelledby="narrowModalLabel" aria-hidden="true">
   <div class="modal-dialog modal-dialog-sm modal-narrow modal-dialog-centered" role="document">
      <div class="modal-content">
         <div class="modal-header">
            <h5 class="modal-title" id="narrowModalLabel">Popup Name</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">×</span>
            </button>
         </div>
         <div class="modal-body">
            <h5>Popup Main Header</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>
		</div>