feat(ChatMessage): add hasMention and isImportant variables in Teams …

…theme (#841) * -added hasMention and isImportant variables in teams theme * -update changelog * -updated example * -moved colors to variables * -added prototype -renamed mentionColor and importantColor to hasMentionColor and isImportantColor * -updated changelog
microsoft · Feb 5, 2019 · f854f12 · f854f12
1 parent c086719
commit f854f12
Show file tree

Hide file tree

Showing 7 changed files with 141 additions and 4 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -28,6 +28,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Add static outline and filled class names to icons in Teams theme @miroslavstastny ([#834](https://github.com/stardust-ui/react/pull/834))
 - Added slot class names in `ChatMessage`, `ChatItem`, `Dropdown`, `ItemLayout`, `Layout`, `MenuItem` @mnajdova ([#827](https://github.com/stardust-ui/react/pull/827))
 - Add `badge` and `badgePosition` properties on the `ChatMessage` @mnajdova ([#823](https://github.com/stardust-ui/react/pull/823))
+- Add `hasMention`, `isImportant`, `hasMentionColor` and `isImportantColor` in ChatMessage variables in Teams theme @mnajdova ([#841](https://github.com/stardust-ui/react/pull/841))
 
 ### Fixes
 - Fix `Dropdown` component styles regression @Bugaa92 ([#824](https://github.com/stardust-ui/react/pull/824))

diff --git a/docs/src/components/Sidebar/Sidebar.tsx b/docs/src/components/Sidebar/Sidebar.tsx
@@ -319,6 +319,14 @@ class Sidebar extends React.Component<any, any> {
                   <Menu.Item as={NavLink} exact to="/icon-viewer" activeClassName="active">
                     Processed Icons
                   </Menu.Item>
+                  <Menu.Item
+                    as={NavLink}
+                    exact
+                    to="/important-and-mention-messages"
+                    activeClassName="active"
+                  >
+                    Important and mention messages
+                  </Menu.Item>
                 </Menu.Menu>
               </Menu.Item>
             )}

diff --git a/docs/src/examples/components/Chat/Types/ChatMessageExampleBadge.shorthand.tsx b/docs/src/examples/components/Chat/Types/ChatMessageExampleBadge.shorthand.tsx
@@ -17,7 +17,6 @@ const items = [
           mine
           badge={{
             icon: 'exclamation',
-            color: 'red',
           }}
           badgePosition="start"
         />
@@ -36,13 +35,12 @@ const items = [
           timestamp="Yesterday, 10:15 PM"
           badge={{
             icon: 'at',
-            color: 'red',
           }}
         />
       ),
     },
     attached: 'top',
-    key: 'message-id-4',
+    key: 'message-id-2',
   },
 ]
 

diff --git a/docs/src/prototypes/ImportantAndMentionMessages/index.tsx b/docs/src/prototypes/ImportantAndMentionMessages/index.tsx
@@ -0,0 +1,95 @@
+import * as React from 'react'
+import { Avatar, Chat } from '@stardust-ui/react'
+
+const janeAvatar = {
+  image: 'public/images/avatar/small/ade.jpg',
+  status: { color: 'green', icon: 'check' },
+}
+
+const items = [
+  {
+    message: {
+      content: (
+        <Chat.Message
+          content="This is important message"
+          author="John Doe"
+          timestamp="Yesterday, 10:15 PM"
+          mine
+          badge={{ icon: 'redbang' }}
+          variables={{ isImportant: true }}
+        />
+      ),
+    },
+    contentPosition: 'end',
+    attached: 'top',
+    key: 'message-id-1',
+  },
+  {
+    gutter: { content: <Avatar {...janeAvatar} /> },
+    message: {
+      content: (
+        <Chat.Message
+          content="This is another important message (see how the borders radius respect the grouped ones)"
+          author="Jane Doe"
+          timestamp="Yesterday, 10:15 PM"
+          badge={{ icon: 'redbang' }}
+          variables={{ isImportant: true }}
+        />
+      ),
+    },
+    attached: 'top',
+    key: 'message-id-2',
+  },
+  {
+    gutter: { content: <Avatar {...janeAvatar} /> },
+    message: {
+      content: (
+        <Chat.Message
+          content="This is mention message @John"
+          author="Jane Doe"
+          timestamp="Yesterday, 10:15 PM"
+          badge={{ icon: 'mention' }}
+          variables={{ hasMention: true }}
+        />
+      ),
+    },
+    attached: true,
+    key: 'message-id-3',
+  },
+  {
+    gutter: { content: <Avatar {...janeAvatar} /> },
+    message: {
+      content: (
+        <Chat.Message
+          content="This is another mention message @John with custom color"
+          author="Jane Doe"
+          timestamp="Yesterday, 10:15 PM"
+          badge={{ icon: 'mention' }}
+          variables={siteVars => ({ hasMention: true, hasMentionColor: siteVars.brand })}
+        />
+      ),
+    },
+    attached: 'bottom',
+    key: 'message-id-4',
+  },
+  {
+    message: {
+      content: (
+        <Chat.Message
+          content="The color for the important messages can also be changed!"
+          author="John Doe"
+          timestamp="Yesterday, 10:16 PM"
+          mine
+          badge={{ icon: 'redbang' }}
+          variables={siteVars => ({ isImportant: true, isImportantColor: siteVars.yellow })}
+        />
+      ),
+    },
+    contentPosition: 'end',
+    key: 'message-id-5',
+  },
+]
+
+const ChatExample = () => <Chat items={items} />
+
+export default ChatExample
diff --git a/docs/src/routes.tsx b/docs/src/routes.tsx
@@ -78,6 +78,12 @@ const Router = () => (
             path="/icon-viewer"
             component={require('./prototypes/IconViewer/index').default}
           />,
+          <DocsLayout
+            exact
+            key="/important-and-mention-messages"
+            path="/important-and-mention-messages"
+            component={require('./prototypes/ImportantAndMentionMessages/index').default}
+          />,
         ]}
         <DocsLayout exact path="/accessibility" component={Accessibility} />
         <DocsLayout exact path="/theming" component={Theming} />

diff --git a/packages/react/src/themes/teams/components/Chat/chatMessageStyles.ts b/packages/react/src/themes/teams/components/Chat/chatMessageStyles.ts
@@ -25,6 +25,19 @@ const chatMessageStyles: ComponentSlotStylesInput<ChatMessageProps, ChatMessageV
         outline: `.2rem solid ${v.contentFocusOutlineColor}`,
       },
     }),
+    ...((v.hasMention || v.isImportant) && {
+      '::before': {
+        content: '""',
+        backgroundColor: v.hasMention ? v.hasMentionColor : v.isImportantColor,
+        height: '100%',
+        left: '0',
+        position: 'absolute',
+        top: '0',
+        width: pxToRem(3),
+        borderBottomLeftRadius: 'inherit',
+        borderTopLeftRadius: 'inherit',
+      },
+    }),
   }),
 
   author: ({ props: p, variables: v }): ICSSInJSStyle => ({
@@ -45,9 +58,17 @@ const chatMessageStyles: ComponentSlotStylesInput<ChatMessageProps, ChatMessageV
       textDecoration: 'underline',
     },
   }),
-  badge: ({ props: p, variables: v }) => {
+  badge: ({
+    props: p,
+    variables: v,
+    theme: {
+      siteVariables: { white },
+    },
+  }) => {
     const sidePosition = p.badgePosition === 'start' ? 'left' : 'right'
     return {
+      backgroundColor: v.hasMention ? v.hasMentionColor : v.isImportantColor,
+      color: white,
       boxShadow: v.badgeShadow,
       position: 'absolute',
       padding: pxToRem(4),

diff --git a/packages/react/src/themes/teams/components/Chat/chatMessageVariables.ts b/packages/react/src/themes/teams/components/Chat/chatMessageVariables.ts
@@ -12,6 +12,10 @@ export interface ChatMessageVariables {
   contentFocusOutlineColor: string
   border: string
   badgeShadow: string
+  isImportant: boolean
+  hasMention: boolean
+  hasMentionColor: string
+  isImportantColor: string
 }
 
 export default (siteVars): ChatMessageVariables => ({
@@ -26,4 +30,8 @@ export default (siteVars): ChatMessageVariables => ({
   contentFocusOutlineColor: siteVars.brand,
   border: 'none',
   badgeShadow: siteVars.shadowLevel1Darker,
+  isImportant: false,
+  hasMention: false,
+  hasMentionColor: siteVars.orange04,
+  isImportantColor: siteVars.red,
 })