Skip to content
Paste
UX Platform
Change the site theme
information:

Upgrade Guide

Summary of Breaking Changes to Core, with actions that should be taken before upgrading


Core 10.0.0#

  • [Truncate] title prop is required for the Truncate component. More details: fa2ffc5clink takes you to an external page #1603link takes you to an external page

    ACTION NEEDED: Add a title prop to all uses of the Truncate component. This prop should be a string that matches the contents of the component.

    // prior to action taken:
    <Truncate>Some very long text to truncate</Truncate>
    // AFTER action taken:
    <Truncate title="Some very long text to truncate">Some very long text to truncate</Truncate>

Core 9.0.0#

  • [Button] Button components used as links (as="a" and href="") now automatically add an arrow icon if children is a string. This is a design breaking change that you should be aware of when upgrading. More details: 1bcb8b30link takes you to an external page #1307link takes you to an external page

    ACTION NEEDED: Inspect all instances of Buttons as links, ensuring the design change works as intended for your layout.

    Twilio
    // prior to upgrade:
    <Button as="a" href="https://twilio.com">Twilio</Button>
    // AFTER upgrade:
    <Button as="a" href="https://twilio.com">Twilio</Button>
  • [Button] Additional validation added to throw an error if the disabled or loading props are set to true for a Button as link. This is a functionality breaking change to existing disabled link buttons. More details: 1bcb8b30link takes you to an external page #1307link takes you to an external page

    ACTION NEEDED: Ensure there are no instances of Buttons as links that use disabled or loading props as true.

    // prior to action taken:
    <Button as="a" href="https://twilio.com" disabled>Twilio</Button>
    // AFTER action taken:
    <Button as="a" href="https://twilio.com">Twilio</Button>

Core 4.3.2#

  • [Disclosure] style prop is now being blocked by safelySpreadBoxProps, so any additional styles will no longer be rendered. More details: b8265071link takes you to an external page

    ACTION NEEDED: Ensure there are no instances of Disclosure that use the style prop.

//prior to action taken:
<Disclosure style={{background-color: 'red'}}>
<DisclosureHeading as="h2" variant="heading20">
Disclosure Heading
</DisclosureHeading>
<DisclosureContent>
Content
</DisclosureContent>
</Disclosure>

Core 4.2.3#

ACTION NEEDED: No action is needed, but you can now pass a ref down to a component easily, as shown in the following example.

<Alert ref={ref} />

Core 4.2.0#

Core 4.0.0#

Action Needed: Replace any Absolute components with a Box component with the position prop set to absolute.

// prior to action taken:
<Absolute>Content goes here</Absolute>
// AFTER action taken:
<Box position="absolute">Content goes here</Box>

Core 3.0.0#

Action Required: Update any import statements from '@twilio-paste/form' to use '@twilio-paste/core' instead.

// prior to action taken:
import {Input} from '@twilio-paste/form'
// AFTER action taken:
import {Input} from '@twilio-paste/core/input'

Black lives matter.