From 00097930a87461ccdde8e26ac0921d57dbd85f31 Mon Sep 17 00:00:00 2001 From: manajdov Date: Thu, 31 Jan 2019 21:59:34 +0100 Subject: [PATCH 1/9] wip --- src/components/Chat/ChatMessage.tsx | 16 +++++++++++++++- .../components/Chat/chatMessageStyles.ts | 19 +++++++++++++++++++ 2 files changed, 34 insertions(+), 1 deletion(-) diff --git a/src/components/Chat/ChatMessage.tsx b/src/components/Chat/ChatMessage.tsx index 590546bb9d..345efb7d70 100644 --- a/src/components/Chat/ChatMessage.tsx +++ b/src/components/Chat/ChatMessage.tsx @@ -22,6 +22,7 @@ import { Accessibility, AccessibilityActionHandlers } from '../../lib/accessibil import Text from '../Text/Text' import Box from '../Box/Box' +import Label from '../Label/Label' export interface ChatMessageSlotClassNames { author: string @@ -47,6 +48,12 @@ export interface ChatMessageProps /** Timestamp of the message. */ timestamp?: ShorthandValue + /** Badge attached to the message. */ + badge?: ShorthandValue + + /** A message can format the badge to appear on the start, end, top or on the bottom of the message. */ + badgePosition?: 'start' | 'end' | 'top' | 'bottom' + /** * Called after user's focus. * @param {SyntheticEvent} event - React's original SyntheticEvent. @@ -83,6 +90,7 @@ class ChatMessage extends UIComponent, ChatMessageS static defaultProps = { accessibility: chatMessageBehavior, as: 'div', + badgePosition: 'end', } public state = { @@ -109,9 +117,13 @@ class ChatMessage extends UIComponent, ChatMessageS unhandledProps, styles, }: RenderResultConfig) { - const { author, children, content, timestamp } = this.props + const { author, children, content, timestamp, badge, badgePosition } = this.props const childrenPropExists = childrenExist(children) const className = childrenPropExists ? cx(classes.root, classes.content) : classes.root + const badgeElement = Label.create(badge, { + defaultProps: { circular: true, styles: styles.badge }, + }) + const badgeBeforeContent = badgePosition === 'start' || badgePosition === 'top' return ( , ChatMessageS children ) : ( <> + {badgeBeforeContent && badgeElement} {Text.create(author, { defaultProps: { size: 'small', @@ -142,6 +155,7 @@ class ChatMessage extends UIComponent, ChatMessageS }, })} {Box.create(content, { defaultProps: { styles: styles.content } })} + {!badgeBeforeContent && badgeElement} )} diff --git a/src/themes/teams/components/Chat/chatMessageStyles.ts b/src/themes/teams/components/Chat/chatMessageStyles.ts index 3f8a84d0ec..a9820033cb 100644 --- a/src/themes/teams/components/Chat/chatMessageStyles.ts +++ b/src/themes/teams/components/Chat/chatMessageStyles.ts @@ -44,6 +44,25 @@ const chatMessageStyles: ComponentSlotStylesInput ({ + position: 'absolute', + ...(badgePosition === 'start' && { + top: pxToRem(10), + left: pxToRem(-10), + }), + ...(badgePosition === 'end' && { + top: pxToRem(10), + right: pxToRem(-10), + }), + ...(badgePosition === 'top' && { + top: pxToRem(-10), + left: pxToRem(10), + }), + ...(badgePosition === 'bottom' && { + bottom: pxToRem(-10), + right: pxToRem(10), + }), + }), } export default chatMessageStyles From 74a073ee217eb8ac033df53a4c41f715299b6edc Mon Sep 17 00:00:00 2001 From: manajdov Date: Fri, 1 Feb 2019 13:02:01 +0100 Subject: [PATCH 2/9] -improved styles -restricted position to start and end --- src/components/Chat/ChatMessage.tsx | 13 ++++---- .../components/Chat/chatMessageStyles.ts | 31 +++++++------------ 2 files changed, 19 insertions(+), 25 deletions(-) diff --git a/src/components/Chat/ChatMessage.tsx b/src/components/Chat/ChatMessage.tsx index 345efb7d70..91654da311 100644 --- a/src/components/Chat/ChatMessage.tsx +++ b/src/components/Chat/ChatMessage.tsx @@ -51,8 +51,8 @@ export interface ChatMessageProps /** Badge attached to the message. */ badge?: ShorthandValue - /** A message can format the badge to appear on the start, end, top or on the bottom of the message. */ - badgePosition?: 'start' | 'end' | 'top' | 'bottom' + /** A message can format the badge to appear on the start or the end of the message. */ + badgePosition?: 'start' | 'end' /** * Called after user's focus. @@ -82,6 +82,8 @@ class ChatMessage extends UIComponent, ChatMessageS ...commonPropTypes.createCommon({ content: 'shorthand' }), accessibility: PropTypes.oneOfType([PropTypes.object, PropTypes.func]), author: customPropTypes.itemShorthand, + badge: customPropTypes.itemShorthand, + badgePosition: PropTypes.oneOf(['start', 'end']), mine: PropTypes.bool, timestamp: customPropTypes.itemShorthand, onFocus: PropTypes.func, @@ -121,9 +123,8 @@ class ChatMessage extends UIComponent, ChatMessageS const childrenPropExists = childrenExist(children) const className = childrenPropExists ? cx(classes.root, classes.content) : classes.root const badgeElement = Label.create(badge, { - defaultProps: { circular: true, styles: styles.badge }, + defaultProps: { styles: styles.badge }, }) - const badgeBeforeContent = badgePosition === 'start' || badgePosition === 'top' return ( , ChatMessageS children ) : ( <> - {badgeBeforeContent && badgeElement} + {badgePosition === 'start' && badgeElement} {Text.create(author, { defaultProps: { size: 'small', @@ -155,7 +156,7 @@ class ChatMessage extends UIComponent, ChatMessageS }, })} {Box.create(content, { defaultProps: { styles: styles.content } })} - {!badgeBeforeContent && badgeElement} + {badgePosition === 'end' && badgeElement} )} diff --git a/src/themes/teams/components/Chat/chatMessageStyles.ts b/src/themes/teams/components/Chat/chatMessageStyles.ts index a9820033cb..4a3a5f83f6 100644 --- a/src/themes/teams/components/Chat/chatMessageStyles.ts +++ b/src/themes/teams/components/Chat/chatMessageStyles.ts @@ -6,6 +6,7 @@ import { pxToRem } from '../../../../lib' const chatMessageStyles: ComponentSlotStylesInput = { root: ({ props: p, variables: v }): ICSSInJSStyle => ({ + position: 'relative', display: 'inline-block', paddingLeft: v.padding, paddingRight: v.padding, @@ -44,25 +45,17 @@ const chatMessageStyles: ComponentSlotStylesInput ({ - position: 'absolute', - ...(badgePosition === 'start' && { - top: pxToRem(10), - left: pxToRem(-10), - }), - ...(badgePosition === 'end' && { - top: pxToRem(10), - right: pxToRem(-10), - }), - ...(badgePosition === 'top' && { - top: pxToRem(-10), - left: pxToRem(10), - }), - ...(badgePosition === 'bottom' && { - bottom: pxToRem(-10), - right: pxToRem(10), - }), - }), + badge: ({ props: { badgePosition } }) => { + const sidePosition = badgePosition === 'start' ? 'left' : 'right' + return { + position: 'absolute', + height: pxToRem(24), + width: pxToRem(24), + borderRadius: '50%', + top: pxToRem(4), + [sidePosition]: pxToRem(-12), + } + }, } export default chatMessageStyles From b5c49f4a6f629e483acaa0a58371f18a622fc95b Mon Sep 17 00:00:00 2001 From: manajdov Date: Fri, 1 Feb 2019 14:56:04 +0100 Subject: [PATCH 3/9] -added example for the badge prop --- .../ChatMessageExampleBadge.shorthand.tsx | 51 +++++++++++++++++++ .../examples/components/Chat/Types/index.tsx | 5 ++ .../components/Chat/chatMessageStyles.ts | 4 +- 3 files changed, 58 insertions(+), 2 deletions(-) create mode 100644 docs/src/examples/components/Chat/Types/ChatMessageExampleBadge.shorthand.tsx diff --git a/docs/src/examples/components/Chat/Types/ChatMessageExampleBadge.shorthand.tsx b/docs/src/examples/components/Chat/Types/ChatMessageExampleBadge.shorthand.tsx new file mode 100644 index 0000000000..34b9d16a59 --- /dev/null +++ b/docs/src/examples/components/Chat/Types/ChatMessageExampleBadge.shorthand.tsx @@ -0,0 +1,51 @@ +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', + key: 'message-id-1', + }, + { + gutter: { content: }, + message: { + content: ( + + ), + }, + attached: 'top', + key: 'message-id-4', + }, +] + +const ChatExample = () => + +export default ChatExample diff --git a/docs/src/examples/components/Chat/Types/index.tsx b/docs/src/examples/components/Chat/Types/index.tsx index 935c668be7..83952f611a 100644 --- a/docs/src/examples/components/Chat/Types/index.tsx +++ b/docs/src/examples/components/Chat/Types/index.tsx @@ -19,6 +19,11 @@ const Types = () => ( description="A Chat item with custom styles for every slot." examplePath="components/Chat/Types/ChatMessageExampleStyled" /> + ) diff --git a/src/themes/teams/components/Chat/chatMessageStyles.ts b/src/themes/teams/components/Chat/chatMessageStyles.ts index 4a3a5f83f6..45c0610d1a 100644 --- a/src/themes/teams/components/Chat/chatMessageStyles.ts +++ b/src/themes/teams/components/Chat/chatMessageStyles.ts @@ -45,8 +45,8 @@ const chatMessageStyles: ComponentSlotStylesInput { - const sidePosition = badgePosition === 'start' ? 'left' : 'right' + badge: ({ props: p }) => { + const sidePosition = p.badgePosition === 'start' ? 'left' : 'right' return { position: 'absolute', height: pxToRem(24), From 884e43ddc6d42161f69182adac30c5e50ed048a3 Mon Sep 17 00:00:00 2001 From: manajdov Date: Fri, 1 Feb 2019 14:59:13 +0100 Subject: [PATCH 4/9] -added example for the badge prop --- CHANGELOG.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 30def22193..389431081c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -17,6 +17,9 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm ## [Unreleased] +### Features +- Add `badge` and `badgePosition` properties on the `ChatMessage` @mnajdova ([#823](https://github.com/stardust-ui/react/pull/823)) + ## [v0.19.2](https://github.com/stardust-ui/react/tree/v0.19.2) (2019-02-01) [Compare changes](https://github.com/stardust-ui/react/compare/v0.19.1...v0.19.2) From 2c7ad9e8b6a43f598c18e014af4b386268cd32d8 Mon Sep 17 00:00:00 2001 From: manajdov Date: Fri, 1 Feb 2019 15:02:26 +0100 Subject: [PATCH 5/9] -added className for the badge --- src/components/Chat/ChatMessage.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/components/Chat/ChatMessage.tsx b/src/components/Chat/ChatMessage.tsx index 91654da311..8158799915 100644 --- a/src/components/Chat/ChatMessage.tsx +++ b/src/components/Chat/ChatMessage.tsx @@ -27,6 +27,7 @@ import Label from '../Label/Label' export interface ChatMessageSlotClassNames { author: string timestamp: string + badge: string } export interface ChatMessageProps @@ -123,7 +124,10 @@ class ChatMessage extends UIComponent, ChatMessageS const childrenPropExists = childrenExist(children) const className = childrenPropExists ? cx(classes.root, classes.content) : classes.root const badgeElement = Label.create(badge, { - defaultProps: { styles: styles.badge }, + defaultProps: { + className: ChatMessage.slotClassNames.badge, + styles: styles.badge, + }, }) return ( @@ -168,6 +172,7 @@ ChatMessage.create = createShorthandFactory(ChatMessage, 'content') ChatMessage.slotClassNames = { author: `${ChatMessage.className}__author`, timestamp: `${ChatMessage.className}__timestamp`, + badge: `${ChatMessage.className}__badge`, } export default ChatMessage From 09b8c6df1fa045e362571e07fb0a0bf926783027 Mon Sep 17 00:00:00 2001 From: manajdov Date: Fri, 1 Feb 2019 15:04:32 +0100 Subject: [PATCH 6/9] -fixed description of the badgePosition prop. --- src/components/Chat/ChatMessage.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Chat/ChatMessage.tsx b/src/components/Chat/ChatMessage.tsx index 8158799915..8e2e11d35b 100644 --- a/src/components/Chat/ChatMessage.tsx +++ b/src/components/Chat/ChatMessage.tsx @@ -52,7 +52,7 @@ export interface ChatMessageProps /** Badge attached to the message. */ badge?: ShorthandValue - /** A message can format the badge to appear on the start or the end of the message. */ + /** A message can format the badge to appear at the start or the end of the message. */ badgePosition?: 'start' | 'end' /** From 16d115e8ef49e6ccea27476eb533a15cdfcfba85 Mon Sep 17 00:00:00 2001 From: manajdov Date: Fri, 1 Feb 2019 15:15:35 +0100 Subject: [PATCH 7/9] -added zIndex to the styles for the badge --- src/themes/teams/components/Chat/chatMessageStyles.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/themes/teams/components/Chat/chatMessageStyles.ts b/src/themes/teams/components/Chat/chatMessageStyles.ts index 45c0610d1a..46caae643c 100644 --- a/src/themes/teams/components/Chat/chatMessageStyles.ts +++ b/src/themes/teams/components/Chat/chatMessageStyles.ts @@ -53,6 +53,7 @@ const chatMessageStyles: ComponentSlotStylesInput Date: Fri, 1 Feb 2019 17:20:34 +0100 Subject: [PATCH 8/9] -added box shadow to the chat badge --- src/themes/teams/components/Chat/chatMessageStyles.ts | 3 ++- src/themes/teams/components/Chat/chatMessageVariables.ts | 2 ++ src/themes/teams/siteVariables.ts | 1 + 3 files changed, 5 insertions(+), 1 deletion(-) diff --git a/src/themes/teams/components/Chat/chatMessageStyles.ts b/src/themes/teams/components/Chat/chatMessageStyles.ts index 46caae643c..379a83d165 100644 --- a/src/themes/teams/components/Chat/chatMessageStyles.ts +++ b/src/themes/teams/components/Chat/chatMessageStyles.ts @@ -45,9 +45,10 @@ const chatMessageStyles: ComponentSlotStylesInput { + badge: ({ props: p, variables: v }) => { const sidePosition = p.badgePosition === 'start' ? 'left' : 'right' return { + boxShadow: v.badgeShadow, position: 'absolute', height: pxToRem(24), width: pxToRem(24), diff --git a/src/themes/teams/components/Chat/chatMessageVariables.ts b/src/themes/teams/components/Chat/chatMessageVariables.ts index 9b473f6795..cf85908a51 100644 --- a/src/themes/teams/components/Chat/chatMessageVariables.ts +++ b/src/themes/teams/components/Chat/chatMessageVariables.ts @@ -11,6 +11,7 @@ export interface ChatMessageVariables { headerMarginBottom: string contentFocusOutlineColor: string border: string + badgeShadow: string } export default (siteVars): ChatMessageVariables => ({ @@ -24,4 +25,5 @@ export default (siteVars): ChatMessageVariables => ({ headerMarginBottom: pxToRem(2), contentFocusOutlineColor: siteVars.brand, border: 'none', + badgeShadow: siteVars.shadowLevel1Darker, }) diff --git a/src/themes/teams/siteVariables.ts b/src/themes/teams/siteVariables.ts index f7cf0aac2f..010188f9a1 100644 --- a/src/themes/teams/siteVariables.ts +++ b/src/themes/teams/siteVariables.ts @@ -45,6 +45,7 @@ export const green04 = '#237b4b' // SHADOW LEVELS // export const shadowLevel1 = '0 .2rem .4rem -.075rem rgba(0, 0, 0, 0.1)' +export const shadowLevel1Darker = '0 .2rem .4rem -.075rem rgba(0, 0, 0, 0.5)' // // FONT SIZES From 35cb1edc3832e9372e43113eea59c915111663d5 Mon Sep 17 00:00:00 2001 From: manajdov Date: Mon, 4 Feb 2019 16:17:54 +0100 Subject: [PATCH 9/9] -updated styled chat example -improved styles for the badge --- .../Types/ChatMessageExampleStyled.shorthand.tsx | 14 +++++++++++++- .../teams/components/Chat/chatMessageStyles.ts | 8 +++++--- 2 files changed, 18 insertions(+), 4 deletions(-) diff --git a/docs/src/examples/components/Chat/Types/ChatMessageExampleStyled.shorthand.tsx b/docs/src/examples/components/Chat/Types/ChatMessageExampleStyled.shorthand.tsx index 2d6d1c1489..36733fdda2 100644 --- a/docs/src/examples/components/Chat/Types/ChatMessageExampleStyled.shorthand.tsx +++ b/docs/src/examples/components/Chat/Types/ChatMessageExampleStyled.shorthand.tsx @@ -17,10 +17,11 @@ const content = ( ) -const slotLabelStyles: any = (label, beforeStyles) => ({ +const slotLabelStyles: any = (label, beforeStyles?, slotStyles?) => ({ position: 'relative', border: '1px solid #000', padding: '12px', + ...slotStyles, ':before': { content: `'${label}'`, position: 'absolute', @@ -56,6 +57,14 @@ const ChatMessageExampleStyled = () => ( }), content: { ...slotLabelStyles('content'), backgroundColor: '#F08080' }, timestamp: { ...slotLabelStyles('timestamp'), backgroundColor: '#FFFFE0' }, + badge: { + ...slotLabelStyles( + 'badge', + { textAlign: 'center', left: '0px' }, + { position: 'absolute', overflow: 'visible' }, + ), + backgroundColor: '#FFFF00', + }, }, }, componentVariables: { @@ -77,6 +86,8 @@ const ChatMessageExampleStyled = () => ( author="John Doe" timestamp="Yesterday, 10:15 PM" mine + badge={{ icon: 'at' }} + badgePosition="start" /> ), }, @@ -92,6 +103,7 @@ const ChatMessageExampleStyled = () => ( content={{ content }} author="Jane Doe" timestamp="Yesterday, 10:15 PM" + badge={{ icon: 'exclamation' }} /> ), }, diff --git a/packages/react/src/themes/teams/components/Chat/chatMessageStyles.ts b/packages/react/src/themes/teams/components/Chat/chatMessageStyles.ts index 379a83d165..a3a270044a 100644 --- a/packages/react/src/themes/teams/components/Chat/chatMessageStyles.ts +++ b/packages/react/src/themes/teams/components/Chat/chatMessageStyles.ts @@ -50,12 +50,14 @@ const chatMessageStyles: ComponentSlotStylesInput