@snack-uikit/toaster 0.8.2 → 0.8.4

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.
Files changed (5) hide show
  1. package/CHANGELOG.md +22 -0
  2. package/dist/cjs/components/ToastSystemEvent/styles.module.css +2 -0
  3. package/dist/esm/components/ToastSystemEvent/styles.module.css +2 -0
  4. package/package.json +6 -6
  5. package/src/components/ToastSystemEvent/styles.module.scss +43 -25
package/CHANGELOG.md CHANGED
@@ -3,6 +3,28 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## 0.8.4 (2024-12-03)
7
+
8
+
9
+ ### Bug Fixes
10
+
11
+ * **PDS-1019:** fix min-width toaster ([bc2316d](https://github.com/cloud-ru-tech/snack-uikit/commit/bc2316db9212e5ea33fe8f4b180f45ca21ea7814))
12
+
13
+
14
+
15
+
16
+
17
+ ## 0.8.3 (2024-11-14)
18
+
19
+
20
+ ### Dependencies
21
+
22
+ * **FF-5678:** up deps classnames/uncontrollable ([8f0d645](https://github.com/cloud-ru-tech/snack-uikit/commit/8f0d645fc7eb8eaf95660cd0ae7d4b550821059b))
23
+
24
+
25
+
26
+
27
+
6
28
  ## 0.8.2 (2024-11-12)
7
29
 
8
30
  ### Only dependencies have been changed
package/dist/cjs/components/ToastSystemEvent/styles.module.css CHANGED
@@ -108,6 +108,8 @@
108
108
  display:flex;
109
109
  flex-direction:column;
110
110
  box-sizing:border-box;
111
+ width:calc(var(--size-toaster-toast-system-event-container, 320px) - 2 * var(--space-toaster-system-event-padding, 8px));
112
+ max-width:100%;
111
113
  }
112
114
  .container:hover .progress{
113
115
  animation-play-state:paused;
package/dist/esm/components/ToastSystemEvent/styles.module.css CHANGED
@@ -108,6 +108,8 @@
108
108
  display:flex;
109
109
  flex-direction:column;
110
110
  box-sizing:border-box;
111
+ width:calc(var(--size-toaster-toast-system-event-container, 320px) - 2 * var(--space-toaster-system-event-padding, 8px));
112
+ max-width:100%;
111
113
  }
112
114
  .container:hover .progress{
113
115
  animation-play-state:paused;
package/package.json CHANGED
@@ -4,7 +4,7 @@
4
4
  "access": "public"
5
5
  },
6
6
  "title": "Toaster",
7
- "version": "0.8.2",
7
+ "version": "0.8.4",
8
8
  "sideEffects": [
9
9
  "*.css",
10
10
  "*.woff",
@@ -37,12 +37,12 @@
37
37
  "scripts": {},
38
38
  "dependencies": {
39
39
  "@snack-uikit/icons": "0.24.0",
40
- "@snack-uikit/link": "0.15.0",
41
- "@snack-uikit/loaders": "0.8.0",
42
- "@snack-uikit/truncate-string": "0.6.0",
40
+ "@snack-uikit/link": "0.15.1",
41
+ "@snack-uikit/loaders": "0.8.1",
42
+ "@snack-uikit/truncate-string": "0.6.1",
43
43
  "@snack-uikit/utils": "3.5.0",
44
- "classnames": "2.3.2",
44
+ "classnames": "2.5.1",
45
45
  "react-toastify": "10.0.5"
46
46
  },
47
- "gitHead": "5b03de23f7a23a7459a9bfbfa55fc216fe0809ef"
47
+ "gitHead": "819bfd1b6c6ce41030353d49575cc4006824bbbd"
48
48
  }
package/src/components/ToastSystemEvent/styles.module.scss CHANGED
@@ -1,3 +1,5 @@
1
+ /* stylelint-disable scss/operator-no-newline-after */
2
+
1
3
  @use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-toaster-toasterSystemEvent';
2
4
  @use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
3
5
  @use '@snack-uikit/figma-tokens/build/scss/styles-theme-variables';
@@ -30,7 +32,9 @@
30
32
  }
31
33
 
32
34
  .buttonClose {
33
- @include styles-theme-variables.composite-var(styles-tokens-toaster-toasterSystemEvent.$toaster-system-event-toast-button-button-close);
35
+ @include styles-theme-variables.composite-var(
36
+ styles-tokens-toaster-toasterSystemEvent.$toaster-system-event-toast-button-button-close
37
+ );
34
38
 
35
39
  cursor: pointer;
36
40
 
@@ -71,7 +75,9 @@
71
75
  }
72
76
 
73
77
  .contentLayout {
74
- @include styles-theme-variables.composite-var(styles-tokens-toaster-toasterSystemEvent.$toaster-system-event-toast-content-layout);
78
+ @include styles-theme-variables.composite-var(
79
+ styles-tokens-toaster-toasterSystemEvent.$toaster-system-event-toast-content-layout
80
+ );
75
81
 
76
82
  display: flex;
77
83
  flex: 1;
@@ -102,7 +108,9 @@
102
108
  }
103
109
 
104
110
  .progress {
105
- @include styles-theme-variables.composite-var(styles-tokens-toaster-toasterSystemEvent.$toaster-system-event-toast-progress-bar);
111
+ @include styles-theme-variables.composite-var(
112
+ styles-tokens-toaster-toasterSystemEvent.$toaster-system-event-toast-progress-bar
113
+ );
106
114
 
107
115
  position: absolute;
108
116
  bottom: 0;
@@ -115,7 +123,9 @@
115
123
  }
116
124
 
117
125
  .body {
118
- @include styles-theme-variables.composite-var(styles-tokens-toaster-toasterSystemEvent.$toaster-system-event-toast-body);
126
+ @include styles-theme-variables.composite-var(
127
+ styles-tokens-toaster-toasterSystemEvent.$toaster-system-event-toast-body
128
+ );
119
129
 
120
130
  display: flex;
121
131
  width: 100%;
@@ -123,7 +133,9 @@
123
133
  }
124
134
 
125
135
  .footer {
126
- @include styles-theme-variables.composite-var(styles-tokens-toaster-toasterSystemEvent.$toaster-system-event-toast-footer);
136
+ @include styles-theme-variables.composite-var(
137
+ styles-tokens-toaster-toasterSystemEvent.$toaster-system-event-toast-footer
138
+ );
127
139
 
128
140
  position: relative;
129
141
  display: flex;
@@ -132,7 +144,9 @@
132
144
  }
133
145
 
134
146
  .container {
135
- @include styles-theme-variables.composite-var(styles-tokens-toaster-toasterSystemEvent.$toaster-system-event-toast-container);
147
+ @include styles-theme-variables.composite-var(
148
+ styles-tokens-toaster-toasterSystemEvent.$toaster-system-event-toast-container
149
+ );
136
150
 
137
151
  cursor: default;
138
152
 
@@ -143,27 +157,31 @@
143
157
  flex-direction: column;
144
158
 
145
159
  box-sizing: border-box;
160
+ width: calc(
161
+ styles-tokens-toaster-toasterSystemEvent.$size-toaster-toast-system-event-container -
162
+ (2 * styles-tokens-toaster-toasterSystemEvent.$space-toaster-system-event-padding)
163
+ );
164
+ max-width: 100%;
146
165
 
147
166
  &:hover .progress {
148
167
  animation-play-state: paused;
149
168
  }
150
169
 
151
-
152
170
  &[data-appearance='neutral'] {
153
171
  @include colorMap(
154
- styles-theme-variables.$sys-invert-neutral-background,
155
- styles-theme-variables.$sys-invert-neutral-accent-default,
156
- styles-theme-variables.$sys-invert-neutral-text-main,
157
- styles-theme-variables.$sys-invert-neutral-text-support,
172
+ styles-theme-variables.$sys-invert-neutral-background,
173
+ styles-theme-variables.$sys-invert-neutral-accent-default,
174
+ styles-theme-variables.$sys-invert-neutral-text-main,
175
+ styles-theme-variables.$sys-invert-neutral-text-support,
158
176
  styles-theme-variables.$sys-neutral-accent-default
159
177
  );
160
178
  }
161
179
 
162
180
  &[data-appearance='error'] {
163
181
  @include colorMap(
164
- styles-theme-variables.$sys-invert-neutral-background,
165
- styles-theme-variables.$sys-red-accent-default,
166
- styles-theme-variables.$sys-invert-neutral-text-main,
182
+ styles-theme-variables.$sys-invert-neutral-background,
183
+ styles-theme-variables.$sys-red-accent-default,
184
+ styles-theme-variables.$sys-invert-neutral-text-main,
167
185
  styles-theme-variables.$sys-invert-neutral-text-support,
168
186
  styles-theme-variables.$sys-red-accent-default
169
187
  );
@@ -171,13 +189,13 @@
171
189
 
172
190
  &[data-appearance='errorCritical'] {
173
191
  @include colorMap(
174
- styles-theme-variables.$sys-red-accent-default,
175
- styles-theme-variables.$sys-red-on-accent,
176
- styles-theme-variables.$sys-red-on-accent,
192
+ styles-theme-variables.$sys-red-accent-default,
193
+ styles-theme-variables.$sys-red-on-accent,
194
+ styles-theme-variables.$sys-red-on-accent,
177
195
  styles-theme-variables.$sys-red-on-accent,
178
196
  styles-theme-variables.$sys-red-decor-activated
179
197
  );
180
-
198
+
181
199
  .buttonClose {
182
200
  color: styles-theme-variables.$sys-red-on-accent;
183
201
  opacity: styles-theme-variables.$opacity-a064;
@@ -195,9 +213,9 @@
195
213
 
196
214
  &[data-appearance='warning'] {
197
215
  @include colorMap(
198
- styles-theme-variables.$sys-invert-neutral-background,
199
- styles-theme-variables.$sys-yellow-accent-default,
200
- styles-theme-variables.$sys-invert-neutral-text-main,
216
+ styles-theme-variables.$sys-invert-neutral-background,
217
+ styles-theme-variables.$sys-yellow-accent-default,
218
+ styles-theme-variables.$sys-invert-neutral-text-main,
201
219
  styles-theme-variables.$sys-invert-neutral-text-support,
202
220
  styles-theme-variables.$sys-yellow-accent-default
203
221
  );
@@ -205,9 +223,9 @@
205
223
 
206
224
  &[data-appearance='success'] {
207
225
  @include colorMap(
208
- styles-theme-variables.$sys-invert-neutral-background,
209
- styles-theme-variables.$sys-green-accent-default,
210
- styles-theme-variables.$sys-invert-neutral-text-main,
226
+ styles-theme-variables.$sys-invert-neutral-background,
227
+ styles-theme-variables.$sys-green-accent-default,
228
+ styles-theme-variables.$sys-invert-neutral-text-main,
211
229
  styles-theme-variables.$sys-invert-neutral-text-support,
212
230
  styles-theme-variables.$sys-green-accent-default
213
231
  );
@@ -219,4 +237,4 @@
219
237
  align-items: center;
220
238
  justify-content: center;
221
239
  color: styles-theme-variables.$sys-invert-neutral-text-main;
222
- }
240
+ }