Skip to content

refactor: toaster and notification vanilla extract #5662

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Oct 14, 2025
Merged

refactor: toaster and notification vanilla extract #5662

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/tiny-monkeys-invite.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@ultraviolet/ui": minor
---

Refactor components `Toaster` and `Notification` to use vanilla extract instead of Emotion
54 changes: 6 additions & 48 deletions packages/ui/src/components/Notification/__tests__/__snapshots__/index.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,28 +12,7 @@ exports[`toaster > renders correctly with close button 1`] = `

exports[`toaster > renders correctly with close button 2`] = `
<DocumentFragment>
.emotion-0 {
border-radius: 0.25rem;
}

.emotion-0.Toastify__toast {
background-color: #ffffff;
color: #3f4250;
padding: 1rem;
box-shadow: 0px 4px 8px 0px #22263829,0px 8px 24px 0px #2226383d;
}

.emotion-0.Toastify__toast-container {
width: 19.5rem;
}

.emotion-0 .Toastify__toast-body {
margin: 0;
padding: 0;
display: none;
}

<div
<div
data-testid="testing"
>
<section
Expand All @@ -45,11 +24,11 @@ exports[`toaster > renders correctly with close button 2`] = `
id="notification"
>
<div
class="Toastify__toast-container Toastify__toast-container--top-right"
class="Toastify__toast-container Toastify__toast-container--top-right styles__1h24h1e0"
tabindex="-1"
>
<div
class="Toastify__toast Toastify__toast-theme--light Toastify__toast--default emotion-0 Toastify--animate Toastify__slide-enter--top-right"
class="Toastify__toast Toastify__toast-theme--light Toastify__toast--default Toastify--animate Toastify__slide-enter--top-right"
data-in="true"
id="1"
role="alert"
Expand Down Expand Up @@ -120,28 +99,7 @@ exports[`toaster > renders correctly with custom close button 1`] = `

exports[`toaster > renders correctly with custom close button 2`] = `
<DocumentFragment>
.emotion-0 {
border-radius: 0.25rem;
}

.emotion-0.Toastify__toast {
background-color: #ffffff;
color: #3f4250;
padding: 1rem;
box-shadow: 0px 4px 8px 0px #22263829,0px 8px 24px 0px #2226383d;
}

.emotion-0.Toastify__toast-container {
width: 19.5rem;
}

.emotion-0 .Toastify__toast-body {
margin: 0;
padding: 0;
display: none;
}

<div
<div
data-testid="testing"
>
<section
Expand All @@ -153,11 +111,11 @@ exports[`toaster > renders correctly with custom close button 2`] = `
id="notification"
>
<div
class="Toastify__toast-container Toastify__toast-container--top-right"
class="Toastify__toast-container Toastify__toast-container--top-right styles__1h24h1e0"
tabindex="-1"
>
<div
class="Toastify__toast Toastify__toast-theme--light Toastify__toast--default emotion-0 Toastify--animate Toastify__slide-enter--top-right"
class="Toastify__toast Toastify__toast-theme--light Toastify__toast--default Toastify--animate Toastify__slide-enter--top-right"
data-in="true"
id="2"
role="alert"
Expand Down
82 changes: 16 additions & 66 deletions packages/ui/src/components/Notification/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,5 @@
'use client'

import type { Theme } from '@emotion/react'
import { ClassNames, css, Global, useTheme } from '@emotion/react'
import { CloseIcon } from '@ultraviolet/icons'
import type { ReactNode } from 'react'
import type {
Expand All @@ -17,12 +15,7 @@ import {
import { Button } from '../Button'
import { Stack } from '../Stack'
import { Text } from '../Text'

const PREFIX = '.Toastify'

type StylesProps = {
theme: Theme
}
import { notification as notificationStyle } from './styles.css'

type CloseButtonProps = {
closeToast: (event: React.MouseEvent<HTMLElement>) => void
Expand All @@ -31,36 +24,6 @@ type CloseButtonProps = {
theme: ThemeToastify
}

const toaster = css`
${PREFIX} {
z-index: 1;
position: fixed;
}
`

const styles = {
toast: ({ theme }: StylesProps) => css`
border-radius: ${theme.radii.default};

&${PREFIX}__toast {
background-color: ${theme.colors.other.elevation.background.raised};
color: ${theme.colors.neutral.text};
padding: ${theme.space['2']};
box-shadow: ${theme.shadows.raised[0]}, ${theme.shadows.raised[1]};
}

&${PREFIX}__toast-container {
width: 19.5rem;
}

${PREFIX}__toast-body {
margin: 0;
padding: 0;
display: none;
}
`,
}

const closeButton = (props: CloseButtonProps) => (
<Button
aria-label="close"
Expand Down Expand Up @@ -132,31 +95,18 @@ export const NotificationContainer = ({
'data-testid': dataTestId,
className,
containerId = 'notification',
}: NotificationContainerProps) => {
const theme = useTheme()

return (
<ClassNames>
{/* eslint-disable-next-line @typescript-eslint/unbound-method */}
{({ css: localCss }) => (
<>
<Global styles={[toaster]} />
<BaseToastContainer
autoClose={autoClose}
className={className}
containerId={containerId}
data-testid={dataTestId}
draggable={false}
hideProgressBar
icon={false}
limit={limit}
newestOnTop={newestOnTop}
position={position}
toastClassName={localCss(styles.toast({ theme }))}
transition={Slide}
/>
</>
)}
</ClassNames>
)
}
}: NotificationContainerProps) => (
<BaseToastContainer
autoClose={autoClose}
className={`${className ? `${className} ` : ''}${notificationStyle}`}
containerId={containerId}
data-testid={dataTestId}
draggable={false}
hideProgressBar
icon={false}
limit={limit}
newestOnTop={newestOnTop}
position={position}
transition={Slide}
/>
)
31 changes: 31 additions & 0 deletions packages/ui/src/components/Notification/styles.css.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
import { theme } from '@ultraviolet/themes'
import { globalStyle, style } from '@vanilla-extract/css'

const PREFIX = '.Toastify'

export const notification = style({
borderRadius: theme.radii.default,
})

globalStyle(`${PREFIX}`, {
backgroundColor: theme.colors.other.elevation.background.raised,
zIndex: 1,
position: 'fixed',
})

globalStyle(`${notification} ${PREFIX}__toast`, {
backgroundColor: theme.colors.other.elevation.background.raised,
color: theme.colors.neutral.text,
padding: theme.space[2],
boxShadow: `${theme.shadows.raised[0]}, ${theme.shadows.raised[1]}`,
})

globalStyle(`${notification} ${PREFIX}__toast-container`, {
width: '19.5rem',
})

globalStyle(`${notification} ${PREFIX}__toast-body`, {
margin: 0,
padding: 0,
display: 'none',
})
61 changes: 8 additions & 53 deletions packages/ui/src/components/Toaster/__tests__/__snapshots__/index.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,52 +76,7 @@ exports[`toaster > renders correctly with all kind of toast 3`] = `

exports[`toaster > renders correctly with all kind of toast 4`] = `
<DocumentFragment>
.emotion-0 {
border-radius: 0.25rem;
min-height: 3.5rem;
}

.emotion-0 .Toastify__toast-container {
width: 21.5rem;
}

.emotion-0 .Toastify__toast-body {
margin: 0;
padding: 0;
}

.emotion-0.Toastify__toast--success {
background-color: #151a2d;
color: #ffffff;
padding: 1rem;
}

.emotion-0.Toastify__toast--error {
background-color: #e51963;
color: #ffffff;
padding: 1rem;
}

.emotion-0.Toastify__toast--warning {
background-color: #fbc600;
color: #222638;
padding: 1rem;
}

.emotion-1 {
background: none;
margin: auto;
margin-left: 0.5rem;
}

.emotion-1:hover,
.emotion-1:active {
background: none;
box-shadow: none;
border: none;
}

<div
<div
data-testid="testing"
>
<section
Expand All @@ -133,12 +88,12 @@ exports[`toaster > renders correctly with all kind of toast 4`] = `
id="toaster"
>
<div
class="Toastify__toast-container Toastify__toast-container--top-right"
class="Toastify__toast-container Toastify__toast-container--top-right styles__11f0u3o0"
data-stacked="true"
tabindex="-1"
>
<div
class="Toastify__toast Toastify__toast-theme--light Toastify__toast--success emotion-0 Toastify--animate Toastify__slide-enter--top-right Toastify__toast--stacked"
class="Toastify__toast Toastify__toast-theme--light Toastify__toast--success Toastify--animate Toastify__slide-enter--top-right Toastify__toast--stacked"
data-collapsed="true"
data-in="true"
data-pos="top"
Expand All @@ -159,7 +114,7 @@ exports[`toaster > renders correctly with all kind of toast 4`] = `
</div>
<button
aria-label="close"
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"
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"
type="button"
>
<svg
Expand Down Expand Up @@ -188,7 +143,7 @@ exports[`toaster > renders correctly with all kind of toast 4`] = `
</div>
</div>
<div
class="Toastify__toast Toastify__toast-theme--light Toastify__toast--error emotion-0 Toastify--animate Toastify__slide-enter--top-right Toastify__toast--stacked"
class="Toastify__toast Toastify__toast-theme--light Toastify__toast--error Toastify--animate Toastify__slide-enter--top-right Toastify__toast--stacked"
data-collapsed="true"
data-in="true"
data-pos="top"
Expand All @@ -209,7 +164,7 @@ exports[`toaster > renders correctly with all kind of toast 4`] = `
</div>
<button
aria-label="close"
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"
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"
type="button"
>
<svg
Expand Down Expand Up @@ -238,7 +193,7 @@ exports[`toaster > renders correctly with all kind of toast 4`] = `
</div>
</div>
<div
class="Toastify__toast Toastify__toast-theme--light Toastify__toast--warning emotion-0 Toastify--animate Toastify__slide-enter--top-right Toastify__toast--stacked"
class="Toastify__toast Toastify__toast-theme--light Toastify__toast--warning Toastify--animate Toastify__slide-enter--top-right Toastify__toast--stacked"
data-in="true"
data-pos="top"
id="warning"
Expand All @@ -258,7 +213,7 @@ exports[`toaster > renders correctly with all kind of toast 4`] = `
</div>
<button
aria-label="close"
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"
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"
type="button"
>
<svg
Expand Down
Loading
Loading