Components are pieces of UI that are both composeable and reusable. The complexity and size of a component is limited by its reusability.
Resources
The following sketch file is not always up to date. Please use the coded components presented on this page for the source of truth. Also note that the font file provided here is for design purposes only, the WOFF2 font-file used in the source is for implementation.
Sketch file
Primary button
Secondary button
Tertiary links (Icons in Review)
Overflow button
Dropdown button
Checkbox button
Radio button
Toggle
Toggle are used for boolean settings. They appear in this form because it is the clearest way to communicate on/off states.
Input Field
Input fields include a label and placeholder text. The label is distinct in order to provide context when inputting information. The placeholder text should serve as an example or hint of the input.
Form header
Form headers group form two or more fields, inputs and elements together.
Main Navigation Bar
The main navigation bar is for "Apps" only. An app is defined as an encapsulated set of related functionality. A good rule of thumb is to ask yourself if such an app could exist on your phone. These apps are shown as links only to limit and focus the interaction.
In the case of internationalized text which is too long, the text will wrap. Do note that the words are in sentence case, which helps with longer lines being consumed together.
App Navigation Bar
The App Navigation includes the name of the app (which links to the first feature page in the app), and navigational links to all the features included in the app. It is important to note that only links can live in this sidebar.
Dropbox Switcher
The Dropbox Switcher allows users to switch between Dropboxes. ha. If the selected Dropbox is a work Dropbox, a button appears linking to the /team page. The text on this button changes based on the size of the team. Teams larger than 50 people will have the text "Groups and members", whereas teams under 50 will have the member count.
When the personal Dropbox is selected, the button in the work Dropbox becomes a label of the member count.
Table header
Table headers can either be single word headers or sortable links (in the case of multi-column tables). For sortable links, when a link is selected for sorting, a small arrow appears beside it in the direction (up or down) of the sort.
- Name
-
Name
Tabbed header
Tabbed headers should be best understood as filters of the same content. They should not be seen as entry points to separate pages. This is because through testing we have seen that when tabs are pages, only the first tab is viewed. A good example of a proper set of tabs is "All, Created by Me, Shared with me."
- Open
- Closed
-
Name
Section header
Section headers are used to re-arrange table content by time or kind.
Cell skeleton
- Name
-
The name you'll never see
Kind
Cell with single line and icon
- Name
-
Name
Kind
Cell with double line and icon
- Name
-
Name
4 members
Pranav Piyush
Edited 2 days ago
Cell with double line, icon, and path
- Name
Expand table
-
Show 8 more
Tip card
- Description
A Tip card describes what is on the screen in a friendly, helpful, and human way. When a tip card is dismissed it should not return at a later time.
Cardless Tip
- Description
A cardless tip describes what is on the screen in a friendly, helpful, and human way. Unlike a tip card it cannot be dismissed. The preference is always to use a tip card over a cardless tip.
Popover with title
Title
Before you criticize someone, you should walk a mile in their shoes. That way when you criticize them, you are a mile away from them and you have their shoes.
Popover with list
Settings
Upgrade
Log out
Popover with title, list
Ed Chao
Settings
Upgrade
Log out
Popover with title, cells
Notifications
Ed Chao shared the folder Maestro Design with you.
3 minutes ago
Jane Chang left 3 comments on Maestro Components
3 minutes ago
Ed Chao left 4 comments on Maestro Plan of Record
3 minutes ago
Modals
Modals are popup dialogs that block the application in order to present information and actions not available on the page. They default to a width of 560px but also come in Large (816px) and Small (432px). The height of a modal is dynamic to its content and maxes out at the height of the viewport. There are two kinds of modal dialogs, Billboard and Utility, which are described below.
Billboard Modals
Billboard Modals exist to promote users to enter a new/improved experience. This includes things like account creation, log in, upgrade and various other promotions. Billboards don’t have a bottom bar of actions because they are not scrollable. Billboards are optimized around up-selling so they use a corner x for cancel as a de-emphasized action.
Before you criticize someone, you should walk a mile in their shoes. That way when you criticize them, you are a mile away from them and you have their shoes.
Utility Modals
Utility modals exist to provide utility to the product. This includes things like settings, instructions, invitations, input forms. Utility modals must have a bottom footer displaying the choices users can take on the modal, of which one is always a cancel button. The bottom footer sticks when the content forces the modal to scroll. It is important to note that Utility modals do not have a corner x. This is because “cancel” is considered a valid choice, equally held with the others actions. This is particularly important in communicating loss of data or state in form-based or multi-step modals.
Before you criticize someone, you should walk a mile in their shoes. That way when you criticize them, you are a mile away from them and you have their shoes.
Utility Modal with Forms
Utility Modal Small with Two buttons
Before you criticize someone, you should walk a mile in their shoes. That way when you criticize them, you are a mile away from them and you have their shoes.
Snackbars
Snackbars serve as the base component for alerts, toast notifications,
and file upload tasks inside of the Maestro web interface. There are currently
five base types of Snackbars that cover the variety of states and message
types used in Dropbox. When incorporated in product Snackbars should sit
on top of a simple white overlay in order to keep it from blending into
the page. Click the button below and give it a try!
Note: currently two sizes of Snackbars are shown: Desktop and Mobile. This
will be a responsive component, but in order to demonstrate sizing and some
specific spacing tweaks unique to mobile (while viewing on desktop) both
are displayed here.
Generic Snackbars
Generic Snackbars should be used anytime a message doesn't clearly fit into one of the other categories listed.
Sync Snackbars
Sync Snackbars let you know the progress of a file you're uploading! This pattern can also be used (with some tweaks) anytime you need a persistent progress indicator.
This is a sync Snackbar.
This is a sync Snackbar.
Success Snackbars
This Snackbar is used anytime you need to indicate an action was successfully completed!
Warning Snackbars
This Snackbar is used anytime you need to communicate a warning to a user (for example, if you don't have permission to do something).
Failure Snackbars
This Snackbar is used anytime you need to communicate an error to a user (like if an action wasn't able to be completed).
Gridview
The Tile component exists to assist in retrieving visually oriented files. The tile component has three loading states. When we first start to load the file it will show a blank square. After we retrieve the file type the filetype icon will show. Finally when the thumbnail is retrieved it will be displayed.
Tile - Loading
-
coversheet.pdf
-
summary.docx
-
10290.jpg
Tile - Semiloaded
-
coversheet.pdf
-
summary.docx
-
10290.jpg
Tile - Loaded
-
coversheet.pdf
-
summary.docx
-
10290.jpg