Toast

A Toast is an animated, temporary banner that communicates an immediate and direct response to a user action.

Version 12.1.1

Github

Storybook

12.1.1

Patch Changes

7d193d6bd #3558 Thanks @SiTaggart! - [Toast] Improve TsDoc type annotations

12.1.0

Minor Changes

b8d79200b #3442 Thanks @TheSisb! - Removed all run-time prop-type checkingfrom Paste components. Paste now ships with only TypeScript types.
ACTION NEEDED: None. This should be 100% backwards compatible.

12.0.0

Major Changes

733709127 #3395 Thanks @SiTaggart! - Modified the compile target of our JavaScript bundles from node to browser to minimize the risk of clashing with RequireJS. This is marked as a major out of an abundance of caution. You shouldn't need to do anything but we wanted you to be aware of the change on the off chance it has unintended consequences

Patch Changes

Updated dependencies [733709127]:
- @twilio-paste/uid-library@2.0.0
- @twilio-paste/color-contrast-utils@5.0.0
- @twilio-paste/anchor@12.0.0
- @twilio-paste/button@14.0.0
- @twilio-paste/screen-reader-only@13.0.0
- @twilio-paste/spinner@14.0.0
- @twilio-paste/media-object@10.0.0
- @twilio-paste/stack@8.0.0
- @twilio-paste/box@10.0.0
- @twilio-paste/customization@8.0.0
- @twilio-paste/design-tokens@10.0.0
- @twilio-paste/icons@12.0.0
- @twilio-paste/animation-library@2.0.0
- @twilio-paste/reakit-library@2.0.0
- @twilio-paste/styling-library@3.0.0
- @twilio-paste/style-props@9.0.0
- @twilio-paste/theme@11.0.0
- @twilio-paste/types@6.0.0

11.0.1

Patch Changes

4d1f7c65e #3360 Thanks @SiTaggart! - Improved types where Paste extends the base HTML element that a component is based on, so that the existing blocked styling properties are not exposed as valid properties for the component via Typescript. This leads to less confusion around what is supported by a Paste component.
Existing blocked component properties include:
- className
- style
- color

11.0.0

Major Changes

e45d34c14 #3081 Thanks @nkrantz! - [Toast]
- Remove __console_patch prop from the Toast package. This was a temporary z-index fix for console that is no longer necessary.
- Add left prop to the Toast package so that consumers can place their Toasts according to their app's breakpoints. This feature enables mobile responsiveness for Toast.

3ab2bb6f4 #3114 Thanks @SiTaggart! - ### Breaking change
We have moved @types/react and @types/react-dom to peer dependencies of the library. This should allow for greater control and backwards compatibility with older versions of React as Paste is no longer bundling the type libraries.
Your application likely has both of these as dependencies anyway, but it is now up to you to manage that version number.
Action needed
Ensure @types/react and @types/react-dom are installed as dependencies of your application.

Patch Changes

3ab2bb6f4 #3114 Thanks @SiTaggart! - [Toast] improved backwards compat with React 17 types
Updated dependencies [6730aac19, 1d75f223e, 3ab2bb6f4, 50cde4668, bce889344, 3ab2bb6f4, 3ab2bb6f4, 3ab2bb6f4]:
- @twilio-paste/button@13.0.0
- @twilio-paste/icons@11.0.0
- @twilio-paste/anchor@11.0.0
- @twilio-paste/theme@10.0.0
- @twilio-paste/box@9.0.0
- @twilio-paste/screen-reader-only@12.0.0
- @twilio-paste/spinner@13.0.0
- @twilio-paste/media-object@9.0.0
- @twilio-paste/stack@7.0.0
- @twilio-paste/customization@7.0.0
- @twilio-paste/style-props@8.0.0
- @twilio-paste/types@5.0.0

10.0.1

Patch Changes

e7f4fcdaf #3062 Thanks @nkrantz! - [Toast] Update styles to align with new Paste Twilio theme.
In order to see all of the new style updates, you may have to remove any <Text> component children from your Toasts, passing in the string as a direct child of Toast.

10.0.0

Major Changes

3c89fd83d #2965 Thanks @Niznikr! - Add support for React 18

d97098846 #3020 Thanks @SiTaggart! - This major version included listing all the missing peer dependencies for each Paste package.
If you are using a package from Paste in isolation from Core, when upgrading to this latest version, be sure to correctly install all the missing peer dependencies.

Patch Changes

Updated dependencies [154b02c06, dbd9bf992, 3c89fd83d, d97098846, 0acdf3486, ef094db4a, 0acdf3486]:
- @twilio-paste/anchor@10.0.0
- @twilio-paste/design-tokens@9.0.0
- @twilio-paste/button@12.0.0
- @twilio-paste/screen-reader-only@11.0.0
- @twilio-paste/spinner@12.0.0
- @twilio-paste/media-object@8.0.0
- @twilio-paste/stack@6.0.0
- @twilio-paste/box@8.0.0
- @twilio-paste/customization@6.0.0
- @twilio-paste/icons@10.0.0
- @twilio-paste/animation-library@1.0.0
- @twilio-paste/reakit-library@1.0.0
- @twilio-paste/styling-library@2.0.0
- @twilio-paste/uid-library@1.0.0
- @twilio-paste/style-props@7.0.0
- @twilio-paste/theme@9.0.0
- @twilio-paste/types@4.0.0
- @twilio-paste/color-contrast-utils@4.0.0

9.0.2

Patch Changes

804fb9316 #2895 Thanks @Niznikr! - Update packages to be ESM-compatible

9.0.1

Patch Changes

a4c9e70b0 #2763 Thanks @shleewhite! - Update ESLint rules, which changed some formatting.

9.0.0

Patch Changes

Updated dependencies [12c4ba22a, 364083627, 364083627, 364083627, ee2e535e9, 364083627]:
- @twilio-paste/box@7.0.0
- @twilio-paste/style-props@6.0.0
- @twilio-paste/design-tokens@8.0.0
- @twilio-paste/theme@8.0.0
- @twilio-paste/button@11.0.0
- @twilio-paste/spinner@11.0.0
- @twilio-paste/media-object@7.0.0
- @twilio-paste/stack@5.0.0
- @twilio-paste/icons@9.0.0

8.0.1

Patch Changes

ae9dd50f #2466 Thanks @TheSisb! - [All packages] Update our ESBuild version and remove minification of identifiers in our production builds.

8.0.0

Patch Changes

Updated dependencies [09762f0f, 09762f0f1, 09762f0f1]:
- @twilio-paste/box@6.0.0
- @twilio-paste/styling-library@1.0.0
- @twilio-paste/theme@7.0.0
- @twilio-paste/button@10.0.0
- @twilio-paste/spinner@10.0.0
- @twilio-paste/media-object@6.0.0
- @twilio-paste/stack@4.0.0
- @twilio-paste/icons@8.0.0
- @twilio-paste/style-props@5.0.0

7.0.0

Patch Changes

Updated dependencies [10178f39d]:
- @twilio-paste/icons@7.0.0
- @twilio-paste/button@9.0.0
- @twilio-paste/spinner@9.0.0

6.0.3

Patch Changes

b6ccaa266 #2347 Thanks @gloriliale! - [Alert, Modal, Popover, Toast] Adjust close icon's hover state color, which was previously being overwritten.

6.0.2

Patch Changes

690a2d2a5 #2263 Thanks @shleewhite! - [Toast] use title for i18n status labels

73c596919 #2269 Thanks @SiTaggart! - Fixed a regression with the compilation script that caused incompatible ESM module importing of JSON files.

6.0.1

Patch Changes

c867e3f48 #2237 Thanks @SiTaggart! - Updated a build dependency (esbuild) which changes the output of our builds slightly, without materially changing anything about the code.

563a76ba3 #2249 Thanks @nkrantz! - [toast]
- Update neutral Toast border left color to colorBorderNeutralWeak

b4abdd9a4 #2234 Thanks @gloriliale! - [Toast] add i18n props for variants to support i18n

6.0.0

Patch Changes

Updated dependencies [0a52eeee, 39ab32c2, 0a52eeee, 04de0d1d, 04de0d1d, 04de0d1d]:
- @twilio-paste/design-tokens@7.0.0
- @twilio-paste/icons@6.0.0
- @twilio-paste/theme@6.0.0
- @twilio-paste/style-props@4.0.0
- @twilio-paste/button@8.0.0
- @twilio-paste/spinner@8.0.0
- @twilio-paste/media-object@5.0.0
- @twilio-paste/stack@3.0.0
- @twilio-paste/box@5.0.0

5.2.2

Patch Changes

5d4515ea #2083 Thanks @nkrantz! - [Alert, Modal, Popover, Toast] Update close button to use secondary_icon button variant

5.2.1

Patch Changes

b7675915 #1985 Thanks @TheSisb! - For debugging purposes we now ship a filename.debug.js unminified version of each component or library in Paste.

ed5c0a49c #1965 Thanks @shleewhite! - Upgrade Paste to use React 17 by default, but maintain React 16 support for consumers.

5.2.0

Minor Changes

d4eaf8b1 #1919 Thanks @nkrantz! - [Toast] Enable Component to respect element customizations set on the customization provider. Component now enables setting an element name on the underlying HTML element and checks the emotion theme object to determine whether it should merge in custom styles to the ones set by the component author.

5.1.1

Patch Changes

8006c59b #1835 Thanks @nkrantz! - [Toast] Icons in Toast now use text icon color tokens.

5.1.0

Minor Changes

63a39e0c #1818 Thanks @TheSisb! - [Toast] The useToaster push method now allows passing in an onDismiss callback function.

5.0.2

Patch Changes

5e770d20 #1558 Thanks @TheSisb! - Fixes a bug where Toasts may not display using the provided Toaster for users with the system flag "prefers-reduced-motion"

5.0.1

Patch Changes

25a1f632 #1404 Thanks @SiTaggart! - update internal usage of design tokens to reflect new strong / weak nomenclature

5.0.0

Patch Changes

0eded1fd #1319 Thanks @SiTaggart! - Change internal dependencies to have minor range matching on version numbers
Updated dependencies [0eded1fd, 1bcb8b30]:
- @twilio-paste/button@7.0.0

4.0.2

Patch Changes

Updated dependencies [514bd5aa, 514bd5aa]:
- @twilio-paste/theme@5.0.1
- @twilio-paste/icons@5.1.1
- @twilio-paste/button@6.0.1
- @twilio-paste/spinner@7.0.1
- @twilio-paste/media-object@4.0.2
- @twilio-paste/stack@2.0.2
- @twilio-paste/box@4.0.2
- @twilio-paste/style-props@3.0.1

4.0.1

Patch Changes

22410172 #1287 Thanks @TheSisb! - Added a __console_patch boolean prop to fix issues with z-index in Twilio Console applications. This is a temporary fix.

4.0.0

Patch Changes

Updated dependencies [8b5a8592]:
- @twilio-paste/icons@5.1.0
- @twilio-paste/button@6.0.0
- @twilio-paste/spinner@7.0.0

3.0.1

Patch Changes

Updated dependencies [509eba7a]:
- @twilio-paste/box@4.0.1
- @twilio-paste/button@5.0.1
- @twilio-paste/spinner@6.0.1
- @twilio-paste/media-object@4.0.1
- @twilio-paste/stack@2.0.1
- @twilio-paste/icons@5.0.1

3.0.0

Patch Changes

Updated dependencies [4c9ed5ca, 26c828d8]:
- @twilio-paste/design-tokens@6.6.0
- @twilio-paste/theme@5.0.0
- @twilio-paste/button@5.0.0
- @twilio-paste/spinner@6.0.0
- @twilio-paste/media-object@4.0.0
- @twilio-paste/stack@2.0.0
- @twilio-paste/box@4.0.0
- @twilio-paste/icons@5.0.0
- @twilio-paste/style-props@3.0.0

2.0.3

Patch Changes

ac38757f #1228 Thanks @SiTaggart! - Bump status of the component to production
Updated dependencies [ac38757f]:
- @twilio-paste/stack@1.0.2
- @twilio-paste/button@4.0.3

2.0.2

Patch Changes

Updated dependencies [944c3407, af779398]:
- @twilio-paste/design-tokens@6.5.2
- @twilio-paste/icons@4.0.2
- @twilio-paste/button@4.0.2
- @twilio-paste/spinner@5.0.2
- @twilio-paste/media-object@3.0.1
- @twilio-paste/stack@1.0.1
- @twilio-paste/box@3.0.1
- @twilio-paste/style-props@2.0.1
- @twilio-paste/theme@4.3.1

2.0.1

Patch Changes

8e45efee #1181 Thanks @SiTaggart! - Fixed a bug when setting an auto dismissing toast via the useToaster hook, that was supplied a custom id.
Updated dependencies [7340a6a5]:
- @twilio-paste/icons@4.0.1
- @twilio-paste/button@4.0.1
- @twilio-paste/spinner@5.0.1

2.0.0

Patch Changes

Updated dependencies [f1675586]:
- @twilio-paste/theme@4.3.0
- @twilio-paste/button@4.0.0
- @twilio-paste/spinner@5.0.0
- @twilio-paste/media-object@3.0.0
- @twilio-paste/stack@1.0.0
- @twilio-paste/box@3.0.0
- @twilio-paste/icons@4.0.0
- @twilio-paste/style-props@2.0.0

1.0.1

Patch Changes

a12acb61 #1158 Thanks @richbachman! - Pinned all twilio-paste package versions in order to keep them in sync with core when they are updated by changesets.
Updated dependencies [a12acb61, a12acb61, a12acb61, a12acb61, a12acb61, a12acb61, a12acb61, a12acb61]:
- @twilio-paste/stack@0.3.2
- @twilio-paste/theme@4.2.2
- @twilio-paste/button@3.0.1
- @twilio-paste/media-object@2.1.2
- @twilio-paste/style-props@1.9.2
- @twilio-paste/box@2.13.2
- @twilio-paste/icons@3.13.1
- @twilio-paste/spinner@4.0.1

1.0.0

Patch Changes

Updated dependencies [4114dac2]:
- @twilio-paste/icons@3.13.0
- @twilio-paste/button@3.0.0
- @twilio-paste/spinner@4.0.0

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