Paste

Design System

Text

A primitive component that can be used to create all text styles in Paste

Status
beta
Version
1.0.3
Sources
Storybook
Install
yarn add @twilio-paste/text

Hello

Guidelines#

Please note

Only use this component if all other Paste typographic components don’t meet your use case. If you find yourself here, come to the Design System Office Hours.

The Text component is a primitive of the system and can output any supported text style provided by our design tokens. Coupled with Box, it underpins most of our components.

About Text#

The Text component is a design primitive. It is designed to be used when other typographic components in Paste do not meet your requirements. It is a styled component that allows you to create text styles with values from our design tokens. When using the Text component you can create any type of UI text and always be using the Twilio design language.

The Text component allows you to set style properties for common text styles. These properties include font family, color and line-height. You can only select design tokens as the value of each property. You can use any combination of the different properties, though.

Style properties on the Text component can be set with a single value or a responsive value. By setting a responsive value, you can control how your text will appear at each breakpoint the theme supports. This can be useful in supporting responsive designs for different screen sizes.

Via the as property, you can also set the Text component to render as any HTML element.

Accessibility#

The Text component can be used in any situation. As always, when working with HTML you need to make a careful choice to select an appropriate semantic for your text. That semantic communicates the intended meaning of that text to assistive technology.

Be sure to use the "as" prop to select semantically meaningful HTML elements. The "as" property is required. As a fallback, the Text component will render as a span which may not be suitable for your use-case.

Examples#

Basic text#

Hello

Responsive text#

You can set an array of values to any style property supported by the Text component. By providing an array of styles you can declare how the text should appear for each breakpoint. You can provide as many styles as there are breakpoints supported by the theme. Each style you provide in the array will match a breakpoint in the theme object, based on the same order.

Hello

When to use Text#

There are many pre-styled text components in Paste. For example, Heading, Paragraph and InputLabel. You should use those components wherever possible. Only when your use case cannot be met by these components should you reach for the Text component.

The best use case for the Text component is when you are working with a design partner and are creating a net new experience not already covered by Paste. The Text component will be the easiest way to recreate your new experience using the Twilio design language.

Do

Explore what’s in Paste that will meet your needs first. For example, the Paragraph and Heading components

Don't

Don’t reach for the Text component as your first option

Do

Use the Text component to create entirely new experiences not covered by Paste

Don't

Don’t use the Text Component to recreate a slightly different version of a pre-existing Paste component

Do

Use the Text component for all styled text that doesn’t already exist in Paste

Don't

Don’t use base HTML elements for your text since there are no global styles

Do

Always set the “as” property to ensure you are making a suitable semantic choice

Don't

Don’t use the Text component without setting the “as” property


Usage Guide#

API#

Installation#

yarn add @twilio-paste/text

Usage#

import {Text} from '@twilio-paste/text';
<Text as=”p” fontSize="fontSize70" fontWeight="fontWeightMedium">
Foo
</Text>

Props#

All the regular HTML attributes (role, aria-*, type, and so on) including the following custom props:

PropTypeDescriptionDefault
as?keyof JSX.IntrinsicElementsA custom HTML tagdiv
display?ResponsiveValue<CSS.DisplayProperty>
fontFamily?ResponsiveValue<keyof ThemeShape[fonts]>
fontSize?ResponsiveValue<keyof ThemeShape[fontSizes]>
fontStyle?ResponsiveValue<CSS.FontStyleProperty>
fontWeight?ResponsiveValue<keyof ThemeShape[fontWeights]>
letterSpacing?ResponsiveValue<CSS.LetterSpacingProperty<TLengthStyledSystem>>
lineHeight?ResponsiveValue<keyof ThemeShape[lineHeights]>
margin?ResponsiveValue<keyof ThemeShape['space']>One of our spacing tokens
marginTop?ResponsiveValue<keyof ThemeShape['space']>One of our spacing tokens
marginRight?ResponsiveValue<keyof ThemeShape['space']>One of our spacing tokens
marginBottom?ResponsiveValue<keyof ThemeShape['space']>One of our spacing tokens
marginLeft?ResponsiveValue<keyof ThemeShape['space']>One of our spacing tokens
overflowResponsiveValue<CSS.OverflowProperty>;
overflowXResponsiveValue<CSS.OverflowXProperty>;
overflowYResponsiveValue<CSS.OverflowYProperty>;
padding?ResponsiveValue<keyof ThemeShape['space']>One of our spacing tokens
paddingBottom?ResponsiveValue<keyof ThemeShape['space']>One of our spacing tokens
paddingLeft?ResponsiveValue<keyof ThemeShape['space']>One of our spacing tokens
paddingRight?ResponsiveValue<keyof ThemeShape['space']>One of our spacing tokens
paddingTop?ResponsiveValue<keyof ThemeShape['space']>One of our spacing tokens
textAlign?ResponsiveValue<CSS.textAlignProperty>
textColor?ResponsiveValue<keyof ThemeShape['textColors']>
textDecoration?ResponsiveValue<CSS.TextDecorationProperty<CSS.TextDecorationLineProperty>>
textOverflow?ResponsiveValue<CSS.TextOverflowProperty>
whitespce?ResponsiveValue<CSS.WhiteSpaceProperty>

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

1.0.3 (2019-11-20)

Bug Fixes#

  • remap console semibold to medium font weight (#195) (c01f6b3)

1.0.2 (2019-11-18)

Bug Fixes#

  • design-tokens: update some blues, reds, and focus shadow (#185) (98d70cc)
  • website: remove vague anchor do dont (#177) (8530c56)

1.0.1 (2019-11-12)

Bug Fixes#

  • prettier updated, updating formatting (8644831)

1.0.0 (2019-11-11)

Features#

  • icons: delete old icons, add new streamline icons (#129) (571791d)
  • typography: heading component (#149) (4e033e6)
  • enable theme switching on the docsite (#124) (df797e5)

BREAKING CHANGES#

  • icons: removed all the inherited icons since we're moving to a new system

  • chore(icons): update icon list for storybook

  • fix(spinner): use new icon

  • fix(storybook): use new icon for story

  • fix(story): button icons should be 24px

  • fix: adjust icon size tokens

  • feat: add iconSizes as separate key in theme-tokens

  • feat(icons): icons package to use tokens and update icons

  • fix(spinner): update to use tokens and new icons

  • fix(button): use correct spinner size

  • fix(icons): major icons package fixes

  • huge overhaul to build process
  • now uses rollup
  • builds into cjs and esm directories
  • made the package publishable to npm
  • moved svg folder out of src, now src only holds react stuff
  • updated scripts to use new paths and cleaned up the code
  • programmatically generates rollup config from the icon-list command
  • chore: add new icons dist folders to gitignore

  • fix: spinner and button icon usage

  • feat(icons): add rollup icon list cache file

  • fix(core-bundle): sort packages for consistent builds

  • chore: use esm instead of es in rollup for correctness

  • chore: yarn.lock

  • fix(spinner): lint error

  • chore(icons): move rollup icon list

  • chore(spinner): use types package in story

  • fix(spinner): swap out destructured props for explicit props

0.6.0 (2019-10-31)

Features#

  • update types package to styled-system v5 format (#154) (117c41e)

0.5.0 (2019-10-29)

Features#

0.4.1 (2019-09-16)

Note: Version bump only for package @twilio-paste/text

0.4.0 (2019-08-15)

Bug Fixes#

Features#

  • ComponentHeader component, component overview fixes, more (#20) (875e124)
  • website: Add the tokens page (#19) (878d3c5)