Skip to content

Commit 73267c3

Browse files
lisalupilisalupi
committed
refactor: toaster and notification vanilla extract (#5662)
1 parent 6faf1e3 commit 73267c3

File tree

7 files changed

+137
-248
lines changed

7 files changed

+137
-248
lines changed

‎.changeset/tiny-monkeys-invite.md‎

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

‎packages/ui/src/components/Notification/__tests__/__snapshots__/index.test.tsx.snap‎

Lines changed: 6 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -12,28 +12,7 @@ exports[`toaster > renders correctly with close button 1`] = `
1212

1313
exports[`toaster > renders correctly with close button 2`] = `
1414
<DocumentFragment>
15-
.emotion-0 {
16-
border-radius: 0.25rem;
17-
}
18-
19-
.emotion-0.Toastify__toast {
20-
background-color: #ffffff;
21-
color: #3f4250;
22-
padding: 1rem;
23-
box-shadow: 0px 4px 8px 0px #22263829,0px 8px 24px 0px #2226383d;
24-
}
25-
26-
.emotion-0.Toastify__toast-container {
27-
width: 19.5rem;
28-
}
29-
30-
.emotion-0 .Toastify__toast-body {
31-
margin: 0;
32-
padding: 0;
33-
display: none;
34-
}
35-
36-
<div
15+
<div
3716
data-testid="testing"
3817
>
3918
<section
@@ -45,11 +24,11 @@ exports[`toaster > renders correctly with close button 2`] = `
4524
id="notification"
4625
>
4726
<div
48-
class="Toastify__toast-container Toastify__toast-container--top-right"
27+
class="Toastify__toast-container Toastify__toast-container--top-right styles__1h24h1e0"
4928
tabindex="-1"
5029
>
5130
<div
52-
class="Toastify__toast Toastify__toast-theme--light Toastify__toast--default emotion-0 Toastify--animate Toastify__slide-enter--top-right"
31+
class="Toastify__toast Toastify__toast-theme--light Toastify__toast--default Toastify--animate Toastify__slide-enter--top-right"
5332
data-in="true"
5433
id="1"
5534
role="alert"
@@ -120,28 +99,7 @@ exports[`toaster > renders correctly with custom close button 1`] = `
12099

121100
exports[`toaster > renders correctly with custom close button 2`] = `
122101
<DocumentFragment>
123-
.emotion-0 {
124-
border-radius: 0.25rem;
125-
}
126-
127-
.emotion-0.Toastify__toast {
128-
background-color: #ffffff;
129-
color: #3f4250;
130-
padding: 1rem;
131-
box-shadow: 0px 4px 8px 0px #22263829,0px 8px 24px 0px #2226383d;
132-
}
133-
134-
.emotion-0.Toastify__toast-container {
135-
width: 19.5rem;
136-
}
137-
138-
.emotion-0 .Toastify__toast-body {
139-
margin: 0;
140-
padding: 0;
141-
display: none;
142-
}
143-
144-
<div
102+
<div
145103
data-testid="testing"
146104
>
147105
<section
@@ -153,11 +111,11 @@ exports[`toaster > renders correctly with custom close button 2`] = `
153111
id="notification"
154112
>
155113
<div
156-
class="Toastify__toast-container Toastify__toast-container--top-right"
114+
class="Toastify__toast-container Toastify__toast-container--top-right styles__1h24h1e0"
157115
tabindex="-1"
158116
>
159117
<div
160-
class="Toastify__toast Toastify__toast-theme--light Toastify__toast--default emotion-0 Toastify--animate Toastify__slide-enter--top-right"
118+
class="Toastify__toast Toastify__toast-theme--light Toastify__toast--default Toastify--animate Toastify__slide-enter--top-right"
161119
data-in="true"
162120
id="2"
163121
role="alert"

‎packages/ui/src/components/Notification/index.tsx‎

Lines changed: 16 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
'use client'
22

3-
import type { Theme } from '@emotion/react'
4-
import { ClassNames, css, Global, useTheme } from '@emotion/react'
53
import { CloseIcon } from '@ultraviolet/icons'
64
import type { ReactNode } from 'react'
75
import type {
@@ -17,12 +15,7 @@ import {
1715
import { Button } from '../Button'
1816
import { Stack } from '../Stack'
1917
import { Text } from '../Text'
20-
21-
const PREFIX = '.Toastify'
22-
23-
type StylesProps = {
24-
theme: Theme
25-
}
18+
import { notification as notificationStyle } from './styles.css'
2619

2720
type CloseButtonProps = {
2821
closeToast: (event: React.MouseEvent<HTMLElement>) => void
@@ -31,36 +24,6 @@ type CloseButtonProps = {
3124
theme: ThemeToastify
3225
}
3326

34-
const toaster = css`
35-
${PREFIX} {
36-
z-index: 1;
37-
position: fixed;
38-
}
39-
`
40-
41-
const styles = {
42-
toast: ({ theme }: StylesProps) => css`
43-
border-radius: ${theme.radii.default};
44-
45-
&${PREFIX}__toast {
46-
background-color: ${theme.colors.other.elevation.background.raised};
47-
color: ${theme.colors.neutral.text};
48-
padding: ${theme.space['2']};
49-
box-shadow: ${theme.shadows.raised[0]}, ${theme.shadows.raised[1]};
50-
}
51-
52-
&${PREFIX}__toast-container {
53-
width: 19.5rem;
54-
}
55-
56-
${PREFIX}__toast-body {
57-
margin: 0;
58-
padding: 0;
59-
display: none;
60-
}
61-
`,
62-
}
63-
6427
const closeButton = (props: CloseButtonProps) => (
6528
<Button
6629
aria-label="close"
@@ -132,31 +95,18 @@ export const NotificationContainer = ({
13295
'data-testid': dataTestId,
13396
className,
13497
containerId = 'notification',
135-
}: NotificationContainerProps) => {
136-
const theme = useTheme()
137-
138-
return (
139-
<ClassNames>
140-
{/* eslint-disable-next-line @typescript-eslint/unbound-method */}
141-
{({ css: localCss }) => (
142-
<>
143-
<Global styles={[toaster]} />
144-
<BaseToastContainer
145-
autoClose={autoClose}
146-
className={className}
147-
containerId={containerId}
148-
data-testid={dataTestId}
149-
draggable={false}
150-
hideProgressBar
151-
icon={false}
152-
limit={limit}
153-
newestOnTop={newestOnTop}
154-
position={position}
155-
toastClassName={localCss(styles.toast({ theme }))}
156-
transition={Slide}
157-
/>
158-
</>
159-
)}
160-
</ClassNames>
161-
)
162-
}
98+
}: NotificationContainerProps) => (
99+
<BaseToastContainer
100+
autoClose={autoClose}
101+
className={`${className ? `${className} ` : ''}${notificationStyle}`}
102+
containerId={containerId}
103+
data-testid={dataTestId}
104+
draggable={false}
105+
hideProgressBar
106+
icon={false}
107+
limit={limit}
108+
newestOnTop={newestOnTop}
109+
position={position}
110+
transition={Slide}
111+
/>
112+
)

‎packages/ui/src/components/Notification/styles.css.ts‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import { theme } from '@ultraviolet/themes'
2+
import { globalStyle, style } from '@vanilla-extract/css'
3+
4+
const PREFIX = '.Toastify'
5+
6+
export const notification = style({
7+
borderRadius: theme.radii.default,
8+
})
9+
10+
globalStyle(`${PREFIX}`, {
11+
backgroundColor: theme.colors.other.elevation.background.raised,
12+
zIndex: 1,
13+
position: 'fixed',
14+
})
15+
16+
globalStyle(`${notification} ${PREFIX}__toast`, {
17+
backgroundColor: theme.colors.other.elevation.background.raised,
18+
color: theme.colors.neutral.text,
19+
padding: theme.space[2],
20+
boxShadow: `${theme.shadows.raised[0]}, ${theme.shadows.raised[1]}`,
21+
})
22+
23+
globalStyle(`${notification} ${PREFIX}__toast-container`, {
24+
width: '19.5rem',
25+
})
26+
27+
globalStyle(`${notification} ${PREFIX}__toast-body`, {
28+
margin: 0,
29+
padding: 0,
30+
display: 'none',
31+
})

‎packages/ui/src/components/Toaster/__tests__/__snapshots__/index.test.tsx.snap‎

Lines changed: 8 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -76,52 +76,7 @@ exports[`toaster > renders correctly with all kind of toast 3`] = `
7676

7777
exports[`toaster > renders correctly with all kind of toast 4`] = `
7878
<DocumentFragment>
79-
.emotion-0 {
80-
border-radius: 0.25rem;
81-
min-height: 3.5rem;
82-
}
83-
84-
.emotion-0 .Toastify__toast-container {
85-
width: 21.5rem;
86-
}
87-
88-
.emotion-0 .Toastify__toast-body {
89-
margin: 0;
90-
padding: 0;
91-
}
92-
93-
.emotion-0.Toastify__toast--success {
94-
background-color: #151a2d;
95-
color: #ffffff;
96-
padding: 1rem;
97-
}
98-
99-
.emotion-0.Toastify__toast--error {
100-
background-color: #e51963;
101-
color: #ffffff;
102-
padding: 1rem;
103-
}
104-
105-
.emotion-0.Toastify__toast--warning {
106-
background-color: #fbc600;
107-
color: #222638;
108-
padding: 1rem;
109-
}
110-
111-
.emotion-1 {
112-
background: none;
113-
margin: auto;
114-
margin-left: 0.5rem;
115-
}
116-
117-
.emotion-1:hover,
118-
.emotion-1:active {
119-
background: none;
120-
box-shadow: none;
121-
border: none;
122-
}
123-
124-
<div
79+
<div
12580
data-testid="testing"
12681
>
12782
<section
@@ -133,12 +88,12 @@ exports[`toaster > renders correctly with all kind of toast 4`] = `
13388
id="toaster"
13489
>
13590
<div
136-
class="Toastify__toast-container Toastify__toast-container--top-right"
91+
class="Toastify__toast-container Toastify__toast-container--top-right styles__11f0u3o0"
13792
data-stacked="true"
13893
tabindex="-1"
13994
>
14095
<div
141-
class="Toastify__toast Toastify__toast-theme--light Toastify__toast--success emotion-0 Toastify--animate Toastify__slide-enter--top-right Toastify__toast--stacked"
96+
class="Toastify__toast Toastify__toast-theme--light Toastify__toast--success Toastify--animate Toastify__slide-enter--top-right Toastify__toast--stacked"
14297
data-collapsed="true"
14398
data-in="true"
14499
data-pos="top"
@@ -159,7 +114,7 @@ exports[`toaster > renders correctly with all kind of toast 4`] = `
159114
</div>
160115
<button
161116
aria-label="close"
162-
class="emotion-1 emotion-2 styles__e1wcoe0 styles_size_xsmall__e1wcoe4 styles_fullWidth_false__e1wcoe6 styles_disabled_false__e1wcoek styles_variant_filled__e1wcoeg styles_sentiment_success__e1wcoeb styles_undefined_compound_4__e1wcoep"
117+
class="styles__11f0u3o1 styles__e1wcoe0 styles_size_xsmall__e1wcoe4 styles_fullWidth_false__e1wcoe6 styles_disabled_false__e1wcoek styles_variant_filled__e1wcoeg styles_sentiment_success__e1wcoeb styles_undefined_compound_4__e1wcoep"
163118
type="button"
164119
>
165120
<svg
@@ -188,7 +143,7 @@ exports[`toaster > renders correctly with all kind of toast 4`] = `
188143
</div>
189144
</div>
190145
<div
191-
class="Toastify__toast Toastify__toast-theme--light Toastify__toast--error emotion-0 Toastify--animate Toastify__slide-enter--top-right Toastify__toast--stacked"
146+
class="Toastify__toast Toastify__toast-theme--light Toastify__toast--error Toastify--animate Toastify__slide-enter--top-right Toastify__toast--stacked"
192147
data-collapsed="true"
193148
data-in="true"
194149
data-pos="top"
@@ -209,7 +164,7 @@ exports[`toaster > renders correctly with all kind of toast 4`] = `
209164
</div>
210165
<button
211166
aria-label="close"
212-
class="emotion-1 emotion-2 styles__e1wcoe0 styles_size_xsmall__e1wcoe4 styles_fullWidth_false__e1wcoe6 styles_disabled_false__e1wcoek styles_variant_filled__e1wcoeg styles_sentiment_danger__e1wcoe9 styles_undefined_compound_2__e1wcoen"
167+
class="styles__11f0u3o1 styles__e1wcoe0 styles_size_xsmall__e1wcoe4 styles_fullWidth_false__e1wcoe6 styles_disabled_false__e1wcoek styles_variant_filled__e1wcoeg styles_sentiment_danger__e1wcoe9 styles_undefined_compound_2__e1wcoen"
213168
type="button"
214169
>
215170
<svg
@@ -238,7 +193,7 @@ exports[`toaster > renders correctly with all kind of toast 4`] = `
238193
</div>
239194
</div>
240195
<div
241-
class="Toastify__toast Toastify__toast-theme--light Toastify__toast--warning emotion-0 Toastify--animate Toastify__slide-enter--top-right Toastify__toast--stacked"
196+
class="Toastify__toast Toastify__toast-theme--light Toastify__toast--warning Toastify--animate Toastify__slide-enter--top-right Toastify__toast--stacked"
242197
data-in="true"
243198
data-pos="top"
244199
id="warning"
@@ -258,7 +213,7 @@ exports[`toaster > renders correctly with all kind of toast 4`] = `
258213
</div>
259214
<button
260215
aria-label="close"
261-
class="emotion-1 emotion-2 styles__e1wcoe0 styles_size_xsmall__e1wcoe4 styles_fullWidth_false__e1wcoe6 styles_disabled_false__e1wcoek styles_variant_filled__e1wcoeg styles_sentiment_warning__e1wcoec styles_undefined_compound_5__e1wcoeq"
216+
class="styles__11f0u3o1 styles__e1wcoe0 styles_size_xsmall__e1wcoe4 styles_fullWidth_false__e1wcoe6 styles_disabled_false__e1wcoek styles_variant_filled__e1wcoeg styles_sentiment_warning__e1wcoec styles_undefined_compound_5__e1wcoeq"
262217
type="button"
263218
>
264219
<svg

0 commit comments

Comments
 (0)