Patterns
Composites
Things the product needs that are built from existing components instead of having a design of their own — task details, the lightbox, embeds, tables, date picking and more.
Some things in the product have no design of their own: they are assembled from existing components. Build them as described here, without new colors, shapes or lines.
When it applies
Whenever you need one of the things below. If what you need isn't here and no component fits, follow the six questions in the README before adding anything.
Structure
Task details
A wider Dialog: the title, one row of properties (Status, Assignee, Created by) in a DescriptionList, the History in a collapsed Timeline, then the task's thread and a Composer. Its size is in Tasks.
Image viewer
A full-screen layer-backdrop holding the image, previous and next, and one icon button to close (Lightbox).
Link cards, forwarded messages, quoted previews
The structure of a file card (MessageAttachment) with the header of a message (MessageItem): MessageEmbed, MessageForwardedBundle, MessageQuotedPreview.
Diagrams and Markdown tables
The same container as a code block (CodeBlock): layer-code, a hairline border, radius-container.
Translation, read and saved markers
One more small chip in the row under the message, or a short line of Space Mono text (MessageTranslation). Don't add a color for them.
Toolbar for selected messages
MessageMultiSelectToolbar at the bottom of the conversation (MessageItem).
Resizable columns
The seam between two columns is the only line, and the drag handle sits on it (Resizable).
Tables
Prefer a DescriptionList or ListRow rows. When it has to be a table, such as usage or billing (Table):
- Set the header in
text-footnote,foreground-hint. - Divide rows with
line-hairline. - Set numbers in Space Mono, right-aligned.
Picking a date
A column of dates inside the popup of a Select, with the dates in Space Mono.
A row of toggle buttons
A row of filters (ToggleGroup), each one selectable on its own.
Authorization (OAuth)
The structure of a Dialog, with the requested permissions listed in a DescriptionList.
Switching workspaces
- On a phone, the workspace pill opens a bottom sheet with the list (Drawer).
- On desktop, the tile at the top of the rail opens the same list as a menu next to the tile (DropdownMenu).
- Make each row the workspace tile, its name and its unread count, with a check on the current workspace.
Related
- Choosing a component.
- Conversation: where most of these appear.