From f854f12ea7750e0f0545b6ddc96ba365afcb08d3 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Tue, 5 Feb 2019 13:18:29 +0100 Subject: [PATCH] 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 --- CHANGELOG.md | 1 + docs/src/components/Sidebar/Sidebar.tsx | 8 ++ .../ChatMessageExampleBadge.shorthand.tsx | 4 +- .../ImportantAndMentionMessages/index.tsx | 95 +++++++++++++++++++ docs/src/routes.tsx | 6 ++ .../components/Chat/chatMessageStyles.ts | 23 ++++- .../components/Chat/chatMessageVariables.ts | 8 ++ 7 files changed, 141 insertions(+), 4 deletions(-) create mode 100644 docs/src/prototypes/ImportantAndMentionMessages/index.tsx diff --git a/CHANGELOG.md b/CHANGELOG.md index fd8955897e..7aaeaf138b 100644 --- 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 index 2fd65d095e..02853c35df 100644 --- a/docs/src/components/Sidebar/Sidebar.tsx +++ b/docs/src/components/Sidebar/Sidebar.tsx @@ -319,6 +319,14 @@ class Sidebar extends React.Component { Processed Icons + + Important and mention messages + )} diff --git a/docs/src/examples/components/Chat/Types/ChatMessageExampleBadge.shorthand.tsx b/docs/src/examples/components/Chat/Types/ChatMessageExampleBadge.shorthand.tsx index 34b9d16a59..676aeb0fdc 100644 --- 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 new file mode 100644 index 0000000000..0e47650a8b --- /dev/null +++ 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: ( + + ), + }, + contentPosition: 'end', + attached: 'top', + key: 'message-id-1', + }, + { + gutter: { content: }, + message: { + content: ( + + ), + }, + attached: 'top', + key: 'message-id-2', + }, + { + gutter: { content: }, + message: { + content: ( + + ), + }, + attached: true, + key: 'message-id-3', + }, + { + gutter: { content: }, + message: { + content: ( + ({ hasMention: true, hasMentionColor: siteVars.brand })} + /> + ), + }, + attached: 'bottom', + key: 'message-id-4', + }, + { + message: { + content: ( + ({ isImportant: true, isImportantColor: siteVars.yellow })} + /> + ), + }, + contentPosition: 'end', + key: 'message-id-5', + }, +] + +const ChatExample = () => + +export default ChatExample diff --git a/docs/src/routes.tsx b/docs/src/routes.tsx index 282373b690..b9a1490e9f 100644 --- 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} />, + , ]} diff --git a/packages/react/src/themes/teams/components/Chat/chatMessageStyles.ts b/packages/react/src/themes/teams/components/Chat/chatMessageStyles.ts index a3a270044a..21a6c23914 100644 --- 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 ({ @@ -45,9 +58,17 @@ const chatMessageStyles: ComponentSlotStylesInput { + 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 index cf85908a51..aeef07e0e3 100644 --- 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, })