@megafon/ui-core 5.1.0 → 5.1.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 (14) hide show
  1. package/CHANGELOG.md +34 -1
  2. package/dist/es/components/Accordion/Accordion.css +1 -1
  3. package/dist/es/components/Badges/components/PromoBadge/PromoBadge.css +4 -0
  4. package/dist/es/components/Badges/components/PromoBadge/PromoBadge.d.ts +1 -0
  5. package/dist/es/components/Badges/components/PromoBadge/PromoBadge.js +2 -1
  6. package/dist/es/components/Button/Button.css +40 -40
  7. package/dist/es/components/Tabs/Tabs.js +8 -1
  8. package/dist/lib/components/Accordion/Accordion.css +1 -1
  9. package/dist/lib/components/Badges/components/PromoBadge/PromoBadge.css +4 -0
  10. package/dist/lib/components/Badges/components/PromoBadge/PromoBadge.d.ts +1 -0
  11. package/dist/lib/components/Badges/components/PromoBadge/PromoBadge.js +2 -1
  12. package/dist/lib/components/Button/Button.css +40 -40
  13. package/dist/lib/components/Tabs/Tabs.js +8 -1
  14. package/package.json +5 -9
package/CHANGELOG.md CHANGED
@@ -3,6 +3,33 @@
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
+ ## [5.1.2](https://hq-gitlab.megafon.ru/site-portal/libraries/javascript/megafon-ui/compare/@megafon/ui-core@5.1.0...@megafon/ui-core@5.1.2) (2023-08-21)
7
+
8
+
9
+ ### Bug Fixes
10
+
11
+ * **accordion:** reduced mobile paddings ([35c207a](https://hq-gitlab.megafon.ru/site-portal/libraries/javascript/megafon-ui/commit/35c207a1e704023a2553f4a0c4ed4a928d3d5fd9))
12
+ * **badge:** new color purple gradient ([fbaec53](https://hq-gitlab.megafon.ru/site-portal/libraries/javascript/megafon-ui/commit/fbaec53961cef1e2683ea54676f6ded0f6514841))
13
+ * **button:** fix redefining styles ([d0002f9](https://hq-gitlab.megafon.ru/site-portal/libraries/javascript/megafon-ui/commit/d0002f90d6dbd7b120b5f88b2dac129b11593ccb))
14
+ * **tabs:** fix underfline width in tabs ([57b8258](https://hq-gitlab.megafon.ru/site-portal/libraries/javascript/megafon-ui/commit/57b8258584c72064c3d46c2ef95c2f1dd314ae3a))
15
+
16
+
17
+
18
+
19
+
20
+ ## [5.1.1](https://hq-gitlab.megafon.ru/site-portal/libraries/javascript/megafon-ui/compare/@megafon/ui-core@5.1.0...@megafon/ui-core@5.1.1) (2023-07-18)
21
+
22
+
23
+ ### Bug Fixes
24
+
25
+ * **accordion:** reduced mobile paddings ([35c207a](https://hq-gitlab.megafon.ru/site-portal/libraries/javascript/megafon-ui/commit/35c207a1e704023a2553f4a0c4ed4a928d3d5fd9))
26
+ * **badge:** new color purple gradient ([fbaec53](https://hq-gitlab.megafon.ru/site-portal/libraries/javascript/megafon-ui/commit/fbaec53961cef1e2683ea54676f6ded0f6514841))
27
+ * **button:** fix redefining styles ([d0002f9](https://hq-gitlab.megafon.ru/site-portal/libraries/javascript/megafon-ui/commit/d0002f90d6dbd7b120b5f88b2dac129b11593ccb))
28
+
29
+
30
+
31
+
32
+
6
33
  # [5.1.0](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@5.0.1...@megafon/ui-core@5.1.0) (2023-07-10)
7
34
 
8
35
 
@@ -53,7 +80,13 @@ How to migrate:
53
80
  * **tile:** remove shadow prop deprecated values: low, high
54
81
 
55
82
  How to migrate:
56
- - don't use value "low" (use what better sutable for specific places)
83
+ - don't use value "low" (use what better suitable for specific places)
84
+ - use "pressed" instead of "high"
85
+
86
+ * **notification:** remove shadowLevel prop deprecated values: low, high
87
+
88
+ How to migrate:
89
+ - don't use value "low" (use what better suitable for specific places)
57
90
  - use "pressed" instead of "high"
58
91
 
59
92
 
package/dist/es/components/Accordion/Accordion.css CHANGED
@@ -12,7 +12,7 @@
12
12
  }
13
13
  .mfui-accordion__title-wrap {
14
14
  position: relative;
15
- padding: 24px 44px 24px 16px;
15
+ padding: 16px 44px 16px 16px;
16
16
  border-radius: 12px;
17
17
  outline: none;
18
18
  cursor: pointer;
package/dist/es/components/Badges/components/PromoBadge/PromoBadge.css CHANGED
@@ -33,6 +33,10 @@
33
33
  .mfui-promo-badge_color_warm-red {
34
34
  background-color: var(--warmRedC);
35
35
  }
36
+ .mfui-promo-badge_color_gradient-purple {
37
+ color: var(--stcWhite);
38
+ background: linear-gradient(126.8deg, #A336BE 21%, #363078 78%);
39
+ }
36
40
  .mfui-promo-badge_type_hit {
37
41
  background-color: var(--warmRedC);
38
42
  }
package/dist/es/components/Badges/components/PromoBadge/PromoBadge.d.ts CHANGED
@@ -7,6 +7,7 @@ export declare const PromoBadgeColors: {
7
7
  readonly REFLEX_BLUE: "reflex-blue";
8
8
  readonly SYSTEM_BLUE: "system-blue";
9
9
  readonly WARM_RED: "warm-red";
10
+ readonly GRADIENT_PURPLE: "gradient-purple";
10
11
  };
11
12
  declare type PromoBadgeColorsType = typeof PromoBadgeColors[keyof typeof PromoBadgeColors];
12
13
  export declare const PromoBadgeTypes: {
package/dist/es/components/Badges/components/PromoBadge/PromoBadge.js CHANGED
@@ -10,7 +10,8 @@ export var PromoBadgeColors = {
10
10
  BRAND_PURPLE: 'brand-purple',
11
11
  REFLEX_BLUE: 'reflex-blue',
12
12
  SYSTEM_BLUE: 'system-blue',
13
- WARM_RED: 'warm-red'
13
+ WARM_RED: 'warm-red',
14
+ GRADIENT_PURPLE: 'gradient-purple'
14
15
  }; // DEPRECATED
15
16
 
16
17
  export var PromoBadgeTypes = {
package/dist/es/components/Button/Button.css CHANGED
@@ -90,120 +90,120 @@
90
90
  .mfui-button_type_text {
91
91
  padding: 0;
92
92
  }
93
- @media screen and (min-width: 1280px) {
94
- .mfui-button_size-wide_extra-small {
93
+ @media screen and (min-width: 1024px) {
94
+ .mfui-button_size-desktop_extra-small {
95
95
  min-width: 24px;
96
96
  height: 24px;
97
97
  padding: 0 16px;
98
98
  font-size: 12px;
99
99
  line-height: 14px;
100
100
  }
101
- .mfui-button_size-wide_extra-small .mfui-button__icon,
102
- .mfui-button_size-wide_extra-small .mfui-button__icon-arrow {
101
+ .mfui-button_size-desktop_extra-small .mfui-button__icon,
102
+ .mfui-button_size-desktop_extra-small .mfui-button__icon-arrow {
103
103
  width: 20px;
104
104
  height: 20px;
105
105
  }
106
- .mfui-button_size-wide_small {
106
+ .mfui-button_size-desktop_small {
107
107
  min-width: 40px;
108
108
  height: 40px;
109
109
  padding: 0 24px;
110
110
  }
111
- .mfui-button_size-wide_small .mfui-button__icon,
112
- .mfui-button_size-wide_small .mfui-button__icon-arrow {
111
+ .mfui-button_size-desktop_small .mfui-button__icon,
112
+ .mfui-button_size-desktop_small .mfui-button__icon-arrow {
113
113
  width: 20px;
114
114
  height: 20px;
115
115
  }
116
- .mfui-button_size-wide_medium {
116
+ .mfui-button_size-desktop_medium {
117
117
  min-width: 52px;
118
118
  height: 52px;
119
119
  }
120
- .mfui-button_size-wide_medium .mfui-button__icon,
121
- .mfui-button_size-wide_medium .mfui-button__icon-arrow {
120
+ .mfui-button_size-desktop_medium .mfui-button__icon,
121
+ .mfui-button_size-desktop_medium .mfui-button__icon-arrow {
122
122
  width: 32px;
123
123
  height: 32px;
124
124
  }
125
- .mfui-button_size-wide_large {
125
+ .mfui-button_size-desktop_large {
126
126
  min-width: 60px;
127
127
  height: 60px;
128
128
  }
129
- .mfui-button_size-wide_large .mfui-button__icon,
130
- .mfui-button_size-wide_large .mfui-button__icon-arrow {
129
+ .mfui-button_size-desktop_large .mfui-button__icon,
130
+ .mfui-button_size-desktop_large .mfui-button__icon-arrow {
131
131
  width: 32px;
132
132
  height: 32px;
133
133
  }
134
- .mfui-button_size-wide_extra-small.mfui-buttonhas-arrow {
134
+ .mfui-button_size-desktop_extra-small.mfui-buttonhas-arrow {
135
135
  padding: 0 8px;
136
136
  }
137
- .mfui-button_size-wide_extra-small.mfui-buttonhas-arrow .mfui-button__content {
137
+ .mfui-button_size-desktop_extra-small.mfui-buttonhas-arrow .mfui-button__content {
138
138
  padding-left: 12px;
139
139
  }
140
- .mfui-button_size-wide_medium.mfui-buttonhas-arrow,
141
- .mfui-button_size-wide_large.mfui-buttonhas-arrow {
140
+ .mfui-button_size-desktop_medium.mfui-buttonhas-arrow,
141
+ .mfui-button_size-desktop_large.mfui-buttonhas-arrow {
142
142
  padding: 0 24px;
143
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 {
144
+ .mfui-button_size-desktop_small.mfui-buttonhas-arrow .mfui-button__content,
145
+ .mfui-button_size-desktop_medium.mfui-buttonhas-arrow .mfui-button__content,
146
+ .mfui-button_size-desktop_large.mfui-buttonhas-arrow .mfui-button__content {
147
147
  padding-left: 16px;
148
148
  }
149
149
  .mfui-button_type_text {
150
150
  padding: 0;
151
151
  }
152
152
  }
153
- @media screen and (min-width: 1024px) {
154
- .mfui-button_size-desktop_extra-small {
153
+ @media screen and (min-width: 1280px) {
154
+ .mfui-button_size-wide_extra-small {
155
155
  min-width: 24px;
156
156
  height: 24px;
157
157
  padding: 0 16px;
158
158
  font-size: 12px;
159
159
  line-height: 14px;
160
160
  }
161
- .mfui-button_size-desktop_extra-small .mfui-button__icon,
162
- .mfui-button_size-desktop_extra-small .mfui-button__icon-arrow {
161
+ .mfui-button_size-wide_extra-small .mfui-button__icon,
162
+ .mfui-button_size-wide_extra-small .mfui-button__icon-arrow {
163
163
  width: 20px;
164
164
  height: 20px;
165
165
  }
166
- .mfui-button_size-desktop_small {
166
+ .mfui-button_size-wide_small {
167
167
  min-width: 40px;
168
168
  height: 40px;
169
169
  padding: 0 24px;
170
170
  }
171
- .mfui-button_size-desktop_small .mfui-button__icon,
172
- .mfui-button_size-desktop_small .mfui-button__icon-arrow {
171
+ .mfui-button_size-wide_small .mfui-button__icon,
172
+ .mfui-button_size-wide_small .mfui-button__icon-arrow {
173
173
  width: 20px;
174
174
  height: 20px;
175
175
  }
176
- .mfui-button_size-desktop_medium {
176
+ .mfui-button_size-wide_medium {
177
177
  min-width: 52px;
178
178
  height: 52px;
179
179
  }
180
- .mfui-button_size-desktop_medium .mfui-button__icon,
181
- .mfui-button_size-desktop_medium .mfui-button__icon-arrow {
180
+ .mfui-button_size-wide_medium .mfui-button__icon,
181
+ .mfui-button_size-wide_medium .mfui-button__icon-arrow {
182
182
  width: 32px;
183
183
  height: 32px;
184
184
  }
185
- .mfui-button_size-desktop_large {
185
+ .mfui-button_size-wide_large {
186
186
  min-width: 60px;
187
187
  height: 60px;
188
188
  }
189
- .mfui-button_size-desktop_large .mfui-button__icon,
190
- .mfui-button_size-desktop_large .mfui-button__icon-arrow {
189
+ .mfui-button_size-wide_large .mfui-button__icon,
190
+ .mfui-button_size-wide_large .mfui-button__icon-arrow {
191
191
  width: 32px;
192
192
  height: 32px;
193
193
  }
194
- .mfui-button_size-desktop_extra-small.mfui-buttonhas-arrow {
194
+ .mfui-button_size-wide_extra-small.mfui-buttonhas-arrow {
195
195
  padding: 0 8px;
196
196
  }
197
- .mfui-button_size-desktop_extra-small.mfui-buttonhas-arrow .mfui-button__content {
197
+ .mfui-button_size-wide_extra-small.mfui-buttonhas-arrow .mfui-button__content {
198
198
  padding-left: 12px;
199
199
  }
200
- .mfui-button_size-desktop_medium.mfui-buttonhas-arrow,
201
- .mfui-button_size-desktop_large.mfui-buttonhas-arrow {
200
+ .mfui-button_size-wide_medium.mfui-buttonhas-arrow,
201
+ .mfui-button_size-wide_large.mfui-buttonhas-arrow {
202
202
  padding: 0 24px;
203
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 {
204
+ .mfui-button_size-wide_small.mfui-buttonhas-arrow .mfui-button__content,
205
+ .mfui-button_size-wide_medium.mfui-buttonhas-arrow .mfui-button__content,
206
+ .mfui-button_size-wide_large.mfui-buttonhas-arrow .mfui-button__content {
207
207
  padding-left: 16px;
208
208
  }
209
209
  .mfui-button_type_text {
package/dist/es/components/Tabs/Tabs.js CHANGED
@@ -378,12 +378,19 @@ var Tabs = function Tabs(_ref) {
378
378
  }
379
379
 
380
380
  if (isChildrenLengthDiff) {
381
+ var activeTabNode = tabsRef.current[currentIndex];
382
+
383
+ var _activeTabNode$getBou = activeTabNode.getBoundingClientRect(),
384
+ width = _activeTabNode$getBou.width;
385
+
381
386
  handleFromEdge(swiperInstance);
387
+ setActiveTabWidth(width);
388
+ calculateUnderline();
382
389
  return;
383
390
  }
384
391
 
385
392
  handleFromEdge(swiperInstance);
386
- }, [swiperInstance, isChildrenLengthDiff, handleFromEdge]);
393
+ }, [swiperInstance, isChildrenLengthDiff, handleFromEdge, currentIndex, calculateUnderline]);
387
394
  return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
388
395
  className: cn({
389
396
  size: size,
package/dist/lib/components/Accordion/Accordion.css CHANGED
@@ -12,7 +12,7 @@
12
12
  }
13
13
  .mfui-accordion__title-wrap {
14
14
  position: relative;
15
- padding: 24px 44px 24px 16px;
15
+ padding: 16px 44px 16px 16px;
16
16
  border-radius: 12px;
17
17
  outline: none;
18
18
  cursor: pointer;
package/dist/lib/components/Badges/components/PromoBadge/PromoBadge.css CHANGED
@@ -33,6 +33,10 @@
33
33
  .mfui-promo-badge_color_warm-red {
34
34
  background-color: var(--warmRedC);
35
35
  }
36
+ .mfui-promo-badge_color_gradient-purple {
37
+ color: var(--stcWhite);
38
+ background: linear-gradient(126.8deg, #A336BE 21%, #363078 78%);
39
+ }
36
40
  .mfui-promo-badge_type_hit {
37
41
  background-color: var(--warmRedC);
38
42
  }
package/dist/lib/components/Badges/components/PromoBadge/PromoBadge.d.ts CHANGED
@@ -7,6 +7,7 @@ export declare const PromoBadgeColors: {
7
7
  readonly REFLEX_BLUE: "reflex-blue";
8
8
  readonly SYSTEM_BLUE: "system-blue";
9
9
  readonly WARM_RED: "warm-red";
10
+ readonly GRADIENT_PURPLE: "gradient-purple";
10
11
  };
11
12
  declare type PromoBadgeColorsType = typeof PromoBadgeColors[keyof typeof PromoBadgeColors];
12
13
  export declare const PromoBadgeTypes: {
package/dist/lib/components/Badges/components/PromoBadge/PromoBadge.js CHANGED
@@ -29,7 +29,8 @@ var PromoBadgeColors = {
29
29
  BRAND_PURPLE: 'brand-purple',
30
30
  REFLEX_BLUE: 'reflex-blue',
31
31
  SYSTEM_BLUE: 'system-blue',
32
- WARM_RED: 'warm-red'
32
+ WARM_RED: 'warm-red',
33
+ GRADIENT_PURPLE: 'gradient-purple'
33
34
  }; // DEPRECATED
34
35
 
35
36
  exports.PromoBadgeColors = PromoBadgeColors;
package/dist/lib/components/Button/Button.css CHANGED
@@ -90,120 +90,120 @@
90
90
  .mfui-button_type_text {
91
91
  padding: 0;
92
92
  }
93
- @media screen and (min-width: 1280px) {
94
- .mfui-button_size-wide_extra-small {
93
+ @media screen and (min-width: 1024px) {
94
+ .mfui-button_size-desktop_extra-small {
95
95
  min-width: 24px;
96
96
  height: 24px;
97
97
  padding: 0 16px;
98
98
  font-size: 12px;
99
99
  line-height: 14px;
100
100
  }
101
- .mfui-button_size-wide_extra-small .mfui-button__icon,
102
- .mfui-button_size-wide_extra-small .mfui-button__icon-arrow {
101
+ .mfui-button_size-desktop_extra-small .mfui-button__icon,
102
+ .mfui-button_size-desktop_extra-small .mfui-button__icon-arrow {
103
103
  width: 20px;
104
104
  height: 20px;
105
105
  }
106
- .mfui-button_size-wide_small {
106
+ .mfui-button_size-desktop_small {
107
107
  min-width: 40px;
108
108
  height: 40px;
109
109
  padding: 0 24px;
110
110
  }
111
- .mfui-button_size-wide_small .mfui-button__icon,
112
- .mfui-button_size-wide_small .mfui-button__icon-arrow {
111
+ .mfui-button_size-desktop_small .mfui-button__icon,
112
+ .mfui-button_size-desktop_small .mfui-button__icon-arrow {
113
113
  width: 20px;
114
114
  height: 20px;
115
115
  }
116
- .mfui-button_size-wide_medium {
116
+ .mfui-button_size-desktop_medium {
117
117
  min-width: 52px;
118
118
  height: 52px;
119
119
  }
120
- .mfui-button_size-wide_medium .mfui-button__icon,
121
- .mfui-button_size-wide_medium .mfui-button__icon-arrow {
120
+ .mfui-button_size-desktop_medium .mfui-button__icon,
121
+ .mfui-button_size-desktop_medium .mfui-button__icon-arrow {
122
122
  width: 32px;
123
123
  height: 32px;
124
124
  }
125
- .mfui-button_size-wide_large {
125
+ .mfui-button_size-desktop_large {
126
126
  min-width: 60px;
127
127
  height: 60px;
128
128
  }
129
- .mfui-button_size-wide_large .mfui-button__icon,
130
- .mfui-button_size-wide_large .mfui-button__icon-arrow {
129
+ .mfui-button_size-desktop_large .mfui-button__icon,
130
+ .mfui-button_size-desktop_large .mfui-button__icon-arrow {
131
131
  width: 32px;
132
132
  height: 32px;
133
133
  }
134
- .mfui-button_size-wide_extra-small.mfui-buttonhas-arrow {
134
+ .mfui-button_size-desktop_extra-small.mfui-buttonhas-arrow {
135
135
  padding: 0 8px;
136
136
  }
137
- .mfui-button_size-wide_extra-small.mfui-buttonhas-arrow .mfui-button__content {
137
+ .mfui-button_size-desktop_extra-small.mfui-buttonhas-arrow .mfui-button__content {
138
138
  padding-left: 12px;
139
139
  }
140
- .mfui-button_size-wide_medium.mfui-buttonhas-arrow,
141
- .mfui-button_size-wide_large.mfui-buttonhas-arrow {
140
+ .mfui-button_size-desktop_medium.mfui-buttonhas-arrow,
141
+ .mfui-button_size-desktop_large.mfui-buttonhas-arrow {
142
142
  padding: 0 24px;
143
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 {
144
+ .mfui-button_size-desktop_small.mfui-buttonhas-arrow .mfui-button__content,
145
+ .mfui-button_size-desktop_medium.mfui-buttonhas-arrow .mfui-button__content,
146
+ .mfui-button_size-desktop_large.mfui-buttonhas-arrow .mfui-button__content {
147
147
  padding-left: 16px;
148
148
  }
149
149
  .mfui-button_type_text {
150
150
  padding: 0;
151
151
  }
152
152
  }
153
- @media screen and (min-width: 1024px) {
154
- .mfui-button_size-desktop_extra-small {
153
+ @media screen and (min-width: 1280px) {
154
+ .mfui-button_size-wide_extra-small {
155
155
  min-width: 24px;
156
156
  height: 24px;
157
157
  padding: 0 16px;
158
158
  font-size: 12px;
159
159
  line-height: 14px;
160
160
  }
161
- .mfui-button_size-desktop_extra-small .mfui-button__icon,
162
- .mfui-button_size-desktop_extra-small .mfui-button__icon-arrow {
161
+ .mfui-button_size-wide_extra-small .mfui-button__icon,
162
+ .mfui-button_size-wide_extra-small .mfui-button__icon-arrow {
163
163
  width: 20px;
164
164
  height: 20px;
165
165
  }
166
- .mfui-button_size-desktop_small {
166
+ .mfui-button_size-wide_small {
167
167
  min-width: 40px;
168
168
  height: 40px;
169
169
  padding: 0 24px;
170
170
  }
171
- .mfui-button_size-desktop_small .mfui-button__icon,
172
- .mfui-button_size-desktop_small .mfui-button__icon-arrow {
171
+ .mfui-button_size-wide_small .mfui-button__icon,
172
+ .mfui-button_size-wide_small .mfui-button__icon-arrow {
173
173
  width: 20px;
174
174
  height: 20px;
175
175
  }
176
- .mfui-button_size-desktop_medium {
176
+ .mfui-button_size-wide_medium {
177
177
  min-width: 52px;
178
178
  height: 52px;
179
179
  }
180
- .mfui-button_size-desktop_medium .mfui-button__icon,
181
- .mfui-button_size-desktop_medium .mfui-button__icon-arrow {
180
+ .mfui-button_size-wide_medium .mfui-button__icon,
181
+ .mfui-button_size-wide_medium .mfui-button__icon-arrow {
182
182
  width: 32px;
183
183
  height: 32px;
184
184
  }
185
- .mfui-button_size-desktop_large {
185
+ .mfui-button_size-wide_large {
186
186
  min-width: 60px;
187
187
  height: 60px;
188
188
  }
189
- .mfui-button_size-desktop_large .mfui-button__icon,
190
- .mfui-button_size-desktop_large .mfui-button__icon-arrow {
189
+ .mfui-button_size-wide_large .mfui-button__icon,
190
+ .mfui-button_size-wide_large .mfui-button__icon-arrow {
191
191
  width: 32px;
192
192
  height: 32px;
193
193
  }
194
- .mfui-button_size-desktop_extra-small.mfui-buttonhas-arrow {
194
+ .mfui-button_size-wide_extra-small.mfui-buttonhas-arrow {
195
195
  padding: 0 8px;
196
196
  }
197
- .mfui-button_size-desktop_extra-small.mfui-buttonhas-arrow .mfui-button__content {
197
+ .mfui-button_size-wide_extra-small.mfui-buttonhas-arrow .mfui-button__content {
198
198
  padding-left: 12px;
199
199
  }
200
- .mfui-button_size-desktop_medium.mfui-buttonhas-arrow,
201
- .mfui-button_size-desktop_large.mfui-buttonhas-arrow {
200
+ .mfui-button_size-wide_medium.mfui-buttonhas-arrow,
201
+ .mfui-button_size-wide_large.mfui-buttonhas-arrow {
202
202
  padding: 0 24px;
203
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 {
204
+ .mfui-button_size-wide_small.mfui-buttonhas-arrow .mfui-button__content,
205
+ .mfui-button_size-wide_medium.mfui-buttonhas-arrow .mfui-button__content,
206
+ .mfui-button_size-wide_large.mfui-buttonhas-arrow .mfui-button__content {
207
207
  padding-left: 16px;
208
208
  }
209
209
  .mfui-button_type_text {
package/dist/lib/components/Tabs/Tabs.js CHANGED
@@ -409,12 +409,19 @@ var Tabs = function Tabs(_ref) {
409
409
  }
410
410
 
411
411
  if (isChildrenLengthDiff) {
412
+ var activeTabNode = tabsRef.current[currentIndex];
413
+
414
+ var _activeTabNode$getBou = activeTabNode.getBoundingClientRect(),
415
+ width = _activeTabNode$getBou.width;
416
+
412
417
  handleFromEdge(swiperInstance);
418
+ setActiveTabWidth(width);
419
+ calculateUnderline();
413
420
  return;
414
421
  }
415
422
 
416
423
  handleFromEdge(swiperInstance);
417
- }, [swiperInstance, isChildrenLengthDiff, handleFromEdge]);
424
+ }, [swiperInstance, isChildrenLengthDiff, handleFromEdge, currentIndex, calculateUnderline]);
418
425
  return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
419
426
  className: cn({
420
427
  size: size,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@megafon/ui-core",
3
- "version": "5.1.0",
3
+ "version": "5.1.2",
4
4
  "files": [
5
5
  "dist",
6
6
  "styles"
@@ -8,10 +8,6 @@
8
8
  "main": "dist/lib/index.js",
9
9
  "module": "dist/es/index.js",
10
10
  "typings": "dist/lib/index.d.ts",
11
- "repository": {
12
- "type": "git",
13
- "url": "git+https://github.com/MegafonWebLab/megafon-ui.git"
14
- },
15
11
  "sideEffects": [
16
12
  "*.css",
17
13
  "*.less"
@@ -22,7 +18,7 @@
22
18
  "build": "gulp build",
23
19
  "cleanDist": "rm -rf dist styles",
24
20
  "coverage": "yarn coverage:unit",
25
- "coverage:unit": "jest --ci --collectCoverage --coverageDirectory=coverage",
21
+ "coverage:unit": "jest --coverage",
26
22
  "typecheck": "tsc --noEmit -p .",
27
23
  "prettier:check": "prettier --list-different \"src/**/*.{js,jsx,ts,tsx}\"",
28
24
  "prettier:fix": "prettier --write \"src/**/*.{js,jsx,ts,tsx}\"",
@@ -54,7 +50,7 @@
54
50
  "@babel/preset-env": "^7.8.6",
55
51
  "@babel/preset-react": "^7.8.3",
56
52
  "@babel/preset-typescript": "^7.8.3",
57
- "@megafon/ui-icons": "^2.12.0",
53
+ "@megafon/ui-icons": "^2.14.0",
58
54
  "@svgr/core": "^2.4.1",
59
55
  "@testing-library/jest-dom": "5.16.2",
60
56
  "@testing-library/react": "12.1.2",
@@ -89,7 +85,7 @@
89
85
  "dependencies": {
90
86
  "@babel/runtime": "^7.8.4",
91
87
  "@datepicker-react/hooks": "^2.7.0",
92
- "@megafon/ui-helpers": "^2.5.0",
88
+ "@megafon/ui-helpers": "^2.5.2",
93
89
  "@popperjs/core": "^2.5.3",
94
90
  "core-js": "^3.6.4",
95
91
  "date-fns": "^2.16.1",
@@ -100,5 +96,5 @@
100
96
  "react-popper": "^2.2.3",
101
97
  "swiper": "^6.5.6"
102
98
  },
103
- "gitHead": "749670bce09be52dc9e8a37385255a06c4cef1de"
99
+ "gitHead": "5c1ab056af4f3c2ced942d4e4b820e049b671a5d"
104
100
  }