chore(conversations UI kit components): update styles (#3069)

* chore: update bookend, start meta * chore(tokens): update default token to fix avatar blurriness * chore(chat-log): remove hide overflow to fix avatar being cut off in meta * chore: finish meta, bubble and attachment * chore: update event, add disabled to composer * chore: italicize disabled chat composer story * chore: fix padding on chatlog doc example * chore: chat composer attachment card changes * chore: minimizable dialog updates * chore: changesets * chore: update snapshot * chore: fix lint import error * chore: add color and customization to chat attachment icon * test: chat attachment icon customization --------- Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> Co-authored-by: Simon Taggart <me@simontaggart.com>
twilio-labs · Mar 7, 2023 · 6b159b5 · 6b159b5
1 parent e7f4fcd
commit 6b159b5
Show file tree

Hide file tree

Showing 29 changed files with 172 additions and 71 deletions.
diff --git a/.changeset/dull-radios-switch.md b/.changeset/dull-radios-switch.md
@@ -0,0 +1,6 @@
+---
+'@twilio-paste/design-tokens': patch
+'@twilio-paste/core': patch
+---
+
+[Design tokens] update default theme token to fix Avatar styles, no changes to new Twilio theme
diff --git a/.changeset/heavy-boxes-invent.md b/.changeset/heavy-boxes-invent.md
@@ -0,0 +1,6 @@
+---
+'@twilio-paste/minimizable-dialog': patch
+'@twilio-paste/core': patch
+---
+
+[Minimizable dialog] Update styles to align with new Paste Twilio theme.
diff --git a/.changeset/long-days-grab.md b/.changeset/long-days-grab.md
@@ -0,0 +1,6 @@
+---
+'@twilio-paste/chat-log': patch
+'@twilio-paste/core': patch
+---
+
+[Chat log] Update styles to align with new Paste Twilio theme.
diff --git a/.changeset/weak-lemons-confess.md b/.changeset/weak-lemons-confess.md
@@ -0,0 +1,6 @@
+---
+'@twilio-paste/chat-composer': patch
+'@twilio-paste/core': patch
+---
+
+[Chat composer] Update Update styles to align with new Paste Twilio theme.
diff --git a/packages/paste-core/components/chat-composer/src/ChatComposer.tsx b/packages/paste-core/components/chat-composer/src/ChatComposer.tsx
@@ -45,6 +45,7 @@ export interface ChatComposerProps extends ContentEditableProps {
   onChange?: OnChangeFunction;
   maxHeight?: BoxStyleProps['maxHeight'];
   initialValue?: string;
+  disabled?: boolean;
 
   /** Mapped to ariaOwneeID on the Lexical ContentEditable component.  */
   ariaOwns?: ContentEditableProps['ariaOwneeID'];
@@ -73,12 +74,14 @@ export const ChatComposer = React.forwardRef<HTMLDivElement, ChatComposerProps>(
       maxHeight,
       ariaOwns,
       ariaActiveDescendant,
+      disabled,
       ...props
     },
     ref
   ) => {
     const baseConfigWithEditorState = {
       ...baseConfig,
+      editable: disabled ? false : true,
       editorState: initialValue ? () => renderInitialText(initialValue) : undefined,
     };
 
@@ -95,6 +98,12 @@ export const ChatComposer = React.forwardRef<HTMLDivElement, ChatComposerProps>(
         _focusWithin={{boxShadow: 'shadowFocus'}}
         overflowY="scroll"
         maxHeight={maxHeight}
+        disabled={disabled}
+        aria-disabled={disabled}
+        _disabled={{
+          color: 'colorTextWeaker',
+          backgroundColor: 'colorBackground',
+        }}
       >
         <StylingGlobals styles={chatComposerLexicalStyles} />
         <LexicalComposer initialConfig={merge(baseConfigWithEditorState, config)}>

diff --git a/packages/paste-core/components/chat-composer/stories/index.stories.tsx b/packages/paste-core/components/chat-composer/stories/index.stories.tsx
@@ -23,6 +23,17 @@ const defaultConfig: ChatComposerProps['config'] = {
   },
 };
 
+const disabledInitialText = (): void => {
+  const root = $getRoot();
+
+  if (root.getFirstChild() === null) {
+    const paragraph = $createParagraphNode();
+    paragraph.append($createTextNode('Type here...').toggleFormat('italic'));
+
+    root.append(paragraph);
+  }
+};
+
 const initialText = (): void => {
   const root = $getRoot();
 
@@ -91,6 +102,23 @@ export const Default: StoryFn = () => {
   );
 };
 
+export const Disabled: StoryFn = () => {
+  return (
+    <ChatComposer
+      disabled
+      config={{
+        editorState: disabledInitialText,
+        namespace: 'foo',
+        onError: (error: Error) => {
+          throw error;
+        },
+      }}
+      testid="foo"
+      ariaLabel="Disabled chat composer"
+    />
+  );
+};
+
 export const LongPlaceholderText: StoryFn = () => {
   return (
     <ChatComposer

diff --git a/packages/paste-core/components/chat-log/__tests__/ChatAttachment.spec.tsx b/packages/paste-core/components/chat-log/__tests__/ChatAttachment.spec.tsx
@@ -18,6 +18,9 @@ const customizedElements: {[key: string]: PasteCustomCSS} = {
   CHAT_ATTACHMENT: {
     marginLeft: 'space50',
   },
+  CHAT_ATTACHMENT_ICON: {
+    color: 'colorTextBrandHighlight',
+  },
   CHAT_ATTACHMENT_BODY: {
     padding: 'space20',
   },
@@ -39,6 +42,9 @@ const customizedMyElements: {[key: string]: PasteCustomCSS} = {
   MY_CHAT_ATTACHMENT: {
     marginLeft: 'space50',
   },
+  MY_CHAT_ATTACHMENT_ICON: {
+    color: 'colorTextBrandHighlight',
+  },
   MY_CHAT_ATTACHMENT_BODY: {
     padding: 'space20',
   },
@@ -123,6 +129,7 @@ describe('Customization', () => {
     const composerAttachmentCard = screen.getByTestId('composer-attachment-card');
     const composerAttachmentCardRemoveButton = screen.getByRole('button');
     const chatAttachment = screen.getByTestId('chat-attachment');
+    const chatAttachmentIcon = chatAttachment.firstChild?.firstChild as HTMLElement;
     const chatAttachmentBody = chatAttachment.lastChild as HTMLElement;
     const chatAttachmentLink = screen.getByTestId('chat-attachment-link');
     const chatAttachmentDescription = screen.getByTestId('chat-attachment-description');
@@ -132,6 +139,7 @@ describe('Customization', () => {
       'COMPOSER_ATTACHMENT_CARD_REMOVE_BUTTON'
     );
     expect(chatAttachment.getAttribute('data-paste-element')).toEqual('CHAT_ATTACHMENT');
+    expect(chatAttachmentIcon.getAttribute('data-paste-element')).toEqual('CHAT_ATTACHMENT_ICON');
     expect(chatAttachmentBody.getAttribute('data-paste-element')).toEqual('CHAT_ATTACHMENT_BODY');
     expect(chatAttachmentLink.getAttribute('data-paste-element')).toEqual('CHAT_ATTACHMENT_LINK');
     expect(chatAttachmentDescription.getAttribute('data-paste-element')).toEqual('CHAT_ATTACHMENT_DESCRIPTION');
@@ -167,6 +175,7 @@ describe('Customization', () => {
     const composerAttachmentCard = screen.getByTestId('composer-attachment-card');
     const composerAttachmentCardRemoveButton = screen.getByRole('button');
     const chatAttachment = screen.getByTestId('chat-attachment');
+    const chatAttachmentIcon = chatAttachment.firstChild?.firstChild as HTMLElement;
     const chatAttachmentLink = screen.getByTestId('chat-attachment-link');
     const chatAttachmentDescription = screen.getByTestId('chat-attachment-description');
     const chatAttachmentBody = chatAttachment.lastChild as HTMLElement;
@@ -176,6 +185,7 @@ describe('Customization', () => {
       'MY_COMPOSER_ATTACHMENT_CARD_REMOVE_BUTTON'
     );
     expect(chatAttachment.getAttribute('data-paste-element')).toEqual('MY_CHAT_ATTACHMENT');
+    expect(chatAttachmentIcon.getAttribute('data-paste-element')).toEqual('MY_CHAT_ATTACHMENT_ICON');
     expect(chatAttachmentBody.getAttribute('data-paste-element')).toEqual('MY_CHAT_ATTACHMENT_BODY');
     expect(chatAttachmentLink.getAttribute('data-paste-element')).toEqual('MY_CHAT_ATTACHMENT_LINK');
     expect(chatAttachmentDescription.getAttribute('data-paste-element')).toEqual('MY_CHAT_ATTACHMENT_DESCRIPTION');
@@ -197,6 +207,7 @@ describe('Customization', () => {
     const composerAttachmentCard = screen.getByTestId('composer-attachment-card');
     const composerAttachmentCardRemoveButton = screen.getByRole('button');
     const chatAttachment = screen.getByTestId('chat-attachment');
+    const chatAttachmentIcon = chatAttachment.firstChild?.firstChild as HTMLElement;
     const chatAttachmentBody = chatAttachment.lastChild as HTMLElement;
     const chatAttachmentLink = screen.getByTestId('chat-attachment-link');
     const chatAttachmentDescription = screen.getByTestId('chat-attachment-description');
@@ -205,6 +216,7 @@ describe('Customization', () => {
     expect(composerAttachmentCardRemoveButton).toHaveStyleRule('color', 'rgb(0, 20, 137)');
     expect(chatAttachmentBody).toHaveStyleRule('padding', '0.25rem');
     expect(chatAttachment).toHaveStyleRule('margin-left', '1rem');
+    expect(chatAttachmentIcon).toHaveStyleRule('color', 'rgb(242, 47, 70)');
     expect(chatAttachmentLink).toHaveStyleRule('font-size', '1.125rem');
     expect(chatAttachmentDescription).toHaveStyleRule('color', 'rgb(18, 28, 45)');
   });
@@ -239,13 +251,15 @@ describe('Customization', () => {
     const composerAttachmentCard = screen.getByTestId('composer-attachment-card');
     const composerAttachmentCardRemoveButton = screen.getByRole('button');
     const chatAttachment = screen.getByTestId('chat-attachment');
+    const chatAttachmentIcon = chatAttachment.firstChild?.firstChild as HTMLElement;
     const chatAttachmentBody = chatAttachment.lastChild as HTMLElement;
     const chatAttachmentLink = screen.getByTestId('chat-attachment-link');
     const chatAttachmentDescription = screen.getByTestId('chat-attachment-description');
 
     expect(composerAttachmentCard).toHaveStyleRule('padding', '2.25rem');
     expect(composerAttachmentCardRemoveButton).toHaveStyleRule('color', 'rgb(0, 20, 137)');
     expect(chatAttachment).toHaveStyleRule('margin-left', '1rem');
+    expect(chatAttachmentIcon).toHaveStyleRule('color', 'rgb(242, 47, 70)');
     expect(chatAttachmentBody).toHaveStyleRule('padding', '0.25rem');
     expect(chatAttachmentLink).toHaveStyleRule('font-size', '1.125rem');
     expect(chatAttachmentDescription).toHaveStyleRule('color', 'rgb(18, 28, 45)');

diff --git a/packages/paste-core/components/chat-log/src/ChatAttachment.tsx b/packages/paste-core/components/chat-log/src/ChatAttachment.tsx
@@ -1,9 +1,12 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import type {BoxElementProps} from '@twilio-paste/box';
+import {Box} from '@twilio-paste/box';
 import {MediaObject, MediaFigure, MediaBody} from '@twilio-paste/media-object';
 import {Stack} from '@twilio-paste/stack';
 
+import {MessageVariantContext} from './MessageVariantContext';
+
 export interface ChatAttachmentProps {
   children: NonNullable<React.ReactNode>;
   element?: BoxElementProps['element'];
@@ -12,10 +15,13 @@ export interface ChatAttachmentProps {
 
 const ChatAttachment = React.forwardRef<HTMLDivElement, ChatAttachmentProps>(
   ({children, element = 'CHAT_ATTACHMENT', attachmentIcon, ...props}, ref) => {
+    const variant = React.useContext(MessageVariantContext);
     return (
       <MediaObject {...props} as="div" ref={ref} verticalAlign="center" element={element}>
         <MediaFigure as="div" spacing="space30">
-          {attachmentIcon}
+          <Box color={variant === 'inbound' ? 'colorTextIcon' : 'colorTextInverse'} element={`${element}_ICON`}>
+            {attachmentIcon}
+          </Box>
         </MediaFigure>
         <MediaBody as="div" element={`${element}_BODY`}>
           <Stack orientation="vertical" spacing="space10">

diff --git a/packages/paste-core/components/chat-log/src/ChatAttachmentDescription.tsx b/packages/paste-core/components/chat-log/src/ChatAttachmentDescription.tsx
@@ -3,22 +3,25 @@ import PropTypes from 'prop-types';
 import type {BoxElementProps} from '@twilio-paste/box';
 import {Text, safelySpreadTextProps} from '@twilio-paste/text';
 
+import {MessageVariantContext} from './MessageVariantContext';
+
 export interface ChatAttachmentDescriptionProps {
   children: string;
   element?: BoxElementProps['element'];
 }
 
 const ChatAttachmentDescription = React.forwardRef<HTMLElement, ChatAttachmentDescriptionProps>(
   ({children, element = 'CHAT_ATTACHMENT_DESCRIPTION', ...props}, ref) => {
+    const variant = React.useContext(MessageVariantContext);
     return (
       <Text
         {...safelySpreadTextProps(props)}
         element={element}
         ref={ref}
         as="div"
         fontSize="fontSize20"
-        color="colorTextWeak"
-        lineHeight="lineHeight10"
+        color={variant === 'inbound' ? 'colorTextWeak' : 'colorTextInverse'}
+        lineHeight="lineHeight20"
       >
         {children}
       </Text>

diff --git a/packages/paste-core/components/chat-log/src/ChatAttachmentLink.tsx b/packages/paste-core/components/chat-log/src/ChatAttachmentLink.tsx
@@ -5,15 +5,24 @@ import type {AnchorProps} from '@twilio-paste/anchor';
 import type {BoxElementProps} from '@twilio-paste/box';
 import {Truncate} from '@twilio-paste/truncate';
 
+import {MessageVariantContext} from './MessageVariantContext';
+
 export interface ChatAttachmentLinkProps extends AnchorProps {
   children: string;
   element?: BoxElementProps['element'];
 }
 
 const ChatAttachmentLink = React.forwardRef<HTMLElement, ChatAttachmentLinkProps>(
   ({children, href, element = 'CHAT_ATTACHMENT_LINK', ...props}, ref) => {
+    const variant = React.useContext(MessageVariantContext);
     return (
-      <Anchor href={href} ref={ref} element={element} {...props}>
+      <Anchor
+        href={href}
+        ref={ref}
+        element={element}
+        variant={variant === 'inbound' ? 'default' : 'inverse'}
+        {...props}
+      >
         <Truncate title={children}>{children}</Truncate>
       </Anchor>
     );

diff --git a/packages/paste-core/components/chat-log/src/ChatBookend.tsx b/packages/paste-core/components/chat-log/src/ChatBookend.tsx
@@ -21,6 +21,7 @@ const ChatBookend = React.forwardRef<HTMLDivElement, ChatBookendProps>(
         marginBottom="space20"
         lineHeight="lineHeight20"
         fontSize="fontSize20"
+        fontWeight="fontWeightMedium"
         ref={ref}
       >
         {children}

diff --git a/packages/paste-core/components/chat-log/src/ChatBubble.tsx b/packages/paste-core/components/chat-log/src/ChatBubble.tsx
@@ -19,8 +19,9 @@ const bubbleVariantStyles: {
     alignSelf: 'flex-start',
   },
   outbound: {
-    backgroundColor: 'colorBackgroundPrimaryWeakest',
+    backgroundColor: 'colorBackgroundInverseStronger',
     alignSelf: 'flex-end',
+    color: 'colorTextInverse',
   },
 };
 
@@ -33,7 +34,7 @@ export const ChatBubble = React.forwardRef<HTMLDivElement, ChatBubbleProps>(
         display="inline-block"
         fontSize="fontSize30"
         lineHeight="lineHeight20"
-        borderRadius="borderRadius30"
+        borderRadius="borderRadius20"
         paddingY="space30"
         paddingX="space40"
         marginBottom="space30"

diff --git a/packages/paste-core/components/chat-log/src/ChatEvent.tsx b/packages/paste-core/components/chat-log/src/ChatEvent.tsx
@@ -20,6 +20,7 @@ const ChatEvent = React.forwardRef<HTMLDivElement, ChatEventProps>(
         textAlign="center"
         lineHeight="lineHeight20"
         fontSize="fontSize20"
+        fontWeight="fontWeightMedium"
         ref={ref}
       >
         {children}

diff --git a/packages/paste-core/components/chat-log/src/ChatLog.tsx b/packages/paste-core/components/chat-log/src/ChatLog.tsx
@@ -11,16 +11,7 @@ export interface ChatLogProps {
 const ChatLog = React.forwardRef<HTMLDivElement, ChatLogProps>(({children, element = 'CHAT_LOG', ...props}, ref) => {
   return (
     <Box role="log" padding="space70" element={element} ref={ref} {...safelySpreadBoxProps(props)}>
-      <Box
-        as="div"
-        role="list"
-        margin="space0"
-        padding="space0"
-        overflowX="hidden"
-        display="flex"
-        flexDirection="column"
-        rowGap="space80"
-      >
+      <Box as="div" role="list" margin="space0" padding="space0" display="flex" flexDirection="column" rowGap="space80">
         {children}
       </Box>
     </Box>

diff --git a/packages/paste-core/components/chat-log/src/ChatMessageMeta.tsx b/packages/paste-core/components/chat-log/src/ChatMessageMeta.tsx
@@ -17,15 +17,16 @@ export const ChatMessageMeta = React.forwardRef<HTMLDivElement, ChatMessageMetaP
 
     return (
       <Box
+        {...safelySpreadBoxProps(props)}
         ref={ref}
         element={element}
         display="flex"
         justifyContent={variant === 'inbound' ? 'flex-start' : 'flex-end'}
         textAlign={variant === 'outbound' ? 'right' : 'left'}
         alignItems="center"
         variant={variant}
-        columnGap="space40"
-        {...safelySpreadBoxProps(props)}
+        columnGap="space30"
+        fontWeight="fontWeightMedium"
       >
         {children}
       </Box>

diff --git a/packages/paste-core/components/chat-log/src/ChatMessageMetaItem.tsx b/packages/paste-core/components/chat-log/src/ChatMessageMetaItem.tsx
@@ -14,7 +14,7 @@ export const ChatMessageMetaItem = React.forwardRef<HTMLDivElement, ChatMessageM
       ref={ref}
       element={element}
       display="flex"
-      alignItems="center"
+      alignItems="flex-start"
       columnGap="space30"
       color="colorTextWeak"
       lineHeight="lineHeight20"

diff --git a/packages/paste-core/components/chat-log/src/ComposerAttachmentCard.tsx b/packages/paste-core/components/chat-log/src/ComposerAttachmentCard.tsx
@@ -40,7 +40,8 @@ const ComposerAttachmentCard = React.forwardRef<HTMLDivElement, ComposerAttachme
       <Box
         {...safelySpreadBoxProps(props)}
         ref={ref}
-        padding="space30"
+        paddingY="space30"
+        paddingX="space40"
         borderStyle="solid"
         borderColor="colorBorderWeaker"
         borderRadius="borderRadius30"