Skip to content

Commit 0709e9f

Browse files
lisalupilisalupi
authored
refactor: conversation vanilla extract (#5716)
1 parent 1cf1df6 commit 0709e9f

File tree

4 files changed

+99
-168
lines changed

4 files changed

+99
-168
lines changed

‎.changeset/slimy-rats-lose.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@ultraviolet/plus": minor
3+
---
4+
5+
Refactor component `Conversation` to use vanilla extract instead of Emotion

‎packages/plus/src/components/Conversation/__tests__/__snapshots__/index.test.tsx.snap‎

Lines changed: 14 additions & 109 deletions
Original file line numberDiff line numberDiff line change
@@ -2,128 +2,33 @@
22

33
exports[`conversation > should work with Default 1`] = `
44
<DocumentFragment>
5-
.emotion-0 {
6-
margin-top: 1.5rem;
7-
text-align: center;
8-
}
9-
10-
.emotion-2 {
11-
display: -webkit-box;
12-
display: -webkit-flex;
13-
display: -ms-flexbox;
14-
display: flex;
15-
-webkit-flex-direction: row-reverse;
16-
-ms-flex-direction: row-reverse;
17-
flex-direction: row-reverse;
18-
margin-bottom: 1rem;
19-
}
20-
21-
.emotion-4 {
22-
width: 100%;
23-
}
24-
25-
.emotion-6 {
26-
margin: 0 1.5rem;
27-
margin-top: 1.5rem;
28-
border-radius: 0.25rem;
29-
padding: 1.5rem;
30-
background-color: #e9eaeb;
31-
}
32-
33-
.emotion-8 {
34-
display: -webkit-box;
35-
display: -webkit-flex;
36-
display: -ms-flexbox;
37-
display: flex;
38-
-webkit-align-items: center;
39-
-webkit-box-align: center;
40-
-ms-flex-align: center;
41-
align-items: center;
42-
-webkit-box-pack: start;
43-
-ms-flex-pack: start;
44-
-webkit-justify-content: flex-start;
45-
justify-content: flex-start;
46-
margin: 0 3.5rem;
47-
}
48-
49-
.emotion-10 {
50-
background-color: #e9eaeb;
51-
height: 16px;
52-
margin-right: 0.5rem;
53-
}
54-
55-
.emotion-12 {
56-
display: -webkit-box;
57-
display: -webkit-flex;
58-
display: -ms-flexbox;
59-
display: flex;
60-
-webkit-align-self: flex-end;
61-
-ms-flex-item-align: flex-end;
62-
align-self: flex-end;
63-
}
64-
65-
.emotion-14 {
66-
display: -webkit-box;
67-
display: -webkit-flex;
68-
display: -ms-flexbox;
69-
display: flex;
70-
-webkit-flex-direction: row;
71-
-ms-flex-direction: row;
72-
flex-direction: row;
73-
margin-bottom: 1rem;
74-
}
75-
76-
.emotion-18 {
77-
margin: 0 1.5rem;
78-
margin-top: 1.5rem;
79-
border-radius: 0.25rem;
80-
padding: 1.5rem;
81-
background-color: #f1eefc;
82-
}
83-
84-
.emotion-20 {
85-
display: -webkit-box;
86-
display: -webkit-flex;
87-
display: -ms-flexbox;
88-
display: flex;
89-
-webkit-align-items: center;
90-
-webkit-box-align: center;
91-
-ms-flex-align: center;
92-
align-items: center;
93-
-webkit-box-pack: end;
94-
-ms-flex-pack: end;
95-
-webkit-justify-content: flex-end;
96-
justify-content: flex-end;
97-
margin: 0 3.5rem;
98-
}
99-
100-
<div
5+
<div
1016
data-testid="testing"
1027
>
1038
<div
1049
class="uv_toi52u0 uv_toi52u31 uv_toi52u2d uv_toi52u7d uv_toi52u5d"
10510
>
10611
<p
107-
class="emotion-0 emotion-1 uv_m4c9ow0 uv_m4c9ow2 uv_m4c9ow4 uv_m4c9ow6 uv_m4c9ow8 uv_m4c9owl uv_m4c9own uv_m4c9ow1b uv_m4c9ow3f"
12+
class="styles__16zcyo53 uv_m4c9ow0 uv_m4c9ow2 uv_m4c9ow4 uv_m4c9ow6 uv_m4c9ow8 uv_m4c9owl uv_m4c9own uv_m4c9ow1b uv_m4c9ow3f"
10813
>
10914
2022-03-02
11015
</p>
11116
<div
112-
class="emotion-2 emotion-3"
17+
class="styles_left__16zcyo55 styles__16zcyo54"
11318
>
11419
<div
115-
class="emotion-4 emotion-5"
20+
class="styles__16zcyo5b"
11621
>
11722
<div
118-
class="emotion-6 emotion-7"
23+
class="styles_left__16zcyo58 styles__16zcyo57"
11924
>
12025
<div
121-
class="emotion-8 emotion-9"
26+
class="styles_left__16zcyo51 styles__16zcyo50"
12227
>
12328
Hello
12429
</div>
12530
<span
126-
class="emotion-10 emotion-11 uv_d6zknp0 uv_d6zknp4"
31+
class="styles__16zcyo5c uv_d6zknp0 uv_d6zknp4"
12732
>
12833
<span
12934
class="uv_d6zknpa uv_m4c9ow0 uv_m4c9ow2 uv_m4c9ow4 uv_m4c9ow6 uv_m4c9ow7 uv_m4c9owi uv_m4c9ows uv_m4c9ow1b uv_m4c9ow3c"
@@ -134,29 +39,29 @@ exports[`conversation > should work with Default 1`] = `
13439
</div>
13540
</div>
13641
<div
137-
class="emotion-12 emotion-13"
42+
class="styles__16zcyo5a"
13843
>
13944
<div>
14045
Hello
14146
</div>
14247
</div>
14348
</div>
14449
<div
145-
class="emotion-14 emotion-3"
50+
class="styles_right__16zcyo56 styles__16zcyo54"
14651
>
14752
<div
148-
class="emotion-4 emotion-5"
53+
class="styles__16zcyo5b"
14954
>
15055
<div
151-
class="emotion-18 emotion-7"
56+
class="styles_right__16zcyo59 styles__16zcyo57"
15257
>
15358
<div
154-
class="emotion-20 emotion-9"
59+
class="styles_right__16zcyo52 styles__16zcyo50"
15560
>
15661
Hello
15762
</div>
15863
<span
159-
class="emotion-10 emotion-11 uv_d6zknp0 uv_d6zknp4"
64+
class="styles__16zcyo5c uv_d6zknp0 uv_d6zknp4"
16065
>
16166
<span
16267
class="uv_d6zknpa uv_m4c9ow0 uv_m4c9ow2 uv_m4c9ow4 uv_m4c9ow6 uv_m4c9ow7 uv_m4c9owi uv_m4c9ows uv_m4c9ow1b uv_m4c9ow3c"
@@ -167,7 +72,7 @@ exports[`conversation > should work with Default 1`] = `
16772
</div>
16873
</div>
16974
<div
170-
class="emotion-12 emotion-13"
75+
class="styles__16zcyo5a"
17176
>
17277
<div>
17378
Hello

‎packages/plus/src/components/Conversation/index.tsx‎

Lines changed: 22 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -1,68 +1,35 @@
11
'use client'
22

3-
import styled from '@emotion/styled'
43
import { Stack, Tag, Text } from '@ultraviolet/ui'
54
import type { ReactNode } from 'react'
5+
import {
6+
conversationAvatar,
7+
conversationBubble,
8+
conversationContainer,
9+
conversationInfos,
10+
conversationRawMessage,
11+
conversationTag,
12+
styledText,
13+
} from './styles.css'
614

715
const Conversation = ({ children }: { children: ReactNode }) => (
816
<Stack>{children}</Stack>
917
)
10-
const StyledInfos = styled.div<{ align: 'left' | 'right' }>`
11-
display: flex;
12-
align-items: center;
13-
justify-content: ${({ align }) =>
14-
align === 'left' ? 'flex-start' : 'flex-end'};
15-
margin: 0 ${({ theme }) => theme.space['7']};
16-
`
18+
1719
export const MessageInfos = ({
1820
children,
1921
align,
2022
}: {
2123
children: ReactNode
2224
align: 'left' | 'right'
23-
}) => <StyledInfos align={align}>{children}</StyledInfos>
24-
25-
const StyledText = styled(Text)`
26-
margin-top: ${({ theme }) => theme.space['3']};
27-
text-align: center;
28-
`
25+
}) => <div className={conversationInfos[align]}>{children}</div>
2926

3027
export const Date = ({ children }: { children: ReactNode }) => (
31-
<StyledText as="p" prominence="weak" variant="bodySmall">
28+
<Text as="p" className={styledText} prominence="weak" variant="bodySmall">
3229
{children}
33-
</StyledText>
30+
</Text>
3431
)
3532

36-
const MessageContainer = styled('div', {
37-
shouldForwardProp: prop => !['align'].includes(prop),
38-
})<{ align: 'left' | 'right' }>`
39-
display: flex;
40-
flex-direction: ${({ align }) => (align === 'left' ? 'row-reverse' : 'row')};
41-
margin-bottom: ${({ theme }) => theme.space['2']};
42-
`
43-
44-
const RawMessageContainer = styled('div', {
45-
shouldForwardProp: prop => !['align'].includes(prop),
46-
})<{ align: 'left' | 'right' }>`
47-
margin: 0 ${({ theme }) => theme.space['3']};
48-
margin-top: ${({ theme }) => theme.space['3']};
49-
border-radius: ${({ theme }) => theme.radii.default};
50-
padding: ${({ theme }) => theme.space['3']};
51-
background-color: ${({ theme, align }) =>
52-
align === 'left'
53-
? theme.colors.neutral.backgroundStrong
54-
: theme.colors.primary.background};
55-
`
56-
57-
const AvatarContainer = styled.div`
58-
display: flex;
59-
align-self: flex-end;
60-
`
61-
62-
const BubbleContainer = styled.div`
63-
width: 100%;
64-
`
65-
6633
type MessageProps = {
6734
className?: string
6835
children: ReactNode
@@ -76,22 +43,18 @@ export const Message = ({
7643
avatar,
7744
align = 'right',
7845
}: MessageProps) => (
79-
<MessageContainer align={align} className={className}>
80-
<BubbleContainer>
81-
<RawMessageContainer align={align}>{children}</RawMessageContainer>
82-
</BubbleContainer>
83-
<AvatarContainer>{avatar}</AvatarContainer>
84-
</MessageContainer>
46+
<div
47+
className={`${className ? `${className} ` : ''}${conversationContainer[align]}`}
48+
>
49+
<div className={conversationBubble}>
50+
<div className={conversationRawMessage[align]}>{children}</div>
51+
</div>
52+
<div className={conversationAvatar}>{avatar}</div>
53+
</div>
8554
)
8655

87-
const StyledTag = styled(Tag)`
88-
background-color: ${({ theme }) => theme.colors.neutral.backgroundStrong};
89-
height: 16px;
90-
margin-right: ${({ theme }) => theme.space['1']};
91-
`
92-
9356
export const MessageTag = ({ children }: { children: ReactNode }) => (
94-
<StyledTag>{children}</StyledTag>
57+
<Tag className={conversationTag}>{children}</Tag>
9558
)
9659

9760
Conversation.Date = Date

‎packages/plus/src/components/Conversation/styles.css.ts‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
import { theme } from '@ultraviolet/themes'
2+
import { style, styleVariants } from '@vanilla-extract/css'
3+
4+
const conversationInfosBase = style({
5+
display: 'flex',
6+
alignItems: 'center',
7+
margin: `0 ${theme.space[7]}`,
8+
})
9+
10+
export const conversationInfos = styleVariants({
11+
left: [conversationInfosBase, { justifyContent: 'flex-start' }],
12+
right: [conversationInfosBase, { justifyContent: 'flex-end' }],
13+
})
14+
15+
export const styledText = style({
16+
marginTop: theme.space[3],
17+
textAlign: 'center',
18+
})
19+
20+
const conversationContainerBase = style({
21+
display: 'flex',
22+
marginBottom: theme.space[2],
23+
})
24+
25+
export const conversationContainer = styleVariants({
26+
left: [conversationContainerBase, { flexDirection: 'row-reverse' }],
27+
right: [conversationContainerBase, { flexDirection: 'row' }],
28+
})
29+
30+
const conversationRawMessageBase = style({
31+
margin: theme.space[3],
32+
marginBottom: 0,
33+
borderRadius: theme.radii.default,
34+
padding: theme.space[3],
35+
})
36+
export const conversationRawMessage = styleVariants({
37+
left: [
38+
conversationRawMessageBase,
39+
{ backgroundColor: theme.colors.neutral.backgroundStrong },
40+
],
41+
right: [
42+
conversationRawMessageBase,
43+
{ backgroundColor: theme.colors.primary.background },
44+
],
45+
})
46+
47+
export const conversationAvatar = style({
48+
display: 'flex',
49+
alignSelf: 'flex-end',
50+
})
51+
52+
export const conversationBubble = style({ width: '100%' })
53+
54+
export const conversationTag = style({
55+
backgroundColor: theme.colors.neutral.backgroundStrong,
56+
height: theme.sizing[200],
57+
marginRight: theme.space[1],
58+
})

0 commit comments

Comments
 (0)