Skip to contentSkip to navigationSkip to topbar
Figma
Star

Paste Design System Newsletter - June 2022 Edition

Paste
Paste

🙌 Thank you to our H1 2022 Committee!

🙌 Thank you to our H1 2022 Committee! page anchor

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.

Paste Intellisense

Paste Intellisense page anchor
Screenshot of the Paste Intellisense plugin being used in VS Code

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(link takes you to an external page) 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!

Give Paste Intellisense a try

Textarea component can now be resized!

Textarea component can now be resized! page anchor
Paste textarea component with label and help text showing the resize option

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

Text on a blue background reading 'Bringing Cohesion to the Twilio Product Suite; Part I

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(link takes you to an external page) and was featured in Issue 133 of Design Systems News(link takes you to an external page).

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.

Read the blog post

Emotion updated to version 11

Emotion updated to version 11 page anchor
Screenshot of the emotion 11 upgrade PR in github

We recently released a major update to Paste in order to upgrade Emotion(link takes you to an external page), 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(link takes you to an external page).

Update Paste

We updated our NextJS starter template

We updated our NextJS starter template page anchor
NextJS logo

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(link takes you to an external page).

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.
This month's Pastemate, Gapur Kassym

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(link takes you to an external page) (aka VS Code) is a dev environment that allows for customization through extensions, and Gapur’s Paste Intellisense extension(link takes you to an external page) 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(link takes you to an external page), and we can’t wait to add his contribution to our system soon. Thank you, Gapur!

BPMStatus
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 disciplinesWork on this priority will start later this year. Stay tuned!
Scale Design System onboarding and support for both internal consumers and external customersBecause 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.
FeatureDescription
Resiliency workIncrease code resiliency by closing identified gaps in our code’s testing coverage
Conversations UI Kit ComponentsBuild the components that will make up the Conversations UI Kit
Dark theme specPublish guidelines on the Paste Dark Theme to the docs site
One Twilio design conceptsRefining our visual directions and drafting user testing strategy
Stage 2 release of Form Pill and Display PillRefining the design and API for the existing Display Pill Group and Form Pill Group components
Multi-select ComboboxImprovements to the existing Combobox component, with a design refresh and added functionality to select multiple items
Tokens page redesignBuild and publish the redesign of the Design Tokens page (Tokens Overview page is already live!)

See you next time! 👋

— The Design Systems Team