feat(ChatMessage): add badge and badgePosition props

[mnajdova]

This PR adds the badge and badgePosition ('start' | 'end') props to the ChatMessage.
TODO

• update changelog
• provide examples for the badge

Here are examples of this:

• Mine message with badge at the end:

 <Chat.Message
          content="Hello"
          author="John Doe"
          timestamp="Yesterday, 10:15 PM"
          mine
          badge={{
            icon: 'redbang',
            color: 'red',
          }}
/>

• Mine message with badge at the start

 <Chat.Message
          content="Hello"
          author="John Doe"
          timestamp="Yesterday, 10:15 PM"
          mine
          badge={{
            icon: 'redbang',
            color: 'red',
          }}
         badgePosition="start"
/>

• Other message with badge at the end

       <Chat.Message
          content="Hi"
          author="Jane Doe"
          timestamp="Yesterday, 10:15 PM"
          badge={{
            icon: 'mention',
            color: 'red',
          }}
        />

• Other message with badge at the start

        <Chat.Message
          content="Hi"
          author="Jane Doe"
          timestamp="Yesterday, 10:15 PM"
          badge={{
            icon: 'mention',
            color: 'red',
          }}
          badgePosition="start"
        />

Example in chat:

[layershifter]

I am not sure about badge, can we go with label for now?
And when we will have decision about naming just rename it everywhere?

[codecov]

Codecov Report

Merging #823 into master will not change coverage.
The diff coverage is n/a.

@@           Coverage Diff           @@
##           master     #823   +/-   ##
=======================================
  Coverage   93.54%   93.54%           
=======================================
  Files          21       21           
  Lines         728      728           
  Branches       69       69           
=======================================
  Hits          681      681           
  Misses         47       47

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update a8f10c8...5cd1c7f. Read the comment docs.

[mnajdova]

@layershifter in my opinion label as a word has nothing semantically with the ChatMessage, although it is shorthand for label (yep, the name had already produced us enough headache). Even if this was shorthand for the Icon component, I would still go with badge, as it is much more clear what it represents...

[miroslavstastny]

What about Styled Chat Item example?

[miroslavstastny]

This breaks when you change icon size. Any chance this could work without absolute values?

Something like:

      boxShadow: v.badgeShadow,
      position: 'absolute',
      padding: pxToRem(4),
      height: 'auto',
      width: 'auto',
      borderRadius: '50%',
      top: pxToRem(4),
      zIndex: '1',
      [sidePosition]: 0,
      transform: p.badgePosition === 'start' ? 'translateX(-50%)' : 'translateX(50%)',

[bmdalex]

+1 for using transform

[mnajdova]

Thanks Miro, I've changed the styles, work with every size of icon, and the default is according to the specs. I've added badge in the styles ChatItem example as well. Let me know if there is anything else.

[bmdalex]

looks good, I vote for having badge for name for now
https://ant.design/components/badge/

[kuzhelov]

not sure about this default - lot of examples where badge appears at start

[kuzhelov]

not sure about default badge's position - I would rather suggest to make it start one.