Nucleus - The Freshworks Design System

ember install @freshworks/modal

Best use of modals is to get the task quickly done and may also support in completion of the primary task, for example: Creation of an entity and also editing it. Modal has to be relevant and carefully utilized as modal grasp users attention and may obstruct their current flow.

Usage

{{#nucleus-modal
  size="large"
  open=isModal1
  onSubmit=(action "onSubmit" "Opened!")
  onClose=(action (mut isModal1) false) as |modal|}}
  {{modal.header
    title="Title"
    icon="rewards"
    description="Some description"}}
  {{#modal.body}}
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Adipiscing diam donec adipiscing tristique risus nec. Ullamcorper morbi tincidunt ornare massa eget egestas. Vestibulum lectus mauris ultrices eros in cursus. Justo laoreet sit amet cursus. Mi quis hendrerit dolor magna eget est lorem ipsum dolor. In mollis nunc sed id semper risus in. Et pharetra pharetra massa massa ultricies mi quis. A scelerisque purus semper eget duis at tellus. Duis convallis convallis tellus id. Cursus vitae congue mauris rhoncus aenean vel elit. Phasellus egestas tellus rutrum tellus pellentesque eu tincidunt tortor aliquam. Leo a diam sollicitudin tempor. Velit laoreet id donec ultrices tincidunt. Et magnis dis parturient montes nascetur ridiculus. Massa enim nec dui nunc. Feugiat sed lectus vestibulum mattis. Ac tincidunt vitae semper quis lectus nulla at volutpat.</p>
    <p>In eu mi bibendum neque egestas congue quisque egestas diam. Malesuada nunc vel risus commodo viverra maecenas accumsan. Sodales ut etiam sit amet. Proin libero nunc consequat interdum. Quam elementum pulvinar etiam non quam lacus suspendisse. Nunc scelerisque viverra mauris in aliquam sem fringilla. Blandit volutpat maecenas volutpat blandit aliquam etiam. Integer enim neque volutpat ac tincidunt vitae. Viverra maecenas accumsan lacus vel facilisis volutpat. Adipiscing enim eu turpis egestas. Sit amet massa vitae tortor condimentum lacinia quis. Dui id ornare arcu odio. Vel pretium lectus quam id leo in vitae turpis. Risus at ultrices mi tempus. Vel facilisis volutpat est velit egestas dui id. Egestas diam in arcu cursus euismod quis. Ullamcorper sit amet risus nullam. Nunc id cursus metus aliquam eleifend.</p>
    <p>Amet volutpat consequat mauris nunc congue nisi. Purus semper eget duis at tellus at. Diam quam nulla porttitor massa id neque aliquam vestibulum. Suscipit tellus mauris a diam maecenas. Sagittis aliquam malesuada bibendum arcu vitae elementum. Commodo quis imperdiet massa tincidunt nunc pulvinar sapien et ligula. Sit amet massa vitae tortor condimentum. In nibh mauris cursus mattis molestie. Risus ultricies tristique nulla aliquet enim tortor at auctor. Velit sed ullamcorper morbi tincidunt ornare massa. Lacus laoreet non curabitur gravida arcu ac tortor dignissim convallis. Turpis egestas sed tempus urna et pharetra pharetra massa. Nunc sed blandit libero volutpat sed cras ornare arcu dui. Egestas sed sed risus pretium quam vulputate dignissim suspendisse. Proin libero nunc consequat interdum. Blandit aliquam etiam erat velit. Viverra nibh cras pulvinar mattis nunc sed blandit.</p><p>Quis lectus nulla at volutpat diam ut venenatis tellus in. Gravida in fermentum et sollicitudin ac orci. Bibendum enim facilisis gravida neque convallis a. Ornare arcu dui vivamus arcu felis bibendum ut. Lectus proin nibh nisl condimentum id venenatis a condimentum. Consectetur libero id faucibus nisl tincidunt. Duis at tellus at urna condimentum mattis pellentesque id. Gravida neque convallis a cras semper auctor. Mauris rhoncus aenean vel elit scelerisque mauris. Tellus cras adipiscing enim eu turpis. Etiam sit amet nisl purus in mollis nunc. In eu mi bibendum neque egestas congue. Euismod nisi porta lorem mollis aliquam ut porttitor. Diam quam nulla porttitor massa id neque. Ultrices vitae auctor eu augue ut lectus. Elementum nibh tellus molestie nunc. Sit amet consectetur adipiscing elit pellentesque habitant morbi tristique senectus. Duis at consectetur lorem donec massa sapien. Orci ac auctor augue mauris augue neque gravida in.</p><p>Aliquam ut porttitor leo a diam sollicitudin tempor id eu. Sed risus pretium quam vulputate dignissim suspendisse in est ante. Mauris nunc congue nisi vitae suscipit tellus. Purus semper eget duis at tellus at urna condimentum. Morbi enim nunc faucibus a pellentesque. Arcu odio ut sem nulla. In arcu cursus euismod quis. Blandit aliquam etiam erat velit scelerisque in dictum non. Et odio pellentesque diam volutpat commodo. Pulvinar neque laoreet suspendisse interdum consectetur. Suscipit tellus mauris a diam maecenas. Id volutpat lacus laoreet non. Dis parturient montes nascetur ridiculus mus mauris vitae ultricies. Eu volutpat odio facilisis mauris sit amet. Duis at tellus at urna condimentum. Felis eget velit aliquet sagittis id. Vestibulum lectus mauris ultrices eros. Massa vitae tortor condimentum lacinia quis vel eros donec. Amet nulla facilisi morbi tempus iaculis urna id volutpat lacus. Nulla facilisi cras fermentum odio eu.</p>
  {{/modal.body}}
  {{modal.footer submitTitle="Next" closeTitle="Close"}}
{{/nucleus-modal}}

2. Confirm Dialog

{{#nucleus-confirm-dialog
  open=isModal2
  isDismissible=false
  type="danger"
  onSubmit=(action "onSubmit" "Submit action called")
  onClose=(action (mut isModal2) false)
  title="Account cancellation"}}
  <p>Your account will be cancelled in <b>7 days</b> on <b>July 4, 2019</b>. Your account and data will be irrevocably deleted two weeks later.</p>
{{/nucleus-confirm-dialog}}

3. Slider

{{#nucleus-slider
  open=isModal3
  onSubmit=(action "onSubmit" "Slider submit action")
  onClose=(action (mut isModal3) false)
  as |modal|}}
  {{modal.header
    title="Title"
    icon="rewards"
    description="Some description"}}
  {{#modal.body}}
    {{input placeholder="Intrabit in illud?" autofocus=true}}
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Adipiscing diam donec adipiscing tristique risus nec. Ullamcorper morbi tincidunt ornare massa eget egestas. Vestibulum lectus mauris ultrices eros in cursus. Justo laoreet sit amet cursus. Mi quis hendrerit dolor magna eget est lorem ipsum dolor. In mollis nunc sed id semper risus in. Et pharetra pharetra massa massa ultricies mi quis. A scelerisque purus semper eget duis at tellus. Duis convallis convallis tellus id. Cursus vitae congue mauris rhoncus aenean vel elit. Phasellus egestas tellus rutrum tellus pellentesque eu tincidunt tortor aliquam. Leo a diam sollicitudin tempor. Velit laoreet id donec ultrices tincidunt. Et magnis dis parturient montes nascetur ridiculus. Massa enim nec dui nunc. Feugiat sed lectus vestibulum mattis. Ac tincidunt vitae semper quis lectus nulla at volutpat.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Adipiscing diam donec adipiscing tristique risus nec. Ullamcorper morbi tincidunt ornare massa eget egestas. Vestibulum lectus mauris ultrices eros in cursus. Justo laoreet sit amet cursus. Mi quis hendrerit dolor magna eget est lorem ipsum dolor. In mollis nunc sed id semper risus in. Et pharetra pharetra massa massa ultricies mi quis. A scelerisque purus semper eget duis at tellus. Duis convallis convallis tellus id. Cursus vitae congue mauris rhoncus aenean vel elit. Phasellus egestas tellus rutrum tellus pellentesque eu tincidunt tortor aliquam. Leo a diam sollicitudin tempor. Velit laoreet id donec ultrices tincidunt. Et magnis dis parturient montes nascetur ridiculus. Massa enim nec dui nunc. Feugiat sed lectus vestibulum mattis. Ac tincidunt vitae semper quis lectus nulla at volutpat.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Adipiscing diam donec adipiscing tristique risus nec. Ullamcorper morbi tincidunt ornare massa eget egestas. Vestibulum lectus mauris ultrices eros in cursus. Justo laoreet sit amet cursus. Mi quis hendrerit dolor magna eget est lorem ipsum dolor. In mollis nunc sed id semper risus in. Et pharetra pharetra massa massa ultricies mi quis. A scelerisque purus semper eget duis at tellus. Duis convallis convallis tellus id. Cursus vitae congue mauris rhoncus aenean vel elit. Phasellus egestas tellus rutrum tellus pellentesque eu tincidunt tortor aliquam. Leo a diam sollicitudin tempor. Velit laoreet id donec ultrices tincidunt. Et magnis dis parturient montes nascetur ridiculus. Massa enim nec dui nunc. Feugiat sed lectus vestibulum mattis. Ac tincidunt vitae semper quis lectus nulla at volutpat.</p>
  {{/modal.body}}
  {{modal.footer submitTitle="Next" closeTitle="Close"}}
{{/nucleus-slider}}

Guidelines

✅Do's

Add scroll to body (CTA to remain fixed) incase the content is more.
Icon to the titles has to be contextual
Focus should be on the first item in modal as it opens

🚫Dont's

Don’t exceed maximum width of 800 px
Avoid using 2 levels of modal on modal.
Don’t use modal if it is not related to the user’s current taskflow.
Avoid modal for complex decision making that requires additional sources of information.
Avoid closing the modal on clicking outside for confirmation modals and forms dialogs in which user confirmation or input required.

Keyboard Support

Tab

Moves focus to next focusable element inside the dialog.
When focus is on the last focusable element in the dialog, moves focus to the first focusable element in the dialog.

Shift + Tab

Moves focus to previous focusable element inside the dialog.
When focus is on the first focusable element in the dialog, moves focus to the last focusable element in the dialog.

Escape

Closes the dialog.