feat(chat): chat item gutter and refactoring

CHANGELOG.md

@@ -21,6 +21,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - `type` prop is replaced with `color` in `Divider` component @layershifter ([#558](https://github.com/stardust-ui/react/pull/558))
 - Remove `createColorVariants` and `setColorLightness` utils @layershifter ([#583](https://github.com/stardust-ui/react/pull/583))
 - Remove `accessibility` prop (and corresponding behavior) from `ButtonGroup` @kolaps33 ([#605](https://github.com/stardust-ui/react/pull/605))
+- Add `gutter` prop to `Chat.Item`, removed `avatar` from `Chat.Message`, renamed `content` slot to `message` for `Chat.Item`, deprecated Children API for `Chat` components @Bugaa92 ([#556](https://github.com/stardust-ui/react/pull/556))
 
 ### Fixes
 - Fix `Provider` is not executing staticStyles with the merged siteVariables @mnajdova ([#559](https://github.com/stardust-ui/react/pull/559))

docs/src/examples/components/Chat/Types/ChatExample.shorthand.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Chat, Divider } from '@stardust-ui/react'
+import { Avatar, Chat, Divider } from '@stardust-ui/react'
 
 const janeAvatar = {
   image: 'public/images/avatar/small/ade.jpg',
@@ -8,59 +8,67 @@ const janeAvatar = {
 
 const items = [
   {
-    content: (
-      <Chat.Message content="Hello" author="John Doe" timestamp="Yesterday, 10:15 PM" mine />
-    ),
+    message: {
+      content: (
+        <Chat.Message content="Hello" author="John Doe" timestamp="Yesterday, 10:15 PM" mine />
+      ),
+    },
     key: 'message-id-1',
   },
   {
-    content: (
-      <Chat.Message
-        content="Hi"
-        author="Jane Doe"
-        timestamp="Yesterday, 10:15 PM"
-        avatar={janeAvatar}
-      />
-    ),
+    gutter: { content: <Avatar {...janeAvatar} /> },
+    message: {
+      content: <Chat.Message content="Hi" author="Jane Doe" timestamp="Yesterday, 10:15 PM" />,
+    },
     key: 'message-id-2',
   },
   {
-    content: (
-      <Chat.Message
-        content="Would you like to grab a lunch?"
-        author="John Doe"
-        timestamp="Yesterday, 10:16 PM"
-        mine
-      />
-    ),
+    message: { content: <Chat.Message content="What's up?" /> },
     key: 'message-id-3',
   },
   {
-    content: (
-      <Chat.Message
-        content="Sure! Let's try the new place downtown"
-        author="Jane Doe"
-        timestamp="Yesterday, 10:15 PM"
-        avatar={janeAvatar}
-      />
-    ),
+    message: {
+      content: (
+        <Chat.Message
+          content="Would you like to grab a lunch?"
+          author="John Doe"
+          timestamp="Yesterday, 10:16 PM"
+          mine
+        />
+      ),
+    },
     key: 'message-id-4',
   },
   {
-    content: <Divider content="Today" color="primary" important />,
+    gutter: { content: <Avatar {...janeAvatar} /> },
+    message: {
+      content: (
+        <Chat.Message
+          content="Sure! Let's try the new place downtown"
+          author="Jane Doe"
+          timestamp="Yesterday, 10:15 PM"
+        />
+      ),
+    },
     key: 'message-id-5',
   },
   {
-    content: (
-      <Chat.Message
-        content="Let's have a call"
-        author="John Doe"
-        timestamp="Today, 11:15 PM"
-        mine
-      />
-    ),
+    message: <Divider content="Today" color="primary" important />,
     key: 'message-id-6',
   },
+  {
+    message: {
+      content: (
+        <Chat.Message
+          content="Let's have a call"
+          author="John Doe"
+          timestamp="Today, 11:15 PM"
+          mine
+        />
+      ),
+    },
+    key: 'message-id-7',
+  },
 ]
 
 const ChatExample = () => <Chat items={items} />

docs/src/examples/components/Chat/Types/ChatExampleGutterPosition.shorthand.tsx

@@ -0,0 +1,33 @@
+import React from 'react'
+import { Avatar, Chat } from '@stardust-ui/react'
+
+const [janeAvatar, johnAvatar] = [
+  'public/images/avatar/small/ade.jpg',
+  'public/images/avatar/small/joe.jpg',
+].map(src => ({
+  image: src,
+  status: { color: 'green', icon: 'check' },
+}))
+
+const items = [
+  {
+    gutterPosition: 'start',
+    gutter: { content: <Avatar {...johnAvatar} /> },
+    message: {
+      content: <Chat.Message content="Hello" author="John Doe" timestamp="Yesterday, 10:15 PM" />,
+    },
+    key: 'message-id-1',
+  },
+  {
+    gutterPosition: 'end',
+    gutter: { content: <Avatar {...janeAvatar} /> },
+    message: {
+      content: <Chat.Message content="Hi" author="Jane Doe" timestamp="Yesterday, 10:15 PM" mine />,
+    },
+    key: 'message-id-2',
+  },
+]
+
+const ChatExampleGutterPosition = () => <Chat items={items} />
+
+export default ChatExampleGutterPosition

docs/src/examples/components/Chat/Types/ChatMessageExampleStyled.shorthand.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Chat, Provider } from '@stardust-ui/react'
+import { Avatar, Chat, Provider } from '@stardust-ui/react'
 
 const janeAvatar = {
   image: 'public/images/avatar/small/ade.jpg',
@@ -40,23 +40,26 @@ const ChatMessageExampleStyled = () => (
   <Provider
     theme={{
       componentStyles: {
-        ChatMessage: {
-          root: { ...slotLabelStyles('root'), backgroundColor: '#2E8B57' },
-          avatar: {
-            ...slotLabelStyles('avatar', { bottom: '-11px' }),
+        ChatItem: {
+          root: { ...slotLabelStyles('chat-item-root'), backgroundColor: 'transparent' },
+          gutter: {
+            ...slotLabelStyles('gutter', { bottom: '-11px' }),
             backgroundColor: '#FF00FF',
             padding: 0,
+            position: 'absolute',
           },
-          messageBody: { ...slotLabelStyles('messageBody'), backgroundColor: '#87CEFA' },
+        },
+        ChatMessage: {
+          root: { ...slotLabelStyles('chat-message-root'), backgroundColor: '#87CEFA' },
           author: { ...slotLabelStyles('author'), backgroundColor: '#E0FFFF' },
           content: { ...slotLabelStyles('content'), backgroundColor: '#F08080' },
           timestamp: { ...slotLabelStyles('timestamp'), backgroundColor: '#FFFFE0' },
         },
       },
       componentVariables: {
         ChatMessage: siteVars => ({
-          messageBody: {
-            focusOutlineColor: siteVars.white,
+          content: {
+            focusOutlineColor: siteVars.red,
           },
         }),
       },
@@ -65,26 +68,30 @@ const ChatMessageExampleStyled = () => (
     <Chat
       items={[
         {
-          content: (
-            <Chat.Message
-              content="Hey, do you know any restaurants with good food?"
-              author="John Doe"
-              timestamp="Yesterday, 10:15 PM"
-              mine
-            />
-          ),
+          message: {
+            content: (
+              <Chat.Message
+                content="Hey, do you know any restaurants with good food?"
+                author="John Doe"
+                timestamp="Yesterday, 10:15 PM"
+                mine
+              />
+            ),
+          },
           key: 'message-id-1',
         },
         {
           key: 'message-id-2',
-          content: (
-            <Chat.Message
-              content={{ content }}
-              author="Jane Doe"
-              timestamp="Yesterday, 10:15 PM"
-              avatar={janeAvatar}
-            />
-          ),
+          gutter: { content: <Avatar {...janeAvatar} /> },
+          message: {
+            content: (
+              <Chat.Message
+                content={{ content }}
+                author="Jane Doe"
+                timestamp="Yesterday, 10:15 PM"
+              />
+            ),
+          },
         },
       ]}
     />

docs/src/examples/components/Chat/Types/index.tsx

@@ -9,6 +9,11 @@ const Types = () => (
       description="A default Chat."
       examplePath="components/Chat/Types/ChatExample"
     />
+    <ComponentExample
+      title="Gutter"
+      description="A Chat can have a gutter positioned at the start or at the end of a message."
+      examplePath="components/Chat/Types/ChatExampleGutterPosition"
+    />
     <ComponentExample
       title="Styled Chat Item"
       description="A Chat item with custom styles for every slot."