Skip to content
This repository was archived by the owner on Mar 4, 2020. It is now read-only.

Commit 3d1f4b8

Browse files
author
Alexandru Buliga
authored
feat(chat): chat item gutter and refactoring (#556)
* feat(chat): removed message avatar, added item gutter * - fixed imports - addressed comments - imporoved styles * added changelog entry * fixed examples using content prop * attempt to fix async shorthand * reverted weird example * fixed changelog * support for adding gutter to my messages bt introducing mine prop and using children css selectors * fix Async Shorthand example * add Chat.Item.Gutter subcomponent * reverted unwanted fix * fixed tests and refactored ChatItemGutter to ChatGutter * fixed remaining problems * implemented gutterPosition * - addressed comments; - improved examples; - added fix for gutter being created by default; * removed redundant prop from examples * better description for gutterPosition * - removed Chat.Gutter; - replaced Chat.Item content prop with message; - deprecated Children API; * removed unused variable * fixed tests; amended changelog * Update src/components/Chat/ChatItem.tsx
1 parent 4a7ecea commit 3d1f4b8

21 files changed

+329
-433
lines changed

‎CHANGELOG.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
2121
- `type` prop is replaced with `color` in `Divider` component @layershifter ([#558](https://github.com/stardust-ui/react/pull/558))
2222
- Remove `createColorVariants` and `setColorLightness` utils @layershifter ([#583](https://github.com/stardust-ui/react/pull/583))
2323
- Remove `accessibility` prop (and corresponding behavior) from `ButtonGroup` @kolaps33 ([#605](https://github.com/stardust-ui/react/pull/605))
24+
- 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))
2425

2526
### Fixes
2627
- Fix `Provider` is not executing staticStyles with the merged siteVariables @mnajdova ([#559](https://github.com/stardust-ui/react/pull/559))

‎docs/src/examples/components/Chat/Types/ChatExample.shorthand.tsx

Lines changed: 45 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react'
2-
import { Chat, Divider } from '@stardust-ui/react'
2+
import { Avatar, Chat, Divider } from '@stardust-ui/react'
33

44
const janeAvatar = {
55
image: 'public/images/avatar/small/ade.jpg',
@@ -8,59 +8,67 @@ const janeAvatar = {
88

99
const items = [
1010
{
11-
content: (
12-
<Chat.Message content="Hello" author="John Doe" timestamp="Yesterday, 10:15 PM" mine />
13-
),
11+
message: {
12+
content: (
13+
<Chat.Message content="Hello" author="John Doe" timestamp="Yesterday, 10:15 PM" mine />
14+
),
15+
},
1416
key: 'message-id-1',
1517
},
1618
{
17-
content: (
18-
<Chat.Message
19-
content="Hi"
20-
author="Jane Doe"
21-
timestamp="Yesterday, 10:15 PM"
22-
avatar={janeAvatar}
23-
/>
24-
),
19+
gutter: { content: <Avatar {...janeAvatar} /> },
20+
message: {
21+
content: <Chat.Message content="Hi" author="Jane Doe" timestamp="Yesterday, 10:15 PM" />,
22+
},
2523
key: 'message-id-2',
2624
},
2725
{
28-
content: (
29-
<Chat.Message
30-
content="Would you like to grab a lunch?"
31-
author="John Doe"
32-
timestamp="Yesterday, 10:16 PM"
33-
mine
34-
/>
35-
),
26+
message: { content: <Chat.Message content="What's up?" /> },
3627
key: 'message-id-3',
3728
},
3829
{
39-
content: (
40-
<Chat.Message
41-
content="Sure! Let's try the new place downtown"
42-
author="Jane Doe"
43-
timestamp="Yesterday, 10:15 PM"
44-
avatar={janeAvatar}
45-
/>
46-
),
30+
message: {
31+
content: (
32+
<Chat.Message
33+
content="Would you like to grab a lunch?"
34+
author="John Doe"
35+
timestamp="Yesterday, 10:16 PM"
36+
mine
37+
/>
38+
),
39+
},
4740
key: 'message-id-4',
4841
},
4942
{
50-
content: <Divider content="Today" color="primary" important />,
43+
gutter: { content: <Avatar {...janeAvatar} /> },
44+
message: {
45+
content: (
46+
<Chat.Message
47+
content="Sure! Let's try the new place downtown"
48+
author="Jane Doe"
49+
timestamp="Yesterday, 10:15 PM"
50+
/>
51+
),
52+
},
5153
key: 'message-id-5',
5254
},
5355
{
54-
content: (
55-
<Chat.Message
56-
content="Let's have a call"
57-
author="John Doe"
58-
timestamp="Today, 11:15 PM"
59-
mine
60-
/>
61-
),
56+
message: <Divider content="Today" color="primary" important />,
6257
key: 'message-id-6',
6358
},
59+
{
60+
message: {
61+
content: (
62+
<Chat.Message
63+
content="Let's have a call"
64+
author="John Doe"
65+
timestamp="Today, 11:15 PM"
66+
mine
67+
/>
68+
),
69+
},
70+
key: 'message-id-7',
71+
},
6472
]
6573

6674
const ChatExample = () => <Chat items={items} />

‎docs/src/examples/components/Chat/Types/ChatExample.tsx

Lines changed: 0 additions & 52 deletions
This file was deleted.

‎docs/src/examples/components/Chat/Types/ChatExampleGutterPosition.shorthand.tsx

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import React from 'react'
2+
import { Avatar, Chat } from '@stardust-ui/react'
3+
4+
const [janeAvatar, johnAvatar] = [
5+
'public/images/avatar/small/ade.jpg',
6+
'public/images/avatar/small/joe.jpg',
7+
].map(src => ({
8+
image: src,
9+
status: { color: 'green', icon: 'check' },
10+
}))
11+
12+
const items = [
13+
{
14+
gutterPosition: 'start',
15+
gutter: { content: <Avatar {...johnAvatar} /> },
16+
message: {
17+
content: <Chat.Message content="Hello" author="John Doe" timestamp="Yesterday, 10:15 PM" />,
18+
},
19+
key: 'message-id-1',
20+
},
21+
{
22+
gutterPosition: 'end',
23+
gutter: { content: <Avatar {...janeAvatar} /> },
24+
message: {
25+
content: <Chat.Message content="Hi" author="Jane Doe" timestamp="Yesterday, 10:15 PM" mine />,
26+
},
27+
key: 'message-id-2',
28+
},
29+
]
30+
31+
const ChatExampleGutterPosition = () => <Chat items={items} />
32+
33+
export default ChatExampleGutterPosition

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

Lines changed: 31 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react'
2-
import { Chat, Provider } from '@stardust-ui/react'
2+
import { Avatar, Chat, Provider } from '@stardust-ui/react'
33

44
const janeAvatar = {
55
image: 'public/images/avatar/small/ade.jpg',
@@ -40,23 +40,26 @@ const ChatMessageExampleStyled = () => (
4040
<Provider
4141
theme={{
4242
componentStyles: {
43-
ChatMessage: {
44-
root: { ...slotLabelStyles('root'), backgroundColor: '#2E8B57' },
45-
avatar: {
46-
...slotLabelStyles('avatar', { bottom: '-11px' }),
43+
ChatItem: {
44+
root: { ...slotLabelStyles('chat-item-root'), backgroundColor: 'transparent' },
45+
gutter: {
46+
...slotLabelStyles('gutter', { bottom: '-11px' }),
4747
backgroundColor: '#FF00FF',
4848
padding: 0,
49+
position: 'absolute',
4950
},
50-
messageBody: { ...slotLabelStyles('messageBody'), backgroundColor: '#87CEFA' },
51+
},
52+
ChatMessage: {
53+
root: { ...slotLabelStyles('chat-message-root'), backgroundColor: '#87CEFA' },
5154
author: { ...slotLabelStyles('author'), backgroundColor: '#E0FFFF' },
5255
content: { ...slotLabelStyles('content'), backgroundColor: '#F08080' },
5356
timestamp: { ...slotLabelStyles('timestamp'), backgroundColor: '#FFFFE0' },
5457
},
5558
},
5659
componentVariables: {
5760
ChatMessage: siteVars => ({
58-
messageBody: {
59-
focusOutlineColor: siteVars.white,
61+
content: {
62+
focusOutlineColor: siteVars.red,
6063
},
6164
}),
6265
},
@@ -65,26 +68,30 @@ const ChatMessageExampleStyled = () => (
6568
<Chat
6669
items={[
6770
{
68-
content: (
69-
<Chat.Message
70-
content="Hey, do you know any restaurants with good food?"
71-
author="John Doe"
72-
timestamp="Yesterday, 10:15 PM"
73-
mine
74-
/>
75-
),
71+
message: {
72+
content: (
73+
<Chat.Message
74+
content="Hey, do you know any restaurants with good food?"
75+
author="John Doe"
76+
timestamp="Yesterday, 10:15 PM"
77+
mine
78+
/>
79+
),
80+
},
7681
key: 'message-id-1',
7782
},
7883
{
7984
key: 'message-id-2',
80-
content: (
81-
<Chat.Message
82-
content={{ content }}
83-
author="Jane Doe"
84-
timestamp="Yesterday, 10:15 PM"
85-
avatar={janeAvatar}
86-
/>
87-
),
85+
gutter: { content: <Avatar {...janeAvatar} /> },
86+
message: {
87+
content: (
88+
<Chat.Message
89+
content={{ content }}
90+
author="Jane Doe"
91+
timestamp="Yesterday, 10:15 PM"
92+
/>
93+
),
94+
},
8895
},
8996
]}
9097
/>

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

Lines changed: 0 additions & 86 deletions
This file was deleted.

‎docs/src/examples/components/Chat/Types/index.tsx

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,11 @@ const Types = () => (
99
description="A default Chat."
1010
examplePath="components/Chat/Types/ChatExample"
1111
/>
12+
<ComponentExample
13+
title="Gutter"
14+
description="A Chat can have a gutter positioned at the start or at the end of a message."
15+
examplePath="components/Chat/Types/ChatExampleGutterPosition"
16+
/>
1217
<ComponentExample
1318
title="Styled Chat Item"
1419
description="A Chat item with custom styles for every slot."

0 commit comments

Comments
 (0)