diff --git a/.changeset/nine-glasses-end.md b/.changeset/nine-glasses-end.md new file mode 100644 index 0000000000..f4cf332c46 --- /dev/null +++ b/.changeset/nine-glasses-end.md @@ -0,0 +1,9 @@ +--- +'@twilio-paste/toast': major +'@twilio-paste/core': major +--- + +[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. diff --git a/packages/paste-core/components/toast/src/ErrorToast.tsx b/packages/paste-core/components/toast/src/ErrorToast.tsx index 4b5bc786f2..8ebf027f0d 100644 --- a/packages/paste-core/components/toast/src/ErrorToast.tsx +++ b/packages/paste-core/components/toast/src/ErrorToast.tsx @@ -10,6 +10,7 @@ const ErrorToast = React.forwardRef(({element = 'TOA {...safelySpreadBoxProps(props)} ref={ref} color="colorTextError" + width={['100%', 'size40', 'size40']} backgroundColor="colorBackgroundErrorWeakest" borderColor="colorBorderErrorWeak" borderRadius="borderRadius30" @@ -19,7 +20,6 @@ const ErrorToast = React.forwardRef(({element = 'TOA element={element} padding="space60" variant={variant} - width="size40" > {props.children} diff --git a/packages/paste-core/components/toast/src/NeutralToast.tsx b/packages/paste-core/components/toast/src/NeutralToast.tsx index 5e14ef210b..411de54521 100644 --- a/packages/paste-core/components/toast/src/NeutralToast.tsx +++ b/packages/paste-core/components/toast/src/NeutralToast.tsx @@ -10,6 +10,7 @@ const NeutralToast = React.forwardRef(({element = 'T {...safelySpreadBoxProps(props)} ref={ref} color="colorTextNeutral" + width={['100%', 'size40', 'size40']} backgroundColor="colorBackgroundNeutralWeakest" borderColor="colorBorderNeutralWeak" borderRadius="borderRadius30" @@ -19,7 +20,6 @@ const NeutralToast = React.forwardRef(({element = 'T element={element} padding="space60" variant={variant} - width="size40" > {props.children} diff --git a/packages/paste-core/components/toast/src/SuccessToast.tsx b/packages/paste-core/components/toast/src/SuccessToast.tsx index 503750733a..380abffb63 100644 --- a/packages/paste-core/components/toast/src/SuccessToast.tsx +++ b/packages/paste-core/components/toast/src/SuccessToast.tsx @@ -10,6 +10,7 @@ const SuccessToast = React.forwardRef(({element = 'T {...safelySpreadBoxProps(props)} ref={ref} color="colorTextSuccess" + width={['100%', 'size40', 'size40']} backgroundColor="colorBackgroundSuccessWeakest" borderColor="colorBorderSuccessWeak" borderRadius="borderRadius30" @@ -19,7 +20,6 @@ const SuccessToast = React.forwardRef(({element = 'T element={element} padding="space60" variant={variant} - width="size40" > {props.children} diff --git a/packages/paste-core/components/toast/src/ToastPortal.tsx b/packages/paste-core/components/toast/src/ToastPortal.tsx index b966204583..353c515e43 100644 --- a/packages/paste-core/components/toast/src/ToastPortal.tsx +++ b/packages/paste-core/components/toast/src/ToastPortal.tsx @@ -6,7 +6,7 @@ import {Box, safelySpreadBoxProps} from '@twilio-paste/box'; import {ToastPortalPropTypes} from './propTypes'; import type {ToastPortalProps} from './types'; -const ToastPortal = React.forwardRef(({children, __console_patch, ...props}, ref) => { +const ToastPortal = React.forwardRef(({children, left, ...props}, ref) => { return ( {/* import Paste Theme Based Styles due to portal positioning. */} @@ -16,9 +16,9 @@ const ToastPortal = React.forwardRef(({childre position="fixed" right="space40" top="space90" + left={left} zIndex="zIndex90" ref={ref} - style={__console_patch ? {zIndex: 1999} : undefined} > {children} diff --git a/packages/paste-core/components/toast/src/Toaster.tsx b/packages/paste-core/components/toast/src/Toaster.tsx index 000d8d8cdd..d6eaace7d3 100644 --- a/packages/paste-core/components/toast/src/Toaster.tsx +++ b/packages/paste-core/components/toast/src/Toaster.tsx @@ -132,8 +132,6 @@ const Toaster: React.FC> = ({toasts, pop, Toaster.displayName = 'Toaster'; -if (process.env.NODE_ENV === 'development') { - Toaster.propTypes = ToasterPropTypes; -} +Toaster.propTypes = ToasterPropTypes; export {Toaster}; diff --git a/packages/paste-core/components/toast/src/WarningToast.tsx b/packages/paste-core/components/toast/src/WarningToast.tsx index f49dd0e662..5c8731499b 100644 --- a/packages/paste-core/components/toast/src/WarningToast.tsx +++ b/packages/paste-core/components/toast/src/WarningToast.tsx @@ -10,6 +10,7 @@ const WarningToast = React.forwardRef(({element = 'T {...safelySpreadBoxProps(props)} ref={ref} color="colorTextWarningStrong" + width={['100%', 'size40', 'size40']} backgroundColor="colorBackgroundWarningWeakest" borderColor="colorBorderWarningWeak" borderRadius="borderRadius30" @@ -19,7 +20,6 @@ const WarningToast = React.forwardRef(({element = 'T element={element} padding="space60" variant={variant} - width="size40" > {props.children} diff --git a/packages/paste-core/components/toast/src/propTypes.ts b/packages/paste-core/components/toast/src/propTypes.ts index 1c1e3ad6e0..7a9dfa809b 100644 --- a/packages/paste-core/components/toast/src/propTypes.ts +++ b/packages/paste-core/components/toast/src/propTypes.ts @@ -16,14 +16,10 @@ export const ToastPropTypes = { export const ToastPortalPropTypes = { children: PropTypes.node.isRequired, - // FIXME: Overrides token zIndex to fix bug with Console product. - __console_patch: PropTypes.bool, }; export const ToastContainerPropTypes = { children: PropTypes.node.isRequired, - // FIXME: Overrides token zIndex to fix bug with Console product. - __console_patch: PropTypes.bool, }; export const ToasterPropTypes = { @@ -36,6 +32,4 @@ export const ToasterPropTypes = { }) ).isRequired as any, pop: PropTypes.func.isRequired, - // FIXME: Overrides token zIndex to fix bug with Console product. - __console_patch: PropTypes.bool, }; diff --git a/packages/paste-core/components/toast/src/types.ts b/packages/paste-core/components/toast/src/types.ts index 1723d20db6..50b3965624 100644 --- a/packages/paste-core/components/toast/src/types.ts +++ b/packages/paste-core/components/toast/src/types.ts @@ -1,5 +1,6 @@ import type {BoxProps} from '@twilio-paste/box'; import type {ValueOf} from '@twilio-paste/types'; +import type {Left} from '@twilio-paste/style-props'; import type {ToastVariantObject} from './constants'; @@ -44,15 +45,13 @@ export interface ToastProps extends React.HTMLAttributes, Pick { children: NonNullable; ref?: any; - // FIXME: Overrides token zIndex to fix bug with Console product. - __console_patch?: boolean; + left?: Left; } export interface ToastContainerProps extends React.HTMLAttributes { children: NonNullable; ref?: any; - // FIXME: Overrides token zIndex to fix bug with Console product. - __console_patch?: boolean; + left?: Left; } export interface ToasterToast extends Pick { @@ -85,6 +84,5 @@ export interface UseToasterReturnedProps { } export interface ToasterProps extends Pick { - // FIXME: Overrides token zIndex to fix bug with Console product. - __console_patch?: boolean; + left?: Left; } diff --git a/packages/paste-core/components/toast/stories/index.stories.tsx b/packages/paste-core/components/toast/stories/index.stories.tsx index b5ca419b3f..ae1f55d28e 100644 --- a/packages/paste-core/components/toast/stories/index.stories.tsx +++ b/packages/paste-core/components/toast/stories/index.stories.tsx @@ -24,7 +24,7 @@ export default { export const Neutral = (): React.ReactNode => { return ( - + I am a toast Toast title I am a toast @@ -53,7 +53,7 @@ export const Neutral = (): React.ReactNode => { export const Success = (): React.ReactNode => { return ( - + I am a toast Toast title I am a toast @@ -82,7 +82,7 @@ export const Success = (): React.ReactNode => { export const Error = (): React.ReactNode => { return ( - + I am a toast Toast title I am a toast @@ -111,7 +111,7 @@ export const Error = (): React.ReactNode => { export const Warning = (): React.ReactNode => { return ( - + I am a toast Toast title I am a toast @@ -140,7 +140,7 @@ export const Warning = (): React.ReactNode => { export const I18n = (): React.ReactNode => { return ( - + Soy una notificacion @@ -201,7 +201,7 @@ export const ToastContainerStory = (): React.ReactNode => { > Add toast - + {}}> I am a toast @@ -293,7 +293,7 @@ export const ToasterStory = (): React.ReactNode => { - + ); }; diff --git a/packages/paste-website/src/pages/components/toast/index.mdx b/packages/paste-website/src/pages/components/toast/index.mdx index 457756b032..cf2febe976 100644 --- a/packages/paste-website/src/pages/components/toast/index.mdx +++ b/packages/paste-website/src/pages/components/toast/index.mdx @@ -19,7 +19,6 @@ import {Label} from '@twilio-paste/label'; import {RadioGroup, Radio} from '@twilio-paste/radio-group'; import {Callout, CalloutHeading, CalloutText} from '@twilio-paste/callout'; import {DoDont, Do, Dont} from '../../../components/DoDont'; -import {Codeblock} from '../../../components/codeblock'; import {SidebarCategoryRoutes} from '../../../constants'; import {InlineCode} from '../../../components/Typography'; import {ToasterExample, i18nExample} from '../../../component-examples/ToastExamples'; @@ -82,6 +81,27 @@ Use a toast for one of these types of responses: In general, use Toasts for response to user action. To decide whether you should use Toasts or another type of messaging, jump to [Toasts vs. Alerts vs. Inline messaging](#toast-vs-alerts-vs-inline-messaging). +### Responsive Toast + +We've exposed the `left` prop on Toaster and Toast Container so that you can use your app's breakpoints to set the placement of your Toasts. + +```jsx +import {Toast, Toaster, ToastContainer} from '@twilio-paste/core/toast'; + +const ToastWithToaster = () => { + const toaster = useToaster(); + return ; +}; + +const ToastWithContainer = () => { + return ( + + I am toast + + ); +}; +``` + ### Accessibility If you make a [toast automatically time out](#showing-dismissing-and-timing-out-a-toast), consider users that have different reading speeds, vision levels, and literacy levels (more details in the research insight below). @@ -181,7 +201,7 @@ const MyComponent = () => { - + ) } @@ -232,7 +252,7 @@ If you pass it the returned state of the `useToaster` hook, state, pushing, popp ```jsx const toaster = useToaster(); -return ; +return ; ``` ### Neutral Toast @@ -405,7 +425,7 @@ import {Toast, Toaster} from '@twilio-paste/core/toast'; const Component = () => { const toaster = useToaster(); - return ; + return ; }; ``` @@ -415,6 +435,7 @@ If you choose to handle state entirely yourself, you can use `` on it ``` ` on it #### Toaster Props -| Prop | Type | Description | Default | -| ------------------ | ---------------- | ------------------------------------------------------- | ------- | -| toasts | `ToasterToast[]` | Array of Toasts to render inside the toaster. See below | null | -| pop? | `(id) => void` | Method called when a toast is dismissed | null | -| \_\_console_patch? | `boolean` | A temporary z-index fix for the Console product | null | +| Prop | Type | Description | Default | +| ------ | ---------------- | ------------------------------------------------------- | ------- | +| toasts | `ToasterToast[]` | Array of Toasts to render inside the toaster. See below | null | +| pop? | `(id) => void` | Method called when a toast is dismissed | null | ##### ToasterToast @@ -478,10 +498,10 @@ If you choose to handle state entirely yourself, you can use `` on it #### ToastContainer Props -| Prop | Type | Description | Default | -| ------------------ | ----------- | ----------------------------------------------- | ------- | -| children | `ReactNode` | | null | -| \_\_console_patch? | `boolean` | A temporary z-index fix for the Console product | null | +| Prop | Type | Description | Default | +| -------- | ----------- | -------------------------------------------------------------------------------- | ------- | +| children | `ReactNode` | | null | +| left? | `Left[]` | Sets the `left` value of the ToastContainer to add breakpoints for small screens | null | diff --git a/packages/paste-website/src/pages/core/upgrade-guide.mdx b/packages/paste-website/src/pages/core/upgrade-guide.mdx index 1241f3109a..d03c75e886 100644 --- a/packages/paste-website/src/pages/core/upgrade-guide.mdx +++ b/packages/paste-website/src/pages/core/upgrade-guide.mdx @@ -37,6 +37,12 @@ export const getStaticProps = async () => { +### Core 19.0.0 + +- Removes the `__console_patch` prop from the Toast package. This was a temporary z-index fix for Twilio Console that is no longer necessary. + +**ACTION NEEDED**: No action should be necessary. If you are still using the `__console_patch` prop with Toast and this change affects your codebase, please [reach out to us with a Github Discussion](https://github.com/twilio-labs/paste/discussions/new/choose). + ### Core 18.0.0 - Adds [support for React 18](https://github.com/twilio-labs/paste/pull/2965). This should "just work" and remains backwards compatible. [Let us know if you have any issues](https://github.com/twilio-labs/paste/discussions).