fix(Chat): update ChatMessage styles in Teams themes (#1246)

* fix propTypes and warnings

* fix styles

* fix other themes

* add changelog entry

* update colors

* move changelog entry

* update ch entry

Author: layershifter

CHANGELOG.md

@@ -17,6 +17,9 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 
 ## [Unreleased]
 
+### Fixes
+- Update `ChatMessage` styles in Teams themes @layershifter ([#1246](https://github.com/stardust-ui/react/pull/1246))
+
 <!--------------------------------[ v0.29.0 ]------------------------------- -->
 ## [v0.29.0](https://github.com/stardust-ui/react/tree/v0.29.0) (2019-04-24)
 [Compare changes](https://github.com/stardust-ui/react/compare/v0.28.1...v0.29.0)

docs/src/examples/components/Chat/Content/ChatExampleReactionGroup.shorthand.tsx

@@ -1,7 +1,10 @@
 import { Avatar, Chat } from '@stardust-ui/react'
 import * as React from 'react'
 
-const reactions = [{ icon: 'thumbs up', content: '1K' }, { icon: 'thumbs down', content: 5 }]
+const reactions = [
+  { key: 'up', icon: 'thumbs up', content: '1K' },
+  { key: 'down', icon: 'thumbs down', content: 5 },
+]
 
 const items = [
   {
@@ -27,7 +30,7 @@ const items = [
     message: {
       content: (
         <Chat.Message
-          reactionGroup={[{ icon: 'thumbs up', content: '8' }]}
+          reactionGroup={[{ key: 'up', icon: 'thumbs up', content: '8' }]}
           content="I'm back!"
           author="John Doe"
           timestamp="Yesterday, 10:15 PM"

docs/src/examples/components/Chat/Content/ChatExampleReactionGroupMeReacting.shorthand.tsx

@@ -33,8 +33,8 @@ const items = [
     message: {
       content: (
         <Chat.Message
-          reactionGroup={{ items: reactions }}
-          reactionGroupPosition={'end'}
+          reactionGroup={reactions}
+          reactionGroupPosition="end"
           content="I'm back!"
           author="John Doe"
           timestamp="Yesterday, 10:15 PM"
@@ -50,9 +50,7 @@ const items = [
     message: {
       content: (
         <Chat.Message
-          reactionGroup={{
-            items: reactions,
-          }}
+          reactionGroup={reactions}
           content="Hi"
           author="Jane Doe"
           timestamp="Yesterday, 10:15 PM"

docs/src/examples/components/Chat/Types/ChatMessageExampleStyled.shorthand.tsx

@@ -1,7 +1,10 @@
 import * as React from 'react'
 import { Avatar, Chat, Provider } from '@stardust-ui/react'
 
-const reactions = [{ icon: 'thumbs up', content: '1K' }, { icon: 'thumbs down', content: 5 }]
+const reactions = [
+  { key: 'up', icon: 'thumbs up', content: '1K' },
+  { key: 'down', icon: 'thumbs down', content: 5 },
+]
 
 const janeAvatar = {
   image: 'public/images/avatar/small/ade.jpg',

packages/react/src/components/Chat/ChatMessage.tsx

@@ -121,7 +121,10 @@ class ChatMessage extends UIComponent<ReactProps<ChatMessageProps>, ChatMessageS
     timestamp: customPropTypes.itemShorthand,
     onBlur: PropTypes.func,
     onFocus: PropTypes.func,
-    reactionGroup: customPropTypes.itemShorthand,
+    reactionGroup: PropTypes.oneOfType([
+      customPropTypes.collectionShorthand,
+      customPropTypes.itemShorthand,
+    ]),
     reactionGroupPosition: PropTypes.oneOf(['start', 'end']),
   }
 

packages/react/src/themes/teams-dark/components/Chat/chatMessageVariables.ts

@@ -4,6 +4,8 @@ export default (siteVars: any): Partial<ChatMessageVariables> => {
   return {
     backgroundColor: siteVars.gray10,
     backgroundColorMine: '#3B3C54',
+    authorColor: siteVars.gray02, // will be gray[250] with new palette
+    contentColor: siteVars.colors.white,
     color: siteVars.colors.white,
     contentFocusOutlineColor: siteVars.brand,
     hasMentionNubbinColor: siteVars.naturalColors.orange[900], // orange[300] when the new palette pr is checked in

packages/react/src/themes/teams-high-contrast/components/Chat/chatMessageVariables.ts

@@ -4,6 +4,8 @@ export default (siteVars: any): Partial<ChatMessageVariables> => {
   return {
     backgroundColor: siteVars.black,
     backgroundColorMine: siteVars.black,
+    authorColor: siteVars.white,
+    contentColor: siteVars.white,
     color: siteVars.white,
     contentFocusOutlineColor: siteVars.colors.yellow[900], // Red flag (should this be accessibleYellow?)
     border: `1px solid ${siteVars.white}`,

packages/react/src/themes/teams/components/Chat/chatMessageStyles.ts

@@ -93,6 +93,7 @@ const chatMessageStyles: ComponentSlotStylesInput<
 
   author: ({ props: p, variables: v }): ICSSInJSStyle => ({
     ...((p.mine || p.attached === 'bottom' || p.attached === true) && screenReaderContainerStyles),
+    color: v.authorColor,
     marginRight: v.authorMarginRight,
     marginBottom: v.headerMarginBottom,
     fontWeight: v.authorFontWeight,
@@ -109,6 +110,7 @@ const chatMessageStyles: ComponentSlotStylesInput<
   }),
 
   content: ({ props: p, variables: v }): ICSSInJSStyle => ({
+    color: v.contentColor,
     display: 'block',
     '& a:focus': {
       outline: 'none',

packages/react/src/themes/teams/components/Chat/chatMessageVariables.ts

@@ -11,8 +11,10 @@ export interface ChatMessageVariables {
   offset: string
   padding: string
   authorMarginRight: string
+  authorColor: string
   authorFontWeight: number
   headerMarginBottom: string
+  contentColor: string
   contentFocusOutlineColor: string
   border: string
   badgeShadow: string
@@ -37,8 +39,10 @@ export default (siteVars): ChatMessageVariables => ({
   offset: pxToRem(100),
   padding: pxToRem(16),
   authorMarginRight: pxToRem(12),
-  authorFontWeight: siteVars.fontWeightBold,
+  authorColor: siteVars.gray02, // will be gray[500] with new palette
+  authorFontWeight: siteVars.fontWeightRegular,
   headerMarginBottom: pxToRem(2),
+  contentColor: '#252423', // will be gray[750] with new palette
   contentFocusOutlineColor: siteVars.colors.primary[500],
   border: 'none',
   badgeShadow: siteVars.shadowLevel1Darker,