@megafon/ui-core 4.11.0 → 4.11.2

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 (10) hide show
  1. package/CHANGELOG.md +20 -0
  2. package/dist/es/components/Button/Button.css +217 -115
  3. package/dist/es/components/Button/Button.js +5 -3
  4. package/dist/es/components/Tooltip/Tooltip.css +13 -28
  5. package/dist/es/components/Tooltip/Tooltip.js +17 -16
  6. package/dist/lib/components/Button/Button.css +217 -115
  7. package/dist/lib/components/Button/Button.js +5 -3
  8. package/dist/lib/components/Tooltip/Tooltip.css +13 -28
  9. package/dist/lib/components/Tooltip/Tooltip.js +17 -16
  10. package/package.json +3 -3
package/CHANGELOG.md CHANGED
@@ -3,6 +3,26 @@
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
+ ## [4.11.2](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@4.11.1...@megafon/ui-core@4.11.2) (2023-01-23)
7
+
8
+
9
+ ### Bug Fixes
10
+
11
+ * **button:** fixed styles ([1fc2ad3](https://github.com/MegafonWebLab/megafon-ui/commit/1fc2ad37f0b8b57e992f764802f11316b95539d3))
12
+ * **tooltip:** fix margins ([5572397](https://github.com/MegafonWebLab/megafon-ui/commit/55723976459d58ecf131e9fe5aee570c9871b1d2))
13
+
14
+
15
+
16
+
17
+
18
+ ## [4.11.1](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@4.11.0...@megafon/ui-core@4.11.1) (2023-01-17)
19
+
20
+ **Note:** Version bump only for package @megafon/ui-core
21
+
22
+
23
+
24
+
25
+
6
26
  # [4.11.0](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@4.10.1...@megafon/ui-core@4.11.0) (2023-01-16)
7
27
 
8
28
 
package/dist/es/components/Button/Button.css CHANGED
@@ -5,6 +5,9 @@
5
5
  display: inline-block;
6
6
  -webkit-box-sizing: border-box;
7
7
  box-sizing: border-box;
8
+ min-width: -webkit-fit-content;
9
+ min-width: -moz-fit-content;
10
+ min-width: fit-content;
8
11
  padding: 0 32px;
9
12
  border: none;
10
13
  border-radius: 30px;
@@ -30,196 +33,301 @@
30
33
  transition: fill 0.3s;
31
34
  }
32
35
  .mfui-button_size-all_extra-small {
36
+ min-width: 24px;
37
+ height: 24px;
33
38
  padding: 0 16px;
34
- }
35
- .mfui-button_size-all_extra-small .mfui-button__inner {
36
39
  font-size: 12px;
37
- line-height: 18px;
38
- min-width: 26px;
39
- height: 26px;
40
+ line-height: 14px;
40
41
  }
41
- .mfui-button_size-all_small .mfui-button__inner {
42
+ .mfui-button_size-all_extra-small .mfui-button__icon,
43
+ .mfui-button_size-all_extra-small .mfui-button__icon-arrow {
44
+ width: 20px;
45
+ height: 20px;
46
+ }
47
+ .mfui-button_size-all_small {
42
48
  min-width: 40px;
43
49
  height: 40px;
50
+ padding: 0 24px;
51
+ }
52
+ .mfui-button_size-all_small .mfui-button__icon,
53
+ .mfui-button_size-all_small .mfui-button__icon-arrow {
54
+ width: 20px;
55
+ height: 20px;
44
56
  }
45
- .mfui-button_size-all_medium .mfui-button__inner {
57
+ .mfui-button_size-all_medium {
46
58
  min-width: 52px;
47
59
  height: 52px;
48
60
  }
49
- .mfui-button_size-all_large .mfui-button__inner {
61
+ .mfui-button_size-all_medium .mfui-button__icon,
62
+ .mfui-button_size-all_medium .mfui-button__icon-arrow {
63
+ width: 32px;
64
+ height: 32px;
65
+ }
66
+ .mfui-button_size-all_large {
50
67
  min-width: 60px;
51
68
  height: 60px;
52
69
  }
53
- .mfui-button_size-all_extra-small .mfui-button__icon {
54
- width: 18px;
55
- height: 18px;
70
+ .mfui-button_size-all_large .mfui-button__icon,
71
+ .mfui-button_size-all_large .mfui-button__icon-arrow {
72
+ width: 32px;
73
+ height: 32px;
56
74
  }
57
- .mfui-button_size-all_small .mfui-button__icon {
58
- width: 16px;
59
- height: 16px;
75
+ .mfui-button_size-all_extra-small.mfui-buttonhas-arrow {
76
+ padding: 0 8px;
60
77
  }
61
- .mfui-button_size-all_medium .mfui-button__icon {
62
- width: 24px;
63
- height: 24px;
78
+ .mfui-button_size-all_extra-small.mfui-buttonhas-arrow .mfui-button__content {
79
+ padding-left: 12px;
64
80
  }
65
- .mfui-button_size-all_large .mfui-button__icon {
66
- width: 40px;
67
- height: 40px;
81
+ .mfui-button_size-all_medium.mfui-buttonhas-arrow,
82
+ .mfui-button_size-all_large.mfui-buttonhas-arrow {
83
+ padding: 0 24px;
84
+ }
85
+ .mfui-button_size-all_small.mfui-buttonhas-arrow .mfui-button__content,
86
+ .mfui-button_size-all_medium.mfui-buttonhas-arrow .mfui-button__content,
87
+ .mfui-button_size-all_large.mfui-buttonhas-arrow .mfui-button__content {
88
+ padding-left: 16px;
89
+ }
90
+ .mfui-button_type_text {
91
+ padding: 0;
68
92
  }
69
93
  @media screen and (min-width: 1280px) {
70
94
  .mfui-button_size-wide_extra-small {
95
+ min-width: 24px;
96
+ height: 24px;
71
97
  padding: 0 16px;
72
- }
73
- .mfui-button_size-wide_extra-small .mfui-button__inner {
74
98
  font-size: 12px;
75
- line-height: 18px;
76
- min-width: 26px;
77
- height: 26px;
99
+ line-height: 14px;
78
100
  }
79
- .mfui-button_size-wide_small .mfui-button__inner {
101
+ .mfui-button_size-wide_extra-small .mfui-button__icon,
102
+ .mfui-button_size-wide_extra-small .mfui-button__icon-arrow {
103
+ width: 20px;
104
+ height: 20px;
105
+ }
106
+ .mfui-button_size-wide_small {
80
107
  min-width: 40px;
81
108
  height: 40px;
109
+ padding: 0 24px;
110
+ }
111
+ .mfui-button_size-wide_small .mfui-button__icon,
112
+ .mfui-button_size-wide_small .mfui-button__icon-arrow {
113
+ width: 20px;
114
+ height: 20px;
82
115
  }
83
- .mfui-button_size-wide_medium .mfui-button__inner {
116
+ .mfui-button_size-wide_medium {
84
117
  min-width: 52px;
85
118
  height: 52px;
86
119
  }
87
- .mfui-button_size-wide_large .mfui-button__inner {
120
+ .mfui-button_size-wide_medium .mfui-button__icon,
121
+ .mfui-button_size-wide_medium .mfui-button__icon-arrow {
122
+ width: 32px;
123
+ height: 32px;
124
+ }
125
+ .mfui-button_size-wide_large {
88
126
  min-width: 60px;
89
127
  height: 60px;
90
128
  }
91
- .mfui-button_size-wide_extra-small .mfui-button__icon {
92
- width: 18px;
93
- height: 18px;
129
+ .mfui-button_size-wide_large .mfui-button__icon,
130
+ .mfui-button_size-wide_large .mfui-button__icon-arrow {
131
+ width: 32px;
132
+ height: 32px;
94
133
  }
95
- .mfui-button_size-wide_small .mfui-button__icon {
96
- width: 16px;
97
- height: 16px;
134
+ .mfui-button_size-wide_extra-small.mfui-buttonhas-arrow {
135
+ padding: 0 8px;
98
136
  }
99
- .mfui-button_size-wide_medium .mfui-button__icon {
100
- width: 24px;
101
- height: 24px;
137
+ .mfui-button_size-wide_extra-small.mfui-buttonhas-arrow .mfui-button__content {
138
+ padding-left: 12px;
102
139
  }
103
- .mfui-button_size-wide_large .mfui-button__icon {
104
- width: 40px;
105
- height: 40px;
140
+ .mfui-button_size-wide_medium.mfui-buttonhas-arrow,
141
+ .mfui-button_size-wide_large.mfui-buttonhas-arrow {
142
+ padding: 0 24px;
143
+ }
144
+ .mfui-button_size-wide_small.mfui-buttonhas-arrow .mfui-button__content,
145
+ .mfui-button_size-wide_medium.mfui-buttonhas-arrow .mfui-button__content,
146
+ .mfui-button_size-wide_large.mfui-buttonhas-arrow .mfui-button__content {
147
+ padding-left: 16px;
148
+ }
149
+ .mfui-button_type_text {
150
+ padding: 0;
106
151
  }
107
152
  }
108
153
  @media screen and (min-width: 1024px) {
109
154
  .mfui-button_size-desktop_extra-small {
155
+ min-width: 24px;
156
+ height: 24px;
110
157
  padding: 0 16px;
111
- }
112
- .mfui-button_size-desktop_extra-small .mfui-button__inner {
113
158
  font-size: 12px;
114
- line-height: 18px;
115
- min-width: 26px;
116
- height: 26px;
159
+ line-height: 14px;
117
160
  }
118
- .mfui-button_size-desktop_small .mfui-button__inner {
161
+ .mfui-button_size-desktop_extra-small .mfui-button__icon,
162
+ .mfui-button_size-desktop_extra-small .mfui-button__icon-arrow {
163
+ width: 20px;
164
+ height: 20px;
165
+ }
166
+ .mfui-button_size-desktop_small {
119
167
  min-width: 40px;
120
168
  height: 40px;
169
+ padding: 0 24px;
170
+ }
171
+ .mfui-button_size-desktop_small .mfui-button__icon,
172
+ .mfui-button_size-desktop_small .mfui-button__icon-arrow {
173
+ width: 20px;
174
+ height: 20px;
121
175
  }
122
- .mfui-button_size-desktop_medium .mfui-button__inner {
176
+ .mfui-button_size-desktop_medium {
123
177
  min-width: 52px;
124
178
  height: 52px;
125
179
  }
126
- .mfui-button_size-desktop_large .mfui-button__inner {
180
+ .mfui-button_size-desktop_medium .mfui-button__icon,
181
+ .mfui-button_size-desktop_medium .mfui-button__icon-arrow {
182
+ width: 32px;
183
+ height: 32px;
184
+ }
185
+ .mfui-button_size-desktop_large {
127
186
  min-width: 60px;
128
187
  height: 60px;
129
188
  }
130
- .mfui-button_size-desktop_extra-small .mfui-button__icon {
131
- width: 18px;
132
- height: 18px;
189
+ .mfui-button_size-desktop_large .mfui-button__icon,
190
+ .mfui-button_size-desktop_large .mfui-button__icon-arrow {
191
+ width: 32px;
192
+ height: 32px;
133
193
  }
134
- .mfui-button_size-desktop_small .mfui-button__icon {
135
- width: 16px;
136
- height: 16px;
194
+ .mfui-button_size-desktop_extra-small.mfui-buttonhas-arrow {
195
+ padding: 0 8px;
137
196
  }
138
- .mfui-button_size-desktop_medium .mfui-button__icon {
139
- width: 24px;
140
- height: 24px;
197
+ .mfui-button_size-desktop_extra-small.mfui-buttonhas-arrow .mfui-button__content {
198
+ padding-left: 12px;
141
199
  }
142
- .mfui-button_size-desktop_large .mfui-button__icon {
143
- width: 40px;
144
- height: 40px;
200
+ .mfui-button_size-desktop_medium.mfui-buttonhas-arrow,
201
+ .mfui-button_size-desktop_large.mfui-buttonhas-arrow {
202
+ padding: 0 24px;
203
+ }
204
+ .mfui-button_size-desktop_small.mfui-buttonhas-arrow .mfui-button__content,
205
+ .mfui-button_size-desktop_medium.mfui-buttonhas-arrow .mfui-button__content,
206
+ .mfui-button_size-desktop_large.mfui-buttonhas-arrow .mfui-button__content {
207
+ padding-left: 16px;
208
+ }
209
+ .mfui-button_type_text {
210
+ padding: 0;
145
211
  }
146
212
  }
147
213
  @media screen and (min-width: 768px) and (max-width: 1023px) {
148
214
  .mfui-button_size-tablet_extra-small {
215
+ min-width: 24px;
216
+ height: 24px;
149
217
  padding: 0 16px;
150
- }
151
- .mfui-button_size-tablet_extra-small .mfui-button__inner {
152
218
  font-size: 12px;
153
- line-height: 18px;
154
- min-width: 26px;
155
- height: 26px;
219
+ line-height: 14px;
220
+ }
221
+ .mfui-button_size-tablet_extra-small .mfui-button__icon,
222
+ .mfui-button_size-tablet_extra-small .mfui-button__icon-arrow {
223
+ width: 20px;
224
+ height: 20px;
156
225
  }
157
- .mfui-button_size-tablet_small .mfui-button__inner {
226
+ .mfui-button_size-tablet_small {
158
227
  min-width: 40px;
159
228
  height: 40px;
229
+ padding: 0 24px;
160
230
  }
161
- .mfui-button_size-tablet_medium .mfui-button__inner {
231
+ .mfui-button_size-tablet_small .mfui-button__icon,
232
+ .mfui-button_size-tablet_small .mfui-button__icon-arrow {
233
+ width: 20px;
234
+ height: 20px;
235
+ }
236
+ .mfui-button_size-tablet_medium {
162
237
  min-width: 52px;
163
238
  height: 52px;
164
239
  }
165
- .mfui-button_size-tablet_large .mfui-button__inner {
240
+ .mfui-button_size-tablet_medium .mfui-button__icon,
241
+ .mfui-button_size-tablet_medium .mfui-button__icon-arrow {
242
+ width: 32px;
243
+ height: 32px;
244
+ }
245
+ .mfui-button_size-tablet_large {
166
246
  min-width: 60px;
167
247
  height: 60px;
168
248
  }
169
- .mfui-button_size-tablet_extra-small .mfui-button__icon {
170
- width: 18px;
171
- height: 18px;
249
+ .mfui-button_size-tablet_large .mfui-button__icon,
250
+ .mfui-button_size-tablet_large .mfui-button__icon-arrow {
251
+ width: 32px;
252
+ height: 32px;
172
253
  }
173
- .mfui-button_size-tablet_small .mfui-button__icon {
174
- width: 16px;
175
- height: 16px;
254
+ .mfui-button_size-tablet_extra-small.mfui-buttonhas-arrow {
255
+ padding: 0 8px;
176
256
  }
177
- .mfui-button_size-tablet_medium .mfui-button__icon {
178
- width: 24px;
179
- height: 24px;
257
+ .mfui-button_size-tablet_extra-small.mfui-buttonhas-arrow .mfui-button__content {
258
+ padding-left: 12px;
180
259
  }
181
- .mfui-button_size-tablet_large .mfui-button__icon {
182
- width: 40px;
183
- height: 40px;
260
+ .mfui-button_size-tablet_medium.mfui-buttonhas-arrow,
261
+ .mfui-button_size-tablet_large.mfui-buttonhas-arrow {
262
+ padding: 0 24px;
263
+ }
264
+ .mfui-button_size-tablet_small.mfui-buttonhas-arrow .mfui-button__content,
265
+ .mfui-button_size-tablet_medium.mfui-buttonhas-arrow .mfui-button__content,
266
+ .mfui-button_size-tablet_large.mfui-buttonhas-arrow .mfui-button__content {
267
+ padding-left: 16px;
268
+ }
269
+ .mfui-button_type_text {
270
+ padding: 0;
184
271
  }
185
272
  }
186
273
  @media screen and (max-width: 767px) {
187
274
  .mfui-button_size-mobile_extra-small {
275
+ min-width: 24px;
276
+ height: 24px;
188
277
  padding: 0 16px;
189
- }
190
- .mfui-button_size-mobile_extra-small .mfui-button__inner {
191
278
  font-size: 12px;
192
- line-height: 18px;
193
- min-width: 26px;
194
- height: 26px;
279
+ line-height: 14px;
280
+ }
281
+ .mfui-button_size-mobile_extra-small .mfui-button__icon,
282
+ .mfui-button_size-mobile_extra-small .mfui-button__icon-arrow {
283
+ width: 20px;
284
+ height: 20px;
195
285
  }
196
- .mfui-button_size-mobile_small .mfui-button__inner {
286
+ .mfui-button_size-mobile_small {
197
287
  min-width: 40px;
198
288
  height: 40px;
289
+ padding: 0 24px;
199
290
  }
200
- .mfui-button_size-mobile_medium .mfui-button__inner {
291
+ .mfui-button_size-mobile_small .mfui-button__icon,
292
+ .mfui-button_size-mobile_small .mfui-button__icon-arrow {
293
+ width: 20px;
294
+ height: 20px;
295
+ }
296
+ .mfui-button_size-mobile_medium {
201
297
  min-width: 52px;
202
298
  height: 52px;
203
299
  }
204
- .mfui-button_size-mobile_large .mfui-button__inner {
300
+ .mfui-button_size-mobile_medium .mfui-button__icon,
301
+ .mfui-button_size-mobile_medium .mfui-button__icon-arrow {
302
+ width: 32px;
303
+ height: 32px;
304
+ }
305
+ .mfui-button_size-mobile_large {
205
306
  min-width: 60px;
206
307
  height: 60px;
207
308
  }
208
- .mfui-button_size-mobile_extra-small .mfui-button__icon {
209
- width: 18px;
210
- height: 18px;
309
+ .mfui-button_size-mobile_large .mfui-button__icon,
310
+ .mfui-button_size-mobile_large .mfui-button__icon-arrow {
311
+ width: 32px;
312
+ height: 32px;
211
313
  }
212
- .mfui-button_size-mobile_small .mfui-button__icon {
213
- width: 16px;
214
- height: 16px;
314
+ .mfui-button_size-mobile_extra-small.mfui-buttonhas-arrow {
315
+ padding: 0 8px;
215
316
  }
216
- .mfui-button_size-mobile_medium .mfui-button__icon {
217
- width: 24px;
218
- height: 24px;
317
+ .mfui-button_size-mobile_extra-small.mfui-buttonhas-arrow .mfui-button__content {
318
+ padding-left: 12px;
219
319
  }
220
- .mfui-button_size-mobile_large .mfui-button__icon {
221
- width: 40px;
222
- height: 40px;
320
+ .mfui-button_size-mobile_medium.mfui-buttonhas-arrow,
321
+ .mfui-button_size-mobile_large.mfui-buttonhas-arrow {
322
+ padding: 0 24px;
323
+ }
324
+ .mfui-button_size-mobile_small.mfui-buttonhas-arrow .mfui-button__content,
325
+ .mfui-button_size-mobile_medium.mfui-buttonhas-arrow .mfui-button__content,
326
+ .mfui-button_size-mobile_large.mfui-buttonhas-arrow .mfui-button__content {
327
+ padding-left: 16px;
328
+ }
329
+ .mfui-button_type_text {
330
+ padding: 0;
223
331
  }
224
332
  }
225
333
  .mfui-button:hover {
@@ -247,6 +355,7 @@
247
355
  -webkit-box-sizing: border-box;
248
356
  box-sizing: border-box;
249
357
  width: 100%;
358
+ height: inherit;
250
359
  vertical-align: top;
251
360
  }
252
361
  .mfui-button__text {
@@ -280,19 +389,18 @@
280
389
  .mfui-button__icon-arrow {
281
390
  width: 32px;
282
391
  height: 32px;
283
- margin-right: -8px;
284
392
  margin-left: 4px;
285
393
  }
286
394
  .mfui-button_content-type_icon {
287
395
  padding: 0;
288
396
  }
289
397
  .mfui-button_content-type_icon-text .mfui-button__icon {
290
- width: 24px;
291
- height: 24px;
292
- margin-right: 8px;
293
- margin-left: -8px;
398
+ width: 32px;
399
+ height: 32px;
400
+ margin-right: 4px;
294
401
  }
295
- .mfui-button_content-type_icon-text.mfui-button_size-all_small .mfui-button__icon {
402
+ .mfui-button_content-type_icon-text.mfui-button_size-all_small .mfui-button__icon,
403
+ .mfui-button_content-type_icon-text.mfui-button_size-all_extra-small .mfui-button__icon {
296
404
  display: none;
297
405
  }
298
406
  .mfui-button_type_text.mfui-button_theme_green {
@@ -301,9 +409,6 @@
301
409
  width: fit-content;
302
410
  color: var(--brandGreen);
303
411
  background-color: transparent;
304
- block-size: -webkit-fit-content;
305
- block-size: -moz-fit-content;
306
- block-size: fit-content;
307
412
  }
308
413
  .mfui-button_type_text.mfui-button_theme_green svg {
309
414
  fill: var(--brandGreen);
@@ -326,9 +431,6 @@
326
431
  width: fit-content;
327
432
  color: var(--brandPurple);
328
433
  background-color: transparent;
329
- block-size: -webkit-fit-content;
330
- block-size: -moz-fit-content;
331
- block-size: fit-content;
332
434
  }
333
435
  .mfui-button_type_text.mfui-button_theme_purple svg {
334
436
  fill: var(--brandPurple);
@@ -351,9 +453,6 @@
351
453
  width: fit-content;
352
454
  color: var(--stcWhite);
353
455
  background-color: transparent;
354
- block-size: -webkit-fit-content;
355
- block-size: -moz-fit-content;
356
- block-size: fit-content;
357
456
  }
358
457
  .mfui-button_type_text.mfui-button_theme_white svg {
359
458
  fill: var(--stcWhite);
@@ -371,6 +470,9 @@
371
470
  fill: var(--buttonDown);
372
471
  }
373
472
  .mfui-button_type_text.mfui-button_theme_black {
473
+ width: -webkit-fit-content;
474
+ width: -moz-fit-content;
475
+ width: fit-content;
374
476
  color: var(--stcBlack);
375
477
  background-color: transparent;
376
478
  }
package/dist/es/components/Button/Button.js CHANGED
@@ -96,6 +96,7 @@ var Button = function Button(_ref) {
96
96
  setTouch = _React$useState2[1];
97
97
 
98
98
  var ElementType = href ? 'a' : 'button';
99
+ var displayArrow = showArrow && !icon;
99
100
  var handleClick = React.useCallback(function (e) {
100
101
  if (disabled) {
101
102
  e.preventDefault();
@@ -138,10 +139,10 @@ var Button = function Button(_ref) {
138
139
  className: cn('text', {
139
140
  ellipsis: ellipsis
140
141
  })
141
- }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.text)), children), !icon && showArrow && /*#__PURE__*/React.createElement(Arrow, _extends({
142
+ }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.text)), children), displayArrow && /*#__PURE__*/React.createElement(Arrow, _extends({
142
143
  className: cn('icon-arrow')
143
144
  }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.arrow))));
144
- }, [children, icon, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.content, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.text, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.arrow, ellipsis, showLoader, contentClassName, showArrow]);
145
+ }, [children, icon, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.content, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.text, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.arrow, ellipsis, showLoader, contentClassName, displayArrow]);
145
146
  var contentType = React.useMemo(function () {
146
147
  switch (true) {
147
148
  case icon && !children:
@@ -202,7 +203,8 @@ var Button = function Button(_ref) {
202
203
  'full-width': fullWidth,
203
204
  loading: showLoader,
204
205
  'no-touch': !isTouch,
205
- 'content-type': contentType
206
+ 'content-type': contentType,
207
+ 'has-arrow': displayArrow
206
208
  }, classNameValue),
207
209
  href: href,
208
210
  download: !!href && download,
package/dist/es/components/Tooltip/Tooltip.css CHANGED
@@ -32,25 +32,6 @@
32
32
  left: 0;
33
33
  z-index: -1;
34
34
  }
35
- .mfui-tooltip__top,
36
- .mfui-tooltip__main-content {
37
- display: -webkit-box;
38
- display: -ms-flexbox;
39
- display: flex;
40
- -webkit-box-orient: vertical;
41
- -webkit-box-direction: normal;
42
- -ms-flex-direction: column;
43
- flex-direction: column;
44
- gap: 8px;
45
- }
46
- @media screen and (min-width: 768px) {
47
- .mfui-tooltip__top {
48
- gap: 12px;
49
- }
50
- }
51
- .mfui-tooltip__top_margin {
52
- margin-bottom: 16px;
53
- }
54
35
  .mfui-tooltip__arrow-container {
55
36
  position: absolute;
56
37
  }
@@ -87,15 +68,8 @@
87
68
  line-height: 18px;
88
69
  }
89
70
  }
90
- .mfui-tooltip__bottom {
91
- display: -webkit-box;
92
- display: -ms-flexbox;
93
- display: flex;
94
- -webkit-box-orient: vertical;
95
- -webkit-box-direction: normal;
96
- -ms-flex-direction: column;
97
- flex-direction: column;
98
- gap: 16px;
71
+ .mfui-tooltip__text_margin {
72
+ margin-top: 8px;
99
73
  }
100
74
  .mfui-tooltip__button,
101
75
  .mfui-tooltip__close-button {
@@ -127,6 +101,9 @@
127
101
  line-height: 14px;
128
102
  }
129
103
  }
104
+ .mfui-tooltip__button_margin {
105
+ margin-top: 8px;
106
+ }
130
107
  .mfui-tooltip__button:hover {
131
108
  color: var(--buttonHoverGreen);
132
109
  }
@@ -176,6 +153,14 @@
176
153
  transition: 300ms;
177
154
  fill: var(--brandGreen);
178
155
  }
156
+ .mfui-tooltip__addititonal-content_margin {
157
+ margin-top: 16px;
158
+ }
159
+ @media screen and (max-width: 767px) {
160
+ .mfui-tooltip__addititonal-content_margin {
161
+ margin-top: 12px;
162
+ }
163
+ }
179
164
  .mfui-tooltip_small .mfui-tooltip__content {
180
165
  display: -webkit-box;
181
166
  display: -ms-flexbox;
package/dist/es/components/Tooltip/Tooltip.js CHANGED
@@ -142,8 +142,7 @@ var Tooltip = function Tooltip(_ref) {
142
142
  var currentBoundary = boundaryElement === null || boundaryElement === void 0 ? void 0 : boundaryElement.current;
143
143
  var portalElem = React.useRef(null);
144
144
  var isBigSize = size === Size.BIG;
145
- var hasMainContent = !!title || !!text;
146
- var hasTopContent = hasMainContent || !!buttonText;
145
+ var hasTextMargin = !!title && isBigSize;
147
146
  var clickEvent = useMemo(function () {
148
147
  return isTouchDevice ? TOUCH_KEY : MOUSE_KEY;
149
148
  }, [isTouchDevice]);
@@ -302,31 +301,33 @@ var Tooltip = function Tooltip(_ref) {
302
301
  []);
303
302
  var renderedText = useMemo(function () {
304
303
  return /*#__PURE__*/React.createElement("div", {
305
- className: cn('text')
304
+ className: cn('text', {
305
+ margin: hasTextMargin
306
+ })
306
307
  }, text);
307
- }, [text]);
308
+ }, [text, hasTextMargin]);
308
309
  var renderedFullContent = useMemo(function () {
309
- return /*#__PURE__*/React.createElement(React.Fragment, null, hasTopContent && /*#__PURE__*/React.createElement("div", {
310
- className: cn('top', {
311
- margin: !!children
312
- })
313
- }, hasMainContent && /*#__PURE__*/React.createElement("div", {
314
- className: cn('main-content')
315
- }, !!title && /*#__PURE__*/React.createElement(Header, {
310
+ var hasButtonMargin = !!title || !!text;
311
+ var hasChildrenMargin = hasButtonMargin || !!buttonText;
312
+ return /*#__PURE__*/React.createElement(React.Fragment, null, !!title && /*#__PURE__*/React.createElement(Header, {
316
313
  className: cn('title'),
317
314
  as: "h5",
318
315
  space: "tight"
319
- }, title), !!text && renderedText), !!buttonText && /*#__PURE__*/React.createElement("button", _extends({
316
+ }, title), !!text && renderedText, !!buttonText && /*#__PURE__*/React.createElement("button", _extends({
320
317
  type: "button",
321
- className: cn('button')
318
+ className: cn('button', {
319
+ margin: hasButtonMargin
320
+ })
322
321
  }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.button), {
323
322
  onClick: onClick
324
323
  }), buttonText, /*#__PURE__*/React.createElement(RightArrow, {
325
324
  className: cn('button-arrow')
326
- }))), !!children && /*#__PURE__*/React.createElement("div", {
327
- className: cn('addititonal-content')
325
+ })), !!children && /*#__PURE__*/React.createElement("div", {
326
+ className: cn('addititonal-content', {
327
+ margin: hasChildrenMargin
328
+ })
328
329
  }, children));
329
- }, [title, text, buttonText, children, dataAttrs, hasTopContent, hasMainContent, renderedText, onClick]);
330
+ }, [title, text, buttonText, children, dataAttrs, renderedText, onClick]);
330
331
  var template = /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
331
332
  className: cn({
332
333
  theme: theme,
package/dist/lib/components/Button/Button.css CHANGED
@@ -5,6 +5,9 @@
5
5
  display: inline-block;
6
6
  -webkit-box-sizing: border-box;
7
7
  box-sizing: border-box;
8
+ min-width: -webkit-fit-content;
9
+ min-width: -moz-fit-content;
10
+ min-width: fit-content;
8
11
  padding: 0 32px;
9
12
  border: none;
10
13
  border-radius: 30px;
@@ -30,196 +33,301 @@
30
33
  transition: fill 0.3s;
31
34
  }
32
35
  .mfui-button_size-all_extra-small {
36
+ min-width: 24px;
37
+ height: 24px;
33
38
  padding: 0 16px;
34
- }
35
- .mfui-button_size-all_extra-small .mfui-button__inner {
36
39
  font-size: 12px;
37
- line-height: 18px;
38
- min-width: 26px;
39
- height: 26px;
40
+ line-height: 14px;
40
41
  }
41
- .mfui-button_size-all_small .mfui-button__inner {
42
+ .mfui-button_size-all_extra-small .mfui-button__icon,
43
+ .mfui-button_size-all_extra-small .mfui-button__icon-arrow {
44
+ width: 20px;
45
+ height: 20px;
46
+ }
47
+ .mfui-button_size-all_small {
42
48
  min-width: 40px;
43
49
  height: 40px;
50
+ padding: 0 24px;
51
+ }
52
+ .mfui-button_size-all_small .mfui-button__icon,
53
+ .mfui-button_size-all_small .mfui-button__icon-arrow {
54
+ width: 20px;
55
+ height: 20px;
44
56
  }
45
- .mfui-button_size-all_medium .mfui-button__inner {
57
+ .mfui-button_size-all_medium {
46
58
  min-width: 52px;
47
59
  height: 52px;
48
60
  }
49
- .mfui-button_size-all_large .mfui-button__inner {
61
+ .mfui-button_size-all_medium .mfui-button__icon,
62
+ .mfui-button_size-all_medium .mfui-button__icon-arrow {
63
+ width: 32px;
64
+ height: 32px;
65
+ }
66
+ .mfui-button_size-all_large {
50
67
  min-width: 60px;
51
68
  height: 60px;
52
69
  }
53
- .mfui-button_size-all_extra-small .mfui-button__icon {
54
- width: 18px;
55
- height: 18px;
70
+ .mfui-button_size-all_large .mfui-button__icon,
71
+ .mfui-button_size-all_large .mfui-button__icon-arrow {
72
+ width: 32px;
73
+ height: 32px;
56
74
  }
57
- .mfui-button_size-all_small .mfui-button__icon {
58
- width: 16px;
59
- height: 16px;
75
+ .mfui-button_size-all_extra-small.mfui-buttonhas-arrow {
76
+ padding: 0 8px;
60
77
  }
61
- .mfui-button_size-all_medium .mfui-button__icon {
62
- width: 24px;
63
- height: 24px;
78
+ .mfui-button_size-all_extra-small.mfui-buttonhas-arrow .mfui-button__content {
79
+ padding-left: 12px;
64
80
  }
65
- .mfui-button_size-all_large .mfui-button__icon {
66
- width: 40px;
67
- height: 40px;
81
+ .mfui-button_size-all_medium.mfui-buttonhas-arrow,
82
+ .mfui-button_size-all_large.mfui-buttonhas-arrow {
83
+ padding: 0 24px;
84
+ }
85
+ .mfui-button_size-all_small.mfui-buttonhas-arrow .mfui-button__content,
86
+ .mfui-button_size-all_medium.mfui-buttonhas-arrow .mfui-button__content,
87
+ .mfui-button_size-all_large.mfui-buttonhas-arrow .mfui-button__content {
88
+ padding-left: 16px;
89
+ }
90
+ .mfui-button_type_text {
91
+ padding: 0;
68
92
  }
69
93
  @media screen and (min-width: 1280px) {
70
94
  .mfui-button_size-wide_extra-small {
95
+ min-width: 24px;
96
+ height: 24px;
71
97
  padding: 0 16px;
72
- }
73
- .mfui-button_size-wide_extra-small .mfui-button__inner {
74
98
  font-size: 12px;
75
- line-height: 18px;
76
- min-width: 26px;
77
- height: 26px;
99
+ line-height: 14px;
78
100
  }
79
- .mfui-button_size-wide_small .mfui-button__inner {
101
+ .mfui-button_size-wide_extra-small .mfui-button__icon,
102
+ .mfui-button_size-wide_extra-small .mfui-button__icon-arrow {
103
+ width: 20px;
104
+ height: 20px;
105
+ }
106
+ .mfui-button_size-wide_small {
80
107
  min-width: 40px;
81
108
  height: 40px;
109
+ padding: 0 24px;
110
+ }
111
+ .mfui-button_size-wide_small .mfui-button__icon,
112
+ .mfui-button_size-wide_small .mfui-button__icon-arrow {
113
+ width: 20px;
114
+ height: 20px;
82
115
  }
83
- .mfui-button_size-wide_medium .mfui-button__inner {
116
+ .mfui-button_size-wide_medium {
84
117
  min-width: 52px;
85
118
  height: 52px;
86
119
  }
87
- .mfui-button_size-wide_large .mfui-button__inner {
120
+ .mfui-button_size-wide_medium .mfui-button__icon,
121
+ .mfui-button_size-wide_medium .mfui-button__icon-arrow {
122
+ width: 32px;
123
+ height: 32px;
124
+ }
125
+ .mfui-button_size-wide_large {
88
126
  min-width: 60px;
89
127
  height: 60px;
90
128
  }
91
- .mfui-button_size-wide_extra-small .mfui-button__icon {
92
- width: 18px;
93
- height: 18px;
129
+ .mfui-button_size-wide_large .mfui-button__icon,
130
+ .mfui-button_size-wide_large .mfui-button__icon-arrow {
131
+ width: 32px;
132
+ height: 32px;
94
133
  }
95
- .mfui-button_size-wide_small .mfui-button__icon {
96
- width: 16px;
97
- height: 16px;
134
+ .mfui-button_size-wide_extra-small.mfui-buttonhas-arrow {
135
+ padding: 0 8px;
98
136
  }
99
- .mfui-button_size-wide_medium .mfui-button__icon {
100
- width: 24px;
101
- height: 24px;
137
+ .mfui-button_size-wide_extra-small.mfui-buttonhas-arrow .mfui-button__content {
138
+ padding-left: 12px;
102
139
  }
103
- .mfui-button_size-wide_large .mfui-button__icon {
104
- width: 40px;
105
- height: 40px;
140
+ .mfui-button_size-wide_medium.mfui-buttonhas-arrow,
141
+ .mfui-button_size-wide_large.mfui-buttonhas-arrow {
142
+ padding: 0 24px;
143
+ }
144
+ .mfui-button_size-wide_small.mfui-buttonhas-arrow .mfui-button__content,
145
+ .mfui-button_size-wide_medium.mfui-buttonhas-arrow .mfui-button__content,
146
+ .mfui-button_size-wide_large.mfui-buttonhas-arrow .mfui-button__content {
147
+ padding-left: 16px;
148
+ }
149
+ .mfui-button_type_text {
150
+ padding: 0;
106
151
  }
107
152
  }
108
153
  @media screen and (min-width: 1024px) {
109
154
  .mfui-button_size-desktop_extra-small {
155
+ min-width: 24px;
156
+ height: 24px;
110
157
  padding: 0 16px;
111
- }
112
- .mfui-button_size-desktop_extra-small .mfui-button__inner {
113
158
  font-size: 12px;
114
- line-height: 18px;
115
- min-width: 26px;
116
- height: 26px;
159
+ line-height: 14px;
117
160
  }
118
- .mfui-button_size-desktop_small .mfui-button__inner {
161
+ .mfui-button_size-desktop_extra-small .mfui-button__icon,
162
+ .mfui-button_size-desktop_extra-small .mfui-button__icon-arrow {
163
+ width: 20px;
164
+ height: 20px;
165
+ }
166
+ .mfui-button_size-desktop_small {
119
167
  min-width: 40px;
120
168
  height: 40px;
169
+ padding: 0 24px;
170
+ }
171
+ .mfui-button_size-desktop_small .mfui-button__icon,
172
+ .mfui-button_size-desktop_small .mfui-button__icon-arrow {
173
+ width: 20px;
174
+ height: 20px;
121
175
  }
122
- .mfui-button_size-desktop_medium .mfui-button__inner {
176
+ .mfui-button_size-desktop_medium {
123
177
  min-width: 52px;
124
178
  height: 52px;
125
179
  }
126
- .mfui-button_size-desktop_large .mfui-button__inner {
180
+ .mfui-button_size-desktop_medium .mfui-button__icon,
181
+ .mfui-button_size-desktop_medium .mfui-button__icon-arrow {
182
+ width: 32px;
183
+ height: 32px;
184
+ }
185
+ .mfui-button_size-desktop_large {
127
186
  min-width: 60px;
128
187
  height: 60px;
129
188
  }
130
- .mfui-button_size-desktop_extra-small .mfui-button__icon {
131
- width: 18px;
132
- height: 18px;
189
+ .mfui-button_size-desktop_large .mfui-button__icon,
190
+ .mfui-button_size-desktop_large .mfui-button__icon-arrow {
191
+ width: 32px;
192
+ height: 32px;
133
193
  }
134
- .mfui-button_size-desktop_small .mfui-button__icon {
135
- width: 16px;
136
- height: 16px;
194
+ .mfui-button_size-desktop_extra-small.mfui-buttonhas-arrow {
195
+ padding: 0 8px;
137
196
  }
138
- .mfui-button_size-desktop_medium .mfui-button__icon {
139
- width: 24px;
140
- height: 24px;
197
+ .mfui-button_size-desktop_extra-small.mfui-buttonhas-arrow .mfui-button__content {
198
+ padding-left: 12px;
141
199
  }
142
- .mfui-button_size-desktop_large .mfui-button__icon {
143
- width: 40px;
144
- height: 40px;
200
+ .mfui-button_size-desktop_medium.mfui-buttonhas-arrow,
201
+ .mfui-button_size-desktop_large.mfui-buttonhas-arrow {
202
+ padding: 0 24px;
203
+ }
204
+ .mfui-button_size-desktop_small.mfui-buttonhas-arrow .mfui-button__content,
205
+ .mfui-button_size-desktop_medium.mfui-buttonhas-arrow .mfui-button__content,
206
+ .mfui-button_size-desktop_large.mfui-buttonhas-arrow .mfui-button__content {
207
+ padding-left: 16px;
208
+ }
209
+ .mfui-button_type_text {
210
+ padding: 0;
145
211
  }
146
212
  }
147
213
  @media screen and (min-width: 768px) and (max-width: 1023px) {
148
214
  .mfui-button_size-tablet_extra-small {
215
+ min-width: 24px;
216
+ height: 24px;
149
217
  padding: 0 16px;
150
- }
151
- .mfui-button_size-tablet_extra-small .mfui-button__inner {
152
218
  font-size: 12px;
153
- line-height: 18px;
154
- min-width: 26px;
155
- height: 26px;
219
+ line-height: 14px;
220
+ }
221
+ .mfui-button_size-tablet_extra-small .mfui-button__icon,
222
+ .mfui-button_size-tablet_extra-small .mfui-button__icon-arrow {
223
+ width: 20px;
224
+ height: 20px;
156
225
  }
157
- .mfui-button_size-tablet_small .mfui-button__inner {
226
+ .mfui-button_size-tablet_small {
158
227
  min-width: 40px;
159
228
  height: 40px;
229
+ padding: 0 24px;
160
230
  }
161
- .mfui-button_size-tablet_medium .mfui-button__inner {
231
+ .mfui-button_size-tablet_small .mfui-button__icon,
232
+ .mfui-button_size-tablet_small .mfui-button__icon-arrow {
233
+ width: 20px;
234
+ height: 20px;
235
+ }
236
+ .mfui-button_size-tablet_medium {
162
237
  min-width: 52px;
163
238
  height: 52px;
164
239
  }
165
- .mfui-button_size-tablet_large .mfui-button__inner {
240
+ .mfui-button_size-tablet_medium .mfui-button__icon,
241
+ .mfui-button_size-tablet_medium .mfui-button__icon-arrow {
242
+ width: 32px;
243
+ height: 32px;
244
+ }
245
+ .mfui-button_size-tablet_large {
166
246
  min-width: 60px;
167
247
  height: 60px;
168
248
  }
169
- .mfui-button_size-tablet_extra-small .mfui-button__icon {
170
- width: 18px;
171
- height: 18px;
249
+ .mfui-button_size-tablet_large .mfui-button__icon,
250
+ .mfui-button_size-tablet_large .mfui-button__icon-arrow {
251
+ width: 32px;
252
+ height: 32px;
172
253
  }
173
- .mfui-button_size-tablet_small .mfui-button__icon {
174
- width: 16px;
175
- height: 16px;
254
+ .mfui-button_size-tablet_extra-small.mfui-buttonhas-arrow {
255
+ padding: 0 8px;
176
256
  }
177
- .mfui-button_size-tablet_medium .mfui-button__icon {
178
- width: 24px;
179
- height: 24px;
257
+ .mfui-button_size-tablet_extra-small.mfui-buttonhas-arrow .mfui-button__content {
258
+ padding-left: 12px;
180
259
  }
181
- .mfui-button_size-tablet_large .mfui-button__icon {
182
- width: 40px;
183
- height: 40px;
260
+ .mfui-button_size-tablet_medium.mfui-buttonhas-arrow,
261
+ .mfui-button_size-tablet_large.mfui-buttonhas-arrow {
262
+ padding: 0 24px;
263
+ }
264
+ .mfui-button_size-tablet_small.mfui-buttonhas-arrow .mfui-button__content,
265
+ .mfui-button_size-tablet_medium.mfui-buttonhas-arrow .mfui-button__content,
266
+ .mfui-button_size-tablet_large.mfui-buttonhas-arrow .mfui-button__content {
267
+ padding-left: 16px;
268
+ }
269
+ .mfui-button_type_text {
270
+ padding: 0;
184
271
  }
185
272
  }
186
273
  @media screen and (max-width: 767px) {
187
274
  .mfui-button_size-mobile_extra-small {
275
+ min-width: 24px;
276
+ height: 24px;
188
277
  padding: 0 16px;
189
- }
190
- .mfui-button_size-mobile_extra-small .mfui-button__inner {
191
278
  font-size: 12px;
192
- line-height: 18px;
193
- min-width: 26px;
194
- height: 26px;
279
+ line-height: 14px;
280
+ }
281
+ .mfui-button_size-mobile_extra-small .mfui-button__icon,
282
+ .mfui-button_size-mobile_extra-small .mfui-button__icon-arrow {
283
+ width: 20px;
284
+ height: 20px;
195
285
  }
196
- .mfui-button_size-mobile_small .mfui-button__inner {
286
+ .mfui-button_size-mobile_small {
197
287
  min-width: 40px;
198
288
  height: 40px;
289
+ padding: 0 24px;
199
290
  }
200
- .mfui-button_size-mobile_medium .mfui-button__inner {
291
+ .mfui-button_size-mobile_small .mfui-button__icon,
292
+ .mfui-button_size-mobile_small .mfui-button__icon-arrow {
293
+ width: 20px;
294
+ height: 20px;
295
+ }
296
+ .mfui-button_size-mobile_medium {
201
297
  min-width: 52px;
202
298
  height: 52px;
203
299
  }
204
- .mfui-button_size-mobile_large .mfui-button__inner {
300
+ .mfui-button_size-mobile_medium .mfui-button__icon,
301
+ .mfui-button_size-mobile_medium .mfui-button__icon-arrow {
302
+ width: 32px;
303
+ height: 32px;
304
+ }
305
+ .mfui-button_size-mobile_large {
205
306
  min-width: 60px;
206
307
  height: 60px;
207
308
  }
208
- .mfui-button_size-mobile_extra-small .mfui-button__icon {
209
- width: 18px;
210
- height: 18px;
309
+ .mfui-button_size-mobile_large .mfui-button__icon,
310
+ .mfui-button_size-mobile_large .mfui-button__icon-arrow {
311
+ width: 32px;
312
+ height: 32px;
211
313
  }
212
- .mfui-button_size-mobile_small .mfui-button__icon {
213
- width: 16px;
214
- height: 16px;
314
+ .mfui-button_size-mobile_extra-small.mfui-buttonhas-arrow {
315
+ padding: 0 8px;
215
316
  }
216
- .mfui-button_size-mobile_medium .mfui-button__icon {
217
- width: 24px;
218
- height: 24px;
317
+ .mfui-button_size-mobile_extra-small.mfui-buttonhas-arrow .mfui-button__content {
318
+ padding-left: 12px;
219
319
  }
220
- .mfui-button_size-mobile_large .mfui-button__icon {
221
- width: 40px;
222
- height: 40px;
320
+ .mfui-button_size-mobile_medium.mfui-buttonhas-arrow,
321
+ .mfui-button_size-mobile_large.mfui-buttonhas-arrow {
322
+ padding: 0 24px;
323
+ }
324
+ .mfui-button_size-mobile_small.mfui-buttonhas-arrow .mfui-button__content,
325
+ .mfui-button_size-mobile_medium.mfui-buttonhas-arrow .mfui-button__content,
326
+ .mfui-button_size-mobile_large.mfui-buttonhas-arrow .mfui-button__content {
327
+ padding-left: 16px;
328
+ }
329
+ .mfui-button_type_text {
330
+ padding: 0;
223
331
  }
224
332
  }
225
333
  .mfui-button:hover {
@@ -247,6 +355,7 @@
247
355
  -webkit-box-sizing: border-box;
248
356
  box-sizing: border-box;
249
357
  width: 100%;
358
+ height: inherit;
250
359
  vertical-align: top;
251
360
  }
252
361
  .mfui-button__text {
@@ -280,19 +389,18 @@
280
389
  .mfui-button__icon-arrow {
281
390
  width: 32px;
282
391
  height: 32px;
283
- margin-right: -8px;
284
392
  margin-left: 4px;
285
393
  }
286
394
  .mfui-button_content-type_icon {
287
395
  padding: 0;
288
396
  }
289
397
  .mfui-button_content-type_icon-text .mfui-button__icon {
290
- width: 24px;
291
- height: 24px;
292
- margin-right: 8px;
293
- margin-left: -8px;
398
+ width: 32px;
399
+ height: 32px;
400
+ margin-right: 4px;
294
401
  }
295
- .mfui-button_content-type_icon-text.mfui-button_size-all_small .mfui-button__icon {
402
+ .mfui-button_content-type_icon-text.mfui-button_size-all_small .mfui-button__icon,
403
+ .mfui-button_content-type_icon-text.mfui-button_size-all_extra-small .mfui-button__icon {
296
404
  display: none;
297
405
  }
298
406
  .mfui-button_type_text.mfui-button_theme_green {
@@ -301,9 +409,6 @@
301
409
  width: fit-content;
302
410
  color: var(--brandGreen);
303
411
  background-color: transparent;
304
- block-size: -webkit-fit-content;
305
- block-size: -moz-fit-content;
306
- block-size: fit-content;
307
412
  }
308
413
  .mfui-button_type_text.mfui-button_theme_green svg {
309
414
  fill: var(--brandGreen);
@@ -326,9 +431,6 @@
326
431
  width: fit-content;
327
432
  color: var(--brandPurple);
328
433
  background-color: transparent;
329
- block-size: -webkit-fit-content;
330
- block-size: -moz-fit-content;
331
- block-size: fit-content;
332
434
  }
333
435
  .mfui-button_type_text.mfui-button_theme_purple svg {
334
436
  fill: var(--brandPurple);
@@ -351,9 +453,6 @@
351
453
  width: fit-content;
352
454
  color: var(--stcWhite);
353
455
  background-color: transparent;
354
- block-size: -webkit-fit-content;
355
- block-size: -moz-fit-content;
356
- block-size: fit-content;
357
456
  }
358
457
  .mfui-button_type_text.mfui-button_theme_white svg {
359
458
  fill: var(--stcWhite);
@@ -371,6 +470,9 @@
371
470
  fill: var(--buttonDown);
372
471
  }
373
472
  .mfui-button_type_text.mfui-button_theme_black {
473
+ width: -webkit-fit-content;
474
+ width: -moz-fit-content;
475
+ width: fit-content;
374
476
  color: var(--stcBlack);
375
477
  background-color: transparent;
376
478
  }
package/dist/lib/components/Button/Button.js CHANGED
@@ -122,6 +122,7 @@ var Button = function Button(_ref) {
122
122
  setTouch = _React$useState2[1];
123
123
 
124
124
  var ElementType = href ? 'a' : 'button';
125
+ var displayArrow = showArrow && !icon;
125
126
 
126
127
  var handleClick = _react["default"].useCallback(function (e) {
127
128
  if (disabled) {
@@ -169,10 +170,10 @@ var Button = function Button(_ref) {
169
170
  className: cn('text', {
170
171
  ellipsis: ellipsis
171
172
  })
172
- }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.text)), children), !icon && showArrow && /*#__PURE__*/_react["default"].createElement(Arrow, (0, _extends2["default"])({
173
+ }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.text)), children), displayArrow && /*#__PURE__*/_react["default"].createElement(Arrow, (0, _extends2["default"])({
173
174
  className: cn('icon-arrow')
174
175
  }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.arrow))));
175
- }, [children, icon, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.content, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.text, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.arrow, ellipsis, showLoader, contentClassName, showArrow]);
176
+ }, [children, icon, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.content, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.text, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.arrow, ellipsis, showLoader, contentClassName, displayArrow]);
176
177
 
177
178
  var contentType = _react["default"].useMemo(function () {
178
179
  switch (true) {
@@ -237,7 +238,8 @@ var Button = function Button(_ref) {
237
238
  'full-width': fullWidth,
238
239
  loading: showLoader,
239
240
  'no-touch': !isTouch,
240
- 'content-type': contentType
241
+ 'content-type': contentType,
242
+ 'has-arrow': displayArrow
241
243
  }, classNameValue),
242
244
  href: href,
243
245
  download: !!href && download,
package/dist/lib/components/Tooltip/Tooltip.css CHANGED
@@ -32,25 +32,6 @@
32
32
  left: 0;
33
33
  z-index: -1;
34
34
  }
35
- .mfui-tooltip__top,
36
- .mfui-tooltip__main-content {
37
- display: -webkit-box;
38
- display: -ms-flexbox;
39
- display: flex;
40
- -webkit-box-orient: vertical;
41
- -webkit-box-direction: normal;
42
- -ms-flex-direction: column;
43
- flex-direction: column;
44
- gap: 8px;
45
- }
46
- @media screen and (min-width: 768px) {
47
- .mfui-tooltip__top {
48
- gap: 12px;
49
- }
50
- }
51
- .mfui-tooltip__top_margin {
52
- margin-bottom: 16px;
53
- }
54
35
  .mfui-tooltip__arrow-container {
55
36
  position: absolute;
56
37
  }
@@ -87,15 +68,8 @@
87
68
  line-height: 18px;
88
69
  }
89
70
  }
90
- .mfui-tooltip__bottom {
91
- display: -webkit-box;
92
- display: -ms-flexbox;
93
- display: flex;
94
- -webkit-box-orient: vertical;
95
- -webkit-box-direction: normal;
96
- -ms-flex-direction: column;
97
- flex-direction: column;
98
- gap: 16px;
71
+ .mfui-tooltip__text_margin {
72
+ margin-top: 8px;
99
73
  }
100
74
  .mfui-tooltip__button,
101
75
  .mfui-tooltip__close-button {
@@ -127,6 +101,9 @@
127
101
  line-height: 14px;
128
102
  }
129
103
  }
104
+ .mfui-tooltip__button_margin {
105
+ margin-top: 8px;
106
+ }
130
107
  .mfui-tooltip__button:hover {
131
108
  color: var(--buttonHoverGreen);
132
109
  }
@@ -176,6 +153,14 @@
176
153
  transition: 300ms;
177
154
  fill: var(--brandGreen);
178
155
  }
156
+ .mfui-tooltip__addititonal-content_margin {
157
+ margin-top: 16px;
158
+ }
159
+ @media screen and (max-width: 767px) {
160
+ .mfui-tooltip__addititonal-content_margin {
161
+ margin-top: 12px;
162
+ }
163
+ }
179
164
  .mfui-tooltip_small .mfui-tooltip__content {
180
165
  display: -webkit-box;
181
166
  display: -ms-flexbox;
package/dist/lib/components/Tooltip/Tooltip.js CHANGED
@@ -174,8 +174,7 @@ var Tooltip = function Tooltip(_ref) {
174
174
  var portalElem = _react["default"].useRef(null);
175
175
 
176
176
  var isBigSize = size === Size.BIG;
177
- var hasMainContent = !!title || !!text;
178
- var hasTopContent = hasMainContent || !!buttonText;
177
+ var hasTextMargin = !!title && isBigSize;
179
178
  var clickEvent = (0, _react.useMemo)(function () {
180
179
  return isTouchDevice ? TOUCH_KEY : MOUSE_KEY;
181
180
  }, [isTouchDevice]);
@@ -334,31 +333,33 @@ var Tooltip = function Tooltip(_ref) {
334
333
  []);
335
334
  var renderedText = (0, _react.useMemo)(function () {
336
335
  return /*#__PURE__*/_react["default"].createElement("div", {
337
- className: cn('text')
336
+ className: cn('text', {
337
+ margin: hasTextMargin
338
+ })
338
339
  }, text);
339
- }, [text]);
340
+ }, [text, hasTextMargin]);
340
341
  var renderedFullContent = (0, _react.useMemo)(function () {
341
- return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, hasTopContent && /*#__PURE__*/_react["default"].createElement("div", {
342
- className: cn('top', {
343
- margin: !!children
344
- })
345
- }, hasMainContent && /*#__PURE__*/_react["default"].createElement("div", {
346
- className: cn('main-content')
347
- }, !!title && /*#__PURE__*/_react["default"].createElement(_Header["default"], {
342
+ var hasButtonMargin = !!title || !!text;
343
+ var hasChildrenMargin = hasButtonMargin || !!buttonText;
344
+ return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, !!title && /*#__PURE__*/_react["default"].createElement(_Header["default"], {
348
345
  className: cn('title'),
349
346
  as: "h5",
350
347
  space: "tight"
351
- }, title), !!text && renderedText), !!buttonText && /*#__PURE__*/_react["default"].createElement("button", (0, _extends2["default"])({
348
+ }, title), !!text && renderedText, !!buttonText && /*#__PURE__*/_react["default"].createElement("button", (0, _extends2["default"])({
352
349
  type: "button",
353
- className: cn('button')
350
+ className: cn('button', {
351
+ margin: hasButtonMargin
352
+ })
354
353
  }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.button), {
355
354
  onClick: onClick
356
355
  }), buttonText, /*#__PURE__*/_react["default"].createElement(RightArrow, {
357
356
  className: cn('button-arrow')
358
- }))), !!children && /*#__PURE__*/_react["default"].createElement("div", {
359
- className: cn('addititonal-content')
357
+ })), !!children && /*#__PURE__*/_react["default"].createElement("div", {
358
+ className: cn('addititonal-content', {
359
+ margin: hasChildrenMargin
360
+ })
360
361
  }, children));
361
- }, [title, text, buttonText, children, dataAttrs, hasTopContent, hasMainContent, renderedText, onClick]);
362
+ }, [title, text, buttonText, children, dataAttrs, renderedText, onClick]);
362
363
 
363
364
  var template = /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
364
365
  className: cn({
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@megafon/ui-core",
3
- "version": "4.11.0",
3
+ "version": "4.11.2",
4
4
  "files": [
5
5
  "dist",
6
6
  "styles"
@@ -54,7 +54,7 @@
54
54
  "@babel/preset-env": "^7.8.6",
55
55
  "@babel/preset-react": "^7.8.3",
56
56
  "@babel/preset-typescript": "^7.8.3",
57
- "@megafon/ui-icons": "^2.4.2",
57
+ "@megafon/ui-icons": "^2.5.0",
58
58
  "@svgr/core": "^2.4.1",
59
59
  "@testing-library/jest-dom": "5.16.2",
60
60
  "@testing-library/react": "12.1.2",
@@ -100,5 +100,5 @@
100
100
  "react-popper": "^2.2.3",
101
101
  "swiper": "^6.5.6"
102
102
  },
103
- "gitHead": "3fecd142b2a2dac4027b90855c8b6a933ae30d61"
103
+ "gitHead": "aae2e0e7bf9776c1fa4f7083c668074a40923639"
104
104
  }