- removed Chat.Gutter;

- replaced Chat.Item content prop with message;
- deprecated Children API;

Author: bmdalex

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

@@ -8,55 +8,65 @@ 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',
   },
   {
     gutter: { content: <Avatar {...janeAvatar} /> },
-    content: <Chat.Message content="Hi" author="Jane Doe" timestamp="Yesterday, 10:15 PM" />,
+    message: {
+      content: <Chat.Message content="Hi" author="Jane Doe" timestamp="Yesterday, 10:15 PM" />,
+    },
     key: 'message-id-2',
   },
   {
-    content: <Chat.Message content="What's up?" />,
+    message: { content: <Chat.Message content="What's up?" /> },
     key: 'message-id-3',
   },
   {
-    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="Would you like to grab a lunch?"
+          author="John Doe"
+          timestamp="Yesterday, 10:16 PM"
+          mine
+        />
+      ),
+    },
     key: 'message-id-4',
   },
   {
     gutter: { content: <Avatar {...janeAvatar} /> },
-    content: (
-      <Chat.Message
-        content="Sure! Let's try the new place downtown"
-        author="Jane Doe"
-        timestamp="Yesterday, 10:15 PM"
-      />
-    ),
+    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: <Divider content="Today" color="primary" important />,
+    message: <Divider content="Today" color="primary" important />,
     key: 'message-id-6',
   },
   {
-    content: (
-      <Chat.Message
-        content="Let's have a call"
-        author="John Doe"
-        timestamp="Today, 11:15 PM"
-        mine
-      />
-    ),
+    message: {
+      content: (
+        <Chat.Message
+          content="Let's have a call"
+          author="John Doe"
+          timestamp="Today, 11:15 PM"
+          mine
+        />
+      ),
+    },
     key: 'message-id-7',
   },
 ]

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

@@ -13,13 +13,17 @@ const items = [
   {
     gutterPosition: 'start',
     gutter: { content: <Avatar {...johnAvatar} /> },
-    content: <Chat.Message content="Hello" author="John Doe" timestamp="Yesterday, 10:15 PM" />,
+    message: {
+      content: <Chat.Message content="Hello" author="John Doe" timestamp="Yesterday, 10:15 PM" />,
+    },
     key: 'message-id-1',
   },
   {
     gutterPosition: 'end',
     gutter: { content: <Avatar {...janeAvatar} /> },
-    content: <Chat.Message content="Hi" author="Jane Doe" timestamp="Yesterday, 10:15 PM" mine />,
+    message: {
+      content: <Chat.Message content="Hi" author="Jane Doe" timestamp="Yesterday, 10:15 PM" mine />,
+    },
     key: 'message-id-2',
   },
 ]

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

@@ -42,9 +42,7 @@ const ChatMessageExampleStyled = () => (
       componentStyles: {
         ChatItem: {
           root: { ...slotLabelStyles('chat-item-root'), backgroundColor: 'transparent' },
-        },
-        ChatGutter: {
-          root: {
+          gutter: {
             ...slotLabelStyles('gutter', { bottom: '-11px' }),
             backgroundColor: '#FF00FF',
             padding: 0,
@@ -70,22 +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',
           gutter: { content: <Avatar {...janeAvatar} /> },
-          content: (
-            <Chat.Message content={{ content }} author="Jane Doe" timestamp="Yesterday, 10:15 PM" />
-          ),
+          message: {
+            content: (
+              <Chat.Message
+                content={{ content }}
+                author="Jane Doe"
+                timestamp="Yesterday, 10:15 PM"
+              />
+            ),
+          },
         },
       ]}
     />

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

@@ -130,9 +130,9 @@ const gutterContent = (
 const AsyncShorthand = () => (
   <Chat
     items={[
-      { key: 'a', gutter: { content: gutterContent }, content: <CustomChatMessage /> },
-      { key: 'b', gutter: { content: gutterContent }, content: <CustomChatMessage /> },
-      { key: 'c', gutter: { content: gutterContent }, content: <CustomChatMessage /> },
+      { key: 'a', gutter: { content: gutterContent }, message: { content: <CustomChatMessage /> } },
+      { key: 'b', gutter: { content: gutterContent }, message: { content: <CustomChatMessage /> } },
+      { key: 'c', gutter: { content: gutterContent }, message: { content: <CustomChatMessage /> } },
     ]}
   />
 )