@snack-uikit/toaster 0.6.20 → 0.6.21-preview-5f7a62c6.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/ToastSystemEvent/ToastSystemEvent.js +1 -1
- package/dist/components/ToastSystemEvent/styles.module.css +21 -20
- package/dist/components/ToastUserAction/styles.module.css +5 -5
- package/dist/components/ToasterContainer/styles.module.css +7 -6
- package/dist/helperComponents/ButtonAction/styles.module.css +4 -4
- package/package.json +2 -2
- package/src/components/ToastSystemEvent/ToastSystemEvent.tsx +1 -0
- package/src/components/ToastSystemEvent/styles.module.scss +3 -0
- package/src/components/ToasterContainer/styles.module.scss +1 -0
|
@@ -29,5 +29,5 @@ export function ToastSystemEvent(_a) {
|
|
|
29
29
|
onCloseClick ? onCloseClick(e, closeToast) : closeToast === null || closeToast === void 0 ? void 0 : closeToast();
|
|
30
30
|
};
|
|
31
31
|
const icon = useMemo(() => getIcon(appearance), [appearance]);
|
|
32
|
-
return (_jsxs("div", Object.assign({ className: cn(styles.container, className) }, extractSupportProps(rest), { "data-appearance": appearance, children: [_jsxs("div", { className: styles.body, children: [_jsx("div", { className: styles.icon, children: icon }), _jsxs("div", { className: styles.contentLayout, children: [_jsxs("div", { children: [_jsx("span", { className: styles.title, children: _jsx(TruncateString, { text: title, maxLines: 2, hideTooltip: true, "data-test-id": TOAST_SYSTEM_EVENT_TEST_IDS.title }) }), description && (_jsx("span", { className: styles.description, children: _jsx(TruncateString, { maxLines: 4, text: description, hideTooltip: true, "data-test-id": TOAST_SYSTEM_EVENT_TEST_IDS.description }) }))] }), link && (_jsx(Link, { text: link.text, href: link.href, size: 'm', onClick: link.onClick, appearance: APPEARANCE_TO_ON_COLOR_MAP[appearance], "data-test-id": TOAST_SYSTEM_EVENT_TEST_IDS.link, textMode: appearance === 'errorCritical' ? 'on-accent' : 'accent' }))] }), closable && (_jsx("button", { type: 'button', className: styles.buttonClose, onClick: handleCloseClick, "data-test-id": TOAST_SYSTEM_EVENT_TEST_IDS.buttonClose, "aria-label": 'close notification', children: _jsx(CrossSVG, {}) }))] }), progressBar && (_jsx("div", { role: 'progressbar', "aria-label": 'progressbar', "data-test-id": TOAST_SYSTEM_EVENT_TEST_IDS.progressbar, className: styles.progress, style: { animationDuration: `${AUTO_CLOSE_TIME[TOASTER_TYPE.SystemEvent]}ms` } })), Array.isArray(action) && action.length > 0 && (_jsx("div", { className: styles.footer, children: action.map(buttonProps => (_jsx(ButtonAction, Object.assign({}, buttonProps, { critical: appearance === 'errorCritical' }), buttonProps.label))) }))] })));
|
|
32
|
+
return (_jsxs("div", Object.assign({ className: cn(styles.container, className) }, extractSupportProps(rest), { "data-appearance": appearance, children: [_jsxs("div", { className: styles.body, children: [_jsx("div", { className: styles.icon, children: icon }), _jsxs("div", { className: styles.contentLayout, children: [_jsxs("div", { children: [_jsx("span", { className: styles.title, children: _jsx(TruncateString, { text: title, maxLines: 2, hideTooltip: true, "data-test-id": TOAST_SYSTEM_EVENT_TEST_IDS.title }) }), description && (_jsx("span", { className: styles.description, children: _jsx(TruncateString, { maxLines: 4, text: description, hideTooltip: true, "data-test-id": TOAST_SYSTEM_EVENT_TEST_IDS.description }) }))] }), link && (_jsx(Link, { text: link.text, href: link.href, size: 'm', truncateVariant: 'end', onClick: link.onClick, appearance: APPEARANCE_TO_ON_COLOR_MAP[appearance], "data-test-id": TOAST_SYSTEM_EVENT_TEST_IDS.link, textMode: appearance === 'errorCritical' ? 'on-accent' : 'accent' }))] }), closable && (_jsx("button", { type: 'button', className: styles.buttonClose, onClick: handleCloseClick, "data-test-id": TOAST_SYSTEM_EVENT_TEST_IDS.buttonClose, "aria-label": 'close notification', children: _jsx(CrossSVG, {}) }))] }), progressBar && (_jsx("div", { role: 'progressbar', "aria-label": 'progressbar', "data-test-id": TOAST_SYSTEM_EVENT_TEST_IDS.progressbar, className: styles.progress, style: { animationDuration: `${AUTO_CLOSE_TIME[TOASTER_TYPE.SystemEvent]}ms` } })), Array.isArray(action) && action.length > 0 && (_jsx("div", { className: styles.footer, children: action.map(buttonProps => (_jsx(ButtonAction, Object.assign({}, buttonProps, { critical: appearance === 'errorCritical' }), buttonProps.label))) }))] })));
|
|
33
33
|
}
|
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
box-sizing:border-box;
|
|
15
15
|
margin:0;
|
|
16
16
|
padding:0;
|
|
17
|
-
color:var(--sys-invert-neutral-text-light, #
|
|
17
|
+
color:var(--sys-invert-neutral-text-light, #8b8e9b);
|
|
18
18
|
background-color:transparent;
|
|
19
19
|
border:none;
|
|
20
20
|
}
|
|
@@ -23,16 +23,16 @@
|
|
|
23
23
|
height:var(--size-icon-container-s, 24px) !important;
|
|
24
24
|
}
|
|
25
25
|
.buttonClose:hover{
|
|
26
|
-
color:var(--sys-invert-neutral-text-main, #
|
|
26
|
+
color:var(--sys-invert-neutral-text-main, #e6e8ef);
|
|
27
27
|
}
|
|
28
28
|
.buttonClose:focus, .buttonClose:active{
|
|
29
|
-
color:var(--sys-invert-neutral-accent-pressed, #
|
|
29
|
+
color:var(--sys-invert-neutral-accent-pressed, #aaaebd);
|
|
30
30
|
}
|
|
31
31
|
.buttonClose:focus-visible{
|
|
32
32
|
outline-width:var(--border-state-focus-s-border-width, 2px);
|
|
33
33
|
outline-style:var(--border-state-focus-s-border-style, solid);
|
|
34
34
|
outline-color:var(--border-state-focus-s-border-color, );
|
|
35
|
-
color:var(--sys-invert-neutral-text-main, #
|
|
35
|
+
color:var(--sys-invert-neutral-text-main, #e6e8ef);
|
|
36
36
|
outline-color:var(--sys-available-on-complementary, #ffffff);
|
|
37
37
|
outline-offset:var(--spacing-state-focus-offset, 2px);
|
|
38
38
|
}
|
|
@@ -42,6 +42,7 @@
|
|
|
42
42
|
display:flex;
|
|
43
43
|
flex:1;
|
|
44
44
|
flex-direction:column;
|
|
45
|
+
min-width:0;
|
|
45
46
|
word-break:break-word;
|
|
46
47
|
}
|
|
47
48
|
|
|
@@ -112,31 +113,31 @@
|
|
|
112
113
|
animation-play-state:paused;
|
|
113
114
|
}
|
|
114
115
|
.container[data-appearance=neutral]{
|
|
115
|
-
background-color:var(--sys-invert-neutral-background, #
|
|
116
|
+
background-color:var(--sys-invert-neutral-background, #282832);
|
|
116
117
|
}
|
|
117
118
|
.container[data-appearance=neutral] .icon{
|
|
118
119
|
color:var(--sys-invert-neutral-accent-default, #cfd2dc);
|
|
119
120
|
}
|
|
120
121
|
.container[data-appearance=neutral] .title{
|
|
121
|
-
color:var(--sys-invert-neutral-text-main, #
|
|
122
|
+
color:var(--sys-invert-neutral-text-main, #e6e8ef);
|
|
122
123
|
}
|
|
123
124
|
.container[data-appearance=neutral] .description{
|
|
124
|
-
color:var(--sys-invert-neutral-text-support, #
|
|
125
|
+
color:var(--sys-invert-neutral-text-support, #bec2cf);
|
|
125
126
|
}
|
|
126
127
|
.container[data-appearance=neutral] .progress{
|
|
127
|
-
background-color:var(--sys-neutral-accent-default, #
|
|
128
|
+
background-color:var(--sys-neutral-accent-default, #787b8a);
|
|
128
129
|
}
|
|
129
130
|
.container[data-appearance=error]{
|
|
130
|
-
background-color:var(--sys-invert-neutral-background, #
|
|
131
|
+
background-color:var(--sys-invert-neutral-background, #282832);
|
|
131
132
|
}
|
|
132
133
|
.container[data-appearance=error] .icon{
|
|
133
134
|
color:var(--sys-red-accent-default, #cd3c3c);
|
|
134
135
|
}
|
|
135
136
|
.container[data-appearance=error] .title{
|
|
136
|
-
color:var(--sys-invert-neutral-text-main, #
|
|
137
|
+
color:var(--sys-invert-neutral-text-main, #e6e8ef);
|
|
137
138
|
}
|
|
138
139
|
.container[data-appearance=error] .description{
|
|
139
|
-
color:var(--sys-invert-neutral-text-support, #
|
|
140
|
+
color:var(--sys-invert-neutral-text-support, #bec2cf);
|
|
140
141
|
}
|
|
141
142
|
.container[data-appearance=error] .progress{
|
|
142
143
|
background-color:var(--sys-red-accent-default, #cd3c3c);
|
|
@@ -167,31 +168,31 @@
|
|
|
167
168
|
opacity:var(--opacity-a048, 0.48);
|
|
168
169
|
}
|
|
169
170
|
.container[data-appearance=warning]{
|
|
170
|
-
background-color:var(--sys-invert-neutral-background, #
|
|
171
|
+
background-color:var(--sys-invert-neutral-background, #282832);
|
|
171
172
|
}
|
|
172
173
|
.container[data-appearance=warning] .icon{
|
|
173
|
-
color:var(--sys-yellow-accent-default, #
|
|
174
|
+
color:var(--sys-yellow-accent-default, #ffc443);
|
|
174
175
|
}
|
|
175
176
|
.container[data-appearance=warning] .title{
|
|
176
|
-
color:var(--sys-invert-neutral-text-main, #
|
|
177
|
+
color:var(--sys-invert-neutral-text-main, #e6e8ef);
|
|
177
178
|
}
|
|
178
179
|
.container[data-appearance=warning] .description{
|
|
179
|
-
color:var(--sys-invert-neutral-text-support, #
|
|
180
|
+
color:var(--sys-invert-neutral-text-support, #bec2cf);
|
|
180
181
|
}
|
|
181
182
|
.container[data-appearance=warning] .progress{
|
|
182
|
-
background-color:var(--sys-yellow-accent-default, #
|
|
183
|
+
background-color:var(--sys-yellow-accent-default, #ffc443);
|
|
183
184
|
}
|
|
184
185
|
.container[data-appearance=success]{
|
|
185
|
-
background-color:var(--sys-invert-neutral-background, #
|
|
186
|
+
background-color:var(--sys-invert-neutral-background, #282832);
|
|
186
187
|
}
|
|
187
188
|
.container[data-appearance=success] .icon{
|
|
188
189
|
color:var(--sys-green-accent-default, #57b762);
|
|
189
190
|
}
|
|
190
191
|
.container[data-appearance=success] .title{
|
|
191
|
-
color:var(--sys-invert-neutral-text-main, #
|
|
192
|
+
color:var(--sys-invert-neutral-text-main, #e6e8ef);
|
|
192
193
|
}
|
|
193
194
|
.container[data-appearance=success] .description{
|
|
194
|
-
color:var(--sys-invert-neutral-text-support, #
|
|
195
|
+
color:var(--sys-invert-neutral-text-support, #bec2cf);
|
|
195
196
|
}
|
|
196
197
|
.container[data-appearance=success] .progress{
|
|
197
198
|
background-color:var(--sys-green-accent-default, #57b762);
|
|
@@ -201,5 +202,5 @@
|
|
|
201
202
|
display:flex;
|
|
202
203
|
align-items:center;
|
|
203
204
|
justify-content:center;
|
|
204
|
-
color:var(--sys-invert-neutral-text-main, #
|
|
205
|
+
color:var(--sys-invert-neutral-text-main, #e6e8ef);
|
|
205
206
|
}
|
|
@@ -13,9 +13,9 @@
|
|
|
13
13
|
font-weight:var(--sans-label-l-font-weight, Semibold);
|
|
14
14
|
line-height:var(--sans-label-l-line-height, 20px);
|
|
15
15
|
font-size:var(--sans-label-l-font-size, 14px);
|
|
16
|
-
letter-spacing:var(--sans-label-l-letter-spacing,
|
|
16
|
+
letter-spacing:var(--sans-label-l-letter-spacing, 0px);
|
|
17
17
|
paragraph-spacing:var(--sans-label-l-paragraph-spacing, 7.7px);
|
|
18
|
-
color:var(--sys-invert-neutral-text-main, #
|
|
18
|
+
color:var(--sys-invert-neutral-text-main, #e6e8ef);
|
|
19
19
|
}
|
|
20
20
|
|
|
21
21
|
.container{
|
|
@@ -27,13 +27,13 @@
|
|
|
27
27
|
align-items:center;
|
|
28
28
|
justify-content:center;
|
|
29
29
|
box-sizing:border-box;
|
|
30
|
-
background-color:var(--sys-invert-neutral-background, #
|
|
30
|
+
background-color:var(--sys-invert-neutral-background, #282832);
|
|
31
31
|
}
|
|
32
32
|
.container[data-appearance=error] .icon{
|
|
33
33
|
color:var(--sys-red-accent-default, #cd3c3c);
|
|
34
34
|
}
|
|
35
35
|
.container[data-appearance=warning] .icon{
|
|
36
|
-
color:var(--sys-yellow-accent-default, #
|
|
36
|
+
color:var(--sys-yellow-accent-default, #ffc443);
|
|
37
37
|
}
|
|
38
38
|
.container[data-appearance=success] .icon{
|
|
39
39
|
color:var(--sys-green-accent-default, #57b762);
|
|
@@ -43,7 +43,7 @@
|
|
|
43
43
|
display:flex;
|
|
44
44
|
align-items:center;
|
|
45
45
|
justify-content:center;
|
|
46
|
-
color:var(--sys-invert-neutral-text-main, #
|
|
46
|
+
color:var(--sys-invert-neutral-text-main, #e6e8ef);
|
|
47
47
|
}
|
|
48
48
|
|
|
49
49
|
.contentLayout{
|
|
@@ -18,24 +18,24 @@
|
|
|
18
18
|
cursor:pointer;
|
|
19
19
|
box-sizing:border-box;
|
|
20
20
|
width:100%;
|
|
21
|
-
color:var(--sys-invert-neutral-text-main, #
|
|
22
|
-
background-color:var(--sys-invert-neutral-background, #
|
|
21
|
+
color:var(--sys-invert-neutral-text-main, #e6e8ef);
|
|
22
|
+
background-color:var(--sys-invert-neutral-background, #282832);
|
|
23
23
|
border:none;
|
|
24
24
|
outline:none;
|
|
25
25
|
}
|
|
26
26
|
.buttonCloseColumn:hover{
|
|
27
|
-
background-color:var(--sys-invert-neutral-decor-hovered, #
|
|
27
|
+
background-color:var(--sys-invert-neutral-decor-hovered, #656774);
|
|
28
28
|
}
|
|
29
29
|
.buttonCloseColumn:focus-visible{
|
|
30
30
|
outline-width:var(--border-state-focus-s-border-width, 2px);
|
|
31
31
|
outline-style:var(--border-state-focus-s-border-style, solid);
|
|
32
32
|
outline-color:var(--border-state-focus-s-border-color, );
|
|
33
|
-
background-color:var(--sys-invert-neutral-decor-hovered, #
|
|
34
|
-
outline-color:var(--sys-available-complementary, #
|
|
33
|
+
background-color:var(--sys-invert-neutral-decor-hovered, #656774);
|
|
34
|
+
outline-color:var(--sys-available-complementary, #15151b);
|
|
35
35
|
outline-offset:var(--spacing-state-focus-offset, 2px);
|
|
36
36
|
}
|
|
37
37
|
.buttonCloseColumn:active{
|
|
38
|
-
color:var(--sys-invert-neutral-text-light, #
|
|
38
|
+
color:var(--sys-invert-neutral-text-light, #8b8e9b);
|
|
39
39
|
}
|
|
40
40
|
|
|
41
41
|
.bottom-right{
|
|
@@ -87,6 +87,7 @@
|
|
|
87
87
|
box-shadow:none;
|
|
88
88
|
}
|
|
89
89
|
:global .osThemeSnack.Toastify__toast-container .Toastify__toast-body{
|
|
90
|
+
max-width:100%;
|
|
90
91
|
margin:0;
|
|
91
92
|
padding:0;
|
|
92
93
|
}
|
|
@@ -15,15 +15,15 @@
|
|
|
15
15
|
justify-content:center;
|
|
16
16
|
box-sizing:border-box;
|
|
17
17
|
margin:0;
|
|
18
|
-
color:var(--sys-invert-neutral-text-main, #
|
|
19
|
-
background-color:var(--sys-invert-neutral-decor-default, #
|
|
18
|
+
color:var(--sys-invert-neutral-text-main, #e6e8ef);
|
|
19
|
+
background-color:var(--sys-invert-neutral-decor-default, #3e3f4a);
|
|
20
20
|
border:none;
|
|
21
21
|
}
|
|
22
22
|
.buttonAction:hover, .buttonAction:focus-visible{
|
|
23
|
-
background-color:var(--sys-invert-neutral-decor-hovered, #
|
|
23
|
+
background-color:var(--sys-invert-neutral-decor-hovered, #656774);
|
|
24
24
|
}
|
|
25
25
|
.buttonAction:active{
|
|
26
|
-
background-color:var(--sys-invert-neutral-decor-activated, #
|
|
26
|
+
background-color:var(--sys-invert-neutral-decor-activated, #6d707f);
|
|
27
27
|
}
|
|
28
28
|
.buttonAction:focus-visible{
|
|
29
29
|
outline-width:var(--border-state-focus-s-border-width, 2px);
|
package/package.json
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
"access": "public"
|
|
5
5
|
},
|
|
6
6
|
"title": "Toaster",
|
|
7
|
-
"version": "0.6.
|
|
7
|
+
"version": "0.6.21-preview-5f7a62c6.0",
|
|
8
8
|
"sideEffects": [
|
|
9
9
|
"*.css",
|
|
10
10
|
"*.woff",
|
|
@@ -40,5 +40,5 @@
|
|
|
40
40
|
"classnames": "2.3.2",
|
|
41
41
|
"react-toastify": "10.0.5"
|
|
42
42
|
},
|
|
43
|
-
"gitHead": "
|
|
43
|
+
"gitHead": "11b8019df2d1dfbd609d49e4b2f099e059f2af64"
|
|
44
44
|
}
|