Skip to content

Commit b616ab2

Browse files
author
ci-bot
committed
use bootstrap 5
1 parent 432614d commit b616ab2

File tree

2 files changed

+142
-56
lines changed

2 files changed

+142
-56
lines changed

‎libs/remix-ui/toaster/src/lib/toaster.css‎

Lines changed: 69 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,11 @@
11
/* Sonner toast styling */
22
.remixui_sonner_toast {
33
border-radius: 8px;
4-
padding: 20px 48px 20px 28px;
4+
padding: 5px 5px 5px 5px;
55
font-weight: 700 !important;
66
font-size: 19px !important;
77
min-width: 350px;
88
max-width: 600px;
9-
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
109
word-wrap: break-word;
1110
overflow-wrap: break-word;
1211
white-space: normal;
@@ -24,10 +23,30 @@
2423
z-index: 1001 !important;
2524
display: flex;
2625
flex-direction: column;
26+
transform: none !important;
27+
--normal-bg: transparent !important;
28+
--normal-border: transparent !important;
29+
}
30+
31+
[data-sonner-toaster]:hover {
32+
transform: none !important;
33+
}
34+
35+
[data-sonner-toaster]:hover [data-sonner-toast] {
36+
transform: none !important;
37+
scale: 1 !important;
38+
opacity: 1 !important;
39+
}
40+
41+
[data-sonner-toaster][data-y-position="top"] {
42+
top: 0;
43+
}
44+
45+
[data-sonner-toaster][data-x-position="right"] {
46+
right: 0;
2747
}
2848

2949
[data-sonner-toast] {
30-
background: var(--bs-light, #f8f9fa) !important;
3150
color: var(--bs-dark, #212529) !important;
3251
border: 0px solid var(--bs-dark, #6c757d) !important;
3352
font-weight: 700 !important;
@@ -37,20 +56,56 @@
3756
opacity: 1 !important;
3857
visibility: visible !important;
3958
pointer-events: auto !important;
40-
position: relative;
59+
position: relative !important;
4160
width: 100%;
42-
margin-bottom: 12px;
4361
transform: none !important;
62+
transition: none !important;
63+
animation: none !important;
4464
}
4565

4666
[data-sonner-toast]:hover {
4767
transform: none !important;
68+
scale: 1 !important;
69+
transition: none !important;
70+
}
71+
72+
[data-sonner-toast][data-expanded="true"] {
73+
transform: none !important;
74+
scale: 1 !important;
75+
transition: none !important;
76+
}
77+
78+
[data-sonner-toast][data-expanded="false"] {
79+
transform: none !important;
80+
scale: 1 !important;
81+
transition: none !important;
82+
}
83+
84+
[data-sonner-toast][data-front="true"] {
85+
transform: none !important;
86+
scale: 1 !important;
87+
transition: none !important;
88+
}
89+
90+
[data-sonner-toast][data-front="false"] {
91+
transform: none !important;
92+
scale: 1 !important;
93+
opacity: 1 !important;
94+
transition: none !important;
95+
}
96+
97+
[data-sonner-toast][data-index]:not([data-index="0"]) {
98+
transform: none !important;
99+
scale: 1 !important;
100+
opacity: 1 !important;
101+
transition: none !important;
48102
}
49103

50104
[data-sonner-toast][data-styled="true"] {
51105
padding: 20px 28px !important;
52106
gap: 12px !important;
53107
font-weight: 700 !important;
108+
transform: none !important;
54109
}
55110

56111
/* Dark theme support */
@@ -60,6 +115,7 @@
60115
color: var(--bs-light, #f8f9fa) !important;
61116
border: 0px solid var(--bs-secondary, #6c757d) !important;
62117
font-weight: 700 !important;
118+
transform: none !important;
63119
}
64120

65121
/* Close button styling */
@@ -140,3 +196,11 @@
140196
.dark [data-sonner-toast] .codicon-close:hover {
141197
background: rgba(255, 255, 255, 0.1) !important;
142198
}
199+
200+
[data-sonner-toast][data-expanded=false][data-front=false] {
201+
height: auto !important;
202+
}
203+
204+
[data-sonner-toast][data-mounted=true][data-expanded=true] {
205+
height: auto !important;
206+
}

‎libs/remix-ui/toaster/src/lib/toaster.tsx‎

Lines changed: 73 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -37,24 +37,28 @@ export const ToastTrigger = (props: ToasterProps) => {
3737
if (typeof props.message === 'string') {
3838
const toastId = toast.custom(
3939
() => (
40-
<div>
41-
{showLoadingIcon && (
42-
<span className="spinner-border spinner-border-sm me-2 alert-info" role="status">
43-
<span className="visually-hidden">Loading...</span>
44-
</span>
45-
)}
46-
{showCloseButton && (
47-
<span className="codicon codicon-close" onClick={() => toast.dismiss(toastId)} role="status">
48-
</span>
49-
)}
50-
{props.message}
40+
<div className="toast show" role="alert" aria-live="assertive" aria-atomic="true">
41+
<div className="toast-header">
42+
{showLoadingIcon && (
43+
<span className="spinner-border spinner-border-sm me-2" role="status">
44+
<span className="visually-hidden">Loading...</span>
45+
</span>
46+
)}
47+
<strong className="me-auto">Remix</strong>
48+
{showCloseButton && (
49+
<button type="button" className="btn-close" onClick={() => toast.dismiss(toastId)} aria-label="Close"></button>
50+
)}
51+
</div>
52+
<div className="toast-body">
53+
{props.message}
54+
</div>
5155
</div>
5256
),
5357
{
5458
id: props.id,
5559
unstyled: true,
5660
duration,
57-
closeButton: showCloseButton,
61+
closeButton: false,
5862
onDismiss: () => {
5963
props.handleHide && props.handleHide()
6064
},
@@ -71,23 +75,27 @@ export const ToastTrigger = (props: ToasterProps) => {
7175
// For JSX elements, use toast.custom
7276
const toastId = toast.custom(
7377
() => (
74-
<div>
75-
{showLoadingIcon && (
76-
<span className="spinner-border spinner-border-sm me-2 alert-info" role="status">
77-
<span className="visually-hidden">Loading...</span>
78-
</span>
79-
)}
80-
{showCloseButton && (
81-
<span className="codicon codicon-close" onClick={() => toast.dismiss(toastId)} role="status">
82-
</span>
83-
)}
84-
{props.message}
78+
<div className="toast show" role="alert" aria-live="assertive" aria-atomic="true">
79+
<div className="toast-header">
80+
{showLoadingIcon && (
81+
<span className="spinner-border spinner-border-sm me-2" role="status">
82+
<span className="visually-hidden">Loading...</span>
83+
</span>
84+
)}
85+
<strong className="me-auto">Remix</strong>
86+
{showCloseButton && (
87+
<button type="button" className="btn-close" onClick={() => toast.dismiss(toastId)} aria-label="Close"></button>
88+
)}
89+
</div>
90+
<div className="toast-body">
91+
{props.message}
92+
</div>
8593
</div>
8694
),
8795
{
8896
id: props.id,
8997
duration,
90-
closeButton: showCloseButton,
98+
closeButton: false,
9199
onDismiss: () => {
92100
props.handleHide && props.handleHide()
93101
},
@@ -113,10 +121,16 @@ export const ToasterContainer = (props: ToasterContainerProps) => {
113121
<>
114122
<SonnerToaster
115123
position="top-right"
116-
gap={12}
124+
gap={0}
125+
expand={false}
126+
visibleToasts={9}
117127
toastOptions={{
118-
className: 'remixui_sonner_toast alert alert-info bg-light',
119-
unstyled: true
128+
className: 'remixui_sonner_toast',
129+
unstyled: true,
130+
style: {
131+
transform: 'none',
132+
transition: 'none'
133+
}
120134
}}
121135
/>
122136
{props.toasts.map((toastProps) => (
@@ -144,24 +158,28 @@ export const Toaster = (props: ToasterProps) => {
144158

145159
toastId = toast.custom(
146160
() => (
147-
<div className="remixui_sonner_toast alert alert-info bg-light">
148-
{showLoadingIcon && (
149-
<span className="spinner-border spinner-border-sm me-2 alert-info" role="status">
150-
<span className="visually-hidden">Loading...</span>
151-
</span>
152-
)}
153-
{showCloseButton && (
154-
<span className="codicon codicon-close" onClick={() => toast.dismiss(toastId)} role="status">
155-
</span>
156-
)}
157-
{props.message}
161+
<div className="toast show" role="alert" aria-live="assertive" aria-atomic="true">
162+
<div className="toast-header">
163+
{showLoadingIcon && (
164+
<span className="spinner-border spinner-border-sm me-2" role="status">
165+
<span className="visually-hidden">Loading...</span>
166+
</span>
167+
)}
168+
<strong className="me-auto">Remix</strong>
169+
{showCloseButton && (
170+
<button type="button" className="btn-close" onClick={() => toast.dismiss(toastId)} aria-label="Close"></button>
171+
)}
172+
</div>
173+
<div className="toast-body">
174+
{props.message}
175+
</div>
158176
</div>
159177
),
160178
{
161179
id: props.id,
162180
unstyled: true,
163181
duration,
164-
closeButton: showCloseButton,
182+
closeButton: false,
165183
onDismiss: () => {
166184
props.handleHide && props.handleHide()
167185
},
@@ -174,23 +192,27 @@ export const Toaster = (props: ToasterProps) => {
174192
// For JSX elements, use toast.custom
175193
toastId = toast.custom(
176194
() => (
177-
<div className="remixui_sonner_toast alert alert-info bg-light">
178-
{showLoadingIcon && (
179-
<span className="spinner-border spinner-border-sm me-2 alert-info" role="status">
180-
<span className="visually-hidden">Loading...</span>
181-
</span>
182-
)}
183-
{showCloseButton && (
184-
<span className="codicon codicon-close" onClick={() => toast.dismiss(toastId)} role="status">
185-
</span>
186-
)}
187-
{props.message}
195+
<div className="toast show" role="alert" aria-live="assertive" aria-atomic="true">
196+
<div className="toast-header">
197+
{showLoadingIcon && (
198+
<span className="spinner-border spinner-border-sm me-2" role="status">
199+
<span className="visually-hidden">Loading...</span>
200+
</span>
201+
)}
202+
<strong className="me-auto">Remix</strong>
203+
{showCloseButton && (
204+
<button type="button" className="btn-close" onClick={() => toast.dismiss(toastId)} aria-label="Close"></button>
205+
)}
206+
</div>
207+
<div className="toast-body">
208+
{props.message}
209+
</div>
188210
</div>
189211
),
190212
{
191213
id: props.id,
192214
duration,
193-
closeButton: showCloseButton,
215+
closeButton: false,
194216
onDismiss: () => {
195217
props.handleHide && props.handleHide()
196218
},

0 commit comments

Comments
 (0)