- addressed comments;

- improved examples;
- added fix for gutter being created by default;

Author: bmdalex

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

@@ -14,7 +14,6 @@ const ChatExample = () => (
       }
     />
     <Chat.Item
-      gutterPosition="start"
       gutter={
         <Chat.Gutter>
           <Avatar {...janeAvatar} />
@@ -24,7 +23,6 @@ const ChatExample = () => (
     />
     <Chat.Item content={<Chat.Message content="What's up?" />} />
     <Chat.Item
-      gutterPosition="start"
       content={
         <Chat.Message
           content="Would you like to grab a lunch?"
@@ -35,7 +33,6 @@ const ChatExample = () => (
       }
     />
     <Chat.Item
-      gutterPosition="start"
       gutter={
         <Chat.Gutter>
           <Avatar {...janeAvatar} />

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

@@ -0,0 +1,29 @@
+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} /> },
+    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 />,
+    key: 'message-id-2',
+  },
+]
+
+const ChatExampleGutterPosition = () => <Chat items={items} />
+
+export default ChatExampleGutterPosition

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

@@ -0,0 +1,35 @@
+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 ChatExampleGutterPosition = () => (
+  <Chat>
+    <Chat.Item
+      gutterPosition="start"
+      gutter={
+        <Chat.Gutter>
+          <Avatar {...johnAvatar} />
+        </Chat.Gutter>
+      }
+      content={<Chat.Message content="Hello" author="John Doe" timestamp="Yesterday, 10:15 PM" />}
+    />
+    <Chat.Item
+      gutterPosition="end"
+      gutter={
+        <Chat.Gutter>
+          <Avatar {...janeAvatar} />
+        </Chat.Gutter>
+      }
+      content={<Chat.Message content="Hi" author="Jane Doe" timestamp="Yesterday, 10:15 PM" mine />}
+    />
+  </Chat>
+)
+
+export default ChatExampleGutterPosition

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

@@ -79,7 +79,6 @@ const ChatMessageExampleStyled = () => (
         }
       />
       <Chat.Item
-        gutterPosition="start"
         gutter={{ content: <Avatar {...janeAvatar} /> }}
         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."

src/components/Chat/ChatItem.tsx

@@ -45,7 +45,7 @@ class ChatItem extends UIComponent<Extendable<ChatItemProps>, any> {
 
   static defaultProps = {
     as: 'li',
-    gutterPosition: 'end',
+    gutterPosition: 'start',
   }
 
   renderComponent({ ElementType, classes, rest, styles }: RenderResultConfig<ChatItemProps>) {
@@ -60,7 +60,7 @@ class ChatItem extends UIComponent<Extendable<ChatItemProps>, any> {
 
   private renderChatItem() {
     const { content, gutter, gutterPosition } = this.props
-    const gutterElement = ChatGutter.create(gutter)
+    const gutterElement = gutter && ChatGutter.create(gutter)
 
     return (
       <>