feat: Minimizable Dialog updates (#3053)

* feat: update minimizable dialog styles * chore: fix padding in docs examples * chore: fix story * chore: implement feedback --------- Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
twilio-labs · Mar 1, 2023 · b87a7c7 · b87a7c7
1 parent a790975
commit b87a7c7
Show file tree

Hide file tree

Showing 9 changed files with 105 additions and 52 deletions.
diff --git a/.changeset/lemon-rice-wave.md b/.changeset/lemon-rice-wave.md
@@ -0,0 +1,6 @@
+---
+'@twilio-paste/minimizable-dialog': minor
+'@twilio-paste/core': minor
+---
+
+[Minimizable Dialog] Add toggleMinimized function to the object useMinimizableDialogState returns. Update styles to align with new Paste Twilio theme.
diff --git a/packages/paste-core/components/minimizable-dialog/src/MinimizableDialog.tsx b/packages/paste-core/components/minimizable-dialog/src/MinimizableDialog.tsx
@@ -7,21 +7,20 @@ import {NonModalDialogPrimitive} from '@twilio-paste/non-modal-dialog-primitive'
 
 import {MinimizableDialogContext} from './MinimizableDialogContext';
 import type {MinimizableDialogContextProps} from './MinimizableDialogContext';
+import {StyledMinimizableDialog} from './StyledMinimizableDialog';
 
 interface StyledMinimizableDialogProps extends BoxProps, MinimizableDialogContextProps {
   minimized?: boolean;
 }
 
-const StyledMinimizableDialog = React.forwardRef<HTMLDivElement, StyledMinimizableDialogProps>(
+const StyledMinimizableDialogContainer = React.forwardRef<HTMLDivElement, StyledMinimizableDialogProps>(
   ({minimized, style, ...props}, ref) => (
     <Box
       {...safelySpreadBoxProps(props)}
       ref={ref}
-      boxShadow="shadow"
-      width="size40"
       zIndex="zIndex80"
-      borderRadius="borderRadius20"
       transform="none!important"
+      position="absolute"
       // Note: not able to use themeGet here, so this needs to change if space70 changes
       inset={`auto 1.5rem ${minimized === true ? '0' : '1.5'}rem auto!important`}
       _focus={{outline: 'none'}}
@@ -30,7 +29,7 @@ const StyledMinimizableDialog = React.forwardRef<HTMLDivElement, StyledMinimizab
   )
 );
 
-StyledMinimizableDialog.displayName = 'StyledMinimizableDialog';
+StyledMinimizableDialogContainer.displayName = 'StyledMinimizableDialog';
 
 export interface MinimizableDialogProps extends React.HTMLAttributes<HTMLDivElement> {
   children: React.ReactNode;
@@ -46,16 +45,14 @@ export const MinimizableDialog = React.forwardRef<HTMLDivElement, MinimizableDia
       <NonModalDialogPrimitive
         {...(dialog as any)}
         {...props}
-        as={StyledMinimizableDialog}
+        as={StyledMinimizableDialogContainer}
         ref={ref}
         preventBodyScroll={false}
         hideOnClickOutside={false}
       >
         {/* import Paste Theme Based Styles due to portal positioning. */}
         <StyledBase>
-          <Box element={element} display="flex" flexDirection="column" backgroundColor="colorBackgroundBody">
-            {children}
-          </Box>
+          <StyledMinimizableDialog element={element}>{children}</StyledMinimizableDialog>
         </StyledBase>
       </NonModalDialogPrimitive>
     );

diff --git a/packages/paste-core/components/minimizable-dialog/src/MinimizableDialogContainer.tsx b/packages/paste-core/components/minimizable-dialog/src/MinimizableDialogContainer.tsx
@@ -22,10 +22,11 @@ export const useMinimizableDialogState = ({
   const [minimized, setMinimized] = React.useState(minimizedArg);
   const minimize = (): void => setMinimized(true);
   const expand = (): void => setMinimized(false);
+  const toggleMinimized = (): void => setMinimized((prev) => !prev);
 
   const dialog = useNonModalDialogPrimitiveState({...initialState});
 
-  return {...dialog, minimized, minimize, expand};
+  return {...dialog, minimized, minimize, expand, toggleMinimized};
 };
 
 export interface MinimizableDialogContainerProps extends NonModalDialogPrimitivePopoverInitialState {

diff --git a/packages/paste-core/components/minimizable-dialog/src/MinimizableDialogContent.tsx b/packages/paste-core/components/minimizable-dialog/src/MinimizableDialogContent.tsx
@@ -15,14 +15,7 @@ const MinimizableDialogContent = React.forwardRef<HTMLDivElement, MinimizableDia
     const {minimized} = React.useContext(MinimizableDialogContext);
 
     return (
-      <Box
-        {...safelySpreadBoxProps(props)}
-        element={element}
-        ref={ref}
-        display={minimized ? 'none' : 'block'}
-        borderBottomLeftRadius="borderRadius20"
-        borderBottomRightRadius="borderRadius20"
-      >
+      <Box {...safelySpreadBoxProps(props)} element={element} ref={ref} display={minimized ? 'none' : 'block'}>
         {children}
       </Box>
     );

diff --git a/packages/paste-core/components/minimizable-dialog/src/MinimizableDialogContext.tsx b/packages/paste-core/components/minimizable-dialog/src/MinimizableDialogContext.tsx
@@ -5,6 +5,7 @@ export type MinimizableDialogContextProps = Partial<NonModalDialogPrimitiveState
   minimized?: boolean;
   minimize?: () => void;
   expand?: () => void;
+  toggleMinimized?: () => void;
 };
 
 const MinimizableDialogContext = React.createContext<MinimizableDialogContextProps>({});

diff --git a/packages/paste-core/components/minimizable-dialog/src/MinimizableDialogHeader.tsx b/packages/paste-core/components/minimizable-dialog/src/MinimizableDialogHeader.tsx
@@ -39,13 +39,16 @@ const MinimizableDialogHeader = React.forwardRef<HTMLDivElement, MinimizableDial
         display="grid"
         gridTemplateColumns="1fr auto auto"
         columnGap="space30"
-        backgroundColor="colorBackgroundInverse"
+        backgroundColor="colorBackground"
         paddingX="space70"
         paddingY="space40"
-        color="colorTextInverse"
+        color="colorTextWeak"
         overflow="hidden"
-        borderTopLeftRadius="borderRadius20"
+        borderBottomWidth="borderWidth10"
+        borderBottomStyle="solid"
+        borderBottomColor="colorBorderWeaker"
         borderTopRightRadius="borderRadius20"
+        borderTopLeftRadius="borderRadius20"
         element={element}
       >
         <Box

diff --git a/packages/paste-core/components/minimizable-dialog/src/StyledMinimizableDialog.tsx b/packages/paste-core/components/minimizable-dialog/src/StyledMinimizableDialog.tsx
@@ -0,0 +1,22 @@
+import * as React from 'react';
+import {Box} from '@twilio-paste/box';
+import type {BoxProps} from '@twilio-paste/box';
+
+export const StyledMinimizableDialog: React.FC<React.PropsWithChildren<Pick<BoxProps, 'element'>>> = ({
+  element,
+  children,
+}) => (
+  <Box
+    element={element}
+    borderRadius="borderRadius20"
+    display="flex"
+    flexDirection="column"
+    backgroundColor="colorBackgroundBody"
+    width="size40"
+    boxShadow="shadow"
+  >
+    {children}
+  </Box>
+);
+
+StyledMinimizableDialog.displayName = 'StyledMinimizableDialog';
diff --git a/packages/paste-core/components/minimizable-dialog/stories/index.stories.tsx b/packages/paste-core/components/minimizable-dialog/stories/index.stories.tsx
@@ -18,6 +18,8 @@ import {
   MinimizableDialogContent,
   useMinimizableDialogState,
 } from '../src';
+import {MinimizableDialogContext} from '../src/MinimizableDialogContext';
+import {StyledMinimizableDialog} from '../src/StyledMinimizableDialog';
 
 // eslint-disable-next-line import/no-default-export
 export default {
@@ -30,12 +32,11 @@ const DialogExample: React.FC<React.PropsWithChildren<{minimized?: boolean}>> =
   const emailID = useUID();
   const questionID = useUID();
 
+  const dialog = useMinimizableDialogState({minimized, visible: true});
+
   return (
-    <MinimizableDialogContainer visible minimized={minimized}>
-      <MinimizableDialogButton variant="primary" size="circle">
-        <ChatIcon decorative={false} title="Chat" />
-      </MinimizableDialogButton>
-      <MinimizableDialog aria-label="Live chat">
+    <MinimizableDialogContext.Provider value={{...dialog}}>
+      <StyledMinimizableDialog>
         <MinimizableDialogHeader>Live chat</MinimizableDialogHeader>
         <MinimizableDialogContent>
           <Box padding="space70">
@@ -62,14 +63,18 @@ const DialogExample: React.FC<React.PropsWithChildren<{minimized?: boolean}>> =
             </Box>
           </Box>
         </MinimizableDialogContent>
-      </MinimizableDialog>
-    </MinimizableDialogContainer>
+      </StyledMinimizableDialog>
+    </MinimizableDialogContext.Provider>
   );
 };
 
-export const Default: StoryFn = () => <DialogExample />;
-export const DefaultMinimized: StoryFn = () => <DialogExample minimized />;
+export const DefaultForVRT: StoryFn = () => <DialogExample />;
+export const DefaultMinimizedForVRT: StoryFn = () => <DialogExample minimized />;
 
+/*
+ * Run chromatic on this story even though all the dialogs are on top of
+ * each other to verify that they are positioned correctly on the screen
+ */
 export const FloatingButton: StoryFn = () => {
   const nameID = useUID();
   const emailID = useUID();
@@ -120,6 +125,7 @@ export const FloatingButton: StoryFn = () => {
 
 export const StateHookExample: StoryFn = () => {
   const dialog = useMinimizableDialogState({});
+
   return (
     <Box display="flex" flexDirection="column" rowGap="space70">
       <Box>
@@ -155,6 +161,20 @@ export const StateHookExample: StoryFn = () => {
           Expand dialog
         </Button>
       </Box>
+      <Box>
+        <Button variant="primary" onClick={() => dialog.toggle()}>
+          Toggle dialog
+        </Button>
+      </Box>
+      <Box>
+        <Button variant="primary" onClick={() => dialog.toggleMinimized()}>
+          Toggle minimized
+        </Button>
+      </Box>
     </Box>
   );
 };
+
+StateHookExample.parameters = {
+  chromatic: {disableSnapshot: true},
+};
diff --git a/packages/paste-website/src/component-examples/MinimizableDialogExamples.ts b/packages/paste-website/src/component-examples/MinimizableDialogExamples.ts
@@ -8,26 +8,28 @@ const MinimizableDialogExample = () => {
       <MinimizableDialog aria-label="Live chat">
         <MinimizableDialogHeader>Live chat</MinimizableDialogHeader>
         <MinimizableDialogContent>
-          <Heading as="div" variant="heading30">
-            Hi there!
-          </Heading>
-          <Paragraph>We’re here to help. Please give us some info to get started.</Paragraph>
-          <Box display="flex" flexDirection="column" rowGap="space60">
-            <Box>
-              <Label htmlFor='name-input'>Name</Label>
-              <Input id='name-input' type="text" />
+          <Box padding='space70'>
+            <Heading as="div" variant="heading30">
+              Hi there!
+            </Heading>
+            <Paragraph>We’re here to help. Please give us some info to get started.</Paragraph>
+            <Box display="flex" flexDirection="column" rowGap="space60">
+              <Box>
+                <Label htmlFor='name-input'>Name</Label>
+                <Input id='name-input' type="text" />
+              </Box>
+              <Box>
+                <Label htmlFor='email-input'>Email address</Label>
+                <Input id='email-input' type="email" />
+              </Box>
+              <Box>
+                <Label htmlFor='question-textarea'>How can we help you?</Label>
+                <TextArea id='question-textarea' />
+              </Box>
             </Box>
-            <Box>
-              <Label htmlFor='email-input'>Email address</Label>
-              <Input id='email-input' type="email" />
+            <Box marginTop="space190">
+              <Button variant="primary">Start chat</Button>
             </Box>
-            <Box>
-              <Label htmlFor='question-textarea'>How can we help you?</Label>
-              <TextArea id='question-textarea' />
-            </Box>
-          </Box>
-          <Box marginTop="space190">
-            <Button variant="primary">Start chat</Button>
           </Box>
         </MinimizableDialogContent>
       </MinimizableDialog>
@@ -51,7 +53,9 @@ const MinimizableDialogButtonExample = () => {
         <MinimizableDialog aria-label="Dialog">
           <MinimizableDialogHeader>Dialog</MinimizableDialogHeader>
           <MinimizableDialogContent>
-            This is the Twilio styled minimizable dialog that you can use in all your applications.
+            <Box padding='space70'>
+              This is the Twilio styled minimizable dialog that you can use in all your applications.
+            </Box>
           </MinimizableDialogContent>
         </MinimizableDialog>
       </MinimizableDialogContainer>
@@ -62,7 +66,9 @@ const MinimizableDialogButtonExample = () => {
         <MinimizableDialog aria-label="Dialog">
           <MinimizableDialogHeader>Dialog</MinimizableDialogHeader>
           <MinimizableDialogContent>
-            This is the Twilio styled minimizable dialog that you can use in all your applications.
+            <Box padding='space70'>
+              This is the Twilio styled minimizable dialog that you can use in all your applications.
+            </Box>
           </MinimizableDialogContent>
         </MinimizableDialog>
       </MinimizableDialogContainer>
@@ -73,7 +79,9 @@ const MinimizableDialogButtonExample = () => {
         <MinimizableDialog aria-label="Dialog">
           <MinimizableDialogHeader>Dialog</MinimizableDialogHeader>
           <MinimizableDialogContent>
-            This is the Twilio styled minimizable dialog that you can use in all your applications.
+            <Box padding='space70'>
+              This is the Twilio styled minimizable dialog that you can use in all your applications.
+            </Box>
           </MinimizableDialogContent>
         </MinimizableDialog>
       </MinimizableDialogContainer>
@@ -99,7 +107,9 @@ const HookExample = () => {
           <MinimizableDialog aria-label="Dialog">
             <MinimizableDialogHeader>Dialog</MinimizableDialogHeader>
             <MinimizableDialogContent>
-              This is the Twilio styled minimizable dialog that you can use in all your applications.
+              <Box padding='space70'>
+                This is the Twilio styled minimizable dialog that you can use in all your applications.
+              </Box>
             </MinimizableDialogContent>
           </MinimizableDialog>
         </MinimizableDialogContainer>