fix(ChatMessage): styles (#962)

* update chat message styles * refine font weight of author slot * update changelog * use px-based values * fix value of margin offset * introduce side offset as variable * upd changelog
microsoft · Feb 25, 2019 · 45e8790 · 45e8790
1 parent 600115a
commit 45e8790
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 5 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -35,6 +35,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Fix `Button` Teams theme styles to use semibold weight @notandrew ([#829](https://github.com/stardust-ui/react/pull/829))
 - Fix conflicts of generated names in Fela with FontAwesome @layershifter ([#951](https://github.com/stardust-ui/react/pull/951))
 - Call callbacks after the clear action in `Input` and `Dropdown` @layershifter ([#956](https://github.com/stardust-ui/react/pull/956))
+- Fix `ChatMessage` styles for Teams theme @kuzhelov ([#962](https://github.com/stardust-ui/react/pull/962))
 
 ### Documentation
 - Add `Editable Area with Dropdown` prototype for mentioning people using `@` character (only available in development mode) @Bugaa92 ([#931](https://github.com/stardust-ui/react/pull/931))

diff --git a/packages/react/src/themes/teams/components/Chat/chatMessageStyles.ts b/packages/react/src/themes/teams/components/Chat/chatMessageStyles.ts
@@ -14,19 +14,27 @@ const chatMessageStyles: ComponentSlotStylesInput<
 > = {
   root: ({ props: p, variables: v }): ICSSInJSStyle => ({
     display: 'inline-block',
+    position: 'relative',
+
+    marginLeft: p.mine ? v.offset : 0,
+    marginRight: !p.mine ? v.offset : 0,
+    maxWidth: `calc(100% - ${v.offset})`,
+    minWidth: v.offset,
+
     paddingLeft: v.padding,
     paddingRight: v.padding,
     paddingTop: pxToRem(8),
     paddingBottom: pxToRem(10),
+
     borderRadius: v.borderRadius,
     border: v.border,
+    outline: 0,
+
     color: v.color,
     backgroundColor: p.mine ? v.backgroundColorMine : v.backgroundColor,
-    maxWidth: v.width,
-    position: 'relative',
+
     wordBreak: 'break-word',
     wordWrap: 'break-word',
-    outline: 0,
 
     ...((v.hasMention || v.isImportant) && {
       '::before': {
@@ -68,6 +76,7 @@ const chatMessageStyles: ComponentSlotStylesInput<
     ...(p.mine && screenReaderContainerStyles),
     marginRight: v.authorMarginRight,
     marginBottom: v.headerMarginBottom,
+    fontWeight: v.authorFontWeight,
   }),
 
   timestamp: ({ variables: v }) => ({

diff --git a/packages/react/src/themes/teams/components/Chat/chatMessageVariables.ts b/packages/react/src/themes/teams/components/Chat/chatMessageVariables.ts
@@ -4,13 +4,14 @@ export interface ChatMessageVariables {
   actionMenuBoxShadow: string
   actionMenuPositionRight: string
   actionMenuPositionTop: string
-  width: string
   backgroundColor: string
   backgroundColorMine: string
   borderRadius: string
   color: string
+  offset: string
   padding: string
   authorMarginRight: string
+  authorFontWeight: number
   headerMarginBottom: string
   contentFocusOutlineColor: string
   border: string
@@ -26,13 +27,14 @@ export default (siteVars): ChatMessageVariables => ({
   actionMenuBoxShadow: siteVars.shadowLevel1,
   actionMenuPositionRight: pxToRem(5),
   actionMenuPositionTop: pxToRem(-30),
-  width: '100%',
   backgroundColor: siteVars.colors.white,
   backgroundColorMine: '#E5E5F1',
   borderRadius: pxToRem(3),
   color: 'rgb(64, 64, 64)',
+  offset: pxToRem(100),
   padding: pxToRem(16),
   authorMarginRight: pxToRem(12),
+  authorFontWeight: siteVars.fontWeightBold,
   headerMarginBottom: pxToRem(2),
   contentFocusOutlineColor: siteVars.colors.primary[500],
   border: 'none',