Paste Design System Newsletter - June 2022 Edition
The Design Systems Committee is made up of designers and engineers from a wide variety of teams who regularly use Paste and provide insight and feedback on the system. Over the past six months, Committee members have reviewed Badge, Multi-select Combobox, the Data Visualization library, and much more. Their input has been invaluable in the progression of Twilio’s Design System, and we on the UX Infrastructure team are incredibly grateful for their participation!
If you’re interested in becoming a part of the Design Systems Committee for the next half of the year, please reach out to Loreina Chew.
Engineers, get ready for your lives to become a whole lot easier! Gapur Kassym from the Frontline team recently developed and contributed an exciting new tool: a VS Code extension that allows the user to easily view the pixel or rem value of a design token. Paste Intellisense populates a list of suggestions in a drop-down menu for autocompleting tokens, and it also shows the actual value of a token on hover. We’re thrilled to see this design tooling contribution come to life as we incorporate it into the Paste monorepo!
We recently released a major update to Paste (v14.0.0) to upgrade our Textarea component. It no longer has a dependency on react-autosize-textarea and instead has a peerDependency on @twilio-paste/react-textarea-autosize-library (which is bundled in @twilio-paste/core). The reason we changed this is to add a new resize prop, which defaults to ‘none’ and allows vertical. This prop allows users to resize the Textarea to whatever height they want.
Check out the resizable Textarea example
The One Twilio team wrote a blog post about the research phase of their initiative to bring cohesion to Twilio’s full product suite. The post was published on Twilio’s blog and was featured in Issue 133 of Design Systems News.
Give it a read if you’d like to learn more about the customer research, market analysis, and ecosystem audits that the team tackled to set a strong foundation for the design work to come.
We recently released a major update to Paste in order to upgrade Emotion, the style library on which Paste is built. Make sure to upgrade the version of @twilio-paste/core you’re using when convenient, and keep an eye on the changelog to make sure you don’t miss any future releases. If you’re curious about the changes that came along with version 11 of Emotion, read about them on the Emotion docs.
Starting a brand new project with Paste and NextJS? Our starter template can get you up and running in no time! We’ve recently updated the template to use the latest version of NextJS so you can spin-up a project on the cutting edge. This version drops support for Node v12, so make sure you’re up to date in your Node versions. As always, if you encounter any issues, reach out to let us know.
Make your own Paste app using NextJS
Pastemates are individuals and teams who have been critical contributors to Paste, through advocating for adoption within their products and channeling important feedback and contributions back into the system.
We’re excited and inspired by this Pastemate’s contribution. Gapur Kassym from the Frontline team created a VS Code extension that blew us all away! Visual Studio Code (aka VS Code) is a dev environment that allows for customization through extensions, and Gapur’s Paste Intellisense extension allows developers to more easily use Paste in their projects. Gapur’s work uses autocomplete and hover features to show the name and value of Paste’s design tokens as they’re used in the code. By integrating this knowledge into the development space, Gapur has made a tool with the potential to simplify and empower all builders who use Paste! He recently demoed the extension for us and told us about his ideas for future features, so stay tuned! He lived all four values of the Twilio Magic 2.0, and we can’t wait to add his contribution to our system soon. Thank you, Gapur!
| BPM | Status |
|---|---|
| Paste goes international | 🟢 Paste now fully supports Twilio’s internationalization efforts for Q1. Paste components are capable of supporting translated content and do not rely on any hard-coded strings. |
| Evolve the Twilio design language to support the vision of “One Twilio” | 🟢 We’ve been in visual concept land! During ThinkWeek, we diverged to come up with visual directions for an evolved design language for Twilio. Post ThinkWeek, we converged on a few directions that we’ll be getting feedback on from our RAPID. From there, we’ll refine the directions and pursue user testing to help us move towards one visual direction. |
| Establish Paste as a leading Next-Gen Monorepo through tooling and infrastructure improvements | 🟢 We’ve identified gaps in Paste’s testing coverage and have created tickets to close these gaps. We’ve also converted all applicable code from JavaScript to Typescript, to have better code resiliency. |
| Lay the groundwork for our new program management, content, and visual design disciplines | Work on this priority will start later this year. Stay tuned! |
| Scale Design System onboarding and support for both internal consumers and external customers | Because of the company’s recent initiatives to focus on resiliency work, we’ve decided to pause this BPM. This means that we’ll be able to devote more energy towards the priorities that provide direct customer value and align more closely with the company’s current focus. |
| Build a UI kit for the Twilio Conversations API | 🟢 Design explorations and a couple of the Chat components have been completed. We are currently building more of the version 1 components. |
| Feature | Description |
|---|---|
| Resiliency work | Increase code resiliency by closing identified gaps in our code’s testing coverage |
| Conversations UI Kit Components | Build the components that will make up the Conversations UI Kit |
| Dark theme spec | Publish guidelines on the Paste Dark Theme to the docs site |
| One Twilio design concepts | Refining our visual directions and drafting user testing strategy |
| Stage 2 release of Form Pill and Display Pill | Refining the design and API for the existing Display Pill Group and Form Pill Group components |
| Multi-select Combobox | Improvements to the existing Combobox component, with a design refresh and added functionality to select multiple items |
| Tokens page redesign | Build and publish the redesign of the Design Tokens page (Tokens Overview page is already live!) |
See you next time! 👋
— The Design Systems Team