Mailchimp Pattern Library

Our pattern library used to build the Mailchimp application.

Dialogs

Generic Dialog

We use modals and dialogs for a variety of different purposes throughout the app including forms and verification prompts.

Show Generic Modal
 
1
<div data-dojo-type="dijit/Dialog" data-dojo-id="genericModal" title="Are you sure?"> 
2
  <div class="dijitDialogPaneContentArea"> 
3
    <p>You're about to delete this campaign.
4
    </p> 
5
    <div class="dijitDialogPaneActionBar"> 
6
      <button class="button p0" data-dojo-type="dijit/form/Button" type="button" data-dojo-props="onClick:function(){genericModal.hide();}">Delete</button> 
7
      <a href="#" onclick="closeDialog(); return false;">Cancel</a> 
8
    </div> 
9
  </div> 
10
</div>
11

Modals in the app are defined using Dijit's Dialog plugin. The modal_id is used to bind the button onclick events to show/hide the modal.

The primary action in the modal and dialog appears before the secondary action.

Feature Dialog

Show Feature Modal
x
16
 
1
<div data-dojo-type="dijit/Dialog" data-dojo-id="featureModal" class="feature-dialog"> 
2
  <div class="dijitDialogPaneContentArea max-height-inherit alignc !padding--lv0 selfclear"> 
3
    <img src="https://cdn-images.mailchimp.com/product/campaigns/ab-testing.svg" class="padding--lv6"> 
4
    <div class="margin--lv3"> 
5
      <p class="full-width margin-bottom--lv0">We’ve updated the AB testing 
6
        <span class="hide-mobile">campaign</span> interface.
7
      </p> 
8
      <p class="full-width">Now you can easily test your content.
9
      </p> 
10
    </div> 
11
  </div> 
12
  <div class="dijitDialogPaneActionBar alignc"> 
13
    <button class="button p1" data-action="dismissDialog" onclick="featureModal.hide(); return false;">Dismiss</button> 
14
  </div> 
15
</div>
16

Use the feature-dialog class to show a dialog with a simpler look and feel.

This type of dialog should be used sparingly and not shown more than once. They should be easily dismissible as they don't feature a close icon.