From 1acd3848493738e2242c9aec45d81f08a8a2949f Mon Sep 17 00:00:00 2001 From: Alexandru Buliga Date: Tue, 4 Dec 2018 12:26:53 +0100 Subject: [PATCH 01/21] feat(chat): removed message avatar, added item gutter --- .../Chat/Types/ChatExample.shorthand.tsx | 17 ++-- .../components/Chat/Types/ChatExample.tsx | 79 ++++++++++--------- .../ChatMessageExampleStyled.shorthand.tsx | 27 +++---- .../Chat/Types/ChatMessageExampleStyled.tsx | 49 ++++++------ .../prototypes/chatPane/chatPaneContent.tsx | 49 +++++++----- .../chatPane/services/messageFactoryMock.tsx | 40 +++++++--- src/components/Chat/ChatItem.tsx | 43 ++++++---- src/components/Chat/ChatMessage.tsx | 73 ++++------------- .../teams/components/Chat/chatItemStyles.ts | 31 +++++++- .../components/Chat/chatItemVariables.ts | 16 +--- .../components/Chat/chatMessageStyles.ts | 33 ++------ .../components/Chat/chatMessageVariables.ts | 8 +- .../teams/components/Chat/chatStyles.ts | 7 +- test/specs/components/Chat/ChatItem-test.tsx | 9 ++- .../components/Chat/ChatMessage-test.tsx | 22 ++---- 15 files changed, 243 insertions(+), 260 deletions(-) diff --git a/docs/src/examples/components/Chat/Types/ChatExample.shorthand.tsx b/docs/src/examples/components/Chat/Types/ChatExample.shorthand.tsx index 7204a22562..307605c187 100644 --- a/docs/src/examples/components/Chat/Types/ChatExample.shorthand.tsx +++ b/docs/src/examples/components/Chat/Types/ChatExample.shorthand.tsx @@ -1,5 +1,5 @@ import React from 'react' -import { Chat, Divider } from '@stardust-ui/react' +import { Avatar, Chat, Divider } from '@stardust-ui/react' const janeAvatar = { image: 'public/images/avatar/small/ade.jpg', @@ -8,23 +8,19 @@ const janeAvatar = { const items = [ { + mine: true, content: ( ), key: 'message-id-1', }, { - content: ( - - ), + gutter: , + content: , key: 'message-id-2', }, { + mine: true, content: ( , content: ( ), key: 'message-id-4', @@ -51,6 +47,7 @@ const items = [ key: 'message-id-5', }, { + mine: true, content: ( ( - - - - - - - - - - - - + + } + /> + } + content={} + /> + + } + /> + } + content={ + + } + /> - - - + + } + /> ) diff --git a/docs/src/examples/components/Chat/Types/ChatMessageExampleStyled.shorthand.tsx b/docs/src/examples/components/Chat/Types/ChatMessageExampleStyled.shorthand.tsx index 84f895029f..f2c8e7fbe2 100644 --- a/docs/src/examples/components/Chat/Types/ChatMessageExampleStyled.shorthand.tsx +++ b/docs/src/examples/components/Chat/Types/ChatMessageExampleStyled.shorthand.tsx @@ -1,5 +1,5 @@ import React from 'react' -import { Chat, Provider } from '@stardust-ui/react' +import { Avatar, Chat, Provider } from '@stardust-ui/react' const janeAvatar = { image: 'public/images/avatar/small/ade.jpg', @@ -40,14 +40,16 @@ const ChatMessageExampleStyled = () => ( ( }, componentVariables: { ChatMessage: siteVars => ({ - messageBody: { - focusOutlineColor: siteVars.white, + content: { + focusOutlineColor: siteVars.red, }, }), }, @@ -65,6 +67,7 @@ const ChatMessageExampleStyled = () => ( ( }, { key: 'message-id-2', + gutter: , content: ( - + ), }, ]} diff --git a/docs/src/examples/components/Chat/Types/ChatMessageExampleStyled.tsx b/docs/src/examples/components/Chat/Types/ChatMessageExampleStyled.tsx index 110553fd61..14669387a2 100644 --- a/docs/src/examples/components/Chat/Types/ChatMessageExampleStyled.tsx +++ b/docs/src/examples/components/Chat/Types/ChatMessageExampleStyled.tsx @@ -1,5 +1,5 @@ import React from 'react' -import { Chat, Provider } from '@stardust-ui/react' +import { Avatar, Chat, Provider } from '@stardust-ui/react' const janeAvatar = { image: 'public/images/avatar/small/ade.jpg', @@ -40,14 +40,16 @@ const ChatMessageExampleStyled = () => ( ( }, componentVariables: { ChatMessage: siteVars => ({ - messageBody: { + content: { focusOutlineColor: siteVars.white, }, }), @@ -63,22 +65,23 @@ const ChatMessageExampleStyled = () => ( }} > - - - - - - + + } + /> + } + content={ + + } + /> ) diff --git a/docs/src/prototypes/chatPane/chatPaneContent.tsx b/docs/src/prototypes/chatPane/chatPaneContent.tsx index 16805bffcc..21945f82c6 100644 --- a/docs/src/prototypes/chatPane/chatPaneContent.tsx +++ b/docs/src/prototypes/chatPane/chatPaneContent.tsx @@ -1,6 +1,6 @@ import * as React from 'react' import Scrollbars from 'react-custom-scrollbars' -import { Chat, Divider } from '@stardust-ui/react' +import { Chat, Divider, Avatar } from '@stardust-ui/react' import { ChatData, ChatItemTypes, generateChatProps } from './services' const screenReaderMessageContainerStyles: React.CSSProperties = { @@ -38,26 +38,35 @@ class ChatPaneContainer extends React.PureComponent { } private generateChatItems(chat: ChatData): JSX.Element[] { - return generateChatProps(chat).map(({ itemType, ...props }, index) => { - const ElementType = this.getElementType(itemType) - const maybeAttributesForDivider = - itemType === ChatItemTypes.divider - ? { - role: 'heading', - 'aria-level': 3, + return generateChatProps(chat).map( + ({ mine, gutter, content: { itemType, ...props } }, index) => { + const ElementType = this.getElementType(itemType) + const maybeAttributesForDivider = + itemType === ChatItemTypes.divider + ? { + role: 'heading', + 'aria-level': 3, + } + : {} + return ( + } + content={ + <> + {itemType === ChatItemTypes.message && ( +
+ {this.getMessagePreviewForScreenReader(props)} +
+ )} + + } - : {} - return ( - - {itemType === ChatItemTypes.message && ( -
- {this.getMessagePreviewForScreenReader(props)} -
- )} - - - ) - }) + /> + ) + }, + ) } private getElementType = (itemType: ChatItemTypes) => { diff --git a/docs/src/prototypes/chatPane/services/messageFactoryMock.tsx b/docs/src/prototypes/chatPane/services/messageFactoryMock.tsx index 7d50c4ed2d..4224d7d927 100644 --- a/docs/src/prototypes/chatPane/services/messageFactoryMock.tsx +++ b/docs/src/prototypes/chatPane/services/messageFactoryMock.tsx @@ -1,4 +1,11 @@ -import { Attachment, Popup, Button, Menu, popupFocusTrapBehavior } from '@stardust-ui/react' +import { + Attachment, + Popup, + Button, + Menu, + popupFocusTrapBehavior, + AvatarProps, +} from '@stardust-ui/react' import * as React from 'react' import * as _ from 'lodash' import { ChatMessageProps } from 'src/components/Chat/ChatMessage' @@ -12,18 +19,22 @@ export enum ChatItemTypes { divider, } -interface ChatItem { +interface ChatItemType { itemType: ChatItemTypes } -interface ChatMessage extends ChatMessageProps, ChatItem { +interface ChatMessage extends ChatMessageProps, ChatItemType { tabIndex: number 'aria-labelledby': string text: string } -interface Divider extends DividerProps, ChatItem {} +interface Divider extends DividerProps, ChatItemType {} -type ChatItemContentProps = ChatMessage | Divider +type ChatItem = { + content?: ChatMessage | Divider + gutter?: AvatarProps + mine?: boolean +} type StatusPropsExtendable = Extendable const statusMap: Map = new Map([ @@ -33,7 +44,7 @@ const statusMap: Map = new Map([ ['Offline', { color: 'grey', title: 'Offline' }], ] as [UserStatus, StatusPropsExtendable][]) -function generateChatMsgProps(message: MessageData, fromUser: UserData): ChatMessage { +function generateChatMsgProps(message: MessageData, fromUser: UserData): ChatItem { const { content, mine } = message const messageProps: ChatMessage = { // aria-labelledby will need to by generated based on the needs. Currently just hardcoded. @@ -53,12 +64,15 @@ function generateChatMsgProps(message: MessageData, fromUser: UserData): ChatMes content: `${fromUser.firstName} ${fromUser.lastName} `, id: `sender-${message.id}`, }, - avatar: !message.mine && { image: fromUser.avatar, status: statusMap.get(fromUser.status) }, itemType: ChatItemTypes.message, text: content, } - return messageProps + return { + mine, + content: messageProps, + gutter: !message.mine && { image: fromUser.avatar, status: statusMap.get(fromUser.status) }, + } } function createMessageContent(message: MessageData): ShorthandValue { @@ -120,20 +134,20 @@ function createMessageContentWithAttachments(content: string, messageId: string) ) } -function generateDividerProps(props: DividerProps): Divider { +function generateDividerProps(props: DividerProps): ChatItem { const { content, important, color = 'secondary' } = props const dividerProps: Divider = { itemType: ChatItemTypes.divider, content, important, color } - return dividerProps + return { content: dividerProps } } -export function generateChatProps(chat: ChatData): ChatItemContentProps[] { +export function generateChatProps(chat: ChatData): ChatItem[] { if (!chat || !chat.members || !chat.messages) { return [] } const { messages, members } = chat - const chatProps: ChatItemContentProps[] = [] + const chatProps: ChatItem[] = [] // First date divider chatProps.push(generateDividerProps({ content: getFriendlyDateString(messages[0].date) })) @@ -152,7 +166,7 @@ export function generateChatProps(chat: ChatData): ChatItemContentProps[] { chatProps.push(generateChatMsgProps(lastMsg, members.get(lastMsg.from))) // Last read divider - const myLastMsgIndex = _.findLastIndex(chatProps, item => (item as ChatMessage).mine) + const myLastMsgIndex = _.findLastIndex(chatProps, item => item.mine) if (myLastMsgIndex < chatProps.length - 1) { chatProps.splice( myLastMsgIndex + 1, diff --git a/src/components/Chat/ChatItem.tsx b/src/components/Chat/ChatItem.tsx index 308e012394..d44fa762e3 100644 --- a/src/components/Chat/ChatItem.tsx +++ b/src/components/Chat/ChatItem.tsx @@ -1,4 +1,5 @@ import * as React from 'react' +import * as PropTypes from 'prop-types' import { Extendable, ShorthandValue } from '../../../types/utils' import { @@ -10,13 +11,21 @@ import { ChildrenComponentProps, ContentComponentProps, commonPropTypes, + customPropTypes, } from '../../lib' import Slot from '../Slot/Slot' +import { ComponentSlotStylesPrepared } from 'src/themes/types' export interface ChatItemProps extends UIComponentProps, ChildrenComponentProps, - ContentComponentProps {} + ContentComponentProps { + /** Chat items can have a gutter. */ + gutter?: ShorthandValue + + /** Indicates whether message belongs to the current user. */ + mine?: boolean +} /** * A chat item represents a single event in a chat. @@ -32,32 +41,36 @@ class ChatItem extends UIComponent, any> { ...commonPropTypes.createCommon({ content: 'shorthand', }), + gutter: customPropTypes.itemShorthand, + mine: PropTypes.bool, } static defaultProps = { as: 'li', } - renderComponent({ - ElementType, - classes, - styles, - variables, - rest, - }: RenderResultConfig) { - const { children, content } = this.props + renderComponent({ ElementType, classes, rest, styles }: RenderResultConfig) { + const { children } = this.props return ( - {childrenExist(children) - ? children - : Slot.create(content, { - styles: styles.content, - variables: variables.content, - })} + {childrenExist(children) ? children : this.renderChatItem(styles)} ) } + + private renderChatItem(styles: ComponentSlotStylesPrepared) { + const { content, gutter, mine } = this.props + const gutterElement = Slot.create(gutter, { defaultProps: { styles: styles.gutter } }) + + return ( + <> + {!mine && gutterElement} + {Slot.create(content, { defaultProps: { styles: styles.content } })} + {mine && gutterElement} + + ) + } } ChatItem.create = createShorthandFactory(ChatItem, 'content') diff --git a/src/components/Chat/ChatMessage.tsx b/src/components/Chat/ChatMessage.tsx index bd33694d03..fc0463af64 100644 --- a/src/components/Chat/ChatMessage.tsx +++ b/src/components/Chat/ChatMessage.tsx @@ -13,15 +13,10 @@ import { ContentComponentProps, commonPropTypes, } from '../../lib' -import { - ComponentVariablesInput, - ComponentSlotClasses, - ComponentSlotStylesInput, -} from '../../themes/types' import { Extendable, ShorthandValue } from '../../../types/utils' -import Avatar from '../Avatar/Avatar' import { chatMessageBehavior } from '../../lib/accessibility' import { Accessibility, AccessibilityActionHandlers } from '../../lib/accessibility/types' + import Text from '../Text/Text' import Slot from '../Slot/Slot' @@ -38,9 +33,6 @@ export interface ChatMessageProps /** Author of the message. */ author?: ShorthandValue - /** Chat messages can have an avatar. */ - avatar?: ShorthandValue - /** Indicates whether message belongs to the current user. */ mine?: boolean @@ -64,7 +56,6 @@ class ChatMessage extends UIComponent, any> { }), accessibility: PropTypes.oneOfType([PropTypes.object, PropTypes.func]), author: customPropTypes.itemShorthand, - avatar: customPropTypes.itemShorthand, mine: PropTypes.bool, timestamp: customPropTypes.itemShorthand, } @@ -87,9 +78,8 @@ class ChatMessage extends UIComponent, any> { accessibility, rest, styles, - variables, }: RenderResultConfig) { - const { children } = this.props + const { author, children, content, mine, timestamp } = this.props const childrenPropExists = childrenExist(children) const className = childrenPropExists ? cx(classes.root, classes.content) : classes.root @@ -100,56 +90,21 @@ class ChatMessage extends UIComponent, any> { {...rest} className={className} > - {childrenPropExists ? children : this.renderContent(classes, styles, variables)} + {childrenPropExists ? ( + children + ) : ( + <> + {!mine && + Text.create(author, { defaultProps: { size: 'small', styles: styles.author } })} + {Text.create(timestamp, { + defaultProps: { size: 'small', styles: styles.timestamp, timestamp: true }, + })} + {Slot.create(content, { defaultProps: { styles: styles.content } })} + + )} ) } - - private renderContent = ( - classes: ComponentSlotClasses, - styles: ComponentSlotStylesInput, - variables: ComponentVariablesInput, - ) => { - const { author, avatar, content, mine, timestamp } = this.props - - const avatarElement = Avatar.create(avatar, { - defaultProps: { - styles: styles.avatar, - variables: variables.avatar, - }, - }) - - const authorElement = Text.create(author, { - defaultProps: { - size: 'small', - styles: styles.author, - }, - }) - - const timestampElement = Text.create(timestamp, { - defaultProps: { - size: 'small', - styles: styles.timestamp, - timestamp: true, - }, - }) - - const contentElement = Slot.create(content, { - defaultProps: { styles: styles.content }, - }) - - return ( - <> - {!mine && avatarElement} - - {!mine && authorElement} - {timestampElement} - {contentElement} - - {mine && avatarElement} - - ) - } } ChatMessage.create = createShorthandFactory(ChatMessage, 'content') diff --git a/src/themes/teams/components/Chat/chatItemStyles.ts b/src/themes/teams/components/Chat/chatItemStyles.ts index eba9eb8e2f..7079e0352b 100644 --- a/src/themes/teams/components/Chat/chatItemStyles.ts +++ b/src/themes/teams/components/Chat/chatItemStyles.ts @@ -1,7 +1,32 @@ -import { ICSSInJSStyle } from '../../../types' +import { ICSSInJSStyle, ComponentSlotStylesInput } from '../../../types' +import { ChatItemProps } from 'src/components/Chat/ChatItem' +import { ChatMessageVariables } from './chatMessageVariables' +import { pxToRem } from 'src/lib' -const chatItemStyles = { - root: (): ICSSInJSStyle => ({}), +const _10pxAsRem_ = pxToRem(10) +const _14pxAsRem_ = pxToRem(14) + +const chatItemStyles: ComponentSlotStylesInput = { + root: ({ props: p }): ICSSInJSStyle => ({ + ...(p.gutter && { display: 'flex' }), + position: 'relative', + justifyContent: p.mine ? 'flex-end' : 'flex-start', + marginTop: _14pxAsRem_, + marginBottom: _14pxAsRem_, + }), + + gutter: ({ props: p }): ICSSInJSStyle => ({ + flex: 'none', + display: p.mine ? 'none' : undefined, + marginTop: _10pxAsRem_, + marginBottom: _10pxAsRem_, + marginLeft: p.mine ? _10pxAsRem_ : 0, + marginRight: p.mine ? 0 : _10pxAsRem_, + }), + + content: ({ props: p }): ICSSInJSStyle => ({ + ...(p.mine && { float: 'right' }), + }), } export default chatItemStyles diff --git a/src/themes/teams/components/Chat/chatItemVariables.ts b/src/themes/teams/components/Chat/chatItemVariables.ts index c7770045c9..de762afafd 100644 --- a/src/themes/teams/components/Chat/chatItemVariables.ts +++ b/src/themes/teams/components/Chat/chatItemVariables.ts @@ -1,15 +1,3 @@ -export interface ChatItemVariables { - messageWidth: string - messageColor: string - messageColorMine: string - avatar: { statusBorderColor: string } -} +export interface ChatItemVariables {} -export default (siteVars): ChatItemVariables => ({ - messageWidth: '80%', - messageColor: siteVars.white, - messageColorMine: '#E0E0ED', - avatar: { - statusBorderColor: siteVars.gray10, - }, -}) +export default (siteVars): ChatItemVariables => ({}) diff --git a/src/themes/teams/components/Chat/chatMessageStyles.ts b/src/themes/teams/components/Chat/chatMessageStyles.ts index ac3fc94955..bce365e1a8 100644 --- a/src/themes/teams/components/Chat/chatMessageStyles.ts +++ b/src/themes/teams/components/Chat/chatMessageStyles.ts @@ -7,40 +7,19 @@ const px10asRem = pxToRem(10) const chatMessageStyles: ComponentSlotStylesInput = { root: ({ props: p, variables: v }): ICSSInJSStyle => ({ - display: 'inline-flex', position: 'relative', - marginTop: '1rem', - marginBottom: '1rem', - ...(p.mine && { - float: 'right', - }), + padding: pxToRem(14), + borderRadius: '0.3rem', + color: 'rgb(64, 64, 64)', + backgroundColor: p.mine ? v.messageColorMine : v.messageColor, maxWidth: v.messageWidth, wordBreak: 'break-word', wordWrap: 'break-word', ':focus': { - outline: 'none', - '& .ui-chat__message__messageBody': { - outline: `.2rem solid ${v.messageBody.focusOutlineColor}`, - }, + outline: `.2rem solid ${v.content.focusOutlineColor}`, }, }), - avatar: ({ props: p }: { props: ChatMessageProps }): ICSSInJSStyle => ({ - flex: 'none', - display: p.mine ? 'none' : undefined, - marginTop: px10asRem, - marginBottom: px10asRem, - marginLeft: p.mine ? px10asRem : 0, - marginRight: p.mine ? 0 : px10asRem, - }), - - messageBody: ({ props: p, variables: v }): ICSSInJSStyle => ({ - padding: '1rem', - color: 'rgb(64, 64, 64)', - backgroundColor: p.mine ? v.messageColorMine : v.messageColor, - borderRadius: '0.3rem', - }), - author: ({ props: p }): ICSSInJSStyle => ({ display: p.mine ? 'none' : undefined, marginRight: px10asRem, @@ -50,7 +29,7 @@ const chatMessageStyles: ComponentSlotStylesInput ({ messageWidth: '80%', messageColor: siteVars.white, messageColorMine: '#E0E0ED', - avatar: { - statusBorderColor: siteVars.gray10, - }, - messageBody: { focusOutlineColor: siteVars.brand }, + content: { focusOutlineColor: siteVars.brand }, }) diff --git a/src/themes/teams/components/Chat/chatStyles.ts b/src/themes/teams/components/Chat/chatStyles.ts index a046d1e8a9..aa5ad38ca4 100644 --- a/src/themes/teams/components/Chat/chatStyles.ts +++ b/src/themes/teams/components/Chat/chatStyles.ts @@ -1,9 +1,10 @@ -import { ICSSInJSStyle } from '../../../types' +import { ICSSInJSStyle, ComponentSlotStylesInput } from '../../../types' import { ChatVariables } from './chatVariables' import { pxToRem } from '../../utils' +import { ChatProps } from 'src/components/Chat/Chat' -const chatStyles = { - root: ({ variables: v }: { variables: ChatVariables }): ICSSInJSStyle => ({ +const chatStyles: ComponentSlotStylesInput = { + root: ({ variables: v }): ICSSInJSStyle => ({ backgroundColor: v.backgroundColor, border: `1px solid ${v.backgroundColor}`, display: 'flex', diff --git a/test/specs/components/Chat/ChatItem-test.tsx b/test/specs/components/Chat/ChatItem-test.tsx index dd6e78f310..6f591b0374 100644 --- a/test/specs/components/Chat/ChatItem-test.tsx +++ b/test/specs/components/Chat/ChatItem-test.tsx @@ -1,7 +1,12 @@ -import { isConformant } from 'test/specs/commonTests' - +import { isConformant, implementsShorthandProp } from 'test/specs/commonTests' import ChatItem from 'src/components/Chat/ChatItem' +import Slot from 'src/components/Slot/Slot' + +const chatItemImplementsShorthandProp = implementsShorthandProp(ChatItem) describe('ChatItem', () => { isConformant(ChatItem) + + chatItemImplementsShorthandProp('content', Slot, { mapsValueToProp: 'children' }) + chatItemImplementsShorthandProp('gutter', Slot, { mapsValueToProp: 'children' }) }) diff --git a/test/specs/components/Chat/ChatMessage-test.tsx b/test/specs/components/Chat/ChatMessage-test.tsx index 419e7a81f9..6c12ed8dbb 100644 --- a/test/specs/components/Chat/ChatMessage-test.tsx +++ b/test/specs/components/Chat/ChatMessage-test.tsx @@ -1,31 +1,23 @@ -import * as React from 'react' import { handlesAccessibility, implementsShorthandProp, isConformant } from 'test/specs/commonTests' -import { mountWithProvider } from 'test/utils' import ChatMessage from 'src/components/Chat/ChatMessage' -import Avatar from 'src/components/Avatar/Avatar' import { chatMessageBehavior } from 'src/lib/accessibility' import { AccessibilityDefinition } from 'src/lib/accessibility/types' import Text from 'src/components/Text/Text' +import Slot from 'src/components/Slot/Slot' + +const chatMessageImplementsShorthandProp = implementsShorthandProp(ChatMessage) describe('ChatMessage', () => { isConformant(ChatMessage) - implementsShorthandProp(ChatMessage)('avatar', Avatar, { mapsValueToProp: 'name' }) - implementsShorthandProp(ChatMessage)('author', Text) - implementsShorthandProp(ChatMessage)('timestamp', Text) + + chatMessageImplementsShorthandProp('author', Text) + chatMessageImplementsShorthandProp('timestamp', Text) + chatMessageImplementsShorthandProp('content', Slot, { mapsValueToProp: 'children' }) describe('accessibility', () => { handlesAccessibility(ChatMessage, { focusZoneDefinition: (chatMessageBehavior as AccessibilityDefinition).focusZone, }) }) - - describe('avatar', () => { - it('creates an Avatar component when the avatar shorthand is provided', () => { - const name = 'John Doe' - const chatMessage = mountWithProvider() - - expect(chatMessage.find('Avatar').prop('name')).toEqual(name) - }) - }) }) From da2618e779b1c156a99649d0f832ad9781521e7e Mon Sep 17 00:00:00 2001 From: Alexandru Buliga Date: Wed, 5 Dec 2018 11:45:20 +0100 Subject: [PATCH 02/21] - fixed imports - addressed comments - imporoved styles --- .../prototypes/chatPane/chatPaneContent.tsx | 24 ++++++++++--------- .../teams/components/Chat/chatItemStyles.ts | 14 ++++------- .../components/Chat/chatItemVariables.ts | 4 +--- .../components/Chat/chatMessageStyles.ts | 15 ++++++------ .../components/Chat/chatMessageVariables.ts | 24 ++++++++++++++----- 5 files changed, 43 insertions(+), 38 deletions(-) diff --git a/docs/src/prototypes/chatPane/chatPaneContent.tsx b/docs/src/prototypes/chatPane/chatPaneContent.tsx index 21945f82c6..d9c5b25abc 100644 --- a/docs/src/prototypes/chatPane/chatPaneContent.tsx +++ b/docs/src/prototypes/chatPane/chatPaneContent.tsx @@ -52,17 +52,19 @@ class ChatPaneContainer extends React.PureComponent { } - content={ - <> - {itemType === ChatItemTypes.message && ( -
- {this.getMessagePreviewForScreenReader(props)} -
- )} - - - } + gutter={gutter && { content: }} + content={{ + content: ( + <> + {itemType === ChatItemTypes.message && ( +
+ {this.getMessagePreviewForScreenReader(props)} +
+ )} + + + ), + }} /> ) }, diff --git a/src/themes/teams/components/Chat/chatItemStyles.ts b/src/themes/teams/components/Chat/chatItemStyles.ts index 7079e0352b..ce64d8554b 100644 --- a/src/themes/teams/components/Chat/chatItemStyles.ts +++ b/src/themes/teams/components/Chat/chatItemStyles.ts @@ -1,16 +1,14 @@ import { ICSSInJSStyle, ComponentSlotStylesInput } from '../../../types' -import { ChatItemProps } from 'src/components/Chat/ChatItem' -import { ChatMessageVariables } from './chatMessageVariables' -import { pxToRem } from 'src/lib' +import { ChatItemProps } from '../../../../components/Chat/ChatItem' +import { pxToRem } from '../../../../lib' const _10pxAsRem_ = pxToRem(10) const _14pxAsRem_ = pxToRem(14) -const chatItemStyles: ComponentSlotStylesInput = { +const chatItemStyles: ComponentSlotStylesInput = { root: ({ props: p }): ICSSInJSStyle => ({ - ...(p.gutter && { display: 'flex' }), + ...(p.gutter && { display: 'flex', justifyContent: p.mine ? 'flex-end' : 'flex-start' }), position: 'relative', - justifyContent: p.mine ? 'flex-end' : 'flex-start', marginTop: _14pxAsRem_, marginBottom: _14pxAsRem_, }), @@ -23,10 +21,6 @@ const chatItemStyles: ComponentSlotStylesInput ({ - ...(p.mine && { float: 'right' }), - }), } export default chatItemStyles diff --git a/src/themes/teams/components/Chat/chatItemVariables.ts b/src/themes/teams/components/Chat/chatItemVariables.ts index de762afafd..e51ec46ab7 100644 --- a/src/themes/teams/components/Chat/chatItemVariables.ts +++ b/src/themes/teams/components/Chat/chatItemVariables.ts @@ -1,3 +1 @@ -export interface ChatItemVariables {} - -export default (siteVars): ChatItemVariables => ({}) +export default () => ({}) diff --git a/src/themes/teams/components/Chat/chatMessageStyles.ts b/src/themes/teams/components/Chat/chatMessageStyles.ts index bce365e1a8..6b9fe84ed3 100644 --- a/src/themes/teams/components/Chat/chatMessageStyles.ts +++ b/src/themes/teams/components/Chat/chatMessageStyles.ts @@ -3,18 +3,17 @@ import { ChatMessageProps } from '../../../../components/Chat/ChatMessage' import { ChatMessageVariables } from './chatMessageVariables' import { pxToRem } from '../../utils' -const px10asRem = pxToRem(10) - const chatMessageStyles: ComponentSlotStylesInput = { root: ({ props: p, variables: v }): ICSSInJSStyle => ({ position: 'relative', - padding: pxToRem(14), - borderRadius: '0.3rem', - color: 'rgb(64, 64, 64)', - backgroundColor: p.mine ? v.messageColorMine : v.messageColor, - maxWidth: v.messageWidth, + padding: v.message.padding, + borderRadius: v.message.borderRadius, + color: v.message.color, + backgroundColor: p.mine ? v.message.backgroundColorMine : v.message.backgroundColor, + maxWidth: v.message.width, wordBreak: 'break-word', wordWrap: 'break-word', + ...(p.mine && { float: 'right' }), ':focus': { outline: `.2rem solid ${v.content.focusOutlineColor}`, }, @@ -22,7 +21,7 @@ const chatMessageStyles: ComponentSlotStylesInput ({ display: p.mine ? 'none' : undefined, - marginRight: px10asRem, + marginRight: pxToRem(10), }), content: ({ variables: v }): ICSSInJSStyle => ({ diff --git a/src/themes/teams/components/Chat/chatMessageVariables.ts b/src/themes/teams/components/Chat/chatMessageVariables.ts index 4a2d69c974..6d4f4580f9 100644 --- a/src/themes/teams/components/Chat/chatMessageVariables.ts +++ b/src/themes/teams/components/Chat/chatMessageVariables.ts @@ -1,13 +1,25 @@ +import { pxToRem } from '../../../../lib' + export interface ChatMessageVariables { - messageWidth: string - messageColor: string - messageColorMine: string + message: { + width: string + backgroundColor: string + backgroundColorMine: string + borderRadius: string + color: string + padding: string + } content: { focusOutlineColor: string } } export default (siteVars): ChatMessageVariables => ({ - messageWidth: '80%', - messageColor: siteVars.white, - messageColorMine: '#E0E0ED', + message: { + width: '80%', + backgroundColor: siteVars.white, + backgroundColorMine: '#E0E0ED', + borderRadius: '0.3rem', + color: 'rgb(64, 64, 64)', + padding: pxToRem(14), + }, content: { focusOutlineColor: siteVars.brand }, }) From ec4f2de304e8d4bcd656c007bc8067a633b43f58 Mon Sep 17 00:00:00 2001 From: Alexandru Buliga Date: Wed, 5 Dec 2018 12:56:52 +0100 Subject: [PATCH 03/21] added changelog entry --- CHANGELOG.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 7e7e0c80bc..fcd1656311 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -75,6 +75,9 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm ### Documentation - Add the concept of the color palette @layershifter ([#451](https://github.com/stardust-ui/react/pull/451)) +### BREAKING CHANGES +- Add `gutter` prop to `Chat.Item`, removed `avatar` from `Chat.Message` @Bugaa92 ([#556](https://github.com/stardust-ui/react/pull/556)) + ### Fixes - Add `react-dom` as available import in the editor @mnajdova ([#553](https://github.com/stardust-ui/react/pull/553)) - Fix incorrect and missing filled or outline versions of Teams SVG icons @codepretty ([#552](https://github.com/stardust-ui/react/pull/552)) From d8cc17a0c277bf8dd1ef51e99fa6cb245d24be28 Mon Sep 17 00:00:00 2001 From: Alexandru Buliga Date: Wed, 5 Dec 2018 15:27:24 +0100 Subject: [PATCH 04/21] fixed examples using content prop --- .../Chat/Types/ChatExample.shorthand.tsx | 63 +++++++++--------- .../components/Chat/Types/ChatExample.tsx | 64 +++++++++++-------- .../ChatMessageExampleStyled.shorthand.tsx | 32 ++++++---- .../Chat/Types/ChatMessageExampleStyled.tsx | 28 ++++---- 4 files changed, 106 insertions(+), 81 deletions(-) diff --git a/docs/src/examples/components/Chat/Types/ChatExample.shorthand.tsx b/docs/src/examples/components/Chat/Types/ChatExample.shorthand.tsx index 307605c187..d072748cba 100644 --- a/docs/src/examples/components/Chat/Types/ChatExample.shorthand.tsx +++ b/docs/src/examples/components/Chat/Types/ChatExample.shorthand.tsx @@ -6,40 +6,48 @@ const janeAvatar = { status: { color: 'green', icon: 'check' }, } +const averageText = 'some average text' +const bigText = + 'some big text some big text some big text some big text some big text some big text some big text some big text some big text some big text some big text some big text some big text some big text some big text some big text some big text some big text some big text some big text ' + const items = [ { mine: true, - content: ( - - ), + content: { + content: , + }, key: 'message-id-1', }, { - gutter: , - content: , + gutter: { content: }, + content: { + content: , + }, key: 'message-id-2', }, { mine: true, - content: ( - - ), + content: { + content: ( + + ), + }, key: 'message-id-3', }, { - gutter: , - content: ( - - ), + gutter: { + content: , + }, + content: { + content: ( + + ), + }, key: 'message-id-4', }, { @@ -48,14 +56,11 @@ const items = [ }, { mine: true, - content: ( - - ), + content: { + content: ( + + ), + }, key: 'message-id-6', }, ] diff --git a/docs/src/examples/components/Chat/Types/ChatExample.tsx b/docs/src/examples/components/Chat/Types/ChatExample.tsx index 4a4b390d9d..6ea9438350 100644 --- a/docs/src/examples/components/Chat/Types/ChatExample.tsx +++ b/docs/src/examples/components/Chat/Types/ChatExample.tsx @@ -10,48 +10,56 @@ const ChatExample = () => ( - } + content={{ + content: ( + + ), + }} /> } + gutter={{ content: }} content={} /> - } + content={{ + content: ( + + ), + }} /> } - content={ - - } + gutter={{ content: }} + content={{ + content: ( + + ), + }} /> - } + content={{ + content: ( + + ), + }} /> ) diff --git a/docs/src/examples/components/Chat/Types/ChatMessageExampleStyled.shorthand.tsx b/docs/src/examples/components/Chat/Types/ChatMessageExampleStyled.shorthand.tsx index f2c8e7fbe2..3e33e85780 100644 --- a/docs/src/examples/components/Chat/Types/ChatMessageExampleStyled.shorthand.tsx +++ b/docs/src/examples/components/Chat/Types/ChatMessageExampleStyled.shorthand.tsx @@ -68,22 +68,30 @@ const ChatMessageExampleStyled = () => ( items={[ { mine: true, - content: ( - - ), + content: { + content: ( + + ), + }, key: 'message-id-1', }, { key: 'message-id-2', - gutter: , - content: ( - - ), + gutter: { content: }, + content: { + content: ( + + ), + }, }, ]} /> diff --git a/docs/src/examples/components/Chat/Types/ChatMessageExampleStyled.tsx b/docs/src/examples/components/Chat/Types/ChatMessageExampleStyled.tsx index 14669387a2..d7d6c21bc7 100644 --- a/docs/src/examples/components/Chat/Types/ChatMessageExampleStyled.tsx +++ b/docs/src/examples/components/Chat/Types/ChatMessageExampleStyled.tsx @@ -67,20 +67,24 @@ const ChatMessageExampleStyled = () => ( - } + content={{ + content: ( + + ), + }} /> } - content={ - - } + gutter={{ content: }} + content={{ + content: ( + + ), + }} /> From 0e346533914be907d720da7331afd19b6b0e935f Mon Sep 17 00:00:00 2001 From: Alexandru Buliga Date: Wed, 5 Dec 2018 18:07:35 +0100 Subject: [PATCH 05/21] attempt to fix async shorthand --- .../AsyncShorthand/AsyncShorthand.tsx | 55 +++++++++---------- 1 file changed, 26 insertions(+), 29 deletions(-) diff --git a/docs/src/prototypes/AsyncShorthand/AsyncShorthand.tsx b/docs/src/prototypes/AsyncShorthand/AsyncShorthand.tsx index 576780e876..596b2064d9 100644 --- a/docs/src/prototypes/AsyncShorthand/AsyncShorthand.tsx +++ b/docs/src/prototypes/AsyncShorthand/AsyncShorthand.tsx @@ -29,30 +29,6 @@ class CustomChatMessage extends React.Component { togglePopup = () => this.setState({ open: !this.state.open }) - renderAvatar = (Avatar, props) => ( - ( - ( - ( - - )} - /> - )} - /> - )} - /> - ) - renderMenuItem = (MenuItem, props) => { if (props.icon !== 'thumbs up') { return @@ -63,7 +39,6 @@ class CustomChatMessage extends React.Component { key={props.key} position="below" open={this.state.open} - // content={{ content: ( Hover me to see the actions and async like count. @@ -130,12 +104,35 @@ class CustomChatMessage extends React.Component { ) } } + +const renderGutter = renderAvatar => ( + + renderAvatar({ + image: data, + status: renderStatus => ( + + renderStatus({ + color: data === 'available' ? 'green' : undefined, + icon: data === 'available' ? 'check' : undefined, + }) + } + /> + ), + }) + } + /> +) + const AsyncShorthand = () => ( }, - { key: 'b', content: }, - { key: 'c', content: }, + { key: 'a', gutter: { content: renderGutter }, content: { content: } }, + { key: 'b', gutter: { content: renderGutter }, content: { content: } }, + { key: 'c', gutter: { content: renderGutter }, content: { content: } }, ]} /> ) From b1d7407148614a0455c529f620d32f14b2afcd86 Mon Sep 17 00:00:00 2001 From: Alexandru Buliga Date: Wed, 5 Dec 2018 18:09:39 +0100 Subject: [PATCH 06/21] reverted weird example --- .../Chat/Types/ChatExample.shorthand.tsx | 25 ++++++++++++------- 1 file changed, 16 insertions(+), 9 deletions(-) diff --git a/docs/src/examples/components/Chat/Types/ChatExample.shorthand.tsx b/docs/src/examples/components/Chat/Types/ChatExample.shorthand.tsx index d072748cba..9b3506131b 100644 --- a/docs/src/examples/components/Chat/Types/ChatExample.shorthand.tsx +++ b/docs/src/examples/components/Chat/Types/ChatExample.shorthand.tsx @@ -6,22 +6,20 @@ const janeAvatar = { status: { color: 'green', icon: 'check' }, } -const averageText = 'some average text' -const bigText = - 'some big text some big text some big text some big text some big text some big text some big text some big text some big text some big text some big text some big text some big text some big text some big text some big text some big text some big text some big text some big text ' - const items = [ { mine: true, content: { - content: , + content: ( + + ), }, key: 'message-id-1', }, { gutter: { content: }, content: { - content: , + content: , }, key: 'message-id-2', }, @@ -30,7 +28,7 @@ const items = [ content: { content: ( + ), }, key: 'message-id-4', @@ -58,7 +60,12 @@ const items = [ mine: true, content: { content: ( - + ), }, key: 'message-id-6', From 4b1c5e462d125d9c3abd59d14cdb088c2a28ee97 Mon Sep 17 00:00:00 2001 From: Alexandru Buliga Date: Wed, 5 Dec 2018 18:10:38 +0100 Subject: [PATCH 07/21] fixed changelog --- CHANGELOG.md | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index fcd1656311..a04c1669ba 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -21,6 +21,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm - `type` prop is replaced with `color` in `Divider` component @layershifter ([#558](https://github.com/stardust-ui/react/pull/558)) - Remove `createColorVariants` and `setColorLightness` utils @layershifter ([#583](https://github.com/stardust-ui/react/pull/583)) - Remove `accessibility` prop (and corresponding behavior) from `ButtonGroup` @kolaps33 ([#605](https://github.com/stardust-ui/react/pull/605)) +- Add `gutter` prop to `Chat.Item`, removed `avatar` from `Chat.Message` @Bugaa92 ([#556](https://github.com/stardust-ui/react/pull/556)) ### Fixes - Fix `Provider` is not executing staticStyles with the merged siteVariables @mnajdova ([#559](https://github.com/stardust-ui/react/pull/559)) @@ -75,9 +76,6 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm ### Documentation - Add the concept of the color palette @layershifter ([#451](https://github.com/stardust-ui/react/pull/451)) -### BREAKING CHANGES -- Add `gutter` prop to `Chat.Item`, removed `avatar` from `Chat.Message` @Bugaa92 ([#556](https://github.com/stardust-ui/react/pull/556)) - ### Fixes - Add `react-dom` as available import in the editor @mnajdova ([#553](https://github.com/stardust-ui/react/pull/553)) - Fix incorrect and missing filled or outline versions of Teams SVG icons @codepretty ([#552](https://github.com/stardust-ui/react/pull/552)) From 81967b928eec34cc633b9998a8435a458d937c4b Mon Sep 17 00:00:00 2001 From: kuzhelov Date: Thu, 6 Dec 2018 13:48:11 +0100 Subject: [PATCH 08/21] fix Async Shorthand example --- .../AsyncShorthand/AsyncShorthand.tsx | 30 +++++++++---------- 1 file changed, 15 insertions(+), 15 deletions(-) diff --git a/docs/src/prototypes/AsyncShorthand/AsyncShorthand.tsx b/docs/src/prototypes/AsyncShorthand/AsyncShorthand.tsx index 596b2064d9..e4a7dc853e 100644 --- a/docs/src/prototypes/AsyncShorthand/AsyncShorthand.tsx +++ b/docs/src/prototypes/AsyncShorthand/AsyncShorthand.tsx @@ -1,6 +1,6 @@ import * as _ from 'lodash' import * as React from 'react' -import { Chat, Menu, Popup } from '@stardust-ui/react' +import { Chat, Menu, Popup, Avatar } from '@stardust-ui/react' /** * This example shows how to create custom Chat Messages. @@ -105,34 +105,34 @@ class CustomChatMessage extends React.Component { } } -const renderGutter = renderAvatar => ( +const gutterContent = ( - renderAvatar({ - image: data, - status: renderStatus => ( + render={data => ( + ( + render={statusData => renderStatus({ - color: data === 'available' ? 'green' : undefined, - icon: data === 'available' ? 'check' : undefined, + color: statusData === 'available' ? 'green' : undefined, + icon: statusData === 'available' ? 'check' : undefined, }) } /> - ), - }) - } + )} + /> + )} /> ) const AsyncShorthand = () => ( } }, - { key: 'b', gutter: { content: renderGutter }, content: { content: } }, - { key: 'c', gutter: { content: renderGutter }, content: { content: } }, + { key: 'a', gutter: { content: gutterContent }, content: { content: } }, + { key: 'b', gutter: { content: gutterContent }, content: { content: } }, + { key: 'c', gutter: { content: gutterContent }, content: { content: } }, ]} /> ) From ad1d0fa77d4db45b82dbd593722c4b86fd649cea Mon Sep 17 00:00:00 2001 From: Alexandru Buliga Date: Thu, 6 Dec 2018 16:12:43 +0100 Subject: [PATCH 09/21] add Chat.Item.Gutter subcomponent --- .../Chat/Types/ChatExample.shorthand.tsx | 77 ++++++++----------- .../components/Chat/Types/ChatExample.tsx | 76 +++++++++--------- .../ChatMessageExampleStyled.shorthand.tsx | 31 +++----- .../Chat/Types/ChatMessageExampleStyled.tsx | 27 +++---- .../AsyncShorthand/AsyncShorthand.tsx | 6 +- .../prototypes/chatPane/chatPaneContent.tsx | 57 +++++++------- src/components/Chat/ChatItem.tsx | 34 +++----- src/components/Chat/ChatItemGutter.tsx | 53 +++++++++++++ src/lib/factories.tsx | 5 ++ src/themes/teams/componentStyles.ts | 1 + src/themes/teams/componentVariables.ts | 3 +- .../components/Chat/chatItemGutterStyles.ts | 12 +++ .../Chat/chatItemGutterVariables.ts | 9 +++ .../teams/components/Chat/chatItemStyles.ts | 23 ++---- .../components/Chat/chatItemVariables.ts | 10 ++- .../components/Chat/chatMessageStyles.ts | 6 +- .../components/Chat/chatMessageVariables.ts | 4 + .../components/Chat/ChatItemGutter-test.ts | 11 +++ 18 files changed, 245 insertions(+), 200 deletions(-) create mode 100644 src/components/Chat/ChatItemGutter.tsx create mode 100644 src/themes/teams/components/Chat/chatItemGutterStyles.ts create mode 100644 src/themes/teams/components/Chat/chatItemGutterVariables.ts create mode 100644 test/specs/components/Chat/ChatItemGutter-test.ts diff --git a/docs/src/examples/components/Chat/Types/ChatExample.shorthand.tsx b/docs/src/examples/components/Chat/Types/ChatExample.shorthand.tsx index 9b3506131b..ef851ed365 100644 --- a/docs/src/examples/components/Chat/Types/ChatExample.shorthand.tsx +++ b/docs/src/examples/components/Chat/Types/ChatExample.shorthand.tsx @@ -8,68 +8,57 @@ const janeAvatar = { const items = [ { - mine: true, - content: { - content: ( - - ), - }, + content: ( + + ), key: 'message-id-1', }, { gutter: { content: }, - content: { - content: , - }, + content: , key: 'message-id-2', }, { - mine: true, - content: { - content: ( - - ), - }, + content: , key: 'message-id-3', }, { - gutter: { - content: , - }, - content: { - content: ( - - ), - }, + content: ( + + ), key: 'message-id-4', }, { - content: , + gutter: { content: }, + content: ( + + ), key: 'message-id-5', }, { - mine: true, - content: { - content: ( - - ), - }, + content: , key: 'message-id-6', }, + { + content: ( + + ), + key: 'message-id-7', + }, ] const ChatExample = () => diff --git a/docs/src/examples/components/Chat/Types/ChatExample.tsx b/docs/src/examples/components/Chat/Types/ChatExample.tsx index 6ea9438350..fa86ce92a3 100644 --- a/docs/src/examples/components/Chat/Types/ChatExample.tsx +++ b/docs/src/examples/components/Chat/Types/ChatExample.tsx @@ -9,57 +9,55 @@ const janeAvatar = { const ChatExample = () => ( - ), - }} + content={ + + } /> }} + gutter={ + + + + } content={} /> + } /> - ), - }} + content={ + + } /> }} - content={{ - content: ( - - ), - }} + gutter={ + + + + } + content={ + + } /> - ), - }} + content={ + + } /> ) diff --git a/docs/src/examples/components/Chat/Types/ChatMessageExampleStyled.shorthand.tsx b/docs/src/examples/components/Chat/Types/ChatMessageExampleStyled.shorthand.tsx index 3e33e85780..ca8f89ac3b 100644 --- a/docs/src/examples/components/Chat/Types/ChatMessageExampleStyled.shorthand.tsx +++ b/docs/src/examples/components/Chat/Types/ChatMessageExampleStyled.shorthand.tsx @@ -67,31 +67,22 @@ const ChatMessageExampleStyled = () => ( - ), - }, + content: ( + + ), key: 'message-id-1', }, { key: 'message-id-2', gutter: { content: }, - content: { - content: ( - - ), - }, + content: ( + + ), }, ]} /> diff --git a/docs/src/examples/components/Chat/Types/ChatMessageExampleStyled.tsx b/docs/src/examples/components/Chat/Types/ChatMessageExampleStyled.tsx index d7d6c21bc7..1496de8171 100644 --- a/docs/src/examples/components/Chat/Types/ChatMessageExampleStyled.tsx +++ b/docs/src/examples/components/Chat/Types/ChatMessageExampleStyled.tsx @@ -66,25 +66,20 @@ const ChatMessageExampleStyled = () => ( > - ), - }} + content={ + + } /> }} - content={{ - content: ( - - ), - }} + content={ + + } /> diff --git a/docs/src/prototypes/AsyncShorthand/AsyncShorthand.tsx b/docs/src/prototypes/AsyncShorthand/AsyncShorthand.tsx index e4a7dc853e..707cce391f 100644 --- a/docs/src/prototypes/AsyncShorthand/AsyncShorthand.tsx +++ b/docs/src/prototypes/AsyncShorthand/AsyncShorthand.tsx @@ -130,9 +130,9 @@ const gutterContent = ( const AsyncShorthand = () => ( } }, - { key: 'b', gutter: { content: gutterContent }, content: { content: } }, - { key: 'c', gutter: { content: gutterContent }, content: { content: } }, + { key: 'a', gutter: { content: gutterContent }, content: }, + { key: 'b', gutter: { content: gutterContent }, content: }, + { key: 'c', gutter: { content: gutterContent }, content: }, ]} /> ) diff --git a/docs/src/prototypes/chatPane/chatPaneContent.tsx b/docs/src/prototypes/chatPane/chatPaneContent.tsx index d9c5b25abc..cf171a3223 100644 --- a/docs/src/prototypes/chatPane/chatPaneContent.tsx +++ b/docs/src/prototypes/chatPane/chatPaneContent.tsx @@ -38,37 +38,32 @@ class ChatPaneContainer extends React.PureComponent { } private generateChatItems(chat: ChatData): JSX.Element[] { - return generateChatProps(chat).map( - ({ mine, gutter, content: { itemType, ...props } }, index) => { - const ElementType = this.getElementType(itemType) - const maybeAttributesForDivider = - itemType === ChatItemTypes.divider - ? { - role: 'heading', - 'aria-level': 3, - } - : {} - return ( - }} - content={{ - content: ( - <> - {itemType === ChatItemTypes.message && ( -
- {this.getMessagePreviewForScreenReader(props)} -
- )} - - - ), - }} - /> - ) - }, - ) + return generateChatProps(chat).map(({ gutter, content: { itemType, ...props } }, index) => { + const ElementType = this.getElementType(itemType) + const maybeAttributesForDivider = + itemType === ChatItemTypes.divider + ? { + role: 'heading', + 'aria-level': 3, + } + : {} + return ( + }} + content={ + <> + {itemType === ChatItemTypes.message && ( +
+ {this.getMessagePreviewForScreenReader(props)} +
+ )} + + + } + /> + ) + }) } private getElementType = (itemType: ChatItemTypes) => { diff --git a/src/components/Chat/ChatItem.tsx b/src/components/Chat/ChatItem.tsx index d44fa762e3..67b2b33e4f 100644 --- a/src/components/Chat/ChatItem.tsx +++ b/src/components/Chat/ChatItem.tsx @@ -1,5 +1,4 @@ import * as React from 'react' -import * as PropTypes from 'prop-types' import { Extendable, ShorthandValue } from '../../../types/utils' import { @@ -14,7 +13,7 @@ import { customPropTypes, } from '../../lib' import Slot from '../Slot/Slot' -import { ComponentSlotStylesPrepared } from 'src/themes/types' +import ChatItemGutter from './ChatItemGutter' export interface ChatItemProps extends UIComponentProps, @@ -22,9 +21,6 @@ export interface ChatItemProps ContentComponentProps { /** Chat items can have a gutter. */ gutter?: ShorthandValue - - /** Indicates whether message belongs to the current user. */ - mine?: boolean } /** @@ -32,17 +28,15 @@ export interface ChatItemProps */ class ChatItem extends UIComponent, any> { static className = 'ui-chat__item' - static create: Function - static displayName = 'ChatItem' + static Gutter = ChatItemGutter static propTypes = { ...commonPropTypes.createCommon({ content: 'shorthand', }), gutter: customPropTypes.itemShorthand, - mine: PropTypes.bool, } static defaultProps = { @@ -50,27 +44,21 @@ class ChatItem extends UIComponent, any> { } renderComponent({ ElementType, classes, rest, styles }: RenderResultConfig) { - const { children } = this.props + const { children, content, gutter } = this.props return ( - {childrenExist(children) ? children : this.renderChatItem(styles)} + {childrenExist(children) ? ( + children + ) : ( + <> + {ChatItemGutter.create(gutter)} + {Slot.create(content)} + + )} ) } - - private renderChatItem(styles: ComponentSlotStylesPrepared) { - const { content, gutter, mine } = this.props - const gutterElement = Slot.create(gutter, { defaultProps: { styles: styles.gutter } }) - - return ( - <> - {!mine && gutterElement} - {Slot.create(content, { defaultProps: { styles: styles.content } })} - {mine && gutterElement} - - ) - } } ChatItem.create = createShorthandFactory(ChatItem, 'content') diff --git a/src/components/Chat/ChatItemGutter.tsx b/src/components/Chat/ChatItemGutter.tsx new file mode 100644 index 0000000000..1d84d85d16 --- /dev/null +++ b/src/components/Chat/ChatItemGutter.tsx @@ -0,0 +1,53 @@ +import * as React from 'react' + +import { + UIComponent, + childrenExist, + UIComponentProps, + ContentComponentProps, + ChildrenComponentProps, + commonPropTypes, + createShorthandFactory, +} from '../../lib' +import { Extendable, ShorthandValue } from '../../../types/utils' +import Slot from '../Slot/Slot' + +export interface ChatItemGutterProps + extends UIComponentProps, + ChildrenComponentProps, + ContentComponentProps { + /** Indicates whether message belongs to the current user. */ +} + +/** + * A gutter is used to create the auxiliary area of a chat item + */ +class ChatItemGutter extends UIComponent, any> { + static className = 'ui-chat__item__gutter' + static create: Function + static displayName = 'ChatItemGutter' + + static propTypes = { + ...commonPropTypes.createCommon({ + content: 'shorthand', + }), + } + + static defaultProps = { + as: 'div', + } + + renderComponent({ ElementType, classes, rest }) { + const { children, content } = this.props + + return ( + + {childrenExist(children) ? children : Slot.create(content)} + + ) + } +} + +ChatItemGutter.create = createShorthandFactory(ChatItemGutter, 'content') + +export default ChatItemGutter diff --git a/src/lib/factories.tsx b/src/lib/factories.tsx index ab431d07ba..cbd403b221 100644 --- a/src/lib/factories.tsx +++ b/src/lib/factories.tsx @@ -105,6 +105,11 @@ function createShorthandFromValue( const valIsNoop = _.isNil(value) || typeof value === 'boolean' if (valIsNoop && !options.render) return null + // return value as is if it a ReactElement + if (React.isValidElement(value)) { + return value as React.ReactElement + } + const valIsPrimitive = typeof value === 'string' || typeof value === 'number' const valIsPropsObject = _.isPlainObject(value) const valIsReactElement = React.isValidElement(value) diff --git a/src/themes/teams/componentStyles.ts b/src/themes/teams/componentStyles.ts index 3d96d958e1..4c0f84864b 100644 --- a/src/themes/teams/componentStyles.ts +++ b/src/themes/teams/componentStyles.ts @@ -11,6 +11,7 @@ export { default as ButtonGroup } from './components/Button/buttonGroupStyles' export { default as Chat } from './components/Chat/chatStyles' export { default as ChatItem } from './components/Chat/chatItemStyles' +export { default as ChatItemGutter } from './components/Chat/chatItemGutterStyles' export { default as ChatMessage } from './components/Chat/chatMessageStyles' export { default as Divider } from './components/Divider/dividerStyles' diff --git a/src/themes/teams/componentVariables.ts b/src/themes/teams/componentVariables.ts index c21c3db458..686a55b734 100644 --- a/src/themes/teams/componentVariables.ts +++ b/src/themes/teams/componentVariables.ts @@ -8,9 +8,8 @@ export { default as Button } from './components/Button/buttonVariables' export { default as ButtonGroup } from './components/Button/buttonVariables' export { default as Chat } from './components/Chat/chatVariables' - export { default as ChatItem } from './components/Chat/chatItemVariables' - +export { default as ChatItemGutter } from './components/Chat/chatItemGutterVariables' export { default as ChatMessage } from './components/Chat/chatMessageVariables' export { default as Divider } from './components/Divider/dividerVariables' diff --git a/src/themes/teams/components/Chat/chatItemGutterStyles.ts b/src/themes/teams/components/Chat/chatItemGutterStyles.ts new file mode 100644 index 0000000000..23d159a112 --- /dev/null +++ b/src/themes/teams/components/Chat/chatItemGutterStyles.ts @@ -0,0 +1,12 @@ +import { ICSSInJSStyle, ComponentSlotStylesInput } from '../../../types' +import { ChatItemGutterVariables } from './chatItemGutterVariables' +import { ChatItemGutterProps } from 'src/components/Chat/ChatItemGutter' + +const chatItemStyles: ComponentSlotStylesInput = { + root: ({ variables: v }): ICSSInJSStyle => ({ + position: 'absolute', + marginTop: v.margin, + }), +} + +export default chatItemStyles diff --git a/src/themes/teams/components/Chat/chatItemGutterVariables.ts b/src/themes/teams/components/Chat/chatItemGutterVariables.ts new file mode 100644 index 0000000000..42a6da43f6 --- /dev/null +++ b/src/themes/teams/components/Chat/chatItemGutterVariables.ts @@ -0,0 +1,9 @@ +import { pxToRem } from '../../../../lib' + +export interface ChatItemGutterVariables { + margin: string +} + +export default (): ChatItemGutterVariables => ({ + margin: pxToRem(10), +}) diff --git a/src/themes/teams/components/Chat/chatItemStyles.ts b/src/themes/teams/components/Chat/chatItemStyles.ts index ce64d8554b..5afbc696d6 100644 --- a/src/themes/teams/components/Chat/chatItemStyles.ts +++ b/src/themes/teams/components/Chat/chatItemStyles.ts @@ -1,25 +1,12 @@ import { ICSSInJSStyle, ComponentSlotStylesInput } from '../../../types' +import { ChatItemVariables } from './chatItemVariables' import { ChatItemProps } from '../../../../components/Chat/ChatItem' -import { pxToRem } from '../../../../lib' -const _10pxAsRem_ = pxToRem(10) -const _14pxAsRem_ = pxToRem(14) - -const chatItemStyles: ComponentSlotStylesInput = { - root: ({ props: p }): ICSSInJSStyle => ({ - ...(p.gutter && { display: 'flex', justifyContent: p.mine ? 'flex-end' : 'flex-start' }), +const chatItemStyles: ComponentSlotStylesInput = { + root: ({ variables: v }): ICSSInJSStyle => ({ position: 'relative', - marginTop: _14pxAsRem_, - marginBottom: _14pxAsRem_, - }), - - gutter: ({ props: p }): ICSSInJSStyle => ({ - flex: 'none', - display: p.mine ? 'none' : undefined, - marginTop: _10pxAsRem_, - marginBottom: _10pxAsRem_, - marginLeft: p.mine ? _10pxAsRem_ : 0, - marginRight: p.mine ? 0 : _10pxAsRem_, + marginTop: v.margin, + marginBottom: v.margin, }), } diff --git a/src/themes/teams/components/Chat/chatItemVariables.ts b/src/themes/teams/components/Chat/chatItemVariables.ts index e51ec46ab7..cdc8bef923 100644 --- a/src/themes/teams/components/Chat/chatItemVariables.ts +++ b/src/themes/teams/components/Chat/chatItemVariables.ts @@ -1 +1,9 @@ -export default () => ({}) +import { pxToRem } from '../../../../lib' + +export interface ChatItemVariables { + margin: string +} + +export default (): ChatItemVariables => ({ + margin: pxToRem(8), +}) diff --git a/src/themes/teams/components/Chat/chatMessageStyles.ts b/src/themes/teams/components/Chat/chatMessageStyles.ts index 6b9fe84ed3..2cdc020c4b 100644 --- a/src/themes/teams/components/Chat/chatMessageStyles.ts +++ b/src/themes/teams/components/Chat/chatMessageStyles.ts @@ -1,11 +1,11 @@ import { ComponentSlotStylesInput, ICSSInJSStyle } from '../../../types' import { ChatMessageProps } from '../../../../components/Chat/ChatMessage' import { ChatMessageVariables } from './chatMessageVariables' -import { pxToRem } from '../../utils' const chatMessageStyles: ComponentSlotStylesInput = { root: ({ props: p, variables: v }): ICSSInJSStyle => ({ position: 'relative', + marginLeft: p.mine ? 0 : v.message.margin, padding: v.message.padding, borderRadius: v.message.borderRadius, color: v.message.color, @@ -19,9 +19,9 @@ const chatMessageStyles: ComponentSlotStylesInput ({ + author: ({ props: p, variables: v }): ICSSInJSStyle => ({ display: p.mine ? 'none' : undefined, - marginRight: pxToRem(10), + marginRight: v.author.margin, }), content: ({ variables: v }): ICSSInJSStyle => ({ diff --git a/src/themes/teams/components/Chat/chatMessageVariables.ts b/src/themes/teams/components/Chat/chatMessageVariables.ts index 6d4f4580f9..3a8efc8eea 100644 --- a/src/themes/teams/components/Chat/chatMessageVariables.ts +++ b/src/themes/teams/components/Chat/chatMessageVariables.ts @@ -8,7 +8,9 @@ export interface ChatMessageVariables { borderRadius: string color: string padding: string + margin: string } + author: { margin: string } content: { focusOutlineColor: string } } @@ -20,6 +22,8 @@ export default (siteVars): ChatMessageVariables => ({ borderRadius: '0.3rem', color: 'rgb(64, 64, 64)', padding: pxToRem(14), + margin: pxToRem(40), }, + author: { margin: pxToRem(10) }, content: { focusOutlineColor: siteVars.brand }, }) diff --git a/test/specs/components/Chat/ChatItemGutter-test.ts b/test/specs/components/Chat/ChatItemGutter-test.ts new file mode 100644 index 0000000000..e29e681dd0 --- /dev/null +++ b/test/specs/components/Chat/ChatItemGutter-test.ts @@ -0,0 +1,11 @@ +import { isConformant, implementsShorthandProp } from 'test/specs/commonTests' +import ChatItemGutter from 'src/components/Chat/ChatItemGutter' +import Slot from 'src/components/Slot/Slot' + +const chatItemGutterImplementsShorthandProp = implementsShorthandProp(ChatItemGutter) + +describe('ChatItemGutter', () => { + isConformant(ChatItemGutter) + + chatItemGutterImplementsShorthandProp('content', Slot, { mapsValueToProp: 'children' }) +}) From 6c1d1686fc5a731fce97944e1de2617826644fc3 Mon Sep 17 00:00:00 2001 From: Alexandru Buliga Date: Thu, 6 Dec 2018 02:08:08 +0100 Subject: [PATCH 10/21] support for adding gutter to my messages bt introducing mine prop and using children css selectors --- .../Chat/Types/ChatExample.shorthand.tsx | 3 ++ .../components/Chat/Types/ChatExample.tsx | 3 ++ .../ChatMessageExampleStyled.shorthand.tsx | 6 +++- .../Chat/Types/ChatMessageExampleStyled.tsx | 6 +++- src/components/Chat/ChatItem.tsx | 30 +++++++++++++------ .../components/Chat/chatItemGutterStyles.ts | 8 ++--- .../Chat/chatItemGutterVariables.ts | 10 +------ .../teams/components/Chat/chatItemStyles.ts | 14 ++++++++- .../components/Chat/chatItemVariables.ts | 4 +++ .../components/Chat/chatMessageStyles.ts | 3 +- .../components/Chat/chatMessageVariables.ts | 2 -- 11 files changed, 58 insertions(+), 31 deletions(-) diff --git a/docs/src/examples/components/Chat/Types/ChatExample.shorthand.tsx b/docs/src/examples/components/Chat/Types/ChatExample.shorthand.tsx index ef851ed365..3602d50e2d 100644 --- a/docs/src/examples/components/Chat/Types/ChatExample.shorthand.tsx +++ b/docs/src/examples/components/Chat/Types/ChatExample.shorthand.tsx @@ -8,6 +8,7 @@ const janeAvatar = { const items = [ { + mine: true, content: ( ), @@ -23,6 +24,7 @@ const items = [ key: 'message-id-3', }, { + mine: true, content: ( ( } @@ -23,6 +24,7 @@ const ChatExample = () => ( /> } /> ( ( componentStyles: { ChatItem: { root: { ...slotLabelStyles('chat-item-root'), backgroundColor: 'transparent' }, - gutter: { + }, + ChatItemGutter: { + root: { ...slotLabelStyles('gutter', { bottom: '-11px' }), backgroundColor: '#FF00FF', padding: 0, + position: 'absolute', }, }, ChatMessage: { @@ -67,6 +70,7 @@ const ChatMessageExampleStyled = () => ( ( componentStyles: { ChatItem: { root: { ...slotLabelStyles('chat-item-root'), backgroundColor: 'transparent' }, - gutter: { + }, + ChatItemGutter: { + root: { ...slotLabelStyles('gutter', { bottom: '-11px' }), backgroundColor: '#FF00FF', padding: 0, + position: 'absolute', }, }, ChatMessage: { @@ -66,6 +69,7 @@ const ChatMessageExampleStyled = () => ( > { /** Chat items can have a gutter. */ gutter?: ShorthandValue + + /** Indicates whether message belongs to the current user. */ + mine?: boolean } /** @@ -37,6 +42,7 @@ class ChatItem extends UIComponent, any> { content: 'shorthand', }), gutter: customPropTypes.itemShorthand, + mine: PropTypes.bool, } static defaultProps = { @@ -44,21 +50,27 @@ class ChatItem extends UIComponent, any> { } renderComponent({ ElementType, classes, rest, styles }: RenderResultConfig) { - const { children, content, gutter } = this.props + const { children } = this.props return ( - {childrenExist(children) ? ( - children - ) : ( - <> - {ChatItemGutter.create(gutter)} - {Slot.create(content)} - - )} + {childrenExist(children) ? children : this.renderChatItem(styles)} ) } + + private renderChatItem(styles: ComponentSlotStylesPrepared) { + const { content, gutter, mine } = this.props + const gutterElement = ChatItemGutter.create(gutter, { defaultProps: { mine } }) + + return ( + <> + {!mine && gutterElement} + {Slot.create(content)} + {mine && gutterElement} + + ) + } } ChatItem.create = createShorthandFactory(ChatItem, 'content') diff --git a/src/themes/teams/components/Chat/chatItemGutterStyles.ts b/src/themes/teams/components/Chat/chatItemGutterStyles.ts index 23d159a112..dfb2cff201 100644 --- a/src/themes/teams/components/Chat/chatItemGutterStyles.ts +++ b/src/themes/teams/components/Chat/chatItemGutterStyles.ts @@ -1,12 +1,8 @@ import { ICSSInJSStyle, ComponentSlotStylesInput } from '../../../types' -import { ChatItemGutterVariables } from './chatItemGutterVariables' import { ChatItemGutterProps } from 'src/components/Chat/ChatItemGutter' -const chatItemStyles: ComponentSlotStylesInput = { - root: ({ variables: v }): ICSSInJSStyle => ({ - position: 'absolute', - marginTop: v.margin, - }), +const chatItemStyles: ComponentSlotStylesInput = { + root: (): ICSSInJSStyle => ({}), } export default chatItemStyles diff --git a/src/themes/teams/components/Chat/chatItemGutterVariables.ts b/src/themes/teams/components/Chat/chatItemGutterVariables.ts index 42a6da43f6..e51ec46ab7 100644 --- a/src/themes/teams/components/Chat/chatItemGutterVariables.ts +++ b/src/themes/teams/components/Chat/chatItemGutterVariables.ts @@ -1,9 +1 @@ -import { pxToRem } from '../../../../lib' - -export interface ChatItemGutterVariables { - margin: string -} - -export default (): ChatItemGutterVariables => ({ - margin: pxToRem(10), -}) +export default () => ({}) diff --git a/src/themes/teams/components/Chat/chatItemStyles.ts b/src/themes/teams/components/Chat/chatItemStyles.ts index 5afbc696d6..1e177f1982 100644 --- a/src/themes/teams/components/Chat/chatItemStyles.ts +++ b/src/themes/teams/components/Chat/chatItemStyles.ts @@ -3,10 +3,22 @@ import { ChatItemVariables } from './chatItemVariables' import { ChatItemProps } from '../../../../components/Chat/ChatItem' const chatItemStyles: ComponentSlotStylesInput = { - root: ({ variables: v }): ICSSInJSStyle => ({ + root: ({ props: p, variables: v }): ICSSInJSStyle => ({ position: 'relative', marginTop: v.margin, marginBottom: v.margin, + + '& .ui-chat__item__gutter': { + position: 'absolute', + marginTop: v.gutter.margin, + [p.mine ? 'right' : 'left']: 0, + }, + + '& .ui-chat__message': { + position: 'relative', + marginLeft: v.content.margin, + marginRight: v.content.margin, + }, }), } diff --git a/src/themes/teams/components/Chat/chatItemVariables.ts b/src/themes/teams/components/Chat/chatItemVariables.ts index cdc8bef923..358421c53c 100644 --- a/src/themes/teams/components/Chat/chatItemVariables.ts +++ b/src/themes/teams/components/Chat/chatItemVariables.ts @@ -2,8 +2,12 @@ import { pxToRem } from '../../../../lib' export interface ChatItemVariables { margin: string + content: { margin: string } + gutter: { margin: string } } export default (): ChatItemVariables => ({ margin: pxToRem(8), + gutter: { margin: pxToRem(10) }, + content: { margin: pxToRem(40) }, }) diff --git a/src/themes/teams/components/Chat/chatMessageStyles.ts b/src/themes/teams/components/Chat/chatMessageStyles.ts index 2cdc020c4b..4980c3d3f6 100644 --- a/src/themes/teams/components/Chat/chatMessageStyles.ts +++ b/src/themes/teams/components/Chat/chatMessageStyles.ts @@ -4,8 +4,7 @@ import { ChatMessageVariables } from './chatMessageVariables' const chatMessageStyles: ComponentSlotStylesInput = { root: ({ props: p, variables: v }): ICSSInJSStyle => ({ - position: 'relative', - marginLeft: p.mine ? 0 : v.message.margin, + display: 'inline-block', padding: v.message.padding, borderRadius: v.message.borderRadius, color: v.message.color, diff --git a/src/themes/teams/components/Chat/chatMessageVariables.ts b/src/themes/teams/components/Chat/chatMessageVariables.ts index 3a8efc8eea..0fa6f02b70 100644 --- a/src/themes/teams/components/Chat/chatMessageVariables.ts +++ b/src/themes/teams/components/Chat/chatMessageVariables.ts @@ -8,7 +8,6 @@ export interface ChatMessageVariables { borderRadius: string color: string padding: string - margin: string } author: { margin: string } content: { focusOutlineColor: string } @@ -22,7 +21,6 @@ export default (siteVars): ChatMessageVariables => ({ borderRadius: '0.3rem', color: 'rgb(64, 64, 64)', padding: pxToRem(14), - margin: pxToRem(40), }, author: { margin: pxToRem(10) }, content: { focusOutlineColor: siteVars.brand }, From 7e93920757208b49635ac83bbc9010a3f81541f3 Mon Sep 17 00:00:00 2001 From: Alexandru Buliga Date: Thu, 6 Dec 2018 20:57:35 +0100 Subject: [PATCH 11/21] reverted unwanted fix --- src/lib/factories.tsx | 5 ----- 1 file changed, 5 deletions(-) diff --git a/src/lib/factories.tsx b/src/lib/factories.tsx index cbd403b221..ab431d07ba 100644 --- a/src/lib/factories.tsx +++ b/src/lib/factories.tsx @@ -105,11 +105,6 @@ function createShorthandFromValue( const valIsNoop = _.isNil(value) || typeof value === 'boolean' if (valIsNoop && !options.render) return null - // return value as is if it a ReactElement - if (React.isValidElement(value)) { - return value as React.ReactElement - } - const valIsPrimitive = typeof value === 'string' || typeof value === 'number' const valIsPropsObject = _.isPlainObject(value) const valIsReactElement = React.isValidElement(value) From 7746d1c4a1c8d2efd292bcab3dd5aabab056b1a0 Mon Sep 17 00:00:00 2001 From: Alexandru Buliga Date: Mon, 10 Dec 2018 15:31:58 +0100 Subject: [PATCH 12/21] fixed tests and refactored ChatItemGutter to ChatGutter --- .../components/Chat/Types/ChatExample.tsx | 8 ++++---- .../ChatMessageExampleStyled.shorthand.tsx | 2 +- .../Chat/Types/ChatMessageExampleStyled.tsx | 2 +- src/components/Chat/Chat.tsx | 2 ++ .../{ChatItemGutter.tsx => ChatGutter.tsx} | 19 +++++++++---------- src/components/Chat/ChatItem.tsx | 10 ++++------ src/index.ts | 1 + src/themes/teams/componentStyles.ts | 2 +- src/themes/teams/componentVariables.ts | 2 +- .../teams/components/Chat/chatGutterStyles.ts | 8 ++++++++ ...terVariables.ts => chatGutterVariables.ts} | 0 .../components/Chat/chatItemGutterStyles.ts | 8 -------- test/specs/components/Chat/ChatGutter-test.ts | 6 ++++++ test/specs/components/Chat/ChatItem-test.tsx | 3 ++- .../components/Chat/ChatItemGutter-test.ts | 11 ----------- 15 files changed, 40 insertions(+), 44 deletions(-) rename src/components/Chat/{ChatItemGutter.tsx => ChatGutter.tsx} (61%) create mode 100644 src/themes/teams/components/Chat/chatGutterStyles.ts rename src/themes/teams/components/Chat/{chatItemGutterVariables.ts => chatGutterVariables.ts} (100%) delete mode 100644 src/themes/teams/components/Chat/chatItemGutterStyles.ts create mode 100644 test/specs/components/Chat/ChatGutter-test.ts delete mode 100644 test/specs/components/Chat/ChatItemGutter-test.ts diff --git a/docs/src/examples/components/Chat/Types/ChatExample.tsx b/docs/src/examples/components/Chat/Types/ChatExample.tsx index 2b166978d9..5c61a3d86e 100644 --- a/docs/src/examples/components/Chat/Types/ChatExample.tsx +++ b/docs/src/examples/components/Chat/Types/ChatExample.tsx @@ -16,9 +16,9 @@ const ChatExample = () => ( /> + - + } content={} /> @@ -36,9 +36,9 @@ const ChatExample = () => ( /> + - + } content={ ( ChatItem: { root: { ...slotLabelStyles('chat-item-root'), backgroundColor: 'transparent' }, }, - ChatItemGutter: { + ChatGutter: { root: { ...slotLabelStyles('gutter', { bottom: '-11px' }), backgroundColor: '#FF00FF', diff --git a/docs/src/examples/components/Chat/Types/ChatMessageExampleStyled.tsx b/docs/src/examples/components/Chat/Types/ChatMessageExampleStyled.tsx index 8748663d95..661c5d9db7 100644 --- a/docs/src/examples/components/Chat/Types/ChatMessageExampleStyled.tsx +++ b/docs/src/examples/components/Chat/Types/ChatMessageExampleStyled.tsx @@ -43,7 +43,7 @@ const ChatMessageExampleStyled = () => ( ChatItem: { root: { ...slotLabelStyles('chat-item-root'), backgroundColor: 'transparent' }, }, - ChatItemGutter: { + ChatGutter: { root: { ...slotLabelStyles('gutter', { bottom: '-11px' }), backgroundColor: '#FF00FF', diff --git a/src/components/Chat/Chat.tsx b/src/components/Chat/Chat.tsx index db91546580..7ff4b2b68f 100644 --- a/src/components/Chat/Chat.tsx +++ b/src/components/Chat/Chat.tsx @@ -5,6 +5,7 @@ import * as React from 'react' import { childrenExist, customPropTypes, UIComponent, commonPropTypes } from '../../lib' import ChatItem from './ChatItem' import ChatMessage from './ChatMessage' +import ChatGutter from './ChatGutter' import { Extendable, ShorthandValue } from '../../../types/utils' import { Accessibility, AccessibilityActionHandlers } from '../../lib/accessibility/types' import { chatBehavior } from '../../lib/accessibility' @@ -39,6 +40,7 @@ class Chat extends UIComponent, any> { static defaultProps = { accessibility: chatBehavior, as: 'ul' } + static Gutter = ChatGutter static Item = ChatItem static Message = ChatMessage diff --git a/src/components/Chat/ChatItemGutter.tsx b/src/components/Chat/ChatGutter.tsx similarity index 61% rename from src/components/Chat/ChatItemGutter.tsx rename to src/components/Chat/ChatGutter.tsx index 1d84d85d16..3259a2e97a 100644 --- a/src/components/Chat/ChatItemGutter.tsx +++ b/src/components/Chat/ChatGutter.tsx @@ -10,10 +10,9 @@ import { createShorthandFactory, } from '../../lib' import { Extendable, ShorthandValue } from '../../../types/utils' -import Slot from '../Slot/Slot' -export interface ChatItemGutterProps - extends UIComponentProps, +export interface ChatGutterProps + extends UIComponentProps, ChildrenComponentProps, ContentComponentProps { /** Indicates whether message belongs to the current user. */ @@ -22,10 +21,10 @@ export interface ChatItemGutterProps /** * A gutter is used to create the auxiliary area of a chat item */ -class ChatItemGutter extends UIComponent, any> { - static className = 'ui-chat__item__gutter' +class ChatGutter extends UIComponent, any> { + static className = 'ui-chat__gutter' static create: Function - static displayName = 'ChatItemGutter' + static displayName = 'ChatGutter' static propTypes = { ...commonPropTypes.createCommon({ @@ -41,13 +40,13 @@ class ChatItemGutter extends UIComponent, any> { const { children, content } = this.props return ( - - {childrenExist(children) ? children : Slot.create(content)} + + {childrenExist(children) ? children : content} ) } } -ChatItemGutter.create = createShorthandFactory(ChatItemGutter, 'content') +ChatGutter.create = createShorthandFactory(ChatGutter, 'content') -export default ChatItemGutter +export default ChatGutter diff --git a/src/components/Chat/ChatItem.tsx b/src/components/Chat/ChatItem.tsx index a0fda6ffc1..d4f4872e0e 100644 --- a/src/components/Chat/ChatItem.tsx +++ b/src/components/Chat/ChatItem.tsx @@ -13,9 +13,8 @@ import { commonPropTypes, customPropTypes, } from '../../lib' -import { ComponentSlotStylesPrepared } from 'src/themes/types' import Slot from '../Slot/Slot' -import ChatItemGutter from './ChatItemGutter' +import ChatGutter from './ChatGutter' export interface ChatItemProps extends UIComponentProps, @@ -35,7 +34,6 @@ class ChatItem extends UIComponent, any> { static className = 'ui-chat__item' static create: Function static displayName = 'ChatItem' - static Gutter = ChatItemGutter static propTypes = { ...commonPropTypes.createCommon({ @@ -54,14 +52,14 @@ class ChatItem extends UIComponent, any> { return ( - {childrenExist(children) ? children : this.renderChatItem(styles)} + {childrenExist(children) ? children : this.renderChatItem()} ) } - private renderChatItem(styles: ComponentSlotStylesPrepared) { + private renderChatItem() { const { content, gutter, mine } = this.props - const gutterElement = ChatItemGutter.create(gutter, { defaultProps: { mine } }) + const gutterElement = ChatGutter.create(gutter, { defaultProps: { mine } }) return ( <> diff --git a/src/index.ts b/src/index.ts index af883aeb8b..1e77cedabe 100644 --- a/src/index.ts +++ b/src/index.ts @@ -21,6 +21,7 @@ export { default as ButtonGroup, ButtonGroupProps } from './components/Button/Bu export { default as Chat, ChatProps } from './components/Chat/Chat' export { default as ChatItem, ChatItemProps } from './components/Chat/ChatItem' +export { default as ChatGutter, ChatGutterProps } from './components/Chat/ChatGutter' export { default as ChatMessage, ChatMessageProps } from './components/Chat/ChatMessage' export { diff --git a/src/themes/teams/componentStyles.ts b/src/themes/teams/componentStyles.ts index 4c0f84864b..e143f48465 100644 --- a/src/themes/teams/componentStyles.ts +++ b/src/themes/teams/componentStyles.ts @@ -11,7 +11,7 @@ export { default as ButtonGroup } from './components/Button/buttonGroupStyles' export { default as Chat } from './components/Chat/chatStyles' export { default as ChatItem } from './components/Chat/chatItemStyles' -export { default as ChatItemGutter } from './components/Chat/chatItemGutterStyles' +export { default as ChatGutter } from './components/Chat/chatGutterStyles' export { default as ChatMessage } from './components/Chat/chatMessageStyles' export { default as Divider } from './components/Divider/dividerStyles' diff --git a/src/themes/teams/componentVariables.ts b/src/themes/teams/componentVariables.ts index 686a55b734..49f38ff93b 100644 --- a/src/themes/teams/componentVariables.ts +++ b/src/themes/teams/componentVariables.ts @@ -9,7 +9,7 @@ export { default as ButtonGroup } from './components/Button/buttonVariables' export { default as Chat } from './components/Chat/chatVariables' export { default as ChatItem } from './components/Chat/chatItemVariables' -export { default as ChatItemGutter } from './components/Chat/chatItemGutterVariables' +export { default as ChatGutter } from './components/Chat/chatGutterVariables' export { default as ChatMessage } from './components/Chat/chatMessageVariables' export { default as Divider } from './components/Divider/dividerVariables' diff --git a/src/themes/teams/components/Chat/chatGutterStyles.ts b/src/themes/teams/components/Chat/chatGutterStyles.ts new file mode 100644 index 0000000000..f4ee83016c --- /dev/null +++ b/src/themes/teams/components/Chat/chatGutterStyles.ts @@ -0,0 +1,8 @@ +import { ICSSInJSStyle, ComponentSlotStylesInput } from '../../../types' +import { ChatGutterProps } from '../../../../components/Chat/ChatGutter' + +const chatItemStyles: ComponentSlotStylesInput = { + root: (): ICSSInJSStyle => ({}), +} + +export default chatItemStyles diff --git a/src/themes/teams/components/Chat/chatItemGutterVariables.ts b/src/themes/teams/components/Chat/chatGutterVariables.ts similarity index 100% rename from src/themes/teams/components/Chat/chatItemGutterVariables.ts rename to src/themes/teams/components/Chat/chatGutterVariables.ts diff --git a/src/themes/teams/components/Chat/chatItemGutterStyles.ts b/src/themes/teams/components/Chat/chatItemGutterStyles.ts deleted file mode 100644 index dfb2cff201..0000000000 --- a/src/themes/teams/components/Chat/chatItemGutterStyles.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { ICSSInJSStyle, ComponentSlotStylesInput } from '../../../types' -import { ChatItemGutterProps } from 'src/components/Chat/ChatItemGutter' - -const chatItemStyles: ComponentSlotStylesInput = { - root: (): ICSSInJSStyle => ({}), -} - -export default chatItemStyles diff --git a/test/specs/components/Chat/ChatGutter-test.ts b/test/specs/components/Chat/ChatGutter-test.ts new file mode 100644 index 0000000000..90a0b814d4 --- /dev/null +++ b/test/specs/components/Chat/ChatGutter-test.ts @@ -0,0 +1,6 @@ +import { isConformant } from 'test/specs/commonTests' +import ChatGutter from 'src/components/Chat/ChatGutter' + +describe('ChatGutter', () => { + isConformant(ChatGutter) +}) diff --git a/test/specs/components/Chat/ChatItem-test.tsx b/test/specs/components/Chat/ChatItem-test.tsx index 6f591b0374..d7f64e98f6 100644 --- a/test/specs/components/Chat/ChatItem-test.tsx +++ b/test/specs/components/Chat/ChatItem-test.tsx @@ -1,5 +1,6 @@ import { isConformant, implementsShorthandProp } from 'test/specs/commonTests' import ChatItem from 'src/components/Chat/ChatItem' +import ChatGutter from 'src/components/Chat/ChatGutter' import Slot from 'src/components/Slot/Slot' const chatItemImplementsShorthandProp = implementsShorthandProp(ChatItem) @@ -8,5 +9,5 @@ describe('ChatItem', () => { isConformant(ChatItem) chatItemImplementsShorthandProp('content', Slot, { mapsValueToProp: 'children' }) - chatItemImplementsShorthandProp('gutter', Slot, { mapsValueToProp: 'children' }) + chatItemImplementsShorthandProp('gutter', ChatGutter, { mapsValueToProp: 'content' }) }) diff --git a/test/specs/components/Chat/ChatItemGutter-test.ts b/test/specs/components/Chat/ChatItemGutter-test.ts deleted file mode 100644 index e29e681dd0..0000000000 --- a/test/specs/components/Chat/ChatItemGutter-test.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { isConformant, implementsShorthandProp } from 'test/specs/commonTests' -import ChatItemGutter from 'src/components/Chat/ChatItemGutter' -import Slot from 'src/components/Slot/Slot' - -const chatItemGutterImplementsShorthandProp = implementsShorthandProp(ChatItemGutter) - -describe('ChatItemGutter', () => { - isConformant(ChatItemGutter) - - chatItemGutterImplementsShorthandProp('content', Slot, { mapsValueToProp: 'children' }) -}) From e791f4994ca10e426c2d0f5e5b3240df4a704de8 Mon Sep 17 00:00:00 2001 From: Alexandru Buliga Date: Mon, 10 Dec 2018 16:39:10 +0100 Subject: [PATCH 13/21] fixed remaining problems --- src/themes/teams/components/Chat/chatItemStyles.ts | 5 +++-- src/themes/teams/components/Chat/chatItemVariables.ts | 2 +- src/themes/teams/components/Chat/chatMessageVariables.ts | 2 +- 3 files changed, 5 insertions(+), 4 deletions(-) diff --git a/src/themes/teams/components/Chat/chatItemStyles.ts b/src/themes/teams/components/Chat/chatItemStyles.ts index 1e177f1982..2112ff1e91 100644 --- a/src/themes/teams/components/Chat/chatItemStyles.ts +++ b/src/themes/teams/components/Chat/chatItemStyles.ts @@ -1,6 +1,7 @@ import { ICSSInJSStyle, ComponentSlotStylesInput } from '../../../types' import { ChatItemVariables } from './chatItemVariables' import { ChatItemProps } from '../../../../components/Chat/ChatItem' +import Chat from '../../../../components/Chat/Chat' const chatItemStyles: ComponentSlotStylesInput = { root: ({ props: p, variables: v }): ICSSInJSStyle => ({ @@ -8,13 +9,13 @@ const chatItemStyles: ComponentSlotStylesInput marginTop: v.margin, marginBottom: v.margin, - '& .ui-chat__item__gutter': { + [`& .${Chat.Gutter.className}`]: { position: 'absolute', marginTop: v.gutter.margin, [p.mine ? 'right' : 'left']: 0, }, - '& .ui-chat__message': { + [`& .${Chat.Message.className}`]: { position: 'relative', marginLeft: v.content.margin, marginRight: v.content.margin, diff --git a/src/themes/teams/components/Chat/chatItemVariables.ts b/src/themes/teams/components/Chat/chatItemVariables.ts index 358421c53c..bcad6aca86 100644 --- a/src/themes/teams/components/Chat/chatItemVariables.ts +++ b/src/themes/teams/components/Chat/chatItemVariables.ts @@ -1,4 +1,4 @@ -import { pxToRem } from '../../../../lib' +import { pxToRem } from '../../utils' export interface ChatItemVariables { margin: string diff --git a/src/themes/teams/components/Chat/chatMessageVariables.ts b/src/themes/teams/components/Chat/chatMessageVariables.ts index 0fa6f02b70..6621097190 100644 --- a/src/themes/teams/components/Chat/chatMessageVariables.ts +++ b/src/themes/teams/components/Chat/chatMessageVariables.ts @@ -1,4 +1,4 @@ -import { pxToRem } from '../../../../lib' +import { pxToRem } from '../../utils' export interface ChatMessageVariables { message: { From 4fb0e96f82dfee42671d1dc398e8cb6f23976d2b Mon Sep 17 00:00:00 2001 From: Alexandru Buliga Date: Mon, 10 Dec 2018 19:30:43 +0100 Subject: [PATCH 14/21] implemented gutterPosition --- .../Chat/Types/ChatExample.shorthand.tsx | 5 +- .../components/Chat/Types/ChatExample.tsx | 6 +-- .../ChatMessageExampleStyled.shorthand.tsx | 2 +- .../Chat/Types/ChatMessageExampleStyled.tsx | 2 +- .../prototypes/chatPane/chatPaneContent.tsx | 53 ++++++++++--------- src/components/Chat/ChatItem.tsx | 13 ++--- .../teams/components/Chat/chatItemStyles.ts | 2 +- 7 files changed, 43 insertions(+), 40 deletions(-) diff --git a/docs/src/examples/components/Chat/Types/ChatExample.shorthand.tsx b/docs/src/examples/components/Chat/Types/ChatExample.shorthand.tsx index 3602d50e2d..6269f00254 100644 --- a/docs/src/examples/components/Chat/Types/ChatExample.shorthand.tsx +++ b/docs/src/examples/components/Chat/Types/ChatExample.shorthand.tsx @@ -8,13 +8,13 @@ const janeAvatar = { const items = [ { - mine: true, content: ( ), key: 'message-id-1', }, { + gutterPosition: 'start', gutter: { content: }, content: , key: 'message-id-2', @@ -24,7 +24,6 @@ const items = [ key: 'message-id-3', }, { - mine: true, content: ( }, content: ( ( } /> @@ -24,7 +24,7 @@ const ChatExample = () => ( /> } /> ( } /> @@ -52,7 +53,6 @@ const ChatExample = () => ( ( ( }, { key: 'message-id-2', + gutterPosition: 'start', gutter: { content: }, content: ( diff --git a/docs/src/examples/components/Chat/Types/ChatMessageExampleStyled.tsx b/docs/src/examples/components/Chat/Types/ChatMessageExampleStyled.tsx index 661c5d9db7..d7ddf7d061 100644 --- a/docs/src/examples/components/Chat/Types/ChatMessageExampleStyled.tsx +++ b/docs/src/examples/components/Chat/Types/ChatMessageExampleStyled.tsx @@ -69,7 +69,6 @@ const ChatMessageExampleStyled = () => ( > ( } /> }} content={ diff --git a/docs/src/prototypes/chatPane/chatPaneContent.tsx b/docs/src/prototypes/chatPane/chatPaneContent.tsx index cf171a3223..493e9698fe 100644 --- a/docs/src/prototypes/chatPane/chatPaneContent.tsx +++ b/docs/src/prototypes/chatPane/chatPaneContent.tsx @@ -38,32 +38,35 @@ class ChatPaneContainer extends React.PureComponent { } private generateChatItems(chat: ChatData): JSX.Element[] { - return generateChatProps(chat).map(({ gutter, content: { itemType, ...props } }, index) => { - const ElementType = this.getElementType(itemType) - const maybeAttributesForDivider = - itemType === ChatItemTypes.divider - ? { - role: 'heading', - 'aria-level': 3, + return generateChatProps(chat).map( + ({ mine, gutter, content: { itemType, ...props } }, index) => { + const ElementType = this.getElementType(itemType) + const maybeAttributesForDivider = + itemType === ChatItemTypes.divider + ? { + role: 'heading', + 'aria-level': 3, + } + : {} + return ( + }} + content={ + <> + {itemType === ChatItemTypes.message && ( +
+ {this.getMessagePreviewForScreenReader(props)} +
+ )} + + } - : {} - return ( - }} - content={ - <> - {itemType === ChatItemTypes.message && ( -
- {this.getMessagePreviewForScreenReader(props)} -
- )} - - - } - /> - ) - }) + /> + ) + }, + ) } private getElementType = (itemType: ChatItemTypes) => { diff --git a/src/components/Chat/ChatItem.tsx b/src/components/Chat/ChatItem.tsx index d4f4872e0e..062fb4006e 100644 --- a/src/components/Chat/ChatItem.tsx +++ b/src/components/Chat/ChatItem.tsx @@ -24,7 +24,7 @@ export interface ChatItemProps gutter?: ShorthandValue /** Indicates whether message belongs to the current user. */ - mine?: boolean + gutterPosition?: 'start' | 'end' } /** @@ -40,11 +40,12 @@ class ChatItem extends UIComponent, any> { content: 'shorthand', }), gutter: customPropTypes.itemShorthand, - mine: PropTypes.bool, + gutterPosition: PropTypes.oneOf(['start', 'end']), } static defaultProps = { as: 'li', + gutterPosition: 'end', } renderComponent({ ElementType, classes, rest, styles }: RenderResultConfig) { @@ -58,14 +59,14 @@ class ChatItem extends UIComponent, any> { } private renderChatItem() { - const { content, gutter, mine } = this.props - const gutterElement = ChatGutter.create(gutter, { defaultProps: { mine } }) + const { content, gutter, gutterPosition } = this.props + const gutterElement = ChatGutter.create(gutter) return ( <> - {!mine && gutterElement} + {gutterPosition === 'start' && gutterElement} {Slot.create(content)} - {mine && gutterElement} + {gutterPosition === 'end' && gutterElement} ) } diff --git a/src/themes/teams/components/Chat/chatItemStyles.ts b/src/themes/teams/components/Chat/chatItemStyles.ts index 2112ff1e91..d480d07635 100644 --- a/src/themes/teams/components/Chat/chatItemStyles.ts +++ b/src/themes/teams/components/Chat/chatItemStyles.ts @@ -12,7 +12,7 @@ const chatItemStyles: ComponentSlotStylesInput [`& .${Chat.Gutter.className}`]: { position: 'absolute', marginTop: v.gutter.margin, - [p.mine ? 'right' : 'left']: 0, + [p.gutterPosition === 'end' ? 'right' : 'left']: 0, }, [`& .${Chat.Message.className}`]: { From 650344d0afbfb0a49dd047ac9294c574a491fbb2 Mon Sep 17 00:00:00 2001 From: Alexandru Buliga Date: Wed, 12 Dec 2018 13:55:03 +0100 Subject: [PATCH 15/21] - addressed comments; - improved examples; - added fix for gutter being created by default; --- .../components/Chat/Types/ChatExample.tsx | 3 -- .../ChatExampleGutterPosition.shorthand.tsx | 29 +++++++++++++++ .../Chat/Types/ChatExampleGutterPosition.tsx | 35 +++++++++++++++++++ .../Chat/Types/ChatMessageExampleStyled.tsx | 1 - .../examples/components/Chat/Types/index.tsx | 5 +++ src/components/Chat/ChatItem.tsx | 4 +-- 6 files changed, 71 insertions(+), 6 deletions(-) create mode 100644 docs/src/examples/components/Chat/Types/ChatExampleGutterPosition.shorthand.tsx create mode 100644 docs/src/examples/components/Chat/Types/ChatExampleGutterPosition.tsx diff --git a/docs/src/examples/components/Chat/Types/ChatExample.tsx b/docs/src/examples/components/Chat/Types/ChatExample.tsx index 383ef40f55..41091ef6c7 100644 --- a/docs/src/examples/components/Chat/Types/ChatExample.tsx +++ b/docs/src/examples/components/Chat/Types/ChatExample.tsx @@ -14,7 +14,6 @@ const ChatExample = () => ( } /> @@ -24,7 +23,6 @@ const ChatExample = () => ( /> } /> ( } /> diff --git a/docs/src/examples/components/Chat/Types/ChatExampleGutterPosition.shorthand.tsx b/docs/src/examples/components/Chat/Types/ChatExampleGutterPosition.shorthand.tsx new file mode 100644 index 0000000000..303236a3f6 --- /dev/null +++ b/docs/src/examples/components/Chat/Types/ChatExampleGutterPosition.shorthand.tsx @@ -0,0 +1,29 @@ +import React from 'react' +import { Avatar, Chat } from '@stardust-ui/react' + +const [janeAvatar, johnAvatar] = [ + 'public/images/avatar/small/ade.jpg', + 'public/images/avatar/small/joe.jpg', +].map(src => ({ + image: src, + status: { color: 'green', icon: 'check' }, +})) + +const items = [ + { + gutterPosition: 'start', + gutter: { content: }, + content: , + key: 'message-id-1', + }, + { + gutterPosition: 'end', + gutter: { content: }, + content: , + key: 'message-id-2', + }, +] + +const ChatExampleGutterPosition = () => + +export default ChatExampleGutterPosition diff --git a/docs/src/examples/components/Chat/Types/ChatExampleGutterPosition.tsx b/docs/src/examples/components/Chat/Types/ChatExampleGutterPosition.tsx new file mode 100644 index 0000000000..985661ea80 --- /dev/null +++ b/docs/src/examples/components/Chat/Types/ChatExampleGutterPosition.tsx @@ -0,0 +1,35 @@ +import React from 'react' +import { Avatar, Chat } from '@stardust-ui/react' + +const [janeAvatar, johnAvatar] = [ + 'public/images/avatar/small/ade.jpg', + 'public/images/avatar/small/joe.jpg', +].map(src => ({ + image: src, + status: { color: 'green', icon: 'check' }, +})) + +const ChatExampleGutterPosition = () => ( + + + + + } + content={} + /> + + + + } + content={} + /> + +) + +export default ChatExampleGutterPosition diff --git a/docs/src/examples/components/Chat/Types/ChatMessageExampleStyled.tsx b/docs/src/examples/components/Chat/Types/ChatMessageExampleStyled.tsx index d7ddf7d061..8962689dc5 100644 --- a/docs/src/examples/components/Chat/Types/ChatMessageExampleStyled.tsx +++ b/docs/src/examples/components/Chat/Types/ChatMessageExampleStyled.tsx @@ -79,7 +79,6 @@ const ChatMessageExampleStyled = () => ( } /> }} content={ diff --git a/docs/src/examples/components/Chat/Types/index.tsx b/docs/src/examples/components/Chat/Types/index.tsx index 9578574d48..f855b2a3be 100644 --- a/docs/src/examples/components/Chat/Types/index.tsx +++ b/docs/src/examples/components/Chat/Types/index.tsx @@ -9,6 +9,11 @@ const Types = () => ( description="A default Chat." examplePath="components/Chat/Types/ChatExample" /> + , any> { static defaultProps = { as: 'li', - gutterPosition: 'end', + gutterPosition: 'start', } renderComponent({ ElementType, classes, rest, styles }: RenderResultConfig) { @@ -60,7 +60,7 @@ class ChatItem extends UIComponent, any> { private renderChatItem() { const { content, gutter, gutterPosition } = this.props - const gutterElement = ChatGutter.create(gutter) + const gutterElement = gutter && ChatGutter.create(gutter) return ( <> From 60db2cddd1088f36d5f8ca13f0f20410f5ae14fe Mon Sep 17 00:00:00 2001 From: Alexandru Buliga Date: Wed, 12 Dec 2018 13:58:18 +0100 Subject: [PATCH 16/21] removed redundant prop from examples --- .../examples/components/Chat/Types/ChatExample.shorthand.tsx | 2 -- .../Chat/Types/ChatMessageExampleStyled.shorthand.tsx | 1 - 2 files changed, 3 deletions(-) diff --git a/docs/src/examples/components/Chat/Types/ChatExample.shorthand.tsx b/docs/src/examples/components/Chat/Types/ChatExample.shorthand.tsx index 6269f00254..ef851ed365 100644 --- a/docs/src/examples/components/Chat/Types/ChatExample.shorthand.tsx +++ b/docs/src/examples/components/Chat/Types/ChatExample.shorthand.tsx @@ -14,7 +14,6 @@ const items = [ key: 'message-id-1', }, { - gutterPosition: 'start', gutter: { content: }, content: , key: 'message-id-2', @@ -35,7 +34,6 @@ const items = [ key: 'message-id-4', }, { - gutterPosition: 'start', gutter: { content: }, content: ( ( }, { key: 'message-id-2', - gutterPosition: 'start', gutter: { content: }, content: ( From 9741e8d920b6da787ebf53423862511914e7e10e Mon Sep 17 00:00:00 2001 From: Alexandru Buliga Date: Wed, 12 Dec 2018 14:36:27 +0100 Subject: [PATCH 17/21] better description for gutterPosition --- src/components/Chat/ChatGutter.tsx | 4 +--- src/components/Chat/ChatItem.tsx | 2 +- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/src/components/Chat/ChatGutter.tsx b/src/components/Chat/ChatGutter.tsx index 3259a2e97a..7456935d78 100644 --- a/src/components/Chat/ChatGutter.tsx +++ b/src/components/Chat/ChatGutter.tsx @@ -14,9 +14,7 @@ import { Extendable, ShorthandValue } from '../../../types/utils' export interface ChatGutterProps extends UIComponentProps, ChildrenComponentProps, - ContentComponentProps { - /** Indicates whether message belongs to the current user. */ -} + ContentComponentProps {} /** * A gutter is used to create the auxiliary area of a chat item diff --git a/src/components/Chat/ChatItem.tsx b/src/components/Chat/ChatItem.tsx index 5cf59604ef..01fca82b94 100644 --- a/src/components/Chat/ChatItem.tsx +++ b/src/components/Chat/ChatItem.tsx @@ -23,7 +23,7 @@ export interface ChatItemProps /** Chat items can have a gutter. */ gutter?: ShorthandValue - /** Indicates whether message belongs to the current user. */ + /** Indicates whether the gutter is positioned at the start or the end. */ gutterPosition?: 'start' | 'end' } From 86bb28f843646125a4167e86641ac576d340b42c Mon Sep 17 00:00:00 2001 From: Alexandru Buliga Date: Wed, 12 Dec 2018 14:47:49 +0100 Subject: [PATCH 18/21] removed unused variable --- src/components/Chat/ChatItem.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Chat/ChatItem.tsx b/src/components/Chat/ChatItem.tsx index 01fca82b94..a25c521717 100644 --- a/src/components/Chat/ChatItem.tsx +++ b/src/components/Chat/ChatItem.tsx @@ -48,7 +48,7 @@ class ChatItem extends UIComponent, any> { gutterPosition: 'start', } - renderComponent({ ElementType, classes, rest, styles }: RenderResultConfig) { + renderComponent({ ElementType, classes, rest }: RenderResultConfig) { const { children } = this.props return ( From bf75b8cc33c774c32a0e32b1cc0e2b8b42c954b0 Mon Sep 17 00:00:00 2001 From: Alexandru Buliga Date: Wed, 12 Dec 2018 14:46:43 +0100 Subject: [PATCH 19/21] - removed Chat.Gutter; - replaced Chat.Item content prop with message; - deprecated Children API; --- .../Chat/Types/ChatExample.shorthand.tsx | 68 ++++++++------ .../components/Chat/Types/ChatExample.tsx | 65 ------------- .../ChatExampleGutterPosition.shorthand.tsx | 8 +- .../Chat/Types/ChatExampleGutterPosition.tsx | 35 ------- .../ChatMessageExampleStyled.shorthand.tsx | 34 ++++--- .../Chat/Types/ChatMessageExampleStyled.tsx | 91 ------------------- .../AsyncShorthand/AsyncShorthand.tsx | 6 +- .../prototypes/chatPane/chatPaneContent.tsx | 24 ++--- .../chatPane/services/messageFactoryMock.tsx | 6 +- src/components/Chat/Chat.tsx | 2 - src/components/Chat/ChatGutter.tsx | 50 ---------- src/components/Chat/ChatItem.tsx | 30 +++--- src/components/Chat/ChatMessage.tsx | 4 +- src/index.ts | 1 - src/themes/teams/componentStyles.ts | 1 - src/themes/teams/componentVariables.ts | 1 - .../teams/components/Chat/chatGutterStyles.ts | 8 -- .../components/Chat/chatGutterVariables.ts | 1 - .../teams/components/Chat/chatItemStyles.ts | 21 ++--- .../components/Chat/chatItemVariables.ts | 8 +- .../components/Chat/chatMessageStyles.ts | 16 ++-- .../components/Chat/chatMessageVariables.ts | 36 ++++---- test/specs/components/Chat/ChatGutter-test.ts | 6 -- test/specs/components/Chat/ChatItem-test.tsx | 3 +- 24 files changed, 138 insertions(+), 387 deletions(-) delete mode 100644 docs/src/examples/components/Chat/Types/ChatExample.tsx delete mode 100644 docs/src/examples/components/Chat/Types/ChatExampleGutterPosition.tsx delete mode 100644 docs/src/examples/components/Chat/Types/ChatMessageExampleStyled.tsx delete mode 100644 src/components/Chat/ChatGutter.tsx delete mode 100644 src/themes/teams/components/Chat/chatGutterStyles.ts delete mode 100644 src/themes/teams/components/Chat/chatGutterVariables.ts delete mode 100644 test/specs/components/Chat/ChatGutter-test.ts diff --git a/docs/src/examples/components/Chat/Types/ChatExample.shorthand.tsx b/docs/src/examples/components/Chat/Types/ChatExample.shorthand.tsx index ef851ed365..68a0a1f64d 100644 --- a/docs/src/examples/components/Chat/Types/ChatExample.shorthand.tsx +++ b/docs/src/examples/components/Chat/Types/ChatExample.shorthand.tsx @@ -8,55 +8,65 @@ const janeAvatar = { const items = [ { - content: ( - - ), + message: { + content: ( + + ), + }, key: 'message-id-1', }, { gutter: { content: }, - content: , + message: { + content: , + }, key: 'message-id-2', }, { - content: , + message: { content: }, key: 'message-id-3', }, { - content: ( - - ), + message: { + content: ( + + ), + }, key: 'message-id-4', }, { gutter: { content: }, - content: ( - - ), + message: { + content: ( + + ), + }, key: 'message-id-5', }, { - content: , + message: , key: 'message-id-6', }, { - content: ( - - ), + message: { + content: ( + + ), + }, key: 'message-id-7', }, ] diff --git a/docs/src/examples/components/Chat/Types/ChatExample.tsx b/docs/src/examples/components/Chat/Types/ChatExample.tsx deleted file mode 100644 index 41091ef6c7..0000000000 --- a/docs/src/examples/components/Chat/Types/ChatExample.tsx +++ /dev/null @@ -1,65 +0,0 @@ -import React from 'react' -import { Avatar, Chat, Divider } from '@stardust-ui/react' - -const janeAvatar = { - image: 'public/images/avatar/small/ade.jpg', - status: { color: 'green', icon: 'check' }, -} - -const ChatExample = () => ( - - - } - /> - - - - } - content={} - /> - } /> - - } - /> - - - - } - content={ - - } - /> - - - - - } - /> - -) - -export default ChatExample diff --git a/docs/src/examples/components/Chat/Types/ChatExampleGutterPosition.shorthand.tsx b/docs/src/examples/components/Chat/Types/ChatExampleGutterPosition.shorthand.tsx index 303236a3f6..0adac90c0f 100644 --- a/docs/src/examples/components/Chat/Types/ChatExampleGutterPosition.shorthand.tsx +++ b/docs/src/examples/components/Chat/Types/ChatExampleGutterPosition.shorthand.tsx @@ -13,13 +13,17 @@ const items = [ { gutterPosition: 'start', gutter: { content: }, - content: , + message: { + content: , + }, key: 'message-id-1', }, { gutterPosition: 'end', gutter: { content: }, - content: , + message: { + content: , + }, key: 'message-id-2', }, ] diff --git a/docs/src/examples/components/Chat/Types/ChatExampleGutterPosition.tsx b/docs/src/examples/components/Chat/Types/ChatExampleGutterPosition.tsx deleted file mode 100644 index 985661ea80..0000000000 --- a/docs/src/examples/components/Chat/Types/ChatExampleGutterPosition.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import React from 'react' -import { Avatar, Chat } from '@stardust-ui/react' - -const [janeAvatar, johnAvatar] = [ - 'public/images/avatar/small/ade.jpg', - 'public/images/avatar/small/joe.jpg', -].map(src => ({ - image: src, - status: { color: 'green', icon: 'check' }, -})) - -const ChatExampleGutterPosition = () => ( - - - - - } - content={} - /> - - - - } - content={} - /> - -) - -export default ChatExampleGutterPosition diff --git a/docs/src/examples/components/Chat/Types/ChatMessageExampleStyled.shorthand.tsx b/docs/src/examples/components/Chat/Types/ChatMessageExampleStyled.shorthand.tsx index b1ac59dea7..f3ad53609c 100644 --- a/docs/src/examples/components/Chat/Types/ChatMessageExampleStyled.shorthand.tsx +++ b/docs/src/examples/components/Chat/Types/ChatMessageExampleStyled.shorthand.tsx @@ -42,9 +42,7 @@ const ChatMessageExampleStyled = () => ( componentStyles: { ChatItem: { root: { ...slotLabelStyles('chat-item-root'), backgroundColor: 'transparent' }, - }, - ChatGutter: { - root: { + gutter: { ...slotLabelStyles('gutter', { bottom: '-11px' }), backgroundColor: '#FF00FF', padding: 0, @@ -70,22 +68,30 @@ const ChatMessageExampleStyled = () => ( - ), + message: { + content: ( + + ), + }, key: 'message-id-1', }, { key: 'message-id-2', gutter: { content: }, - content: ( - - ), + message: { + content: ( + + ), + }, }, ]} /> diff --git a/docs/src/examples/components/Chat/Types/ChatMessageExampleStyled.tsx b/docs/src/examples/components/Chat/Types/ChatMessageExampleStyled.tsx deleted file mode 100644 index 8962689dc5..0000000000 --- a/docs/src/examples/components/Chat/Types/ChatMessageExampleStyled.tsx +++ /dev/null @@ -1,91 +0,0 @@ -import React from 'react' -import { Avatar, Chat, Provider } from '@stardust-ui/react' - -const janeAvatar = { - image: 'public/images/avatar/small/ade.jpg', - status: { color: 'green', icon: 'check' }, -} - -const content = ( -
- Sure! Try one of these places: -
- www.goodFood1.com,
- www.goodFood2.com or -
- www.goodFood3.com -
-) - -const slotLabelStyles: any = (label, beforeStyles) => ({ - position: 'relative', - border: '1px solid #000', - padding: '12px', - ':before': { - content: `'${label}'`, - position: 'absolute', - background: '#000', - paddingBottom: '2px', - bottom: '-1px', - right: '-1px', - color: 'white', - fontSize: '11px', - letterSpacing: '0.1px', - lineHeight: '9px', - ...beforeStyles, - }, -}) - -const ChatMessageExampleStyled = () => ( - ({ - content: { - focusOutlineColor: siteVars.white, - }, - }), - }, - }} - > - - - } - /> - }} - content={ - - } - /> - - -) - -export default ChatMessageExampleStyled diff --git a/docs/src/prototypes/AsyncShorthand/AsyncShorthand.tsx b/docs/src/prototypes/AsyncShorthand/AsyncShorthand.tsx index 707cce391f..e100ed3524 100644 --- a/docs/src/prototypes/AsyncShorthand/AsyncShorthand.tsx +++ b/docs/src/prototypes/AsyncShorthand/AsyncShorthand.tsx @@ -130,9 +130,9 @@ const gutterContent = ( const AsyncShorthand = () => ( }, - { key: 'b', gutter: { content: gutterContent }, content: }, - { key: 'c', gutter: { content: gutterContent }, content: }, + { key: 'a', gutter: { content: gutterContent }, message: { content: } }, + { key: 'b', gutter: { content: gutterContent }, message: { content: } }, + { key: 'c', gutter: { content: gutterContent }, message: { content: } }, ]} /> ) diff --git a/docs/src/prototypes/chatPane/chatPaneContent.tsx b/docs/src/prototypes/chatPane/chatPaneContent.tsx index 493e9698fe..a04b6a0f43 100644 --- a/docs/src/prototypes/chatPane/chatPaneContent.tsx +++ b/docs/src/prototypes/chatPane/chatPaneContent.tsx @@ -39,7 +39,7 @@ class ChatPaneContainer extends React.PureComponent { private generateChatItems(chat: ChatData): JSX.Element[] { return generateChatProps(chat).map( - ({ mine, gutter, content: { itemType, ...props } }, index) => { + ({ mine, gutter, message: { itemType, ...props } }, index) => { const ElementType = this.getElementType(itemType) const maybeAttributesForDivider = itemType === ChatItemTypes.divider @@ -53,16 +53,18 @@ class ChatPaneContainer extends React.PureComponent { key={`chat-item-${index}`} gutterPosition={mine ? 'end' : 'start'} gutter={gutter && { content: }} - content={ - <> - {itemType === ChatItemTypes.message && ( -
- {this.getMessagePreviewForScreenReader(props)} -
- )} - - - } + message={{ + content: ( + <> + {itemType === ChatItemTypes.message && ( +
+ {this.getMessagePreviewForScreenReader(props)} +
+ )} + + + ), + }} /> ) }, diff --git a/docs/src/prototypes/chatPane/services/messageFactoryMock.tsx b/docs/src/prototypes/chatPane/services/messageFactoryMock.tsx index 4224d7d927..b0f22acbd6 100644 --- a/docs/src/prototypes/chatPane/services/messageFactoryMock.tsx +++ b/docs/src/prototypes/chatPane/services/messageFactoryMock.tsx @@ -31,7 +31,7 @@ interface ChatMessage extends ChatMessageProps, ChatItemType { interface Divider extends DividerProps, ChatItemType {} type ChatItem = { - content?: ChatMessage | Divider + message?: ChatMessage | Divider gutter?: AvatarProps mine?: boolean } @@ -70,7 +70,7 @@ function generateChatMsgProps(message: MessageData, fromUser: UserData): ChatIte return { mine, - content: messageProps, + message: messageProps, gutter: !message.mine && { image: fromUser.avatar, status: statusMap.get(fromUser.status) }, } } @@ -138,7 +138,7 @@ function generateDividerProps(props: DividerProps): ChatItem { const { content, important, color = 'secondary' } = props const dividerProps: Divider = { itemType: ChatItemTypes.divider, content, important, color } - return { content: dividerProps } + return { message: dividerProps } } export function generateChatProps(chat: ChatData): ChatItem[] { diff --git a/src/components/Chat/Chat.tsx b/src/components/Chat/Chat.tsx index 7ff4b2b68f..db91546580 100644 --- a/src/components/Chat/Chat.tsx +++ b/src/components/Chat/Chat.tsx @@ -5,7 +5,6 @@ import * as React from 'react' import { childrenExist, customPropTypes, UIComponent, commonPropTypes } from '../../lib' import ChatItem from './ChatItem' import ChatMessage from './ChatMessage' -import ChatGutter from './ChatGutter' import { Extendable, ShorthandValue } from '../../../types/utils' import { Accessibility, AccessibilityActionHandlers } from '../../lib/accessibility/types' import { chatBehavior } from '../../lib/accessibility' @@ -40,7 +39,6 @@ class Chat extends UIComponent, any> { static defaultProps = { accessibility: chatBehavior, as: 'ul' } - static Gutter = ChatGutter static Item = ChatItem static Message = ChatMessage diff --git a/src/components/Chat/ChatGutter.tsx b/src/components/Chat/ChatGutter.tsx deleted file mode 100644 index 7456935d78..0000000000 --- a/src/components/Chat/ChatGutter.tsx +++ /dev/null @@ -1,50 +0,0 @@ -import * as React from 'react' - -import { - UIComponent, - childrenExist, - UIComponentProps, - ContentComponentProps, - ChildrenComponentProps, - commonPropTypes, - createShorthandFactory, -} from '../../lib' -import { Extendable, ShorthandValue } from '../../../types/utils' - -export interface ChatGutterProps - extends UIComponentProps, - ChildrenComponentProps, - ContentComponentProps {} - -/** - * A gutter is used to create the auxiliary area of a chat item - */ -class ChatGutter extends UIComponent, any> { - static className = 'ui-chat__gutter' - static create: Function - static displayName = 'ChatGutter' - - static propTypes = { - ...commonPropTypes.createCommon({ - content: 'shorthand', - }), - } - - static defaultProps = { - as: 'div', - } - - renderComponent({ ElementType, classes, rest }) { - const { children, content } = this.props - - return ( - - {childrenExist(children) ? children : content} - - ) - } -} - -ChatGutter.create = createShorthandFactory(ChatGutter, 'content') - -export default ChatGutter diff --git a/src/components/Chat/ChatItem.tsx b/src/components/Chat/ChatItem.tsx index a25c521717..0d102d5cfc 100644 --- a/src/components/Chat/ChatItem.tsx +++ b/src/components/Chat/ChatItem.tsx @@ -9,22 +9,21 @@ import { UIComponent, UIComponentProps, ChildrenComponentProps, - ContentComponentProps, commonPropTypes, customPropTypes, } from '../../lib' import Slot from '../Slot/Slot' -import ChatGutter from './ChatGutter' +import { ComponentSlotStylesPrepared } from '../../themes/types' -export interface ChatItemProps - extends UIComponentProps, - ChildrenComponentProps, - ContentComponentProps { +export interface ChatItemProps extends UIComponentProps, ChildrenComponentProps { /** Chat items can have a gutter. */ gutter?: ShorthandValue /** Indicates whether the gutter is positioned at the start or the end. */ gutterPosition?: 'start' | 'end' + + /** Chat items can have a message. */ + message?: ShorthandValue } /** @@ -36,11 +35,10 @@ class ChatItem extends UIComponent, any> { static displayName = 'ChatItem' static propTypes = { - ...commonPropTypes.createCommon({ - content: 'shorthand', - }), + ...commonPropTypes.createCommon(), gutter: customPropTypes.itemShorthand, gutterPosition: PropTypes.oneOf(['start', 'end']), + message: customPropTypes.itemShorthand, } static defaultProps = { @@ -48,30 +46,30 @@ class ChatItem extends UIComponent, any> { gutterPosition: 'start', } - renderComponent({ ElementType, classes, rest }: RenderResultConfig) { + renderComponent({ ElementType, classes, rest, styles }: RenderResultConfig) { const { children } = this.props return ( - {childrenExist(children) ? children : this.renderChatItem()} + {childrenExist(children) ? children : this.renderChatItem(styles)} ) } - private renderChatItem() { - const { content, gutter, gutterPosition } = this.props - const gutterElement = gutter && ChatGutter.create(gutter) + private renderChatItem(styles: ComponentSlotStylesPrepared) { + const { message, gutter, gutterPosition } = this.props + const gutterElement = gutter && Slot.create(gutter, { defaultProps: { styles: styles.gutter } }) return ( <> {gutterPosition === 'start' && gutterElement} - {Slot.create(content)} + {Slot.create(message, { defaultProps: { styles: styles.message } })} {gutterPosition === 'end' && gutterElement} ) } } -ChatItem.create = createShorthandFactory(ChatItem, 'content') +ChatItem.create = createShorthandFactory(ChatItem, 'message') export default ChatItem diff --git a/src/components/Chat/ChatMessage.tsx b/src/components/Chat/ChatMessage.tsx index fc0463af64..97ae4d69a5 100644 --- a/src/components/Chat/ChatMessage.tsx +++ b/src/components/Chat/ChatMessage.tsx @@ -51,9 +51,7 @@ class ChatMessage extends UIComponent, any> { static displayName = 'ChatMessage' static propTypes = { - ...commonPropTypes.createCommon({ - content: 'shorthand', - }), + ...commonPropTypes.createCommon({ content: 'shorthand' }), accessibility: PropTypes.oneOfType([PropTypes.object, PropTypes.func]), author: customPropTypes.itemShorthand, mine: PropTypes.bool, diff --git a/src/index.ts b/src/index.ts index 1e77cedabe..af883aeb8b 100644 --- a/src/index.ts +++ b/src/index.ts @@ -21,7 +21,6 @@ export { default as ButtonGroup, ButtonGroupProps } from './components/Button/Bu export { default as Chat, ChatProps } from './components/Chat/Chat' export { default as ChatItem, ChatItemProps } from './components/Chat/ChatItem' -export { default as ChatGutter, ChatGutterProps } from './components/Chat/ChatGutter' export { default as ChatMessage, ChatMessageProps } from './components/Chat/ChatMessage' export { diff --git a/src/themes/teams/componentStyles.ts b/src/themes/teams/componentStyles.ts index e143f48465..3d96d958e1 100644 --- a/src/themes/teams/componentStyles.ts +++ b/src/themes/teams/componentStyles.ts @@ -11,7 +11,6 @@ export { default as ButtonGroup } from './components/Button/buttonGroupStyles' export { default as Chat } from './components/Chat/chatStyles' export { default as ChatItem } from './components/Chat/chatItemStyles' -export { default as ChatGutter } from './components/Chat/chatGutterStyles' export { default as ChatMessage } from './components/Chat/chatMessageStyles' export { default as Divider } from './components/Divider/dividerStyles' diff --git a/src/themes/teams/componentVariables.ts b/src/themes/teams/componentVariables.ts index 49f38ff93b..a2b3261f0e 100644 --- a/src/themes/teams/componentVariables.ts +++ b/src/themes/teams/componentVariables.ts @@ -9,7 +9,6 @@ export { default as ButtonGroup } from './components/Button/buttonVariables' export { default as Chat } from './components/Chat/chatVariables' export { default as ChatItem } from './components/Chat/chatItemVariables' -export { default as ChatGutter } from './components/Chat/chatGutterVariables' export { default as ChatMessage } from './components/Chat/chatMessageVariables' export { default as Divider } from './components/Divider/dividerVariables' diff --git a/src/themes/teams/components/Chat/chatGutterStyles.ts b/src/themes/teams/components/Chat/chatGutterStyles.ts deleted file mode 100644 index f4ee83016c..0000000000 --- a/src/themes/teams/components/Chat/chatGutterStyles.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { ICSSInJSStyle, ComponentSlotStylesInput } from '../../../types' -import { ChatGutterProps } from '../../../../components/Chat/ChatGutter' - -const chatItemStyles: ComponentSlotStylesInput = { - root: (): ICSSInJSStyle => ({}), -} - -export default chatItemStyles diff --git a/src/themes/teams/components/Chat/chatGutterVariables.ts b/src/themes/teams/components/Chat/chatGutterVariables.ts deleted file mode 100644 index e51ec46ab7..0000000000 --- a/src/themes/teams/components/Chat/chatGutterVariables.ts +++ /dev/null @@ -1 +0,0 @@ -export default () => ({}) diff --git a/src/themes/teams/components/Chat/chatItemStyles.ts b/src/themes/teams/components/Chat/chatItemStyles.ts index d480d07635..6f9458713c 100644 --- a/src/themes/teams/components/Chat/chatItemStyles.ts +++ b/src/themes/teams/components/Chat/chatItemStyles.ts @@ -1,25 +1,24 @@ import { ICSSInJSStyle, ComponentSlotStylesInput } from '../../../types' import { ChatItemVariables } from './chatItemVariables' import { ChatItemProps } from '../../../../components/Chat/ChatItem' -import Chat from '../../../../components/Chat/Chat' const chatItemStyles: ComponentSlotStylesInput = { root: ({ props: p, variables: v }): ICSSInJSStyle => ({ position: 'relative', marginTop: v.margin, marginBottom: v.margin, + }), - [`& .${Chat.Gutter.className}`]: { - position: 'absolute', - marginTop: v.gutter.margin, - [p.gutterPosition === 'end' ? 'right' : 'left']: 0, - }, + gutter: ({ props: p, variables: v }): ICSSInJSStyle => ({ + position: 'absolute', + marginTop: v.gutterMargin, + [p.gutterPosition === 'end' ? 'right' : 'left']: 0, + }), - [`& .${Chat.Message.className}`]: { - position: 'relative', - marginLeft: v.content.margin, - marginRight: v.content.margin, - }, + message: ({ props: p, variables: v }): ICSSInJSStyle => ({ + position: 'relative', + marginLeft: v.messageMargin, + marginRight: v.messageMargin, }), } diff --git a/src/themes/teams/components/Chat/chatItemVariables.ts b/src/themes/teams/components/Chat/chatItemVariables.ts index bcad6aca86..632d839aeb 100644 --- a/src/themes/teams/components/Chat/chatItemVariables.ts +++ b/src/themes/teams/components/Chat/chatItemVariables.ts @@ -2,12 +2,12 @@ import { pxToRem } from '../../utils' export interface ChatItemVariables { margin: string - content: { margin: string } - gutter: { margin: string } + gutterMargin: string + messageMargin: string } export default (): ChatItemVariables => ({ margin: pxToRem(8), - gutter: { margin: pxToRem(10) }, - content: { margin: pxToRem(40) }, + gutterMargin: pxToRem(10), + messageMargin: pxToRem(40), }) diff --git a/src/themes/teams/components/Chat/chatMessageStyles.ts b/src/themes/teams/components/Chat/chatMessageStyles.ts index 4980c3d3f6..bfd1cef48a 100644 --- a/src/themes/teams/components/Chat/chatMessageStyles.ts +++ b/src/themes/teams/components/Chat/chatMessageStyles.ts @@ -5,29 +5,29 @@ import { ChatMessageVariables } from './chatMessageVariables' const chatMessageStyles: ComponentSlotStylesInput = { root: ({ props: p, variables: v }): ICSSInJSStyle => ({ display: 'inline-block', - padding: v.message.padding, - borderRadius: v.message.borderRadius, - color: v.message.color, - backgroundColor: p.mine ? v.message.backgroundColorMine : v.message.backgroundColor, - maxWidth: v.message.width, + padding: v.padding, + borderRadius: v.borderRadius, + color: v.color, + backgroundColor: p.mine ? v.backgroundColorMine : v.backgroundColor, + maxWidth: v.width, wordBreak: 'break-word', wordWrap: 'break-word', ...(p.mine && { float: 'right' }), ':focus': { - outline: `.2rem solid ${v.content.focusOutlineColor}`, + outline: `.2rem solid ${v.contentFocusOutlineColor}`, }, }), author: ({ props: p, variables: v }): ICSSInJSStyle => ({ display: p.mine ? 'none' : undefined, - marginRight: v.author.margin, + marginRight: v.authorMargin, }), content: ({ variables: v }): ICSSInJSStyle => ({ display: 'block', '& a:focus': { outline: 'none', - color: v.content.focusOutlineColor, + color: v.contentFocusOutlineColor, textDecoration: 'underline', }, }), diff --git a/src/themes/teams/components/Chat/chatMessageVariables.ts b/src/themes/teams/components/Chat/chatMessageVariables.ts index 6621097190..baef4681e0 100644 --- a/src/themes/teams/components/Chat/chatMessageVariables.ts +++ b/src/themes/teams/components/Chat/chatMessageVariables.ts @@ -1,27 +1,23 @@ import { pxToRem } from '../../utils' export interface ChatMessageVariables { - message: { - width: string - backgroundColor: string - backgroundColorMine: string - borderRadius: string - color: string - padding: string - } - author: { margin: string } - content: { focusOutlineColor: string } + width: string + backgroundColor: string + backgroundColorMine: string + borderRadius: string + color: string + padding: string + authorMargin: string + contentFocusOutlineColor: string } export default (siteVars): ChatMessageVariables => ({ - message: { - width: '80%', - backgroundColor: siteVars.white, - backgroundColorMine: '#E0E0ED', - borderRadius: '0.3rem', - color: 'rgb(64, 64, 64)', - padding: pxToRem(14), - }, - author: { margin: pxToRem(10) }, - content: { focusOutlineColor: siteVars.brand }, + width: '80%', + backgroundColor: siteVars.white, + backgroundColorMine: '#E0E0ED', + borderRadius: '0.3rem', + color: 'rgb(64, 64, 64)', + padding: pxToRem(14), + authorMargin: pxToRem(10), + contentFocusOutlineColor: siteVars.brand, }) diff --git a/test/specs/components/Chat/ChatGutter-test.ts b/test/specs/components/Chat/ChatGutter-test.ts deleted file mode 100644 index 90a0b814d4..0000000000 --- a/test/specs/components/Chat/ChatGutter-test.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { isConformant } from 'test/specs/commonTests' -import ChatGutter from 'src/components/Chat/ChatGutter' - -describe('ChatGutter', () => { - isConformant(ChatGutter) -}) diff --git a/test/specs/components/Chat/ChatItem-test.tsx b/test/specs/components/Chat/ChatItem-test.tsx index d7f64e98f6..6f591b0374 100644 --- a/test/specs/components/Chat/ChatItem-test.tsx +++ b/test/specs/components/Chat/ChatItem-test.tsx @@ -1,6 +1,5 @@ import { isConformant, implementsShorthandProp } from 'test/specs/commonTests' import ChatItem from 'src/components/Chat/ChatItem' -import ChatGutter from 'src/components/Chat/ChatGutter' import Slot from 'src/components/Slot/Slot' const chatItemImplementsShorthandProp = implementsShorthandProp(ChatItem) @@ -9,5 +8,5 @@ describe('ChatItem', () => { isConformant(ChatItem) chatItemImplementsShorthandProp('content', Slot, { mapsValueToProp: 'children' }) - chatItemImplementsShorthandProp('gutter', ChatGutter, { mapsValueToProp: 'content' }) + chatItemImplementsShorthandProp('gutter', Slot, { mapsValueToProp: 'children' }) }) From 225c7e836e1e9c78d2d83240d1daf775f31b88e4 Mon Sep 17 00:00:00 2001 From: Alexandru Buliga Date: Wed, 12 Dec 2018 17:25:50 +0100 Subject: [PATCH 20/21] fixed tests; amended changelog --- CHANGELOG.md | 2 +- test/specs/components/Chat/Chat-test.ts | 2 +- test/specs/components/Chat/ChatItem-test.tsx | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index a04c1669ba..b5c8b50b22 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -21,7 +21,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm - `type` prop is replaced with `color` in `Divider` component @layershifter ([#558](https://github.com/stardust-ui/react/pull/558)) - Remove `createColorVariants` and `setColorLightness` utils @layershifter ([#583](https://github.com/stardust-ui/react/pull/583)) - Remove `accessibility` prop (and corresponding behavior) from `ButtonGroup` @kolaps33 ([#605](https://github.com/stardust-ui/react/pull/605)) -- Add `gutter` prop to `Chat.Item`, removed `avatar` from `Chat.Message` @Bugaa92 ([#556](https://github.com/stardust-ui/react/pull/556)) +- Add `gutter` prop to `Chat.Item`, removed `avatar` from `Chat.Message`, renamed `content` slot to `message` for `Chat.Item`, deprecated Children API for `Chat` components @Bugaa92 ([#556](https://github.com/stardust-ui/react/pull/556)) ### Fixes - Fix `Provider` is not executing staticStyles with the merged siteVariables @mnajdova ([#559](https://github.com/stardust-ui/react/pull/559)) diff --git a/test/specs/components/Chat/Chat-test.ts b/test/specs/components/Chat/Chat-test.ts index bdff0c672d..0705f2e276 100644 --- a/test/specs/components/Chat/Chat-test.ts +++ b/test/specs/components/Chat/Chat-test.ts @@ -10,7 +10,7 @@ const chatImplementsCollectionShorthandProp = implementsCollectionShorthandProp( describe('Chat', () => { isConformant(Chat) - chatImplementsCollectionShorthandProp('items', ChatItem) + chatImplementsCollectionShorthandProp('items', ChatItem, { mapsValueToProp: 'message' }) describe('accessibility', () => { handlesAccessibility(Chat, { diff --git a/test/specs/components/Chat/ChatItem-test.tsx b/test/specs/components/Chat/ChatItem-test.tsx index 6f591b0374..c896daa242 100644 --- a/test/specs/components/Chat/ChatItem-test.tsx +++ b/test/specs/components/Chat/ChatItem-test.tsx @@ -7,6 +7,6 @@ const chatItemImplementsShorthandProp = implementsShorthandProp(ChatItem) describe('ChatItem', () => { isConformant(ChatItem) - chatItemImplementsShorthandProp('content', Slot, { mapsValueToProp: 'children' }) chatItemImplementsShorthandProp('gutter', Slot, { mapsValueToProp: 'children' }) + chatItemImplementsShorthandProp('message', Slot, { mapsValueToProp: 'children' }) }) From 551e21a28b9290e0fa88cc0aa2f1bbe9b72dd6a4 Mon Sep 17 00:00:00 2001 From: Alexandru Buliga Date: Thu, 13 Dec 2018 12:57:38 +0100 Subject: [PATCH 21/21] Update src/components/Chat/ChatItem.tsx --- src/components/Chat/ChatItem.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Chat/ChatItem.tsx b/src/components/Chat/ChatItem.tsx index 0d102d5cfc..fee9a407bf 100644 --- a/src/components/Chat/ChatItem.tsx +++ b/src/components/Chat/ChatItem.tsx @@ -35,7 +35,7 @@ class ChatItem extends UIComponent, any> { static displayName = 'ChatItem' static propTypes = { - ...commonPropTypes.createCommon(), + ...commonPropTypes.createCommon({ content: false }), gutter: customPropTypes.itemShorthand, gutterPosition: PropTypes.oneOf(['start', 'end']), message: customPropTypes.itemShorthand,