Skip to content

Commit a752922

Browse files
anuradha9712anuradha9712
committed
docs(conversation): add conversation docs in patterns section
1 parent 91b8210 commit a752922

18 files changed

+355
-1
lines changed

‎docs/src/data/components/images/patterns/BrowserTitle.png

55.5 KB
Loading

‎docs/src/data/components/images/patterns/Chat.png

60.9 KB
Loading

‎docs/src/data/components/patterns.js

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,14 @@ export const data = [
1919
design: 'Available',
2020
name: 'Browser Tab Title',
2121
code: 'Available',
22-
image: () => <StaticImage src="./images/patterns/fileUploader.png" alt="File uploader" imgStyle={imgStyle} />,
22+
image: () => <StaticImage src="./images/patterns/BrowserTitle.png" alt="File uploader" imgStyle={imgStyle} />,
23+
},
24+
{
25+
link: 'conversation/usage',
26+
design: 'Available',
27+
name: 'Conversation',
28+
code: 'Available',
29+
image: () => <StaticImage src="./images/patterns/Chat.png" alt="Chat" imgStyle={imgStyle} />,
2330
},
2431
{
2532
link: 'fileUploader/usage',

‎docs/src/data/nav/patterns.yaml

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@ menus:
44
link: /patterns/overview/all-patterns/
55
- label: Browser Tab Title
66
link: /patterns/browserTabTitle/usage/
7+
- label: Conversation
8+
link: /patterns/conversation/usage/
79
- label: Email
810
link: /patterns/email/usage/
911
- label: File Uploader

‎docs/src/pages/patterns/conversation/images/above-768px.png

186 KB
Loading

‎docs/src/pages/patterns/conversation/images/date.png

40.8 KB
Loading

‎docs/src/pages/patterns/conversation/images/new-msg-2.png

75 KB
Loading

‎docs/src/pages/patterns/conversation/images/new-msg.png

61.2 KB
Loading

‎docs/src/pages/patterns/conversation/images/overflow-behavior.png

53.2 KB
Loading

‎docs/src/pages/patterns/conversation/images/sending-message.gif

432 KB
Loading

‎docs/src/pages/patterns/conversation/images/status-rolling.gif

816 KB
Loading

‎docs/src/pages/patterns/conversation/images/typing-indicator.png

73.4 KB
Loading

‎docs/src/pages/patterns/conversation/images/unread-message.gif

1.09 MB
Loading

‎docs/src/pages/patterns/conversation/images/unread-msg.png

68.3 KB
Loading

‎docs/src/pages/patterns/conversation/images/upto-480px.png

53.1 KB
Loading

‎docs/src/pages/patterns/conversation/images/upto-768px.png

56.4 KB
Loading

‎docs/src/pages/patterns/conversation/interactions.mdx

Lines changed: 248 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,248 @@
1+
import statusRolling from "./images/status-rolling.gif";
2+
import sendingMessage from "./images/sending-message.gif";
3+
import unreadMessage from "./images/unread-message.gif";
4+
5+
#### Sending a Message
6+
7+
<br />
8+
9+
<img width="100%" height="auto" src={sendingMessage} alt="Opening of Combobox" />
10+
<Caption>Sending a Message</Caption>
11+
12+
<br />
13+
14+
##### Message Appearing in its Loading State
15+
16+
<table style={{width: "100%"}}>
17+
<tbody>
18+
<tr>
19+
<th style={{width:"33%", textAlign: "left"}}>Property</th>
20+
<th style={{width:"33%", textAlign: "left"}}>Initial</th>
21+
<th style={{width:"33%", textAlign: "left"}}>Final</th>
22+
</tr>
23+
<tr style={{verticalAlign: "top"}}>
24+
<td>State</td>
25+
<td>Default</td>
26+
<td>Loading</td>
27+
</tr>
28+
</tbody>
29+
</table>
30+
31+
<br />
32+
33+
<table style={{width: "100%"}}>
34+
<tbody>
35+
<tr>
36+
<th style={{width:"33%", textAlign: "left"}}>Curve</th>
37+
<th style={{width:"33%", textAlign: "left"}}>Duration</th>
38+
<th style={{width:"33%", textAlign: "left"}}>Delay</th>
39+
</tr>
40+
<tr style={{verticalAlign: "top"}}>
41+
<td>Cubic-bezier (0, 0, 0.3, 1)</td>
42+
<td>240ms</td>
43+
<td>-</td>
44+
</tr>
45+
</tbody>
46+
</table>
47+
48+
<br/>
49+
50+
##### Transitioning
51+
52+
<table style={{width: "100%"}}>
53+
<tbody>
54+
<tr>
55+
<th style={{width:"33%", textAlign: "left"}}>Property</th>
56+
<th style={{width:"33%", textAlign: "left"}}>Initial</th>
57+
<th style={{width:"33%", textAlign: "left"}}>Final</th>
58+
</tr>
59+
<tr style={{verticalAlign: "top"}}>
60+
<td>State</td>
61+
<td>Loading</td>
62+
<td>Delivered</td>
63+
</tr>
64+
</tbody>
65+
</table>
66+
67+
<br />
68+
69+
<table style={{width: "100%"}}>
70+
<tbody>
71+
<tr>
72+
<th style={{width:"33%", textAlign: "left"}}>Curve</th>
73+
<th style={{width:"33%", textAlign: "left"}}>Duration</th>
74+
<th style={{width:"33%", textAlign: "left"}}>Delay</th>
75+
</tr>
76+
<tr style={{verticalAlign: "top"}}>
77+
<td>Cubic-bezier (0.2, 0, 0.38, 0.9)</td>
78+
<td>80ms</td>
79+
<td>640ms</td>
80+
</tr>
81+
</tbody>
82+
</table>
83+
84+
<br/>
85+
86+
#### Status Rolling
87+
88+
These are the defined breakpoints for three different parent container sizes:
89+
90+
<br />
91+
92+
<img width="100%" height="auto" src={statusRolling} alt="Opening of Combobox" />
93+
<Caption>Status Rolling</Caption>
94+
95+
<br />
96+
97+
##### Status Disappearing
98+
99+
<table style={{width: "100%"}}>
100+
<tbody>
101+
<tr>
102+
<th style={{width:"33%", textAlign: "left"}}>Property</th>
103+
<th style={{width:"33%", textAlign: "left"}}>Initial</th>
104+
<th style={{width:"33%", textAlign: "left"}}>Final</th>
105+
</tr>
106+
<tr style={{verticalAlign: "top"}}>
107+
<td>State</td>
108+
<td>Initial</td>
109+
<td>Final</td>
110+
</tr>
111+
</tbody>
112+
</table>
113+
114+
<br />
115+
116+
<table style={{width: "100%"}}>
117+
<tbody>
118+
<tr>
119+
<th style={{width:"33%", textAlign: "left"}}>Curve</th>
120+
<th style={{width:"33%", textAlign: "left"}}>Duration</th>
121+
<th style={{width:"33%", textAlign: "left"}}>Delay</th>
122+
</tr>
123+
<tr style={{verticalAlign: "top"}}>
124+
<td>Cubic-bezier (0, 0, 0.3, 1)</td>
125+
<td>160ms</td>
126+
<td>80ms</td>
127+
</tr>
128+
</tbody>
129+
</table>
130+
131+
<br/>
132+
133+
134+
##### Second Message Appearing
135+
136+
<table style={{width: "100%"}}>
137+
<tbody>
138+
<tr>
139+
<th style={{width:"33%", textAlign: "left"}}>Property</th>
140+
<th style={{width:"33%", textAlign: "left"}}>Initial</th>
141+
<th style={{width:"33%", textAlign: "left"}}>Final</th>
142+
</tr>
143+
<tr style={{verticalAlign: "top"}}>
144+
<td>State</td>
145+
<td>Initial</td>
146+
<td>Final</td>
147+
</tr>
148+
</tbody>
149+
</table>
150+
151+
<br />
152+
153+
<table style={{width: "100%"}}>
154+
<tbody>
155+
<tr>
156+
<th style={{width:"33%", textAlign: "left"}}>Curve</th>
157+
<th style={{width:"33%", textAlign: "left"}}>Duration</th>
158+
<th style={{width:"33%", textAlign: "left"}}>Delay</th>
159+
</tr>
160+
<tr style={{verticalAlign: "top"}}>
161+
<td>Cubic-bezier (0, 0, 0.38, 0.9)</td>
162+
<td>160ms</td>
163+
<td>240ms</td>
164+
</tr>
165+
</tbody>
166+
</table>
167+
168+
<br/>
169+
170+
171+
##### Status Appearing for The Second Message
172+
173+
<table style={{width: "100%"}}>
174+
<tbody>
175+
<tr>
176+
<th style={{width:"33%", textAlign: "left"}}>Property</th>
177+
<th style={{width:"33%", textAlign: "left"}}>Initial</th>
178+
<th style={{width:"33%", textAlign: "left"}}>Final</th>
179+
</tr>
180+
<tr style={{verticalAlign: "top"}}>
181+
<td>State</td>
182+
<td>Initial</td>
183+
<td>Final</td>
184+
</tr>
185+
</tbody>
186+
</table>
187+
188+
<br />
189+
190+
<table style={{width: "100%"}}>
191+
<tbody>
192+
<tr>
193+
<th style={{width:"33%", textAlign: "left"}}>Curve</th>
194+
<th style={{width:"33%", textAlign: "left"}}>Duration</th>
195+
<th style={{width:"33%", textAlign: "left"}}>Delay</th>
196+
</tr>
197+
<tr style={{verticalAlign: "top"}}>
198+
<td>Cubic-bezier (0, 0, 0.38, 0.9)</td>
199+
<td>80ms</td>
200+
<td>80ms</td>
201+
</tr>
202+
</tbody>
203+
</table>
204+
205+
<br/>
206+
207+
#### Unread Message
208+
209+
<br />
210+
211+
<img width="100%" height="auto" src={unreadMessage} alt="Opening of Combobox" />
212+
<Caption>Unread Message Animation</Caption>
213+
214+
<br />
215+
216+
<table style={{width: "100%"}}>
217+
<tbody>
218+
<tr>
219+
<th style={{width:"33%", textAlign: "left"}}>Property</th>
220+
<th style={{width:"33%", textAlign: "left"}}>Initial</th>
221+
<th style={{width:"33%", textAlign: "left"}}>Final</th>
222+
</tr>
223+
<tr style={{verticalAlign: "top"}}>
224+
<td>State</td>
225+
<td>Initial</td>
226+
<td>Final</td>
227+
</tr>
228+
</tbody>
229+
</table>
230+
231+
<br />
232+
233+
<table style={{width: "100%"}}>
234+
<tbody>
235+
<tr>
236+
<th style={{width:"33%", textAlign: "left"}}>Curve</th>
237+
<th style={{width:"33%", textAlign: "left"}}>Duration</th>
238+
<th style={{width:"33%", textAlign: "left"}}>Delay</th>
239+
</tr>
240+
<tr style={{verticalAlign: "top"}}>
241+
<td>Cubic-bezier (0, 0, 0.3, 1)</td>
242+
<td>160ms</td>
243+
<td>-</td>
244+
</tr>
245+
</tbody>
246+
</table>
247+
248+
<br/>

‎docs/src/pages/patterns/conversation/usage.mdx

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
---
2+
title: Conversation
3+
description: Conversation framework helps in fluid exchange of information.
4+
tabs: ["Usage", "Interactions"]
5+
keywords: ['Conversation', 'Chat', 'Chat Input', 'Chat Bubble']
6+
---
7+
8+
Conversation framework helps in fluid exchange of information.
9+
10+
#### Responsive Breakpoints for Chat Container and Bubble
11+
12+
These are the defined breakpoints for three different parent container sizes:
13+
14+
<table style={{width: "100%"}}>
15+
<tbody>
16+
<tr>
17+
<th style={{width:"20%", textAlign: "left"}}>Parent Container</th>
18+
<th style={{width:"20%", textAlign: "left"}}>Chat Container</th>
19+
<th style={{width:"20%", textAlign: "left"}}>Chat Bubble <br/> (Without Media)</th>
20+
<th style={{width:"20%", textAlign: "left"}}>Spacing between outgoing and incoming bubbles</th>
21+
<th style={{width:"20%", textAlign: "left"}}>Spacing between same bubbles</th>
22+
</tr>
23+
<tr style={{verticalAlign: "top"}}>
24+
<td>Up to 480px</td>
25+
<td>12px left- right padding from parent container</td>
26+
<td>84px spacing from chat container edges</td>
27+
<td>16px</td>
28+
<td>8px</td>
29+
</tr>
30+
<tr style={{verticalAlign: "top"}}>
31+
<td>481px-768px</td>
32+
<td>56px left-right padding from parent container</td>
33+
<td>160px spacing from chat container edges</td>
34+
<td>24px</td>
35+
<td>8px</td>
36+
</tr>
37+
<tr style={{verticalAlign: "top"}}>
38+
<td>769px and above</td>
39+
<td>Fixed at 640px, center aligned</td>
40+
<td>160px spacing from chat container edges</td>
41+
<td>24px</td>
42+
<td>8px</td>
43+
</tr>
44+
</tbody>
45+
</table>
46+
47+
<br />
48+
49+
##### Up to 480px
50+
51+
![Up to 480px](./images/upto-480px.png)
52+
<Caption>Up to 480px</Caption>
53+
54+
##### 480px-768px
55+
56+
![480px-768px](./images/upto-768px.png)
57+
<Caption>480px-768px</Caption>
58+
59+
##### 769px and above
60+
61+
![769px and above](./images/above-768px.png)
62+
<Caption>769px and above</Caption>
63+
64+
#### Working with Chat Input
65+
66+
##### With and Without Typing Indicator
67+
68+
![With typing indicator [Left], Without Typing Indicator [Right]](./images/typing-indicator.png)
69+
<Caption>With typing indicator [Left], Without Typing Indicator [Right]</Caption>
70+
71+
##### Overflow behavior
72+
73+
In case of numerous chat bubbles, scrolling down moves content beneath the chat input, with a gradient overlay ensuring a smooth transition and indicating hidden content.
74+
75+
![Overflow behavior](./images/overflow-behavior.png)
76+
<Caption>Overflow behavior</Caption>
77+
78+
#### Working with Chat Separators
79+
80+
##### Chat Separator - Date
81+
82+
![Chat Separator - Date](./images/date.png)
83+
<Caption>Chat Separator - Date</Caption>
84+
85+
##### Chat Separator - Unread Messages
86+
87+
![Chat Separator - Unread Messages](./images/unread-msg.png)
88+
<Caption>Chat Separator - Unread Messages</Caption>
89+
90+
##### Chat Separator - New Messages
91+
92+
![Chat Separator - New Messages](./images/new-msg.png)
93+
<Caption>Chat Separator - New Messages</Caption>
94+
95+
![Chat Separator - New Messages](./images/new-msg-2.png)
96+
<Caption>Chat Separator - New Messages</Caption>
97+

0 commit comments

Comments
 (0)