The responsive layout is in early preview. Please report any bugs.
Roadmap
Here's a glimpse of what is coming up in future releases of Paste. Unless explicitly mentioned, all release candidates are tentative and subject to change.
Feature | Description | Status |
---|---|---|
Circle variant of the Button component | A Button component variant primarily used in call or dialling user interfaces | Complete |
Publish rounded small variant of the Button component in Figma | Complete | |
Toggle Button component | A Button that supports two states, pressed and unpressed similar to a like button | Complete |
Code Block component | Non-editable block of text, formatted in the code text style and with syntax highlighting. | In progress |
Combobox component, refined | A combobox is a UI control used while presenting a styled, templated options list. It can allow for additional functionality like typeahead. | In progress |
Contact Center icon set | A collection of icons are added for use in contact center environments. | In progress |
Multiselect Combobox component | A combobox that can be used to select multiple items. | In progress |
Run customer research for design language concepts | Finalize two directions and apply to necessary screens for research. Run research for our two design language concepts. | In progress |
Toggle Switch component | Used to toggle a feature on or off | In progress |
Callout component | A component that can be used to highlight important, inline information in long page content | To do |
Conversations API Figma UI Kit | Figma UI library containing components that can be used to design conversational UIs using Paste | To do |
Inline Code component | A component used to display important inline code snippets, such as SIDs, IDs and API keys | To do |
Non-Modal Dialog component | A small, minimizable non-modal dialog that is fixed or anchored to the bottom of the screen | To do |
Status variants of the Help Text component | Variants that enable the display of warning, success or informational Help Text | To do |
Feature | Description | Status |
---|---|---|
Button Group component | A group of connected Buttons | To do |
Chat Composer component | A Rich Text Editor used to compose chat messages in conversational UI | To do |
Conversations API UI Kit | Official launch of the Paste Conversations API UI kit | To do |
Design the Conversations API UI Kit landing page | Landing page for Conversation UI kit that lives on the Paste website | To do |
File Input component | Input component used to upload or attach files | To do |
Modal component, side variant | Modal Dialog that covers one side of screen | To do |
Publish circle variant of Button in Figma | Make circle buttons available in the Paste Figma library | To do |
Radio Button Group component | A group of radio buttons that look like a Button Group | To do |
Feature | Description | Status |
---|---|---|
Avatar component, Square variant | A new variant for the Avatar Component that creates a square shape | To do |
Description List component | The classic Description List component. The pairing of a Term and a Description, often in a key, value pair | To do |
Display Text Component | Typographic guidelines for large text meant to be used for marketing, storytelling, or attention-grabbing contexts, like displaying numbers on a dashboard layout. These typically fall outside of the normal use cases for the standard Heading component. | To do |
Dropzone component | A component used as the visual target for a drag and drop interaction | To do |
Form page templates | A group of components with sensible defaults used to quickly layout forms in a consistent manor | To do |
Publish Spinner in Figma | Make the Spinner component available in the Paste Figma library | To do |
Send out H2 2022 CSAT survey | Check in with our internal customers to gauge our customer satisfaction | To do |
Tokens for React Native | Provide React Native developers a way to use Paste Design Tokens | To do |
Feature | Description | Status |
---|---|---|
Copy to Clipboard pattern | How to enable a user to copy a snippet of text, such as an API key or code block. | To do |
Design typography components for small, detail, and caption text styles | Component for creating supplementary UI text | To do |
One Twilio: Design Language update | Launch of the new One Twilio Design Language update that will be available via Paste. A cohesive design language to unify Twilio, Segment and SendGrid products | To do |
One Twilio: Design language guidelines | Design Guidelines to accompany the new One Twilio Design Language | To do |
Tabs component, refined | Tabs are used to separate content into different logical sections. | To do |
Typography components for small, detail, and caption text | Component for creating supplementary UI text | To do |
Feature | Description | Status |
---|---|---|
Drag and Drop Pattern | Patterns for creating Drag and Drop user interface experiences | To do |
Menu component, refined | A menu presents a list of menu items that a user can choose to perform an action with. | To do |
One Twilio: Design global navigation compositions | A collection of components that can be used to build shared, global navigation patterns for Twilio, Segment and SendGrid applications. | To do |
Popover component, refined | A Popover is used to display some content on top of another. It is typically invoked by a click action. | To do |
Feature | Description | Status |
---|---|---|
Data Grid component, refined | Interactive data tables, that include selection, sorting, editing | To do |
Navigation UI Kit | UI Kit to create cohesive and consistent application navigation | To do |
Navigation UI Kit for Figma | To do | |
One Twilio: Global Navigation Design Composition | To do | |
Tooltip component, refined | A Tooltip is a small contextual overlay that allows you to give further clarification to text or UI controls. | To do |
Feature | Description | Status |
---|---|---|
Alert Dialog component, refined | Used to confirm an action made by the user. Used to prevent exiting a form in a modal without saving changes | To do |
Avatar component, refined | Avatar is a pictorial representation of a user or object 👩🎤. It can accept an image or initials. | To do |
Breadcrumb component, refined | To do | |
Checkbox Button component | A group of checkboxes that look like a Button Group | To do |
Date Picker component, refined | To do | |
Time Picker component, refined | To do |
Feature | Description | Status |
---|---|---|
Accordion component | Used to expand and collapse a collection of grouped sections of content | To do |
Accordion primitive | An unstyled functional primitive that is used for the Accordion component, or to roll your own implementation. | To do |
Add interactivity to 10 Figma components | Start making our Figma component library interactive, now that Interactive Components are out of beta. | To do |
Add interactivity to 10 more Figma components | Continue making our Figma component library interactive, now that Interactive Components are out of beta. | To do |
Alert / Status primitive | A primitive component used to create Alerts or Status components | To do |
Avatar component with presence indicator | To do | |
Blockquote component | A component used to display quotes | To do |
Build Design Foundations - Layout/Spacing | To do | |
Build Design Foundations - Typography | To do | |
Build new design Getting Started pages | Rebuild the Design Getting Started pages with new content | To do |
Build new overview page template | To do | |
Build new pattern page template | To do | |
Card Layout pattern | A collection of patterns related to creating Card based user interfaces and layouts | To do |
Card actions group | Patterns to use when displaying actions that be placed upon a single or group of Cards | To do |
Carousel component | A component used to display a collection of images or graphics | To do |
Code Editor / Code Editor theme | A component used to create editable, syntax highlighted blocks of code | To do |
Color Picker component | A component used to pick and select a color | To do |
Configure dev container for GH codespaces | Seemlessly enable Developers to work on Paste using Github codespaces and developer containers, with no local set up | To do |
Customization research plan / UX platform | To do | |
Data Grid sort | To do | |
Data Grid table actions | A composition of components to use when wanting to perform an action on a single row | To do |
Data Grid with fixed/locked column | To do | |
Data Visualization pattern | Patterns and guidelines around the types of charts, colors, and treatments that can be used when creating Data Visualizations | To do |
Data Visualization, Maps pattern | A pattern surrounding the data visualization of geographic data | To do |
Data upload pattern | How to move a file or dataset out of Twilio | To do |
Date Range Picker component | Allows users to pick a date range from a calendar | To do |
Date and Time Picker component | A component that allows users to pick a single date and time from a calendar | To do |
Date and Time Range Picker component | To do | |
Design Foundations - Layout/Spacing | Create guidelines for using spacing and creating layouts within Twilio products. | To do |
Design Foundations - Typography | Create guidelines for using typography and creating hierarchy within Twilio products. | To do |
Design Toolbar Component | A component used to group related actions | To do |
Directional Modal component | To do | |
Edit pattern | To do | |
Emoji component | To do | |
Errors, error states and warning states pattern | Can be used in situations where data is empty error states | To do |
Feed primitive | To do | |
Form fields, small | To do | |
Hyphenate component | To do | |
Icons, country flags | To do | |
Illustration component | To do | |
Image component | To do | |
Improve SVG to React Documentation | To do | |
Inline Edit pattern | To do | |
Keyboard Shortcut component | A component use to represent a keyboard key | To do |
Kickoff Prototyping Kit refinement | To do | |
Listbox primitive | To do | |
Live Region primitive | To do | |
Loading pattern | Define Spinner vs. Skeleton Loader | To do |
Meter component | A component used a to show a unit of measure between two defined values | To do |
Modal component, full screen variant | Modal Dialog that covers then entire screen | To do |
Motion system | Adds standardized visual effects to a component | To do |
Number Input component with stylized buttons | Input that limits data to number entry and has styled +/- buttons | To do |
Onboarding pattern | To do | |
Ordered List component, stylized variant | To do | |
Overview page redesign | To do | |
Page Header pattern | Compositional examples of headings, breadcrumbs, and page level actions | To do |
Permissions pattern | To do | |
Portal component | A primitive component used to render transitory elements outside the main DOM hierarchy | To do |
Positioner library | A utility library used to position floating elements on the screen in relation to the window and other elements that may have triggered its appearance | To do |
Progress Bar component | Communicates task or loading completion | To do |
Progress Stepper component | Labels and communicates steps and progression through a linear workflow | To do |
Publish Tooling section to docs site | To do | |
Publish contribution guide for Ideas and Feedback | Explore all the different ways folks can contribute to Paste. It's not just a full component or design pattern, end-to-end | To do |
RTL language support for i18n | To do | |
Rebuild overview pages | To do | |
Rewrite and redesign design Getting Started pages | Reimagine our Design Getting Started pages to better support new and onboarding designers to Twilio and Paste | To do |
Search Pattern | Patterns that can used to create a variety of common search UIs | To do |
Slider component | Draggable input over a range of numbers | To do |
Summary Detail component | To do | |
Timeline component | A component used to display a list of events that occurred in chronological order | To do |
Toolbar Component | A component used to group related actions | To do |
Toolbar Primitive | To do | |
Tree Grid component | A component used to display, interact with and navigate hierarchical tabular data | To do |
Tree Grid primitive | A primitive to create a table with rows that can expand and show more rows | To do |
Tree component | A component to display, interact with and navigate hierarchical data | To do |
Treeview primitive | Primitive for creating expandable sections that show hierarchical data | To do |
Visual Picker component | To do | |
Wizard pattern | How to take a user through a multi-step flow. | To do |