From bf4a4d3ede3b939eefa535cdd7b81c560583e986 Mon Sep 17 00:00:00 2001
From: manajdov <manajdov@microsoft.com>
Date: Wed, 27 Feb 2019 19:14:40 +0100
Subject: [PATCH 1/4] -adjust styles on the content and reactions when there is
 badge on the ChatMessage

---
 .../themes/teams/components/Chat/chatMessageStyles.ts  | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/packages/react/src/themes/teams/components/Chat/chatMessageStyles.ts b/packages/react/src/themes/teams/components/Chat/chatMessageStyles.ts
index 3ffb6e6224..ea93458336 100644
--- a/packages/react/src/themes/teams/components/Chat/chatMessageStyles.ts
+++ b/packages/react/src/themes/teams/components/Chat/chatMessageStyles.ts
@@ -95,6 +95,10 @@ const chatMessageStyles: ComponentSlotStylesInput<
       color: v.contentFocusOutlineColor,
       textDecoration: 'underline',
     },
+    ...(p.badge &&
+      p.badgePosition === 'end' && {
+        marginRight: pxToRem(4),
+      }),
   }),
   badge: ({ props: p, variables: v }) => {
     const sidePosition = p.badgePosition === 'start' ? 'left' : 'right'
@@ -113,8 +117,12 @@ const chatMessageStyles: ComponentSlotStylesInput<
       transform: p.badgePosition === 'start' ? 'translateX(-50%)' : 'translateX(50%)',
     }
   },
-  reactionGroup: ({ variables: v }) => ({
+  reactionGroup: ({ props: p, variables: v }) => ({
     marginLeft: v.reactionGroupMarginLeft,
+    ...(p.badge &&
+      p.badgePosition === 'end' && {
+        marginRight: pxToRem(2),
+      }),
     float: 'right',
   }),
 }

From aef990f84ecccd51076af6c4e9c8b17c594cbfc4 Mon Sep 17 00:00:00 2001
From: manajdov <manajdov@microsoft.com>
Date: Wed, 27 Feb 2019 19:23:58 +0100
Subject: [PATCH 2/4] -updated changelog

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

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 775c68dbb0..9d1059bc38 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -30,6 +30,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Fix allow `Text` component when rendered as div to behave as block element in Teams theme @mnajdova ([#940](https://github.com/stardust-ui/react/pull/940))
 - Fix font-based `Icon` styles in Teams theme @kuzhelov ([#976](https://github.com/stardust-ui/react/pull/976))
 - Refactor the `ListItem` component to use the `Flex` components instead of `ItemLayout` @mnajdova ([#886](https://github.com/stardust-ui/react/pull/886))
+- Fixed distance of the `content` and `reactionGroup` from the `badge` in the `ChatMessage` component for Teams theme @mnajdova ([#986](https://github.com/stardust-ui/react/pull/986))
 
 ### Features
 - Add `Reaction` and `ReactionGroup` components @mnajdova ([#959](https://github.com/stardust-ui/react/pull/959))

From 005184835722b7e2bc83f95fec6c85db97a6ff68 Mon Sep 17 00:00:00 2001
From: manajdov <manajdov@microsoft.com>
Date: Wed, 27 Feb 2019 20:12:45 +0100
Subject: [PATCH 3/4] -fixed condition for margin on the content

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

diff --git a/packages/react/src/themes/teams/components/Chat/chatMessageStyles.ts b/packages/react/src/themes/teams/components/Chat/chatMessageStyles.ts
index ea93458336..5e14118b19 100644
--- a/packages/react/src/themes/teams/components/Chat/chatMessageStyles.ts
+++ b/packages/react/src/themes/teams/components/Chat/chatMessageStyles.ts
@@ -95,9 +95,13 @@ const chatMessageStyles: ComponentSlotStylesInput<
       color: v.contentFocusOutlineColor,
       textDecoration: 'underline',
     },
+    // if there is badge on the end of the message and there is no reactions,
+    // or there are reactions, but they are positioned are before the content,
+    // then the content should have right margin of 4px
     ...(p.badge &&
-      p.badgePosition === 'end' && {
-        marginRight: pxToRem(4),
+      p.badgePosition === 'end' &&
+      (!p.reactionGroup || p.reactionGroupPosition === 'start') && {
+        paddingRight: pxToRem(4),
       }),
   }),
   badge: ({ props: p, variables: v }) => {

From cd7d9138657e4360a91fada8a7aaded943230af3 Mon Sep 17 00:00:00 2001
From: manajdov <manajdov@microsoft.com>
Date: Thu, 28 Feb 2019 11:00:10 +0100
Subject: [PATCH 4/4] -final fixes

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

diff --git a/packages/react/src/themes/teams/components/Chat/chatMessageStyles.ts b/packages/react/src/themes/teams/components/Chat/chatMessageStyles.ts
index 5e14118b19..ea93458336 100644
--- a/packages/react/src/themes/teams/components/Chat/chatMessageStyles.ts
+++ b/packages/react/src/themes/teams/components/Chat/chatMessageStyles.ts
@@ -95,13 +95,9 @@ const chatMessageStyles: ComponentSlotStylesInput<
       color: v.contentFocusOutlineColor,
       textDecoration: 'underline',
     },
-    // if there is badge on the end of the message and there is no reactions,
-    // or there are reactions, but they are positioned are before the content,
-    // then the content should have right margin of 4px
     ...(p.badge &&
-      p.badgePosition === 'end' &&
-      (!p.reactionGroup || p.reactionGroupPosition === 'start') && {
-        paddingRight: pxToRem(4),
+      p.badgePosition === 'end' && {
+        marginRight: pxToRem(4),
       }),
   }),
   badge: ({ props: p, variables: v }) => {