Chat.Item and Chat.Mesasge refactor

[bmdalex]

Chat.Item and Chat.Mesasge refactor

Problem description

We need to refactor our Chat subcomponents, Chat.Item and Chat.Message for the following reasons:

• need better structuring and more flexibility;
• need to solve specific clients needs when it comes to layout of components and providing very specific content to specific areas;
• Chat.Message is too specific (the avatar should be more top level)
• Chat.Item is not specific enough (needs gutter)

Current structure:

shorthand:

<Chat items={[
  {
    content: <AnyComponent .../>,
  },
  {
    content: (
      <Chat.Message
        content="Let's have a call"
        author="John Doe"
        timestamp="Today, 11:15 PM"
        avatar={{ image: '', status: '' }}
      />
    ),
  },
]} />

children:

<Chat>
  <Chat.Item>
    <AnyComponent .../>
  </Chat.Item>
  <Chat.Item>
    <Chat.Message
      content="Let's have a call"
      author="John Doe"
      timestamp="Today, 11:15 PM"
      avatar={{ image: '', status: '' }}
    />
  </Chat.Item>
</Chat>

Solution 1:

shorthand:

<Chat items={[
  {
    content: <AnyComponent .../>,
  },
  {
    gutter: (
      <Avatar image="" status=""/>
    )
    content: (
      <Chat.Message
        content="Let's have a call"
        author="John Doe"
        timestamp="Today, 11:15 PM"
      />
    ),
  },
]} />

children: supported only partially (Chat and Chat.Item when defining only content):

<Chat>
  <Chat.Item>
    <AnyComponent .../>
  </Chat.Item>
  <Chat.Item
    gutter={<Avatar image="" status=""/>}
    content={
      <Chat.Message
        content="Let's have a call"
        author="John Doe"
        timestamp="Today, 11:15 PM"
      />
    }
  />
</Chat>

Solution 2:

shorthand:

<Chat items={[
  {
    content: <AnyComponent .../>,
  },
  {
    content: (
      <Chat.Message
        gutter={{
          content: <Avatar image="" status=""/>,
        }}
        body={{
          content: 'Let's have a cal',
          author: 'John Doe',
          timestamp: 'Today, 11:15 PM'
        }}
      />
    ),
  },
]} />

children (supported for Chat and Chat.Item, not for Chat.Message):

<Chat>
  <Chat.Item>
    <AnyComponent .../>
  </Chat.Item>
  <Chat.Item>
    <Chat.Message
        gutter={
          <Chat.Message.Gutter>
            <Avatar image="" status=""/>
          </Chat.Message.Gutter>
        }
        body={
          <Chat.Message.Body
            content="Let's have a call"
            author="John Doe"
            timestamp="Today, 11:15 PM"
          />
        }
    />
  </Chat.Item>
</Chat>