fix(toast): remove console patch prop and add left prop (#3081)

twilio-labs · Mar 14, 2023 · e45d34c · e45d34c
1 parent 3e5426d
commit e45d34c
Show file tree

Hide file tree

Showing 12 changed files with 66 additions and 41 deletions.
diff --git a/.changeset/nine-glasses-end.md 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
@@ -10,6 +10,7 @@ const ErrorToast = React.forwardRef<HTMLDivElement, ToastProps>(({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<HTMLDivElement, ToastProps>(({element = 'TOA
       element={element}
       padding="space60"
       variant={variant}
-      width="size40"
     >
       {props.children}
     </Box>

diff --git 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<HTMLDivElement, ToastProps>(({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<HTMLDivElement, ToastProps>(({element = 'T
       element={element}
       padding="space60"
       variant={variant}
-      width="size40"
     >
       {props.children}
     </Box>

diff --git 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<HTMLDivElement, ToastProps>(({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<HTMLDivElement, ToastProps>(({element = 'T
       element={element}
       padding="space60"
       variant={variant}
-      width="size40"
     >
       {props.children}
     </Box>

diff --git 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<HTMLDivElement, ToastPortalProps>(({children, __console_patch, ...props}, ref) => {
+const ToastPortal = React.forwardRef<HTMLDivElement, ToastPortalProps>(({children, left, ...props}, ref) => {
   return (
     <Portal>
       {/* import Paste Theme Based Styles due to portal positioning. */}
@@ -16,9 +16,9 @@ const ToastPortal = React.forwardRef<HTMLDivElement, ToastPortalProps>(({childre
           position="fixed"
           right="space40"
           top="space90"
+          left={left}
           zIndex="zIndex90"
           ref={ref}
-          style={__console_patch ? {zIndex: 1999} : undefined}
         >
           {children}
         </Box>

diff --git 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<React.PropsWithChildren<ToasterProps>> = ({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
@@ -10,6 +10,7 @@ const WarningToast = React.forwardRef<HTMLDivElement, ToastProps>(({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<HTMLDivElement, ToastProps>(({element = 'T
       element={element}
       padding="space60"
       variant={variant}
-      width="size40"
     >
       {props.children}
     </Box>

diff --git 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
@@ -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<HTMLDivElement>, Pick<B
 export interface ToastPortalProps extends React.HTMLAttributes<HTMLDivElement> {
   children: NonNullable<React.ReactNode>;
   ref?: any;
-  // FIXME: Overrides token zIndex to fix bug with Console product.
-  __console_patch?: boolean;
+  left?: Left;
 }
 
 export interface ToastContainerProps extends React.HTMLAttributes<HTMLDivElement> {
   children: NonNullable<React.ReactNode>;
   ref?: any;
-  // FIXME: Overrides token zIndex to fix bug with Console product.
-  __console_patch?: boolean;
+  left?: Left;
 }
 
 export interface ToasterToast extends Pick<ToastProps, 'variant' | 'setFocus' | 'onDismiss'> {
@@ -85,6 +84,5 @@ export interface UseToasterReturnedProps {
 }
 
 export interface ToasterProps extends Pick<UseToasterReturnedProps, 'toasts' | 'pop'> {
-  // 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
@@ -24,7 +24,7 @@ export default {
 export const Neutral = (): React.ReactNode => {
   return (
     <Box minHeight="size90">
-      <ToastContainer>
+      <ToastContainer left={['space40', 'unset', 'unset']}>
         <Toast variant="neutral">I am a toast</Toast>
         <Toast variant="neutral" onDismiss={action('dismiss')}>
           <strong>Toast title</strong> I am a toast
@@ -53,7 +53,7 @@ export const Neutral = (): React.ReactNode => {
 export const Success = (): React.ReactNode => {
   return (
     <Box minHeight="size90">
-      <ToastContainer>
+      <ToastContainer left={['space40', 'unset', 'unset']}>
         <Toast variant="success">I am a toast</Toast>
         <Toast variant="success" onDismiss={action('dismiss')}>
           <strong>Toast title</strong> I am a toast
@@ -82,7 +82,7 @@ export const Success = (): React.ReactNode => {
 export const Error = (): React.ReactNode => {
   return (
     <Box minHeight="size90">
-      <ToastContainer>
+      <ToastContainer left={['space40', 'unset', 'unset']}>
         <Toast variant="error">I am a toast</Toast>
         <Toast variant="error" onDismiss={action('dismiss')}>
           <strong>Toast title</strong> I am a toast
@@ -111,7 +111,7 @@ export const Error = (): React.ReactNode => {
 export const Warning = (): React.ReactNode => {
   return (
     <Box minHeight="size90">
-      <ToastContainer>
+      <ToastContainer left={['space40', 'unset', 'unset']}>
         <Toast variant="warning">I am a toast</Toast>
         <Toast variant="warning" onDismiss={action('dismiss')}>
           <strong>Toast title</strong> I am a toast
@@ -140,7 +140,7 @@ export const Warning = (): React.ReactNode => {
 export const I18n = (): React.ReactNode => {
   return (
     <Box minHeight="size90">
-      <ToastContainer>
+      <ToastContainer left={['space40', 'unset', 'unset']}>
         <Toast variant="neutral" i18nDismissLabel="Cerrar notificacion" i18nNeutralLabel="(informacion)">
           Soy una notificacion
         </Toast>
@@ -201,7 +201,7 @@ export const ToastContainerStory = (): React.ReactNode => {
       >
         Add toast
       </Button>
-      <ToastContainer>
+      <ToastContainer left={['space40', 'unset', 'unset']}>
         <Toast variant="success" onDismiss={() => {}}>
           I am a toast
         </Toast>
@@ -293,7 +293,7 @@ export const ToasterStory = (): React.ReactNode => {
           </Button>
         </Stack>
       </form>
-      <Toaster {...toaster} />
+      <Toaster left={['space40', 'unset', 'unset']} {...toaster} />
     </div>
   );
 };

diff --git 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 <Toaster left={['space40', 'unset', 'unset']} {...toaster} />;
+};
+
+const ToastWithContainer = () => {
+  return (
+    <ToastContainer left={['space40', 'unset', 'unset']}>
+      <Toast>I am toast</Toast>
+    </ToastContainer>
+  );
+};
+```
+
 ### 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 = () => {
       <Button variant="primary" onClick={handleClick}>
         Add a toast
       </Button>
-      <Toaster {...toaster} />
+      <Toaster left={['space40', 'unset', 'unset']} {...toaster} />
     </>
   )
 }
@@ -232,7 +252,7 @@ If you pass it the returned state of the `useToaster` hook, state, pushing, popp
 ```jsx
 const toaster = useToaster();
 
-return <Toaster {...toaster} />;
+return <Toaster left={['space40', 'unset', 'unset']} {...toaster} />;
 ```
 
 ### Neutral Toast
@@ -405,7 +425,7 @@ import {Toast, Toaster} from '@twilio-paste/core/toast';
 
 const Component = () => {
   const toaster = useToaster();
-  return <Toaster {...toaster} />;
+  return <Toaster left={['space40', 'unset', 'unset']} {...toaster} />;
 };
 ```
 
@@ -415,6 +435,7 @@ If you choose to handle state entirely yourself, you can use `<Toaster />` on it
 
 ```
 <Toaster
+  left={['space40', 'unset', 'unset']}
   toasts={[{
     id: '',
     message: '',
@@ -461,11 +482,10 @@ If you choose to handle state entirely yourself, you can use `<Toaster />` 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 `<Toaster />` 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    |
 
 <ChangelogRevealer>
   <Changelog />

diff --git 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 () => {
 
 <content>
 
+### 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).