From 0f0aea4c065400d72ff2315e456fa8656ee33e51 Mon Sep 17 00:00:00 2001
From: manajdov <manajdov@microsoft.com>
Date: Thu, 24 Jan 2019 11:25:40 +0100
Subject: [PATCH 01/13] -wip

---
 .../Chat/Types/ChatExample.shorthand.tsx      |  9 ++++++++-
 src/components/Chat/ChatItem.tsx              | 15 ++++++++++++---
 src/components/Chat/ChatMessage.tsx           | 19 +++++++++++++++----
 .../teams/components/Chat/chatItemStyles.ts   | 15 +++++++++++++++
 4 files changed, 50 insertions(+), 8 deletions(-)

diff --git a/docs/src/examples/components/Chat/Types/ChatExample.shorthand.tsx b/docs/src/examples/components/Chat/Types/ChatExample.shorthand.tsx
index f8b70b4768..76cb8e4e1f 100644
--- a/docs/src/examples/components/Chat/Types/ChatExample.shorthand.tsx
+++ b/docs/src/examples/components/Chat/Types/ChatExample.shorthand.tsx
@@ -20,10 +20,17 @@ const items = [
     message: {
       content: <Chat.Message content="Hi" author="Jane Doe" timestamp="Yesterday, 10:15 PM" />,
     },
+    grouped: true,
     key: 'message-id-2',
   },
   {
-    message: { content: <Chat.Message content="What's up?" /> },
+    gutter: { content: <Avatar {...janeAvatar} /> },
+    message: {
+      content: (
+        <Chat.Message content="What's up?" author="Jane Doe" timestamp="Yesterday, 10:15 PM" />
+      ),
+    },
+    grouped: true,
     key: 'message-id-3',
   },
   {
diff --git a/src/components/Chat/ChatItem.tsx b/src/components/Chat/ChatItem.tsx
index dbbcf8b49a..319f983389 100644
--- a/src/components/Chat/ChatItem.tsx
+++ b/src/components/Chat/ChatItem.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react'
 import * as PropTypes from 'prop-types'
+import cx from 'classnames'
 
 import { ReactProps, ShorthandValue } from '../../../types/utils'
 import {
@@ -17,6 +18,9 @@ import Box from '../Box/Box'
 import { ComponentSlotStylesPrepared } from '../../themes/types'
 
 export interface ChatItemProps extends UIComponentProps, ChildrenComponentProps {
+  /** Indicates whether the ChatItem is part of a batch. */
+  grouped?: boolean
+
   /** Chat items can have a gutter. */
   gutter?: ShorthandValue
 
@@ -37,6 +41,7 @@ class ChatItem extends UIComponent<ReactProps<ChatItemProps>, any> {
 
   static propTypes = {
     ...commonPropTypes.createCommon({ content: false }),
+    grouped: PropTypes.bool,
     gutter: customPropTypes.itemShorthand,
     gutterPosition: PropTypes.oneOf(['start', 'end']),
     message: customPropTypes.itemShorthand,
@@ -53,13 +58,13 @@ class ChatItem extends UIComponent<ReactProps<ChatItemProps>, any> {
     unhandledProps,
     styles,
   }: RenderResultConfig<ChatItemProps>) {
-    const { children } = this.props
+    const { children, grouped } = this.props
 
     return (
       <ElementType
         {...rtlTextContainer.getAttributes({ forElements: [children] })}
         {...unhandledProps}
-        className={classes.root}
+        className={grouped ? cx(classes.root, `${ChatItem.className}-grouped`) : classes.root}
       >
         {childrenExist(children) ? children : this.renderChatItem(styles)}
       </ElementType>
@@ -68,7 +73,11 @@ class ChatItem extends UIComponent<ReactProps<ChatItemProps>, any> {
 
   private renderChatItem(styles: ComponentSlotStylesPrepared) {
     const { message, gutter, gutterPosition } = this.props
-    const gutterElement = gutter && Box.create(gutter, { defaultProps: { styles: styles.gutter } })
+    const gutterElement =
+      gutter &&
+      Box.create(gutter, {
+        defaultProps: { styles: styles.gutter, className: `${ChatItem.className}__gutter` },
+      })
 
     return (
       <>
diff --git a/src/components/Chat/ChatMessage.tsx b/src/components/Chat/ChatMessage.tsx
index 93d1dc1e18..dcd9ad7207 100644
--- a/src/components/Chat/ChatMessage.tsx
+++ b/src/components/Chat/ChatMessage.tsx
@@ -102,7 +102,7 @@ class ChatMessage extends UIComponent<ReactProps<ChatMessageProps>, ChatMessageS
     unhandledProps,
     styles,
   }: RenderResultConfig<ChatMessageProps>) {
-    const { author, children, content, mine, timestamp } = this.props
+    const { author, children, content, mine, timestamp, grouped } = this.props
     const childrenPropExists = childrenExist(children)
     const className = childrenPropExists ? cx(classes.root, classes.content) : classes.root
 
@@ -113,16 +113,27 @@ class ChatMessage extends UIComponent<ReactProps<ChatMessageProps>, ChatMessageS
         {...rtlTextContainer.getAttributes({ forElements: [children] })}
         {...unhandledProps}
         onFocus={this.handleFocus}
-        className={className}
+        className={grouped ? cx(className, `${ChatMessage.className}-grouped`) : className}
       >
         {childrenPropExists ? (
           children
         ) : (
           <>
             {!mine &&
-              Text.create(author, { defaultProps: { size: 'small', styles: styles.author } })}
+              Text.create(author, {
+                defaultProps: {
+                  size: 'small',
+                  styles: styles.author,
+                  className: `${ChatMessage.className}__author`,
+                },
+              })}
             {Text.create(timestamp, {
-              defaultProps: { size: 'small', styles: styles.timestamp, timestamp: true },
+              defaultProps: {
+                size: 'small',
+                styles: styles.timestamp,
+                timestamp: true,
+                className: `${ChatMessage.className}__timestamp`,
+              },
             })}
             {Box.create(content, { defaultProps: { styles: styles.content } })}
           </>
diff --git a/src/themes/teams/components/Chat/chatItemStyles.ts b/src/themes/teams/components/Chat/chatItemStyles.ts
index 6f9458713c..031265ba69 100644
--- a/src/themes/teams/components/Chat/chatItemStyles.ts
+++ b/src/themes/teams/components/Chat/chatItemStyles.ts
@@ -1,12 +1,27 @@
 import { ICSSInJSStyle, ComponentSlotStylesInput } from '../../../types'
 import { ChatItemVariables } from './chatItemVariables'
 import { ChatItemProps } from '../../../../components/Chat/ChatItem'
+import { pxToRem } from '../../../../lib'
 
 const chatItemStyles: ComponentSlotStylesInput<ChatItemProps, ChatItemVariables> = {
   root: ({ props: p, variables: v }): ICSSInJSStyle => ({
     position: 'relative',
     marginTop: v.margin,
     marginBottom: v.margin,
+    ...(p.grouped && {
+      '& + .ui-chat__item-grouped': {
+        marginTop: `-${pxToRem(6)}`,
+        '& .ui-chat__item__gutter': {
+          display: 'none',
+        },
+        '& .ui-chat__message__author': {
+          display: 'none',
+        },
+        '& .ui-chat__message__timestamp': {
+          display: 'none',
+        },
+      },
+    }),
   }),
 
   gutter: ({ props: p, variables: v }): ICSSInJSStyle => ({

From 28b7d88d2d65e5b09979e109f9c3333b3b3aed67 Mon Sep 17 00:00:00 2001
From: manajdov <manajdov@microsoft.com>
Date: Thu, 24 Jan 2019 12:50:43 +0100
Subject: [PATCH 02/13] -wip

---
 .../Chat/Types/ChatExample.shorthand.tsx      |  3 +-
 src/components/Chat/ChatItem.tsx              |  9 ++--
 src/components/Chat/ChatMessage.tsx           |  4 +-
 .../teams/components/Chat/chatItemStyles.ts   | 48 ++++++++++++-------
 .../components/Chat/chatMessageStyles.ts      |  7 ++-
 .../components/Chat/chatMessageVariables.ts   |  2 +-
 6 files changed, 44 insertions(+), 29 deletions(-)

diff --git a/docs/src/examples/components/Chat/Types/ChatExample.shorthand.tsx b/docs/src/examples/components/Chat/Types/ChatExample.shorthand.tsx
index 76cb8e4e1f..b952b6fda8 100644
--- a/docs/src/examples/components/Chat/Types/ChatExample.shorthand.tsx
+++ b/docs/src/examples/components/Chat/Types/ChatExample.shorthand.tsx
@@ -20,7 +20,6 @@ const items = [
     message: {
       content: <Chat.Message content="Hi" author="Jane Doe" timestamp="Yesterday, 10:15 PM" />,
     },
-    grouped: true,
     key: 'message-id-2',
   },
   {
@@ -30,7 +29,7 @@ const items = [
         <Chat.Message content="What's up?" author="Jane Doe" timestamp="Yesterday, 10:15 PM" />
       ),
     },
-    grouped: true,
+    consecutive: true,
     key: 'message-id-3',
   },
   {
diff --git a/src/components/Chat/ChatItem.tsx b/src/components/Chat/ChatItem.tsx
index 319f983389..abf73a1c78 100644
--- a/src/components/Chat/ChatItem.tsx
+++ b/src/components/Chat/ChatItem.tsx
@@ -1,6 +1,5 @@
 import * as React from 'react'
 import * as PropTypes from 'prop-types'
-import cx from 'classnames'
 
 import { ReactProps, ShorthandValue } from '../../../types/utils'
 import {
@@ -19,7 +18,7 @@ import { ComponentSlotStylesPrepared } from '../../themes/types'
 
 export interface ChatItemProps extends UIComponentProps, ChildrenComponentProps {
   /** Indicates whether the ChatItem is part of a batch. */
-  grouped?: boolean
+  consecutive?: boolean
 
   /** Chat items can have a gutter. */
   gutter?: ShorthandValue
@@ -41,7 +40,7 @@ class ChatItem extends UIComponent<ReactProps<ChatItemProps>, any> {
 
   static propTypes = {
     ...commonPropTypes.createCommon({ content: false }),
-    grouped: PropTypes.bool,
+    consecutive: PropTypes.bool,
     gutter: customPropTypes.itemShorthand,
     gutterPosition: PropTypes.oneOf(['start', 'end']),
     message: customPropTypes.itemShorthand,
@@ -58,13 +57,13 @@ class ChatItem extends UIComponent<ReactProps<ChatItemProps>, any> {
     unhandledProps,
     styles,
   }: RenderResultConfig<ChatItemProps>) {
-    const { children, grouped } = this.props
+    const { children } = this.props
 
     return (
       <ElementType
         {...rtlTextContainer.getAttributes({ forElements: [children] })}
         {...unhandledProps}
-        className={grouped ? cx(classes.root, `${ChatItem.className}-grouped`) : classes.root}
+        className={classes.root}
       >
         {childrenExist(children) ? children : this.renderChatItem(styles)}
       </ElementType>
diff --git a/src/components/Chat/ChatMessage.tsx b/src/components/Chat/ChatMessage.tsx
index dcd9ad7207..21183a5775 100644
--- a/src/components/Chat/ChatMessage.tsx
+++ b/src/components/Chat/ChatMessage.tsx
@@ -102,7 +102,7 @@ class ChatMessage extends UIComponent<ReactProps<ChatMessageProps>, ChatMessageS
     unhandledProps,
     styles,
   }: RenderResultConfig<ChatMessageProps>) {
-    const { author, children, content, mine, timestamp, grouped } = this.props
+    const { author, children, content, mine, timestamp } = this.props
     const childrenPropExists = childrenExist(children)
     const className = childrenPropExists ? cx(classes.root, classes.content) : classes.root
 
@@ -113,7 +113,7 @@ class ChatMessage extends UIComponent<ReactProps<ChatMessageProps>, ChatMessageS
         {...rtlTextContainer.getAttributes({ forElements: [children] })}
         {...unhandledProps}
         onFocus={this.handleFocus}
-        className={grouped ? cx(className, `${ChatMessage.className}-grouped`) : className}
+        className={className}
       >
         {childrenPropExists ? (
           children
diff --git a/src/themes/teams/components/Chat/chatItemStyles.ts b/src/themes/teams/components/Chat/chatItemStyles.ts
index 031265ba69..a8177f7efa 100644
--- a/src/themes/teams/components/Chat/chatItemStyles.ts
+++ b/src/themes/teams/components/Chat/chatItemStyles.ts
@@ -2,38 +2,52 @@ import { ICSSInJSStyle, ComponentSlotStylesInput } from '../../../types'
 import { ChatItemVariables } from './chatItemVariables'
 import { ChatItemProps } from '../../../../components/Chat/ChatItem'
 import { pxToRem } from '../../../../lib'
+import ChatMessage from '../../../../components/Chat/ChatMessage'
+
+const chatMessageClassname = `& .${ChatMessage.className}`
+const chatMessageAuthorClassname = `& .${ChatMessage.className}__author`
+const chatMessageTimestampClassname = `& .${ChatMessage.className}__timestamp`
 
 const chatItemStyles: ComponentSlotStylesInput<ChatItemProps, ChatItemVariables> = {
-  root: ({ props: p, variables: v }): ICSSInJSStyle => ({
+  root: ({ props: { consecutive }, variables: v }): ICSSInJSStyle => ({
     position: 'relative',
-    marginTop: v.margin,
-    marginBottom: v.margin,
-    ...(p.grouped && {
-      '& + .ui-chat__item-grouped': {
-        marginTop: `-${pxToRem(6)}`,
-        '& .ui-chat__item__gutter': {
-          display: 'none',
-        },
-        '& .ui-chat__message__author': {
-          display: 'none',
-        },
-        '& .ui-chat__message__timestamp': {
-          display: 'none',
-        },
+    ...(!consecutive && { marginTop: pxToRem(16) }),
+    ...(consecutive && {
+      marginTop: pxToRem(2),
+      [chatMessageAuthorClassname]: {
+        display: 'none',
+      },
+      [chatMessageTimestampClassname]: {
+        display: 'none',
       },
     }),
+    marginBottom: 0,
   }),
 
   gutter: ({ props: p, variables: v }): ICSSInJSStyle => ({
     position: 'absolute',
-    marginTop: v.gutterMargin,
     [p.gutterPosition === 'end' ? 'right' : 'left']: 0,
+    ...(p.consecutive && {
+      visibility: 'hidden',
+    }),
   }),
 
-  message: ({ props: p, variables: v }): ICSSInJSStyle => ({
+  message: ({ props: { consecutive }, variables: v }): ICSSInJSStyle => ({
     position: 'relative',
     marginLeft: v.messageMargin,
     marginRight: v.messageMargin,
+    ...(consecutive && {
+      [chatMessageClassname]: {
+        paddingTop: pxToRem(5),
+        paddingBottom: pxToRem(7),
+      },
+    }),
+    ...(!consecutive && {
+      [chatMessageClassname]: {
+        paddingTop: pxToRem(8),
+        paddingBottom: pxToRem(10),
+      },
+    }),
   }),
 }
 
diff --git a/src/themes/teams/components/Chat/chatMessageStyles.ts b/src/themes/teams/components/Chat/chatMessageStyles.ts
index cdcdca3554..bcb611e34e 100644
--- a/src/themes/teams/components/Chat/chatMessageStyles.ts
+++ b/src/themes/teams/components/Chat/chatMessageStyles.ts
@@ -5,7 +5,8 @@ import { ChatMessageVariables } from './chatMessageVariables'
 const chatMessageStyles: ComponentSlotStylesInput<ChatMessageProps, ChatMessageVariables> = {
   root: ({ props: p, variables: v }): ICSSInJSStyle => ({
     display: 'inline-block',
-    padding: v.padding,
+    paddingLeft: v.padding,
+    paddingRight: v.padding,
     borderRadius: v.borderRadius,
     border: v.border,
     color: v.color,
@@ -23,7 +24,9 @@ const chatMessageStyles: ComponentSlotStylesInput<ChatMessageProps, ChatMessageV
   }),
 
   author: ({ props: p, variables: v }): ICSSInJSStyle => ({
-    display: p.mine ? 'none' : undefined,
+    ...(p.mine && {
+      display: 'none',
+    }),
     marginRight: v.authorMargin,
   }),
 
diff --git a/src/themes/teams/components/Chat/chatMessageVariables.ts b/src/themes/teams/components/Chat/chatMessageVariables.ts
index ececa0b022..2789159246 100644
--- a/src/themes/teams/components/Chat/chatMessageVariables.ts
+++ b/src/themes/teams/components/Chat/chatMessageVariables.ts
@@ -18,7 +18,7 @@ export default (siteVars): ChatMessageVariables => ({
   backgroundColorMine: '#E5E5F1',
   borderRadius: '0.3rem',
   color: 'rgb(64, 64, 64)',
-  padding: pxToRem(14),
+  padding: pxToRem(16),
   authorMargin: pxToRem(10),
   contentFocusOutlineColor: siteVars.brand,
   border: 'none',

From 26de235f087dc0bf18f639607b501d1687c99500 Mon Sep 17 00:00:00 2001
From: manajdov <manajdov@microsoft.com>
Date: Thu, 24 Jan 2019 12:54:39 +0100
Subject: [PATCH 03/13] -reverted gutter margin top

---
 src/themes/teams/components/Chat/chatItemStyles.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/themes/teams/components/Chat/chatItemStyles.ts b/src/themes/teams/components/Chat/chatItemStyles.ts
index a8177f7efa..13e3e284c5 100644
--- a/src/themes/teams/components/Chat/chatItemStyles.ts
+++ b/src/themes/teams/components/Chat/chatItemStyles.ts
@@ -26,6 +26,7 @@ const chatItemStyles: ComponentSlotStylesInput<ChatItemProps, ChatItemVariables>
 
   gutter: ({ props: p, variables: v }): ICSSInJSStyle => ({
     position: 'absolute',
+    marginTop: v.gutterMargin,
     [p.gutterPosition === 'end' ? 'right' : 'left']: 0,
     ...(p.consecutive && {
       visibility: 'hidden',

From e032213d3f0d4d42490057ba6cbb1d4997e35616 Mon Sep 17 00:00:00 2001
From: manajdov <manajdov@microsoft.com>
Date: Thu, 24 Jan 2019 18:08:20 +0100
Subject: [PATCH 04/13] -added grouped prop values: start, end and middle

---
 .../Chat/Types/ChatExample.shorthand.tsx      | 13 ++-
 src/components/Chat/ChatItem.tsx              |  6 +-
 .../teams/components/Chat/chatItemStyles.ts   | 99 +++++++++++--------
 .../components/Chat/chatMessageStyles.ts      |  3 +
 4 files changed, 78 insertions(+), 43 deletions(-)

diff --git a/docs/src/examples/components/Chat/Types/ChatExample.shorthand.tsx b/docs/src/examples/components/Chat/Types/ChatExample.shorthand.tsx
index b952b6fda8..0e539e5551 100644
--- a/docs/src/examples/components/Chat/Types/ChatExample.shorthand.tsx
+++ b/docs/src/examples/components/Chat/Types/ChatExample.shorthand.tsx
@@ -20,6 +20,7 @@ const items = [
     message: {
       content: <Chat.Message content="Hi" author="Jane Doe" timestamp="Yesterday, 10:15 PM" />,
     },
+    grouped: 'start',
     key: 'message-id-2',
   },
   {
@@ -29,7 +30,17 @@ const items = [
         <Chat.Message content="What's up?" author="Jane Doe" timestamp="Yesterday, 10:15 PM" />
       ),
     },
-    consecutive: true,
+    grouped: 'middle',
+    key: 'message-id-3',
+  },
+  {
+    gutter: { content: <Avatar {...janeAvatar} /> },
+    message: {
+      content: (
+        <Chat.Message content="What's new?" author="Jane Doe" timestamp="Yesterday, 10:15 PM" />
+      ),
+    },
+    grouped: 'end',
     key: 'message-id-3',
   },
   {
diff --git a/src/components/Chat/ChatItem.tsx b/src/components/Chat/ChatItem.tsx
index abf73a1c78..62da06f052 100644
--- a/src/components/Chat/ChatItem.tsx
+++ b/src/components/Chat/ChatItem.tsx
@@ -17,8 +17,8 @@ import Box from '../Box/Box'
 import { ComponentSlotStylesPrepared } from '../../themes/types'
 
 export interface ChatItemProps extends UIComponentProps, ChildrenComponentProps {
-  /** Indicates whether the ChatItem is part of a batch. */
-  consecutive?: boolean
+  /** Indicates whether the ChatItem is the part of a batch. */
+  grouped?: 'start' | 'middle' | 'end'
 
   /** Chat items can have a gutter. */
   gutter?: ShorthandValue
@@ -40,7 +40,7 @@ class ChatItem extends UIComponent<ReactProps<ChatItemProps>, any> {
 
   static propTypes = {
     ...commonPropTypes.createCommon({ content: false }),
-    consecutive: PropTypes.bool,
+    grouped: PropTypes.oneOf(['start', 'middle', 'end']),
     gutter: customPropTypes.itemShorthand,
     gutterPosition: PropTypes.oneOf(['start', 'end']),
     message: customPropTypes.itemShorthand,
diff --git a/src/themes/teams/components/Chat/chatItemStyles.ts b/src/themes/teams/components/Chat/chatItemStyles.ts
index 13e3e284c5..2370436fcb 100644
--- a/src/themes/teams/components/Chat/chatItemStyles.ts
+++ b/src/themes/teams/components/Chat/chatItemStyles.ts
@@ -9,47 +9,68 @@ const chatMessageAuthorClassname = `& .${ChatMessage.className}__author`
 const chatMessageTimestampClassname = `& .${ChatMessage.className}__timestamp`
 
 const chatItemStyles: ComponentSlotStylesInput<ChatItemProps, ChatItemVariables> = {
-  root: ({ props: { consecutive }, variables: v }): ICSSInJSStyle => ({
-    position: 'relative',
-    ...(!consecutive && { marginTop: pxToRem(16) }),
-    ...(consecutive && {
-      marginTop: pxToRem(2),
-      [chatMessageAuthorClassname]: {
-        display: 'none',
-      },
-      [chatMessageTimestampClassname]: {
-        display: 'none',
-      },
-    }),
-    marginBottom: 0,
-  }),
+  root: ({ props: p, variables: v }): ICSSInJSStyle => {
+    const { grouped } = p
+    return {
+      position: 'relative',
+      ...((!grouped || grouped === 'start') && { marginTop: pxToRem(16) }),
+      ...(grouped &&
+        grouped !== 'start' && {
+          marginTop: pxToRem(2),
+          [chatMessageAuthorClassname]: {
+            display: 'none',
+          },
+          [chatMessageTimestampClassname]: {
+            display: 'none',
+          },
+        }),
+      marginBottom: 0,
+    }
+  },
 
-  gutter: ({ props: p, variables: v }): ICSSInJSStyle => ({
-    position: 'absolute',
-    marginTop: v.gutterMargin,
-    [p.gutterPosition === 'end' ? 'right' : 'left']: 0,
-    ...(p.consecutive && {
-      visibility: 'hidden',
-    }),
-  }),
+  gutter: ({ props: p, variables: v }): ICSSInJSStyle => {
+    const { grouped } = p
+    return {
+      position: 'absolute',
+      marginTop: v.gutterMargin,
+      [p.gutterPosition === 'end' ? 'right' : 'left']: 0,
+      ...(grouped &&
+        grouped !== 'start' && {
+          visibility: 'hidden',
+        }),
+    }
+  },
 
-  message: ({ props: { consecutive }, variables: v }): ICSSInJSStyle => ({
-    position: 'relative',
-    marginLeft: v.messageMargin,
-    marginRight: v.messageMargin,
-    ...(consecutive && {
-      [chatMessageClassname]: {
-        paddingTop: pxToRem(5),
-        paddingBottom: pxToRem(7),
-      },
-    }),
-    ...(!consecutive && {
-      [chatMessageClassname]: {
-        paddingTop: pxToRem(8),
-        paddingBottom: pxToRem(10),
-      },
-    }),
-  }),
+  message: ({ props: p, variables: v }): ICSSInJSStyle => {
+    const { grouped } = p
+    return {
+      position: 'relative',
+      marginLeft: v.messageMargin,
+      marginRight: v.messageMargin,
+      ...(grouped === 'middle' && {
+        [chatMessageClassname]: {
+          borderTopLeftRadius: 0,
+          borderBottomLeftRadius: 0,
+          paddingTop: pxToRem(5),
+          paddingBottom: pxToRem(7),
+        },
+      }),
+      ...(grouped === 'start' && {
+        [chatMessageClassname]: {
+          borderTopLeftRadius: pxToRem(3),
+          borderBottomLeftRadius: 0,
+        },
+      }),
+      ...(grouped === 'end' && {
+        [chatMessageClassname]: {
+          borderTopLeftRadius: 0,
+          borderBottomLeftRadius: pxToRem(3),
+          paddingTop: pxToRem(5),
+          paddingBottom: pxToRem(7),
+        },
+      }),
+    }
+  },
 }
 
 export default chatItemStyles
diff --git a/src/themes/teams/components/Chat/chatMessageStyles.ts b/src/themes/teams/components/Chat/chatMessageStyles.ts
index bcb611e34e..b2861900da 100644
--- a/src/themes/teams/components/Chat/chatMessageStyles.ts
+++ b/src/themes/teams/components/Chat/chatMessageStyles.ts
@@ -1,12 +1,15 @@
 import { ComponentSlotStylesInput, ICSSInJSStyle } from '../../../types'
 import { ChatMessageProps } from '../../../../components/Chat/ChatMessage'
 import { ChatMessageVariables } from './chatMessageVariables'
+import { pxToRem } from '../../../../lib'
 
 const chatMessageStyles: ComponentSlotStylesInput<ChatMessageProps, ChatMessageVariables> = {
   root: ({ props: p, variables: v }): ICSSInJSStyle => ({
     display: 'inline-block',
     paddingLeft: v.padding,
     paddingRight: v.padding,
+    paddingTop: pxToRem(8),
+    paddingBottom: pxToRem(10),
     borderRadius: v.borderRadius,
     border: v.border,
     color: v.color,

From 6a9cd8ba87788e8e97dfabc338fd34dccd0ccbc2 Mon Sep 17 00:00:00 2001
From: manajdov <manajdov@microsoft.com>
Date: Thu, 24 Jan 2019 18:15:06 +0100
Subject: [PATCH 05/13] -reverted creation of the gutter className

---
 src/components/Chat/ChatItem.tsx | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/src/components/Chat/ChatItem.tsx b/src/components/Chat/ChatItem.tsx
index 62da06f052..8e2a6a8ef0 100644
--- a/src/components/Chat/ChatItem.tsx
+++ b/src/components/Chat/ChatItem.tsx
@@ -72,11 +72,7 @@ class ChatItem extends UIComponent<ReactProps<ChatItemProps>, any> {
 
   private renderChatItem(styles: ComponentSlotStylesPrepared) {
     const { message, gutter, gutterPosition } = this.props
-    const gutterElement =
-      gutter &&
-      Box.create(gutter, {
-        defaultProps: { styles: styles.gutter, className: `${ChatItem.className}__gutter` },
-      })
+    const gutterElement = gutter && Box.create(gutter, { defaultProps: { styles: styles.gutter } })
 
     return (
       <>

From 39c6ebc7d89edc6f5b052a96d7169fa235212a4a Mon Sep 17 00:00:00 2001
From: manajdov <manajdov@microsoft.com>
Date: Fri, 25 Jan 2019 11:22:32 +0100
Subject: [PATCH 06/13] -renamed classNames to selectors variables

---
 .../teams/components/Chat/chatItemStyles.ts   | 114 ++++++++----------
 1 file changed, 52 insertions(+), 62 deletions(-)

diff --git a/src/themes/teams/components/Chat/chatItemStyles.ts b/src/themes/teams/components/Chat/chatItemStyles.ts
index 2370436fcb..9c91ddd7da 100644
--- a/src/themes/teams/components/Chat/chatItemStyles.ts
+++ b/src/themes/teams/components/Chat/chatItemStyles.ts
@@ -4,73 +4,63 @@ import { ChatItemProps } from '../../../../components/Chat/ChatItem'
 import { pxToRem } from '../../../../lib'
 import ChatMessage from '../../../../components/Chat/ChatMessage'
 
-const chatMessageClassname = `& .${ChatMessage.className}`
-const chatMessageAuthorClassname = `& .${ChatMessage.className}__author`
-const chatMessageTimestampClassname = `& .${ChatMessage.className}__timestamp`
+const chatMessageClassNameSelector = `& .${ChatMessage.className}`
+const chatMessageAuthorClassNameSelector = `& .${ChatMessage.className}__author`
+const chatMessageTimestampClassNameSelector = `& .${ChatMessage.className}__timestamp`
 
 const chatItemStyles: ComponentSlotStylesInput<ChatItemProps, ChatItemVariables> = {
-  root: ({ props: p, variables: v }): ICSSInJSStyle => {
-    const { grouped } = p
-    return {
-      position: 'relative',
-      ...((!grouped || grouped === 'start') && { marginTop: pxToRem(16) }),
-      ...(grouped &&
-        grouped !== 'start' && {
-          marginTop: pxToRem(2),
-          [chatMessageAuthorClassname]: {
-            display: 'none',
-          },
-          [chatMessageTimestampClassname]: {
-            display: 'none',
-          },
-        }),
-      marginBottom: 0,
-    }
-  },
-
-  gutter: ({ props: p, variables: v }): ICSSInJSStyle => {
-    const { grouped } = p
-    return {
-      position: 'absolute',
-      marginTop: v.gutterMargin,
-      [p.gutterPosition === 'end' ? 'right' : 'left']: 0,
-      ...(grouped &&
-        grouped !== 'start' && {
-          visibility: 'hidden',
-        }),
-    }
-  },
-
-  message: ({ props: p, variables: v }): ICSSInJSStyle => {
-    const { grouped } = p
-    return {
-      position: 'relative',
-      marginLeft: v.messageMargin,
-      marginRight: v.messageMargin,
-      ...(grouped === 'middle' && {
-        [chatMessageClassname]: {
-          borderTopLeftRadius: 0,
-          borderBottomLeftRadius: 0,
-          paddingTop: pxToRem(5),
-          paddingBottom: pxToRem(7),
+  root: ({ props: p, variables: v }): ICSSInJSStyle => ({
+    position: 'relative',
+    ...((!p.grouped || p.grouped === 'start') && { marginTop: pxToRem(16) }),
+    ...(p.grouped &&
+      p.grouped !== 'start' && {
+        marginTop: pxToRem(2),
+        [chatMessageAuthorClassNameSelector]: {
+          display: 'none',
         },
-      }),
-      ...(grouped === 'start' && {
-        [chatMessageClassname]: {
-          borderTopLeftRadius: pxToRem(3),
-          borderBottomLeftRadius: 0,
+        [chatMessageTimestampClassNameSelector]: {
+          display: 'none',
         },
       }),
-      ...(grouped === 'end' && {
-        [chatMessageClassname]: {
-          borderTopLeftRadius: 0,
-          borderBottomLeftRadius: pxToRem(3),
-          paddingTop: pxToRem(5),
-          paddingBottom: pxToRem(7),
-        },
-      }),
-    }
-  },
+    marginBottom: 0,
+  }),
+
+  gutter: ({ props: p, variables: v }): ICSSInJSStyle => ({
+    position: 'absolute',
+    marginTop: v.gutterMargin,
+    [p.gutterPosition === 'end' ? 'right' : 'left']: 0,
+    ...(p.grouped !== 'start' && {
+      visibility: 'hidden',
+    }),
+  }),
+
+  message: ({ props: p, variables: v }): ICSSInJSStyle => ({
+    position: 'relative',
+    marginLeft: v.messageMargin,
+    marginRight: v.messageMargin,
+    ...(p.grouped === 'middle' && {
+      [chatMessageClassNameSelector]: {
+        borderTopLeftRadius: 0,
+        borderBottomLeftRadius: 0,
+        paddingTop: pxToRem(5),
+        paddingBottom: pxToRem(7),
+      },
+    }),
+    ...(p.grouped === 'start' && {
+      [chatMessageClassNameSelector]: {
+        borderTopLeftRadius: pxToRem(3),
+        borderBottomLeftRadius: 0,
+      },
+    }),
+    ...(p.grouped === 'end' && {
+      [chatMessageClassNameSelector]: {
+        borderTopLeftRadius: 0,
+        borderBottomLeftRadius: pxToRem(3),
+        paddingTop: pxToRem(5),
+        paddingBottom: pxToRem(7),
+      },
+    }),
+  }),
 }
 
 export default chatItemStyles

From 461e56a2caf2e127d5a4bd0a3f32da01894c30e8 Mon Sep 17 00:00:00 2001
From: manajdov <manajdov@microsoft.com>
Date: Fri, 25 Jan 2019 12:15:23 +0100
Subject: [PATCH 07/13] -adjusting variables to match red-lines for the teams
 theme

---
 src/themes/teams/components/Chat/chatMessageVariables.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/themes/teams/components/Chat/chatMessageVariables.ts b/src/themes/teams/components/Chat/chatMessageVariables.ts
index 2789159246..6ab3fe2f60 100644
--- a/src/themes/teams/components/Chat/chatMessageVariables.ts
+++ b/src/themes/teams/components/Chat/chatMessageVariables.ts
@@ -16,10 +16,10 @@ export default (siteVars): ChatMessageVariables => ({
   width: '100%',
   backgroundColor: siteVars.white,
   backgroundColorMine: '#E5E5F1',
-  borderRadius: '0.3rem',
+  borderRadius: pxToRem(3),
   color: 'rgb(64, 64, 64)',
   padding: pxToRem(16),
-  authorMargin: pxToRem(10),
+  authorMargin: pxToRem(12),
   contentFocusOutlineColor: siteVars.brand,
   border: 'none',
 })

From 687807f028db01756d5e2076503f7efb152eddd0 Mon Sep 17 00:00:00 2001
From: manajdov <manajdov@microsoft.com>
Date: Fri, 25 Jan 2019 14:27:09 +0100
Subject: [PATCH 08/13] -added contentPosition prop -adjusted some styles
 according to the red-lines

---
 .../Chat/Types/ChatExample.shorthand.tsx      | 56 ++++++++++++-----
 ... ChatExampleContentPosition.shorthand.tsx} |  8 +--
 .../ChatMessageExampleStyled.shorthand.tsx    |  1 +
 .../examples/components/Chat/Types/index.tsx  |  6 +-
 .../prototypes/chatPane/chatPaneContent.tsx   |  2 +-
 src/components/Chat/ChatItem.tsx              | 14 ++---
 .../teams/components/Chat/chatItemStyles.ts   | 63 +++++++++++--------
 .../components/Chat/chatMessageStyles.ts      |  9 ++-
 .../components/Chat/chatMessageVariables.ts   |  8 ++-
 9 files changed, 106 insertions(+), 61 deletions(-)
 rename docs/src/examples/components/Chat/Types/{ChatExampleGutterPosition.shorthand.tsx => ChatExampleContentPosition.shorthand.tsx} (81%)

diff --git a/docs/src/examples/components/Chat/Types/ChatExample.shorthand.tsx b/docs/src/examples/components/Chat/Types/ChatExample.shorthand.tsx
index 0e539e5551..7e348f6c51 100644
--- a/docs/src/examples/components/Chat/Types/ChatExample.shorthand.tsx
+++ b/docs/src/examples/components/Chat/Types/ChatExample.shorthand.tsx
@@ -13,35 +13,62 @@ const items = [
         <Chat.Message content="Hello" author="John Doe" timestamp="Yesterday, 10:15 PM" mine />
       ),
     },
+    contentPosition: 'end',
+    grouped: 'start',
     key: 'message-id-1',
   },
+  {
+    message: {
+      content: (
+        <Chat.Message content="I'm back!" author="John Doe" timestamp="Yesterday, 10:15 PM" mine />
+      ),
+    },
+    contentPosition: 'end',
+    grouped: 'middle',
+    key: 'message-id-2',
+  },
+  {
+    message: {
+      content: (
+        <Chat.Message
+          content="Thanks for waiting!"
+          author="John Doe"
+          timestamp="Yesterday, 10:15 PM"
+          mine
+        />
+      ),
+    },
+    contentPosition: 'end',
+    grouped: 'end',
+    key: 'message-id-3',
+  },
   {
     gutter: { content: <Avatar {...janeAvatar} /> },
     message: {
       content: <Chat.Message content="Hi" author="Jane Doe" timestamp="Yesterday, 10:15 PM" />,
     },
     grouped: 'start',
-    key: 'message-id-2',
+    key: 'message-id-4',
   },
   {
     gutter: { content: <Avatar {...janeAvatar} /> },
     message: {
       content: (
-        <Chat.Message content="What's up?" author="Jane Doe" timestamp="Yesterday, 10:15 PM" />
+        <Chat.Message content="No problem!" author="Jane Doe" timestamp="Yesterday, 10:15 PM" />
       ),
     },
     grouped: 'middle',
-    key: 'message-id-3',
+    key: 'message-id-5',
   },
   {
     gutter: { content: <Avatar {...janeAvatar} /> },
     message: {
       content: (
-        <Chat.Message content="What's new?" author="Jane Doe" timestamp="Yesterday, 10:15 PM" />
+        <Chat.Message content="What's up?" author="Jane Doe" timestamp="Yesterday, 10:15 PM" />
       ),
     },
     grouped: 'end',
-    key: 'message-id-3',
+    key: 'message-id-6',
   },
   {
     message: {
@@ -54,37 +81,34 @@ const items = [
         />
       ),
     },
-    key: 'message-id-4',
+    contentPosition: 'end',
+    key: 'message-id-7',
   },
   {
     gutter: { content: <Avatar {...janeAvatar} /> },
     message: {
       content: (
         <Chat.Message
-          content="Sure! Let's try the new place downtown"
+          content="Sure! Let's try the new place downtown."
           author="Jane Doe"
           timestamp="Yesterday, 10:15 PM"
         />
       ),
     },
-    key: 'message-id-5',
+    key: 'message-id-8',
   },
   {
     children: <Divider content="Today" color="primary" important />,
-    key: 'message-id-6',
+    key: 'message-id-9',
   },
   {
     message: {
       content: (
-        <Chat.Message
-          content="Let's have a call"
-          author="John Doe"
-          timestamp="Today, 11:15 PM"
-          mine
-        />
+        <Chat.Message content="Ok, let's go." author="John Doe" timestamp="Today, 11:15 PM" mine />
       ),
     },
-    key: 'message-id-7',
+    contentPosition: 'end',
+    key: 'message-id-10',
   },
 ]
 
diff --git a/docs/src/examples/components/Chat/Types/ChatExampleGutterPosition.shorthand.tsx b/docs/src/examples/components/Chat/Types/ChatExampleContentPosition.shorthand.tsx
similarity index 81%
rename from docs/src/examples/components/Chat/Types/ChatExampleGutterPosition.shorthand.tsx
rename to docs/src/examples/components/Chat/Types/ChatExampleContentPosition.shorthand.tsx
index 055d85d6a4..7c99b77068 100644
--- a/docs/src/examples/components/Chat/Types/ChatExampleGutterPosition.shorthand.tsx
+++ b/docs/src/examples/components/Chat/Types/ChatExampleContentPosition.shorthand.tsx
@@ -11,7 +11,7 @@ const [janeAvatar, johnAvatar] = [
 
 const items = [
   {
-    gutterPosition: 'start',
+    contentPosition: 'start',
     gutter: { content: <Avatar {...johnAvatar} /> },
     message: {
       content: <Chat.Message content="Hello" author="John Doe" timestamp="Yesterday, 10:15 PM" />,
@@ -19,7 +19,7 @@ const items = [
     key: 'message-id-1',
   },
   {
-    gutterPosition: 'end',
+    contentPosition: 'end',
     gutter: { content: <Avatar {...janeAvatar} /> },
     message: {
       content: <Chat.Message content="Hi" author="Jane Doe" timestamp="Yesterday, 10:15 PM" mine />,
@@ -28,6 +28,6 @@ const items = [
   },
 ]
 
-const ChatExampleGutterPosition = () => <Chat items={items} />
+const ChatExampleContentPosition = () => <Chat items={items} />
 
-export default ChatExampleGutterPosition
+export default ChatExampleContentPosition
diff --git a/docs/src/examples/components/Chat/Types/ChatMessageExampleStyled.shorthand.tsx b/docs/src/examples/components/Chat/Types/ChatMessageExampleStyled.shorthand.tsx
index 63630850f6..74ca2032f1 100644
--- a/docs/src/examples/components/Chat/Types/ChatMessageExampleStyled.shorthand.tsx
+++ b/docs/src/examples/components/Chat/Types/ChatMessageExampleStyled.shorthand.tsx
@@ -78,6 +78,7 @@ const ChatMessageExampleStyled = () => (
               />
             ),
           },
+          contentPosition: 'end',
           key: 'message-id-1',
         },
         {
diff --git a/docs/src/examples/components/Chat/Types/index.tsx b/docs/src/examples/components/Chat/Types/index.tsx
index 40f114ec3b..17374e3d75 100644
--- a/docs/src/examples/components/Chat/Types/index.tsx
+++ b/docs/src/examples/components/Chat/Types/index.tsx
@@ -10,9 +10,9 @@ const Types = () => (
       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"
+      title="Content position"
+      description="A ChatItem can position it's content at the start or at the end of a message."
+      examplePath="components/Chat/Types/ChatExampleContentPosition"
     />
     <ComponentExample
       title="Styled Chat Item"
diff --git a/docs/src/prototypes/chatPane/chatPaneContent.tsx b/docs/src/prototypes/chatPane/chatPaneContent.tsx
index 4df1767605..a15dec9e7f 100644
--- a/docs/src/prototypes/chatPane/chatPaneContent.tsx
+++ b/docs/src/prototypes/chatPane/chatPaneContent.tsx
@@ -49,7 +49,7 @@ class ChatPaneContainer extends React.PureComponent<ChatPaneContainerProps> {
         return (
           <Chat.Item
             key={`chat-item-${index}`}
-            gutterPosition={mine ? 'end' : 'start'}
+            contentPosition={mine ? 'end' : 'start'}
             gutter={gutter && { content: <Avatar {...gutter} /> }}
             message={{
               content: (
diff --git a/src/components/Chat/ChatItem.tsx b/src/components/Chat/ChatItem.tsx
index 8e2a6a8ef0..038b69d256 100644
--- a/src/components/Chat/ChatItem.tsx
+++ b/src/components/Chat/ChatItem.tsx
@@ -23,8 +23,8 @@ export interface ChatItemProps extends UIComponentProps, ChildrenComponentProps
   /** Chat items can have a gutter. */
   gutter?: ShorthandValue
 
-  /** Indicates whether the gutter is positioned at the start or the end. */
-  gutterPosition?: 'start' | 'end'
+  /** Indicates whether the content is positioned at the start or the end. */
+  contentPosition?: 'start' | 'end'
 
   /** Chat items can have a message. */
   message?: ShorthandValue
@@ -42,13 +42,13 @@ class ChatItem extends UIComponent<ReactProps<ChatItemProps>, any> {
     ...commonPropTypes.createCommon({ content: false }),
     grouped: PropTypes.oneOf(['start', 'middle', 'end']),
     gutter: customPropTypes.itemShorthand,
-    gutterPosition: PropTypes.oneOf(['start', 'end']),
+    contentPosition: PropTypes.oneOf(['start', 'end']),
     message: customPropTypes.itemShorthand,
   }
 
   static defaultProps = {
     as: 'li',
-    gutterPosition: 'start',
+    contentPosition: 'start',
   }
 
   renderComponent({
@@ -71,14 +71,14 @@ class ChatItem extends UIComponent<ReactProps<ChatItemProps>, any> {
   }
 
   private renderChatItem(styles: ComponentSlotStylesPrepared) {
-    const { message, gutter, gutterPosition } = this.props
+    const { message, gutter, contentPosition } = this.props
     const gutterElement = gutter && Box.create(gutter, { defaultProps: { styles: styles.gutter } })
 
     return (
       <>
-        {gutterPosition === 'start' && gutterElement}
+        {contentPosition === 'start' && gutterElement}
         {Box.create(message, { defaultProps: { styles: styles.message } })}
-        {gutterPosition === 'end' && gutterElement}
+        {contentPosition === 'end' && gutterElement}
       </>
     )
   }
diff --git a/src/themes/teams/components/Chat/chatItemStyles.ts b/src/themes/teams/components/Chat/chatItemStyles.ts
index 9c91ddd7da..bc6c1d851a 100644
--- a/src/themes/teams/components/Chat/chatItemStyles.ts
+++ b/src/themes/teams/components/Chat/chatItemStyles.ts
@@ -8,6 +8,37 @@ const chatMessageClassNameSelector = `& .${ChatMessage.className}`
 const chatMessageAuthorClassNameSelector = `& .${ChatMessage.className}__author`
 const chatMessageTimestampClassNameSelector = `& .${ChatMessage.className}__timestamp`
 
+const getPositionStyles = (props: ChatItemProps) => ({
+  float: props.contentPosition === 'end' ? 'right' : 'left',
+})
+
+const getChatMessageEvaluatedStyles = (p: ChatItemProps) => ({
+  ...(!p.grouped && { [chatMessageClassNameSelector]: getPositionStyles(p) }),
+  ...(p.grouped === 'middle' && {
+    [chatMessageClassNameSelector]: {
+      [p.contentPosition === 'end' ? 'borderTopRightRadius' : 'borderTopLeftRadius']: 0,
+      [p.contentPosition === 'end' ? 'borderBottomRightRadius' : 'borderBottomLeftRadius']: 0,
+      paddingTop: pxToRem(5),
+      paddingBottom: pxToRem(7),
+      ...getPositionStyles(p),
+    },
+  }),
+  ...(p.grouped === 'start' && {
+    [chatMessageClassNameSelector]: {
+      [p.contentPosition === 'end' ? 'borderBottomRightRadius' : 'borderBottomLeftRadius']: 0,
+      ...getPositionStyles(p),
+    },
+  }),
+  ...(p.grouped === 'end' && {
+    [chatMessageClassNameSelector]: {
+      [p.contentPosition === 'end' ? 'borderTopRightRadius' : 'borderTopLeftRadius']: 0,
+      paddingTop: pxToRem(5),
+      paddingBottom: pxToRem(7),
+      ...getPositionStyles(p),
+    },
+  }),
+})
+
 const chatItemStyles: ComponentSlotStylesInput<ChatItemProps, ChatItemVariables> = {
   root: ({ props: p, variables: v }): ICSSInJSStyle => ({
     position: 'relative',
@@ -28,38 +59,18 @@ const chatItemStyles: ComponentSlotStylesInput<ChatItemProps, ChatItemVariables>
   gutter: ({ props: p, variables: v }): ICSSInJSStyle => ({
     position: 'absolute',
     marginTop: v.gutterMargin,
-    [p.gutterPosition === 'end' ? 'right' : 'left']: 0,
-    ...(p.grouped !== 'start' && {
-      visibility: 'hidden',
-    }),
+    [p.contentPosition === 'end' ? 'right' : 'left']: 0,
+    ...(p.grouped &&
+      p.grouped !== 'start' && {
+        visibility: 'hidden',
+      }),
   }),
 
   message: ({ props: p, variables: v }): ICSSInJSStyle => ({
     position: 'relative',
     marginLeft: v.messageMargin,
     marginRight: v.messageMargin,
-    ...(p.grouped === 'middle' && {
-      [chatMessageClassNameSelector]: {
-        borderTopLeftRadius: 0,
-        borderBottomLeftRadius: 0,
-        paddingTop: pxToRem(5),
-        paddingBottom: pxToRem(7),
-      },
-    }),
-    ...(p.grouped === 'start' && {
-      [chatMessageClassNameSelector]: {
-        borderTopLeftRadius: pxToRem(3),
-        borderBottomLeftRadius: 0,
-      },
-    }),
-    ...(p.grouped === 'end' && {
-      [chatMessageClassNameSelector]: {
-        borderTopLeftRadius: 0,
-        borderBottomLeftRadius: pxToRem(3),
-        paddingTop: pxToRem(5),
-        paddingBottom: pxToRem(7),
-      },
-    }),
+    ...getChatMessageEvaluatedStyles(p),
   }),
 }
 
diff --git a/src/themes/teams/components/Chat/chatMessageStyles.ts b/src/themes/teams/components/Chat/chatMessageStyles.ts
index b2861900da..d57231affd 100644
--- a/src/themes/teams/components/Chat/chatMessageStyles.ts
+++ b/src/themes/teams/components/Chat/chatMessageStyles.ts
@@ -18,7 +18,6 @@ const chatMessageStyles: ComponentSlotStylesInput<ChatMessageProps, ChatMessageV
     wordBreak: 'break-word',
     wordWrap: 'break-word',
     outline: 0,
-    ...(p.mine && { float: 'right' }),
     ...(p.isFromKeyboard && {
       ':focus': {
         outline: `.2rem solid ${v.contentFocusOutlineColor}`,
@@ -30,7 +29,13 @@ const chatMessageStyles: ComponentSlotStylesInput<ChatMessageProps, ChatMessageV
     ...(p.mine && {
       display: 'none',
     }),
-    marginRight: v.authorMargin,
+    fontSize: v.authorFontSize,
+    marginRight: v.authorMarginRight,
+    marginBottom: v.headerMarginBottom,
+  }),
+
+  timestamp: ({ variables: v }) => ({
+    marginBottom: v.headerMarginBottom,
   }),
 
   content: ({ variables: v }): ICSSInJSStyle => ({
diff --git a/src/themes/teams/components/Chat/chatMessageVariables.ts b/src/themes/teams/components/Chat/chatMessageVariables.ts
index 6ab3fe2f60..0a5a4b2136 100644
--- a/src/themes/teams/components/Chat/chatMessageVariables.ts
+++ b/src/themes/teams/components/Chat/chatMessageVariables.ts
@@ -7,7 +7,9 @@ export interface ChatMessageVariables {
   borderRadius: string
   color: string
   padding: string
-  authorMargin: string
+  authorMarginRight: string
+  authorFontSize: string
+  headerMarginBottom: string
   contentFocusOutlineColor: string
   border: string
 }
@@ -19,7 +21,9 @@ export default (siteVars): ChatMessageVariables => ({
   borderRadius: pxToRem(3),
   color: 'rgb(64, 64, 64)',
   padding: pxToRem(16),
-  authorMargin: pxToRem(12),
+  authorMarginRight: pxToRem(12),
+  authorFontSize: siteVars.fontSizes.small,
+  headerMarginBottom: pxToRem(2),
   contentFocusOutlineColor: siteVars.brand,
   border: 'none',
 })

From 548e5e867b532d40ae3ad5c10a6963b304c0bba4 Mon Sep 17 00:00:00 2001
From: manajdov <manajdov@microsoft.com>
Date: Fri, 25 Jan 2019 14:37:34 +0100
Subject: [PATCH 09/13] -added screenreader styles for the author and timestamp

---
 src/themes/teams/components/Chat/chatItemStyles.ts       | 9 +++------
 src/themes/teams/components/Chat/chatMessageStyles.ts    | 1 -
 src/themes/teams/components/Chat/chatMessageVariables.ts | 2 --
 3 files changed, 3 insertions(+), 9 deletions(-)

diff --git a/src/themes/teams/components/Chat/chatItemStyles.ts b/src/themes/teams/components/Chat/chatItemStyles.ts
index bc6c1d851a..e2a42c5356 100644
--- a/src/themes/teams/components/Chat/chatItemStyles.ts
+++ b/src/themes/teams/components/Chat/chatItemStyles.ts
@@ -3,6 +3,7 @@ import { ChatItemVariables } from './chatItemVariables'
 import { ChatItemProps } from '../../../../components/Chat/ChatItem'
 import { pxToRem } from '../../../../lib'
 import ChatMessage from '../../../../components/Chat/ChatMessage'
+import { screenReaderContainerStyles } from '../../../../lib/accessibility/Styles/accessibilityStyles'
 
 const chatMessageClassNameSelector = `& .${ChatMessage.className}`
 const chatMessageAuthorClassNameSelector = `& .${ChatMessage.className}__author`
@@ -46,12 +47,8 @@ const chatItemStyles: ComponentSlotStylesInput<ChatItemProps, ChatItemVariables>
     ...(p.grouped &&
       p.grouped !== 'start' && {
         marginTop: pxToRem(2),
-        [chatMessageAuthorClassNameSelector]: {
-          display: 'none',
-        },
-        [chatMessageTimestampClassNameSelector]: {
-          display: 'none',
-        },
+        [chatMessageAuthorClassNameSelector]: screenReaderContainerStyles,
+        [chatMessageTimestampClassNameSelector]: screenReaderContainerStyles,
       }),
     marginBottom: 0,
   }),
diff --git a/src/themes/teams/components/Chat/chatMessageStyles.ts b/src/themes/teams/components/Chat/chatMessageStyles.ts
index d08695636d..3f8a84d0ec 100644
--- a/src/themes/teams/components/Chat/chatMessageStyles.ts
+++ b/src/themes/teams/components/Chat/chatMessageStyles.ts
@@ -27,7 +27,6 @@ const chatMessageStyles: ComponentSlotStylesInput<ChatMessageProps, ChatMessageV
   }),
 
   author: ({ props: p, variables: v }): ICSSInJSStyle => ({
-    marginRight: v.authorMargin,
     ...(p.mine && screenReaderContainerStyles),
     marginRight: v.authorMarginRight,
     marginBottom: v.headerMarginBottom,
diff --git a/src/themes/teams/components/Chat/chatMessageVariables.ts b/src/themes/teams/components/Chat/chatMessageVariables.ts
index 0a5a4b2136..9b473f6795 100644
--- a/src/themes/teams/components/Chat/chatMessageVariables.ts
+++ b/src/themes/teams/components/Chat/chatMessageVariables.ts
@@ -8,7 +8,6 @@ export interface ChatMessageVariables {
   color: string
   padding: string
   authorMarginRight: string
-  authorFontSize: string
   headerMarginBottom: string
   contentFocusOutlineColor: string
   border: string
@@ -22,7 +21,6 @@ export default (siteVars): ChatMessageVariables => ({
   color: 'rgb(64, 64, 64)',
   padding: pxToRem(16),
   authorMarginRight: pxToRem(12),
-  authorFontSize: siteVars.fontSizes.small,
   headerMarginBottom: pxToRem(2),
   contentFocusOutlineColor: siteVars.brand,
   border: 'none',

From f7b1d994de03079f250523185620e28437fcddd9 Mon Sep 17 00:00:00 2001
From: manajdov <manajdov@microsoft.com>
Date: Fri, 25 Jan 2019 14:43:35 +0100
Subject: [PATCH 10/13] -updated changelog

---
 CHANGELOG.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index bf027832f6..90787f47df 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -21,9 +21,11 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Update variable names in themes, add missing sizes @layershifter ([#762](https://github.com/stardust-ui/react/pull/762))
 - Rename `toggleButton` prop to `toggleIndicator` and make it visible by default @layershifter ([#729](https://github.com/stardust-ui/react/pull/729))
 - Remove `props` from variables resolution process @kuzhelov ([#770](https://github.com/stardust-ui/react/pull/770))
+- Replaced `gutterPosition` with `contentPosition` in ChatItem (`contentPosition='end'` should be added on the ChatItems containing ChatMessage with `mine` prop for teams theme) @mnajdova ([#767](https://github.com/stardust-ui/react/pull/767))
 
 ### Features
 - Add `loading` prop for `Dropdown` @layershifter ([#729](https://github.com/stardust-ui/react/pull/729))
+- Add `grouped` prop for ChatItem @mnajdova ([#767](https://github.com/stardust-ui/react/pull/767))
 
 <!--------------------------------[ v0.18.0 ]------------------------------- -->
 ## [v0.18.0](https://github.com/stardust-ui/react/tree/v0.18.0) (2019-01-24)

From 39791057a63279347c6abd9d515c6ab34d100c0b Mon Sep 17 00:00:00 2001
From: manajdov <manajdov@microsoft.com>
Date: Fri, 25 Jan 2019 19:57:10 +0100
Subject: [PATCH 11/13] -added chatMessageMetadata

---
 src/components/Chat/ChatMessage.tsx                |  9 +++++++--
 src/index.ts                                       |  6 +++++-
 src/themes/teams/components/Chat/chatItemStyles.ts | 11 +++++++----
 3 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/src/components/Chat/ChatMessage.tsx b/src/components/Chat/ChatMessage.tsx
index fab5bf800b..fa73e1bb0f 100644
--- a/src/components/Chat/ChatMessage.tsx
+++ b/src/components/Chat/ChatMessage.tsx
@@ -123,7 +123,7 @@ class ChatMessage extends UIComponent<ReactProps<ChatMessageProps>, ChatMessageS
               defaultProps: {
                 size: 'small',
                 styles: styles.author,
-                className: `${ChatMessage.className}__author`,
+                className: chatMessageMetadata.authorClassName,
               },
             })}
             {Text.create(timestamp, {
@@ -131,7 +131,7 @@ class ChatMessage extends UIComponent<ReactProps<ChatMessageProps>, ChatMessageS
                 size: 'small',
                 styles: styles.timestamp,
                 timestamp: true,
-                className: `${ChatMessage.className}__timestamp`,
+                className: chatMessageMetadata.timestampClassName,
               },
             })}
             {Box.create(content, { defaultProps: { styles: styles.content } })}
@@ -144,4 +144,9 @@ class ChatMessage extends UIComponent<ReactProps<ChatMessageProps>, ChatMessageS
 
 ChatMessage.create = createShorthandFactory(ChatMessage, 'content')
 
+export const chatMessageMetadata = {
+  authorClassName: `${ChatMessage.className}__author`,
+  timestampClassName: `${ChatMessage.className}__timestamp`,
+}
+
 export default ChatMessage
diff --git a/src/index.ts b/src/index.ts
index c86b4b12b6..2811277f63 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -23,7 +23,11 @@ export { default as ButtonGroup, ButtonGroupProps } from './components/Button/Bu
 
 export { default as Chat, ChatProps } from './components/Chat/Chat'
 export { default as ChatItem, ChatItemProps } from './components/Chat/ChatItem'
-export { default as ChatMessage, ChatMessageProps } from './components/Chat/ChatMessage'
+export {
+  default as ChatMessage,
+  ChatMessageProps,
+  chatMessageMetadata,
+} from './components/Chat/ChatMessage'
 
 export {
   default as Divider,
diff --git a/src/themes/teams/components/Chat/chatItemStyles.ts b/src/themes/teams/components/Chat/chatItemStyles.ts
index e2a42c5356..1d87e4999e 100644
--- a/src/themes/teams/components/Chat/chatItemStyles.ts
+++ b/src/themes/teams/components/Chat/chatItemStyles.ts
@@ -2,12 +2,15 @@ import { ICSSInJSStyle, ComponentSlotStylesInput } from '../../../types'
 import { ChatItemVariables } from './chatItemVariables'
 import { ChatItemProps } from '../../../../components/Chat/ChatItem'
 import { pxToRem } from '../../../../lib'
-import ChatMessage from '../../../../components/Chat/ChatMessage'
+import {
+  default as ChatMessage,
+  chatMessageMetadata,
+} from '../../../../components/Chat/ChatMessage'
 import { screenReaderContainerStyles } from '../../../../lib/accessibility/Styles/accessibilityStyles'
 
 const chatMessageClassNameSelector = `& .${ChatMessage.className}`
-const chatMessageAuthorClassNameSelector = `& .${ChatMessage.className}__author`
-const chatMessageTimestampClassNameSelector = `& .${ChatMessage.className}__timestamp`
+const chatMessageAuthorClassNameSelector = `& .${chatMessageMetadata.authorClassName}`
+const chatMessageTimestampClassNameSelector = `& .${chatMessageMetadata.timestampClassName}`
 
 const getPositionStyles = (props: ChatItemProps) => ({
   float: props.contentPosition === 'end' ? 'right' : 'left',
@@ -59,7 +62,7 @@ const chatItemStyles: ComponentSlotStylesInput<ChatItemProps, ChatItemVariables>
     [p.contentPosition === 'end' ? 'right' : 'left']: 0,
     ...(p.grouped &&
       p.grouped !== 'start' && {
-        visibility: 'hidden',
+        display: 'none',
       }),
   }),
 

From a346bd82f2862d45c72a05359edc81b0d058738c Mon Sep 17 00:00:00 2001
From: manajdov <manajdov@microsoft.com>
Date: Mon, 28 Jan 2019 14:17:11 +0100
Subject: [PATCH 12/13] -renamed grouped to attached -added slotClassNames
 static prop to the ChatMessage

---
 .../Chat/Types/ChatExample.shorthand.tsx      | 12 +++---
 src/components/Chat/ChatItem.tsx              |  7 ++--
 src/components/Chat/ChatMessage.tsx           | 18 ++++++---
 src/index.ts                                  |  2 +-
 .../teams/components/Chat/chatItemStyles.ts   | 37 ++++++++-----------
 5 files changed, 39 insertions(+), 37 deletions(-)

diff --git a/docs/src/examples/components/Chat/Types/ChatExample.shorthand.tsx b/docs/src/examples/components/Chat/Types/ChatExample.shorthand.tsx
index 7e348f6c51..efb60ad38f 100644
--- a/docs/src/examples/components/Chat/Types/ChatExample.shorthand.tsx
+++ b/docs/src/examples/components/Chat/Types/ChatExample.shorthand.tsx
@@ -14,7 +14,7 @@ const items = [
       ),
     },
     contentPosition: 'end',
-    grouped: 'start',
+    attached: 'top',
     key: 'message-id-1',
   },
   {
@@ -24,7 +24,7 @@ const items = [
       ),
     },
     contentPosition: 'end',
-    grouped: 'middle',
+    attached: true,
     key: 'message-id-2',
   },
   {
@@ -39,7 +39,7 @@ const items = [
       ),
     },
     contentPosition: 'end',
-    grouped: 'end',
+    attached: 'bottom',
     key: 'message-id-3',
   },
   {
@@ -47,7 +47,7 @@ const items = [
     message: {
       content: <Chat.Message content="Hi" author="Jane Doe" timestamp="Yesterday, 10:15 PM" />,
     },
-    grouped: 'start',
+    attached: 'top',
     key: 'message-id-4',
   },
   {
@@ -57,7 +57,7 @@ const items = [
         <Chat.Message content="No problem!" author="Jane Doe" timestamp="Yesterday, 10:15 PM" />
       ),
     },
-    grouped: 'middle',
+    attached: true,
     key: 'message-id-5',
   },
   {
@@ -67,7 +67,7 @@ const items = [
         <Chat.Message content="What's up?" author="Jane Doe" timestamp="Yesterday, 10:15 PM" />
       ),
     },
-    grouped: 'end',
+    attached: 'bottom',
     key: 'message-id-6',
   },
   {
diff --git a/src/components/Chat/ChatItem.tsx b/src/components/Chat/ChatItem.tsx
index 038b69d256..bc60e78df3 100644
--- a/src/components/Chat/ChatItem.tsx
+++ b/src/components/Chat/ChatItem.tsx
@@ -17,8 +17,8 @@ import Box from '../Box/Box'
 import { ComponentSlotStylesPrepared } from '../../themes/types'
 
 export interface ChatItemProps extends UIComponentProps, ChildrenComponentProps {
-  /** Indicates whether the ChatItem is the part of a batch. */
-  grouped?: 'start' | 'middle' | 'end'
+  /** Attach ChatItem to other content. */
+  attached?: boolean | 'top' | 'bottom'
 
   /** Chat items can have a gutter. */
   gutter?: ShorthandValue
@@ -40,7 +40,7 @@ class ChatItem extends UIComponent<ReactProps<ChatItemProps>, any> {
 
   static propTypes = {
     ...commonPropTypes.createCommon({ content: false }),
-    grouped: PropTypes.oneOf(['start', 'middle', 'end']),
+    attached: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(['top', 'bottom'])]),
     gutter: customPropTypes.itemShorthand,
     contentPosition: PropTypes.oneOf(['start', 'end']),
     message: customPropTypes.itemShorthand,
@@ -49,6 +49,7 @@ class ChatItem extends UIComponent<ReactProps<ChatItemProps>, any> {
   static defaultProps = {
     as: 'li',
     contentPosition: 'start',
+    attached: false,
   }
 
   renderComponent({
diff --git a/src/components/Chat/ChatMessage.tsx b/src/components/Chat/ChatMessage.tsx
index fa73e1bb0f..590546bb9d 100644
--- a/src/components/Chat/ChatMessage.tsx
+++ b/src/components/Chat/ChatMessage.tsx
@@ -23,6 +23,11 @@ import { Accessibility, AccessibilityActionHandlers } from '../../lib/accessibil
 import Text from '../Text/Text'
 import Box from '../Box/Box'
 
+export interface ChatMessageSlotClassNames {
+  author: string
+  timestamp: string
+}
+
 export interface ChatMessageProps
   extends UIComponentProps,
     ChildrenComponentProps,
@@ -62,6 +67,8 @@ class ChatMessage extends UIComponent<ReactProps<ChatMessageProps>, ChatMessageS
 
   static create: Function
 
+  static slotClassNames: ChatMessageSlotClassNames
+
   static displayName = 'ChatMessage'
 
   static propTypes = {
@@ -123,7 +130,7 @@ class ChatMessage extends UIComponent<ReactProps<ChatMessageProps>, ChatMessageS
               defaultProps: {
                 size: 'small',
                 styles: styles.author,
-                className: chatMessageMetadata.authorClassName,
+                className: ChatMessage.slotClassNames.author,
               },
             })}
             {Text.create(timestamp, {
@@ -131,7 +138,7 @@ class ChatMessage extends UIComponent<ReactProps<ChatMessageProps>, ChatMessageS
                 size: 'small',
                 styles: styles.timestamp,
                 timestamp: true,
-                className: chatMessageMetadata.timestampClassName,
+                className: ChatMessage.slotClassNames.timestamp,
               },
             })}
             {Box.create(content, { defaultProps: { styles: styles.content } })}
@@ -143,10 +150,9 @@ class ChatMessage extends UIComponent<ReactProps<ChatMessageProps>, ChatMessageS
 }
 
 ChatMessage.create = createShorthandFactory(ChatMessage, 'content')
-
-export const chatMessageMetadata = {
-  authorClassName: `${ChatMessage.className}__author`,
-  timestampClassName: `${ChatMessage.className}__timestamp`,
+ChatMessage.slotClassNames = {
+  author: `${ChatMessage.className}__author`,
+  timestamp: `${ChatMessage.className}__timestamp`,
 }
 
 export default ChatMessage
diff --git a/src/index.ts b/src/index.ts
index 2811277f63..9ba83d12f8 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -26,7 +26,7 @@ export { default as ChatItem, ChatItemProps } from './components/Chat/ChatItem'
 export {
   default as ChatMessage,
   ChatMessageProps,
-  chatMessageMetadata,
+  ChatMessageSlotClassNames,
 } from './components/Chat/ChatMessage'
 
 export {
diff --git a/src/themes/teams/components/Chat/chatItemStyles.ts b/src/themes/teams/components/Chat/chatItemStyles.ts
index 1d87e4999e..89af51975c 100644
--- a/src/themes/teams/components/Chat/chatItemStyles.ts
+++ b/src/themes/teams/components/Chat/chatItemStyles.ts
@@ -2,23 +2,20 @@ import { ICSSInJSStyle, ComponentSlotStylesInput } from '../../../types'
 import { ChatItemVariables } from './chatItemVariables'
 import { ChatItemProps } from '../../../../components/Chat/ChatItem'
 import { pxToRem } from '../../../../lib'
-import {
-  default as ChatMessage,
-  chatMessageMetadata,
-} from '../../../../components/Chat/ChatMessage'
+import { default as ChatMessage } from '../../../../components/Chat/ChatMessage'
 import { screenReaderContainerStyles } from '../../../../lib/accessibility/Styles/accessibilityStyles'
 
 const chatMessageClassNameSelector = `& .${ChatMessage.className}`
-const chatMessageAuthorClassNameSelector = `& .${chatMessageMetadata.authorClassName}`
-const chatMessageTimestampClassNameSelector = `& .${chatMessageMetadata.timestampClassName}`
+const chatMessageAuthorClassNameSelector = `& .${ChatMessage.slotClassNames.author}`
+const chatMessageTimestampClassNameSelector = `& .${ChatMessage.slotClassNames.timestamp}`
 
 const getPositionStyles = (props: ChatItemProps) => ({
   float: props.contentPosition === 'end' ? 'right' : 'left',
 })
 
 const getChatMessageEvaluatedStyles = (p: ChatItemProps) => ({
-  ...(!p.grouped && { [chatMessageClassNameSelector]: getPositionStyles(p) }),
-  ...(p.grouped === 'middle' && {
+  ...(!p.attached && { [chatMessageClassNameSelector]: getPositionStyles(p) }),
+  ...(p.attached === true && {
     [chatMessageClassNameSelector]: {
       [p.contentPosition === 'end' ? 'borderTopRightRadius' : 'borderTopLeftRadius']: 0,
       [p.contentPosition === 'end' ? 'borderBottomRightRadius' : 'borderBottomLeftRadius']: 0,
@@ -27,13 +24,13 @@ const getChatMessageEvaluatedStyles = (p: ChatItemProps) => ({
       ...getPositionStyles(p),
     },
   }),
-  ...(p.grouped === 'start' && {
+  ...(p.attached === 'top' && {
     [chatMessageClassNameSelector]: {
       [p.contentPosition === 'end' ? 'borderBottomRightRadius' : 'borderBottomLeftRadius']: 0,
       ...getPositionStyles(p),
     },
   }),
-  ...(p.grouped === 'end' && {
+  ...(p.attached === 'bottom' && {
     [chatMessageClassNameSelector]: {
       [p.contentPosition === 'end' ? 'borderTopRightRadius' : 'borderTopLeftRadius']: 0,
       paddingTop: pxToRem(5),
@@ -46,13 +43,12 @@ const getChatMessageEvaluatedStyles = (p: ChatItemProps) => ({
 const chatItemStyles: ComponentSlotStylesInput<ChatItemProps, ChatItemVariables> = {
   root: ({ props: p, variables: v }): ICSSInJSStyle => ({
     position: 'relative',
-    ...((!p.grouped || p.grouped === 'start') && { marginTop: pxToRem(16) }),
-    ...(p.grouped &&
-      p.grouped !== 'start' && {
-        marginTop: pxToRem(2),
-        [chatMessageAuthorClassNameSelector]: screenReaderContainerStyles,
-        [chatMessageTimestampClassNameSelector]: screenReaderContainerStyles,
-      }),
+    ...((!p.attached || p.attached === 'top') && { marginTop: pxToRem(16) }),
+    ...((p.attached === 'bottom' || p.attached === true) && {
+      marginTop: pxToRem(2),
+      [chatMessageAuthorClassNameSelector]: screenReaderContainerStyles,
+      [chatMessageTimestampClassNameSelector]: screenReaderContainerStyles,
+    }),
     marginBottom: 0,
   }),
 
@@ -60,10 +56,9 @@ const chatItemStyles: ComponentSlotStylesInput<ChatItemProps, ChatItemVariables>
     position: 'absolute',
     marginTop: v.gutterMargin,
     [p.contentPosition === 'end' ? 'right' : 'left']: 0,
-    ...(p.grouped &&
-      p.grouped !== 'start' && {
-        display: 'none',
-      }),
+    ...((p.attached === 'bottom' || p.attached === true) && {
+      display: 'none',
+    }),
   }),
 
   message: ({ props: p, variables: v }): ICSSInJSStyle => ({

From fd6b62176df949da61f966e4a50c01926c9706c3 Mon Sep 17 00:00:00 2001
From: manajdov <manajdov@microsoft.com>
Date: Mon, 28 Jan 2019 14:23:02 +0100
Subject: [PATCH 13/13] -refactored description for the contentPosition example

---
 docs/src/examples/components/Chat/Types/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/src/examples/components/Chat/Types/index.tsx b/docs/src/examples/components/Chat/Types/index.tsx
index 17374e3d75..935c668be7 100644
--- a/docs/src/examples/components/Chat/Types/index.tsx
+++ b/docs/src/examples/components/Chat/Types/index.tsx
@@ -11,7 +11,7 @@ const Types = () => (
     />
     <ComponentExample
       title="Content position"
-      description="A ChatItem can position it's content at the start or at the end of a message."
+      description="A ChatItem can position it's content at the start or at the end of the container."
       examplePath="components/Chat/Types/ChatExampleContentPosition"
     />
     <ComponentExample