Getting started FAQs

We support the latest and latest minus one versions of all modern browsers on the market today. Most notable mentions include:

• Google Chrome
• Safari
• Firefox
• MS Edge
• Chromium Edge

Whilst we are acutely aware that a Design System cannot do and hold everything that is needed for each individual product, and that extension and customization is the key to a successful Design System at scale, we will not be providing that functionality via a custom classname.

We won't be doing this for a number of reasons:

• Global classnames, especially overrides, impact the confidence teams can have on the state of their styling. There is no guarantee you won't affect someone else or they won't affect you, impacting the success of independent teams and confidence in your deployments. This particularly applies to a number of Twilio products that are multi-tenant UI, where multiple independent teams are providing UI to a single page
• Uncontrolled customization causes design fragmentation
• Uncontrolled customization impacts the ability of the Design System team to push changes to and evolve the Design System, without adversely impacting downstream consumers

Above all, custom classnames erode trust in the system, the components, the product and adversely affect the trust of the customer.

Customization and extension will be provided, but it will be provided via a controlled API, within the constraints of the Design System. More on that soon.

ID references in a web page must be unique for them to work correctly, especially when supporting assistive technologies such as screen readers. In a multi tenant, single page application you do not always have control of what is loaded into a webpage at any one time. As a result static ids can clash and cause duplicates.

To guarantee that every id in a web page is unique, regardless of what was loaded on the page and in what order, we use this library to generate ids for us.

We recommend using data attributes for your test identifiers.

These are your own implementation details and have no requirements to be unique. data-testid is a common identifier and supported by the very popular testing library React Testing Library

All Paste components should support adding global HTML attributes as part of their API. So applying something like data-testid="foo" directly to the component should work.

We use Jest coupled with Enzyme for older components and React-Testing-Library for newer components to do component unit testing. We're transitioning away from Enzyme to React-Testing-Library in the long term as it is now the recommended testing library of the React team. We aim for 85-90% test coverage.

We use Applitools for visual regression testing. We test each component, variant and state (where possible) separately. We only run them through Chrome currently.

We also use Chromatic for UI review where any visual changes are reviewed by a designer for all components.

All these tests are run on every commit and are required checks on all pull requests.