feat(side-panel): add SidePanelFooter (#4002)

* chore(ai-chat-log): remove padding-x from log * feat(side-panel): create SidePanelFooter * chore(side-modal): align design with side panel design * docs(side-panel, side-modal): add footer examples to docs * chore(chat-composer): make container 100% width * chore(side-modal): remove changes to footer actions alignment * chore(side-panel): allow justification of footer content * chore: typedocs * chore: pr feedback
twilio-labs · Jul 25, 2024 · b315321 · b315321
1 parent f510518
commit b315321
Show file tree

Hide file tree

Showing 23 changed files with 2,009 additions and 122 deletions.
diff --git a/.changeset/new-fans-call.md b/.changeset/new-fans-call.md
@@ -0,0 +1,6 @@
+---
+"@twilio-paste/ai-chat-log": patch
+"@twilio-paste/core": patch
+---
+
+[AI Chat Log] Remove padding-x on AI Chat Log to prevent double padding when log is used within a Side Panel container.
diff --git a/.changeset/nine-geese-end.md b/.changeset/nine-geese-end.md
@@ -0,0 +1,6 @@
+---
+"@twilio-paste/chat-composer": patch
+"@twilio-paste/core": patch
+---
+
+[Chat Composer] Add width="100%" to ChatComposerContainer to prevent composer from shrinking when no value
diff --git a/.changeset/real-flowers-turn.md b/.changeset/real-flowers-turn.md
@@ -0,0 +1,6 @@
+---
+"@twilio-paste/side-modal": patch
+"@twilio-paste/core": patch
+---
+
+[Side Modal] Increase size of close icon.
diff --git a/.changeset/tasty-rats-sniff.md b/.changeset/tasty-rats-sniff.md
@@ -0,0 +1,5 @@
+---
+"@twilio-paste/codemods": patch
+---
+
+[Codemods] New export from side-panel package
diff --git a/.changeset/tiny-badgers-rush.md b/.changeset/tiny-badgers-rush.md
@@ -0,0 +1,6 @@
+---
+"@twilio-paste/side-panel": minor
+"@twilio-paste/core": minor
+---
+
+[Side Panel] Create SidePanelFooter exported from the Side Panel package for actions or chat composers. Make scrollbar color of SidePanelBody slightly darker for better visibility. Small improvements to spacing and alignment of SidePanelHeader.
diff --git a/packages/paste-codemods/tools/.cache/mappings.json b/packages/paste-codemods/tools/.cache/mappings.json
@@ -246,6 +246,7 @@
   "SidePanelButton": "@twilio-paste/core/side-panel",
   "SidePanelContainer": "@twilio-paste/core/side-panel",
   "SidePanelContext": "@twilio-paste/core/side-panel",
+  "SidePanelFooter": "@twilio-paste/core/side-panel",
   "SidePanelHeader": "@twilio-paste/core/side-panel",
   "SidePanelHeaderActions": "@twilio-paste/core/side-panel",
   "SidePanelPushContentWrapper": "@twilio-paste/core/side-panel",

diff --git a/packages/paste-core/components/ai-chat-log/src/AIChatLog.tsx b/packages/paste-core/components/ai-chat-log/src/AIChatLog.tsx
@@ -17,7 +17,7 @@ export interface AIChatLogProps extends HTMLPasteProps<"div"> {
 export const AIChatLog = React.forwardRef<HTMLDivElement, AIChatLogProps>(
   ({ element = "AI_CHAT_LOG", children, ...props }, ref) => {
     return (
-      <Box role="log" padding="space70" element={element} ref={ref} {...safelySpreadBoxProps(props)}>
+      <Box role="log" paddingY="space70" element={element} ref={ref} {...safelySpreadBoxProps(props)}>
         <Box
           as="div"
           role="list"

diff --git a/packages/paste-core/components/ai-chat-log/stories/composer.stories.tsx b/packages/paste-core/components/ai-chat-log/stories/composer.stories.tsx
@@ -84,23 +84,6 @@ const createNewMessage = (message: string): Omit<AIChat, "id"> => {
   };
 };
 
-const SendButtonPlugin = ({ onClick }: { onClick: () => void }): JSX.Element => {
-  const [editor] = useLexicalComposerContext();
-
-  const handleSend = (): void => {
-    onClick();
-    editor.dispatchCommand(CLEAR_EDITOR_COMMAND, undefined);
-  };
-
-  return (
-    <Box position="absolute" top="space30" right="space30">
-      <Button variant="primary_icon" size="reset" onClick={handleSend}>
-        <SendIcon decorative={false} title="Send message" />
-      </Button>
-    </Box>
-  );
-};
-
 const EnterKeySubmitPlugin = ({ onKeyDown }: { onKeyDown: () => void }): null => {
   const [editor] = useLexicalComposerContext();
 
@@ -203,7 +186,7 @@ export const AIChatLogComposer = (): React.ReactNode => {
 
   return (
     <Box>
-      <Box ref={scrollerRef} overflowX="hidden" overflowY="auto" maxHeight="size50" tabIndex={0}>
+      <Box ref={scrollerRef} overflowX="hidden" overflowY="auto" maxHeight="size50" padding="space50" tabIndex={0}>
         <AIChatLogger ref={loggerRef} aiChats={aiChats} />
       </Box>
       <ChatComposerContainer variant="contained">

diff --git a/packages/paste-core/components/chat-composer/src/ChatComposerContainer.tsx b/packages/paste-core/components/chat-composer/src/ChatComposerContainer.tsx
@@ -64,6 +64,7 @@ export const ChatComposerContainer = React.forwardRef<HTMLDivElement, ChatCompos
           maxHeight={maxHeight}
           overflowY="auto"
           rowGap="space50"
+          width="100%"
           {...Styles[variant]}
         >
           {children}

diff --git a/packages/paste-core/components/side-modal/src/SideModalHeader.tsx b/packages/paste-core/components/side-modal/src/SideModalHeader.tsx
@@ -50,12 +50,13 @@ const SideModalHeader = React.forwardRef<HTMLDivElement, SideModalHeaderProps>(
         element={element}
         display="flex"
         flexDirection="row"
+        alignItems="flex-start"
       >
-        <Box display="flex" flexGrow={1} marginRight="space70" alignItems="center">
+        <Box display="flex" flexGrow={1} marginRight="space70">
           {children}
         </Box>
         <Button element={`${element}_CLOSE_BUTTON`} variant="secondary_icon" size="reset" onClick={hide}>
-          <CloseIcon element={`${element}_CLOSE_ICON`} decorative size="sizeIcon20" />
+          <CloseIcon element={`${element}_CLOSE_ICON`} decorative size="sizeIcon50" />
           <ScreenReaderOnly>{i18nDismissLabel}</ScreenReaderOnly>
         </Button>
       </Box>

diff --git a/packages/paste-core/components/side-panel/src/SidePanelBody.tsx b/packages/paste-core/components/side-panel/src/SidePanelBody.tsx
@@ -7,7 +7,7 @@ import type { SidePanelBodyProps } from "./types";
 
 // This wrapper applies styles that customize the scrollbar and its track
 const SidePanelBodyWrapper = styled.div(({ theme }: { theme: ThemeShape }) => {
-  const { colorBackgroundBody, colorBackground, colorBackgroundStrong } = theme.backgroundColors;
+  const { colorBackgroundBody, colorBackgroundStrong, colorBackgroundStronger } = theme.backgroundColors;
 
   return css({
     // Scrollbar
@@ -17,17 +17,18 @@ const SidePanelBodyWrapper = styled.div(({ theme }: { theme: ThemeShape }) => {
     // Track
     "::-webkit-scrollbar-track": {
       marginTop: "8px",
+      marginBottom: "8px",
       background: colorBackgroundBody,
       borderRadius: "10px",
     },
     // Handle
     "::-webkit-scrollbar-thumb": {
-      background: colorBackground,
+      background: colorBackgroundStrong,
       borderRadius: "10px",
     },
     // Handle on hover
     "::-webkit-scrollbar-thumb:hover": {
-      background: colorBackgroundStrong,
+      background: colorBackgroundStronger,
     },
   });
 });

diff --git a/packages/paste-core/components/side-panel/src/SidePanelFooter.tsx b/packages/paste-core/components/side-panel/src/SidePanelFooter.tsx
@@ -0,0 +1,34 @@
+import { Box, safelySpreadBoxProps } from "@twilio-paste/box";
+import * as React from "react";
+
+import type { SidePanelFooterProps } from "./types";
+
+const SidePanelFooter = React.forwardRef<HTMLDivElement, SidePanelFooterProps>(
+  ({ element = "SIDE_PANEL_FOOTER", variant = "default", children, justifyContent = "flex-start", ...props }, ref) => {
+    return (
+      <Box
+        width="100%"
+        paddingX={variant === "chat" ? "space50" : "space70"}
+        paddingBottom="space50"
+        paddingTop={variant === "chat" ? "space0" : "space50"}
+        boxShadow={variant === "chat" ? "none" : "shadow"}
+        marginBottom="spaceNegative70"
+        zIndex="zIndex20"
+        display="flex"
+        columnGap="space40"
+        rowGap="space40"
+        justifyContent={justifyContent}
+        flexWrap="wrap"
+        {...safelySpreadBoxProps(props)}
+        ref={ref}
+        element={element}
+      >
+        {children}
+      </Box>
+    );
+  },
+);
+
+SidePanelFooter.displayName = "SidePanelFooter";
+
+export { SidePanelFooter };
diff --git a/packages/paste-core/components/side-panel/src/SidePanelHeader.tsx b/packages/paste-core/components/side-panel/src/SidePanelHeader.tsx
@@ -55,7 +55,7 @@ const SidePanelHeader = React.forwardRef<HTMLDivElement, SidePanelHeaderProps>(
         padding="space70"
         display="flex"
         columnGap="space30"
-        alignItems="center"
+        alignItems="flex-start"
         justifyContent="space-between"
         {...safelySpreadBoxProps(props)}
         ref={ref}

diff --git a/packages/paste-core/components/side-panel/src/SidePanelHeaderActions.tsx b/packages/paste-core/components/side-panel/src/SidePanelHeaderActions.tsx
@@ -7,7 +7,7 @@ const SidePanelHeaderActions = React.forwardRef<HTMLDivElement, SidePanelHeaderA
   ({ element = "SIDE_PANEL_HEADER_ACTIONS", children, ...props }, ref) => {
     return (
       <Box
-        width="100%"
+        flexGrow={1}
         display="flex"
         justifyContent="flex-end"
         columnGap="space20"

diff --git a/packages/paste-core/components/side-panel/src/index.tsx b/packages/paste-core/components/side-panel/src/index.tsx
@@ -6,6 +6,7 @@ export { SidePanelBody } from "./SidePanelBody";
 export { SidePanelContainer } from "./SidePanelContainer";
 export { SidePanelButton } from "./SidePanelButton";
 export { SidePanelBadgeButton } from "./SidePanelBadgeButton";
+export { SidePanelFooter } from "./SidePanelFooter";
 export type {
   SidePanelButtonProps,
   SidePanelBadgeButtonProps,
@@ -15,5 +16,6 @@ export type {
   SidePanelHeaderActionsProps,
   SidePanelContainerProps,
   SidePanelBodyProps,
+  SidePanelFooterProps,
 } from "./types";
 export { SidePanelContext } from "./SidePanelContext";
diff --git a/packages/paste-core/components/side-panel/src/types.ts b/packages/paste-core/components/side-panel/src/types.ts
@@ -43,6 +43,31 @@ export interface SidePanelHeaderProps extends HTMLPasteProps<"div"> {
   element?: BoxProps["element"];
 }
 
+export interface SidePanelFooterProps extends HTMLPasteProps<"div"> {
+  children?: React.ReactNode;
+  /**
+   * Variant of the Side Panel Footer. When using Side Panel in an AI Chat context, use the "chat" variant to wrap the Chat Composer component.
+   * @default "default"
+   * @type {"default" | "chat"}
+   * @memberof SidePanelFooterProps
+   */
+  variant?: "default" | "chat";
+  /**
+   * Sets the `justify-content` CSS property.
+   * @default "flex-start"
+   * @type {"flex-start" | "flex-end" | "space-between"}
+   * @memberof SidePanelFooterProps
+   */
+  justifyContent?: "flex-start" | "flex-end" | "space-between";
+  /**
+   * Overrides the default element name to apply unique styles with the Customization Provider
+   * @default "SIDE_PANEL_FOOTER"
+   * @type {BoxProps['element']}
+   * @memberof SidePanelFooterProps
+   */
+  element?: BoxProps["element"];
+}
+
 export interface SidePanelHeaderActionsProps extends HTMLPasteProps<"div"> {
   children?: React.ReactNode;
   /**

diff --git a/packages/paste-core/components/side-panel/stories/components/SidePanelWithAIContent.tsx b/packages/paste-core/components/side-panel/stories/components/SidePanelWithAIContent.tsx
@@ -0,0 +1,95 @@
+// eslint-disable-next-line eslint-comments/disable-enable-pair
+/* eslint-disable import/no-extraneous-dependencies */
+import { AIChatLog, AIChatMessage, AIChatMessageAuthor, AIChatMessageBody } from "@twilio-paste/ai-chat-log";
+import { Anchor } from "@twilio-paste/anchor";
+import { Box } from "@twilio-paste/box";
+import { Button } from "@twilio-paste/button";
+import { ChatComposer, ChatComposerActionGroup, ChatComposerContainer } from "@twilio-paste/chat-composer";
+import { Heading } from "@twilio-paste/heading";
+import { ArtificialIntelligenceIcon } from "@twilio-paste/icons/esm/ArtificialIntelligenceIcon";
+import { AttachIcon } from "@twilio-paste/icons/esm/AttachIcon";
+import { MoreIcon } from "@twilio-paste/icons/esm/MoreIcon";
+import { SendIcon } from "@twilio-paste/icons/esm/SendIcon";
+import { Separator } from "@twilio-paste/separator";
+import * as React from "react";
+
+import { SidePanel, SidePanelBody, SidePanelFooter, SidePanelHeader, SidePanelHeaderActions } from "../../src";
+
+export const SidePanelWithAIContent: React.FC<React.PropsWithChildren> = () => {
+  return (
+    <SidePanel label="intelligent assistant ai bot side panel">
+      <SidePanelHeader>
+        <ArtificialIntelligenceIcon decorative size="sizeIcon50" color="colorTextIcon" />
+        <Heading as="h3" variant="heading30" marginBottom="space0">
+          Assistant
+        </Heading>
+        <SidePanelHeaderActions>
+          <Button variant="secondary_icon" size="reset" onClick={() => {}}>
+            <MoreIcon decorative={false} title="open menu" size="sizeIcon50" />
+          </Button>
+        </SidePanelHeaderActions>
+      </SidePanelHeader>
+      <Separator orientation="horizontal" verticalSpacing="space0" />
+      <SidePanelBody>
+        <Box width="100%">
+          <AIChatLog>
+            <AIChatMessage variant="bot">
+              <AIChatMessageAuthor aria-label="ai said">Good Bot</AIChatMessageAuthor>
+              <AIChatMessageBody>Hello, what can I help you with?</AIChatMessageBody>
+            </AIChatMessage>
+            <AIChatMessage variant="user">
+              <AIChatMessageAuthor aria-label="You said at 2:36pm">Gibby Radki</AIChatMessageAuthor>
+              <AIChatMessageBody>Hi! Can you help me with my user interface?</AIChatMessageBody>
+            </AIChatMessage>
+            <AIChatMessage variant="bot">
+              <AIChatMessageAuthor aria-label="ai said">Good Bot</AIChatMessageAuthor>
+              Of course! What do you need help with?
+            </AIChatMessage>
+            <AIChatMessage variant="bot">
+              <AIChatMessageAuthor aria-label="ai said">Good Bot</AIChatMessageAuthor>
+              <AIChatMessageBody>
+                I&apos;m happy to help with any questions you have about user interfaces, accessibility, or the Twilio
+                Paste design system. Just ask!
+              </AIChatMessageBody>
+            </AIChatMessage>
+            <AIChatMessage variant="user">
+              <AIChatMessageAuthor aria-label="You said at 2:39pm">Gibby Radki</AIChatMessageAuthor>
+              <AIChatMessageBody>My question is about the Switch component.</AIChatMessageBody>
+            </AIChatMessage>
+            <AIChatMessage variant="bot">
+              <AIChatMessageAuthor aria-label="ai said">Good Bot</AIChatMessageAuthor>
+              <AIChatMessageBody>
+                A <Anchor href="https://paste.twilio.design/components/switch">Switch</Anchor> is an interactive binary
+                control. What other information about the Paste Switch component can I help with?
+              </AIChatMessageBody>
+            </AIChatMessage>
+          </AIChatLog>
+        </Box>
+      </SidePanelBody>
+      <SidePanelFooter variant="chat">
+        <ChatComposerContainer variant="contained">
+          <ChatComposer
+            maxHeight="size10"
+            config={{
+              namespace: "customer-chat",
+              onError: (e) => {
+                throw e;
+              },
+            }}
+            initialValue="Are switch labels required? What about "
+            placeholder="Chat text"
+            ariaLabel="A basic chat composer"
+          />
+          <ChatComposerActionGroup>
+            <Button variant="secondary_icon" size="reset">
+              <AttachIcon decorative={false} title="attach files to the message" />
+            </Button>
+            <Button variant="primary_icon" size="reset">
+              <SendIcon decorative={false} title="Send" />
+            </Button>
+          </ChatComposerActionGroup>
+        </ChatComposerContainer>
+      </SidePanelFooter>
+    </SidePanel>
+  );
+};