@megafon/ui-core 2.1.1 → 2.2.0

package/CHANGELOG.md

@@ -3,6 +3,51 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.2.0](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@2.1.4...@megafon/ui-core@2.2.0) (2021-12-29)
+
+
+### Features
+
+* **radiobutton:** add dataAttrs prop ([3f8d0b4](https://github.com/MegafonWebLab/megafon-ui/commit/3f8d0b4c4ec4a6ca301ab44feed2842ec8e54f3a))
+
+
+
+
+
+## [2.1.4](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@2.1.3...@megafon/ui-core@2.1.4) (2021-12-20)
+
+
+### Bug Fixes
+
+* **colors:** add hover colors to system group ([634ac03](https://github.com/MegafonWebLab/megafon-ui/commit/634ac034445fdcd08b60ff056f75683025cb6d49))
+* **tabs:** fix active tab underline width ([4499399](https://github.com/MegafonWebLab/megafon-ui/commit/449939942730143712a92930a279a8b6fc17a012))
+
+
+
+
+
+## [2.1.3](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@2.1.2...@megafon/ui-core@2.1.3) (2021-12-14)
+
+
+### Bug Fixes
+
+* **contentarea:** fix backgroundColor and innerBackgroundColor props values ([d6004a4](https://github.com/MegafonWebLab/megafon-ui/commit/d6004a493b623cced4c453d69b0fd16d3cfbef43))
+
+
+
+
+
+## [2.1.2](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@2.1.1...@megafon/ui-core@2.1.2) (2021-12-14)
+
+
+### Bug Fixes
+
+* **paragraph:** rollback deprecated color props clearWhite ([ee4e5a9](https://github.com/MegafonWebLab/megafon-ui/commit/ee4e5a9ce158a4df68e437d316e37ed6e87df664))
+
+
+
+
+
 ## [2.1.1](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@2.1.0...@megafon/ui-core@2.1.1) (2021-12-13)
 
 

package/dist/es/colors/Colors.css

@@ -70,13 +70,13 @@ h5 {
   }
 }
 .colors__list {
+  -webkit-box-pack: space-evenly;
+      -ms-flex-pack: space-evenly;
+          justify-content: space-evenly;
   padding-bottom: 12px;
 }
 @media screen and (max-width: 1023px) {
   .colors__list {
-    -webkit-box-pack: space-evenly;
-        -ms-flex-pack: space-evenly;
-            justify-content: space-evenly;
     -webkit-box-ordinal-group: 3;
         -ms-flex-order: 2;
             order: 2;

package/dist/es/colors/Colors.js

@@ -229,7 +229,7 @@ var Colors = function Colors() {
     mobile: "12",
     tablet: "12"
   }, renderColorBlock(secondary)), /*#__PURE__*/React.createElement(GridColumn, {
-    all: "5",
+    all: "10",
     mobile: "12",
     tablet: "12"
   }, renderColorBlock(system))), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(GridColumn, {
@@ -238,7 +238,7 @@ var Colors = function Colors() {
     tablet: "12"
   }, renderColorBlock(gradientColors)), /*#__PURE__*/React.createElement(GridColumn, {
     all: "3",
-    leftOffsetWide: "1",
+    leftOffsetWide: "2",
     leftOffsetTablet: "1",
     leftOffsetDesktop: "1",
     mobile: "12",

package/dist/es/colors/colorsData.js

@@ -67,6 +67,15 @@ var colors = {
       }, {
         name: 'Background',
         code: '#FFFFFF'
+      }, {
+        name: 'Button Hov. G.',
+        code: '#10E272'
+      }, {
+        name: 'Button Hov. P.',
+        code: '#A500BF'
+      }, {
+        name: 'Button Down',
+        code: '#404D46'
       }]
     }
   },

package/dist/es/components/ContentArea/ContentArea.css

@@ -5,6 +5,7 @@ h4,
 h5 {
   margin: 0;
 }
+.mfui-content-area_color_base,
 .mfui-content-area_color_white {
   background-color: #FFFFFF;
 }
@@ -81,6 +82,7 @@ h5 {
   padding-right: 0;
   padding-left: 0;
 }
+.mfui-content-area__inner_color_base,
 .mfui-content-area__inner_color_white {
   background-color: #FFFFFF;
 }

package/dist/es/components/ContentArea/ContentArea.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import './ContentArea.less';
 declare const BACKGROUND_COLORS: {
-    readonly WHITE: "white";
+    readonly BASE: "base";
     readonly TRANSPARENT: "transparent";
     readonly GREEN: "green";
     readonly PURPLE: "purple";
@@ -11,6 +11,8 @@ declare const BACKGROUND_COLORS: {
     readonly CONTENT: "content";
     readonly FULL_BLACK: "fullBlack";
     /** @deprecated */
+    readonly WHITE: "white";
+    /** @deprecated */
     readonly FRESH_ASPHALT: "freshAsphalt";
 };
 export declare type BackgroundColorType = typeof BACKGROUND_COLORS[keyof typeof BACKGROUND_COLORS];

package/dist/es/components/ContentArea/ContentArea.js

@@ -7,7 +7,7 @@ import { cnCreate } from '@megafon/ui-helpers';
 import * as PropTypes from 'prop-types';
 import "./ContentArea.css";
 var BACKGROUND_COLORS = {
-  WHITE: 'white',
+  BASE: 'base',
   TRANSPARENT: 'transparent',
   GREEN: 'green',
   PURPLE: 'purple',
@@ -17,6 +17,9 @@ var BACKGROUND_COLORS = {
   CONTENT: 'content',
   FULL_BLACK: 'fullBlack',
 
+  /** @deprecated */
+  WHITE: 'white',
+
   /** @deprecated */
   FRESH_ASPHALT: 'freshAsphalt'
 };
@@ -48,15 +51,20 @@ var ContentArea = function ContentArea(_ref) {
 };
 
 var colorsCustomPropTypes = function colorsCustomPropTypes(props, propName, componentName) {
-  var deprecatedValue = BACKGROUND_COLORS.FRESH_ASPHALT;
+  var deprecatedBlackValue = BACKGROUND_COLORS.FRESH_ASPHALT;
+  var deprecatedWhiteValue = BACKGROUND_COLORS.WHITE;
   var propValue = props[propName];
 
   if (propValue && !Object.values(BACKGROUND_COLORS).includes(propValue)) {
-    return new Error("Failed prop type: Invalid prop '".concat(propName, "' of value '").concat(propValue, "' supplied to '").concat(componentName, "', \n        expected one of [").concat(Object.values(BACKGROUND_COLORS), "]"));
+    return new Error("Failed prop type: Invalid prop '".concat(propName, "' of value '").concat(propValue, "' supplied to '").concat(componentName, "',\n        expected one of [").concat(Object.values(BACKGROUND_COLORS), "]"));
+  }
+
+  if (propValue && propValue === deprecatedBlackValue) {
+    return new Error("Failed prop type: Invalid prop '".concat(propName, "' of value '").concat(propValue, "' supplied to '").concat(componentName, "',\n        value '").concat(deprecatedBlackValue, "' is deprecated, please use value '").concat(BACKGROUND_COLORS.CONTENT, "'"));
   }
 
-  if (propValue && propValue === BACKGROUND_COLORS.FRESH_ASPHALT) {
-    return new Error("Failed prop type: Invalid prop '".concat(propName, "' of value '").concat(propValue, "' supplied to '").concat(componentName, "',\n        value '").concat(deprecatedValue, "' is deprecated, please use value '").concat(BACKGROUND_COLORS.CONTENT, "'"));
+  if (propValue && propValue === deprecatedWhiteValue) {
+    return new Error("Failed prop type: Invalid prop '".concat(propName, "' of value '").concat(propValue, "' supplied to '").concat(componentName, "',\n        value '").concat(deprecatedWhiteValue, "' is deprecated, please use value '").concat(BACKGROUND_COLORS.BASE, "'"));
   }
 
   return null;

package/dist/es/components/Paragraph/Paragraph.css

@@ -36,7 +36,8 @@ h5 {
 .mfui-paragraph_color_purple {
   color: #731982;
 }
-.mfui-paragraph_color_base {
+.mfui-paragraph_color_base,
+.mfui-paragraph_color_clearWhite {
   color: #FFFFFF;
 }
 .mfui-paragraph_color_spbSky0 {

package/dist/es/components/Paragraph/Paragraph.d.ts

@@ -11,6 +11,8 @@ declare const COLORS: {
     FULL_BLACK: string;
     INHERIT: string;
     /** @deprecated */
+    CLEAR_WHITE: string;
+    /** @deprecated */
     FRESH_ASPHALT: string;
 };
 declare type ColorType = typeof COLORS[keyof typeof COLORS];

package/dist/es/components/Paragraph/Paragraph.js

@@ -17,6 +17,9 @@ var COLORS = {
   FULL_BLACK: 'fullBlack',
   INHERIT: 'inherit',
 
+  /** @deprecated */
+  CLEAR_WHITE: 'clearWhite',
+
   /** @deprecated */
   FRESH_ASPHALT: 'freshAsphalt'
 };
@@ -27,7 +30,7 @@ var Paragraph = function Paragraph(_ref) {
       size = _ref$size === void 0 ? 'regular' : _ref$size,
       align = _ref.align,
       _ref$color = _ref.color,
-      color = _ref$color === void 0 ? 'content' : _ref$color,
+      color = _ref$color === void 0 ? 'freshAsphalt' : _ref$color,
       className = _ref.className,
       _ref$hasMargin = _ref.hasMargin,
       hasMargin = _ref$hasMargin === void 0 ? true : _ref$hasMargin,
@@ -47,15 +50,20 @@ Paragraph.propTypes = {
   size: PropTypes.oneOf(['regular', 'small']),
   hasMargin: PropTypes.bool,
   color: function color(props, propName, componentName) {
-    var deprecatedValue = COLORS.FRESH_ASPHALT;
+    var deprecatedBlackValue = COLORS.FRESH_ASPHALT;
+    var deprecatedWhiteValue = COLORS.CLEAR_WHITE;
     var propValue = props[propName];
 
     if (propValue && !Object.values(COLORS).includes(propValue)) {
       return new Error("Failed prop type: Invalid prop '".concat(propName, "' of value '").concat(propValue, "' supplied to '").concat(componentName, "', \n            expected one of [").concat(Object.values(COLORS), "]"));
     }
 
-    if (propValue && props[propName] === COLORS.FRESH_ASPHALT) {
-      return new Error("Failed prop type: Invalid prop '".concat(propName, "' of value '").concat(propValue, "' supplied to '").concat(componentName, "',\n            value '").concat(deprecatedValue, "' is deprecated, please use value '").concat(COLORS.CONTENT, "'"));
+    if (propValue && props[propName] === deprecatedBlackValue) {
+      return new Error("Failed prop type: Invalid prop '".concat(propName, "' of value '").concat(propValue, "' supplied to '").concat(componentName, "',\n            value '").concat(deprecatedBlackValue, "' is deprecated, please use value '").concat(COLORS.CONTENT, "'"));
+    }
+
+    if (propValue && props[propName] === deprecatedWhiteValue) {
+      return new Error("Failed prop type: Invalid prop '".concat(propName, "' of value '").concat(propValue, "' supplied to '").concat(componentName, "',\n            value '").concat(deprecatedWhiteValue, "' is deprecated, please use value '").concat(COLORS.BASE, "'"));
     }
 
     return null;

package/dist/es/components/RadioButton/RadioButton.d.ts

@@ -1,7 +1,8 @@
 import * as React from 'react';
+import { IFilterDataAttrs } from '@megafon/ui-helpers';
 import * as PropTypes from 'prop-types';
 import './RadioButton.less';
-export interface IRadioButtonProps {
+export interface IRadioButtonProps extends IFilterDataAttrs {
     /** Значение */
     value: string;
     /** Имя для тега form */
@@ -44,6 +45,9 @@ declare class RadioButton extends React.Component<IRadioButtonProps> {
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         onChange: PropTypes.Requireable<(...args: any[]) => any>;
         inputRef: PropTypes.Requireable<any>;
+        dataAttrs: PropTypes.Requireable<{
+            [x: string]: string;
+        }>;
     };
     static defaultProps: Partial<IRadioButtonProps>;
     handleChange: () => void;

package/dist/es/components/RadioButton/RadioButton.js

@@ -18,7 +18,7 @@ function _createSuper(Derived) { return function () { var Super = _getPrototypeO
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
 
 import * as React from 'react';
-import { cnCreate } from '@megafon/ui-helpers';
+import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
 import * as PropTypes from 'prop-types';
 import "./RadioButton.css";
 var cn = cnCreate('mfui-radio-button');
@@ -58,14 +58,15 @@ var RadioButton = /*#__PURE__*/function (_React$Component) {
           inputRef = _this$props2.inputRef,
           className = _this$props2.className,
           _this$props2$classes = _this$props2.classes,
-          classes = _this$props2$classes === void 0 ? {} : _this$props2$classes;
+          classes = _this$props2$classes === void 0 ? {} : _this$props2$classes,
+          dataAttrs = _this$props2.dataAttrs;
       var checkedProp = isChecked !== undefined ? {
         checked: isChecked
       } : {};
       var rootClassNames = Array.isArray(className) ? [].concat(_toConsumableArray(className), [classes.root]) : [className, classes.root];
-      return /*#__PURE__*/React.createElement("div", {
+      return /*#__PURE__*/React.createElement("div", _extends({
         className: cn(rootClassNames)
-      }, /*#__PURE__*/React.createElement("label", {
+      }, filterDataAttrs(dataAttrs)), /*#__PURE__*/React.createElement("label", {
         className: cn('label', {
           disabled: disabled
         }, classes.label)
@@ -107,7 +108,8 @@ RadioButton.propTypes = {
   onChange: PropTypes.func,
   inputRef: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOfType([PropTypes.shape({
     current: PropTypes.elementType
-  }), PropTypes.any])])
+  }), PropTypes.any])]),
+  dataAttrs: PropTypes.objectOf(PropTypes.string.isRequired)
 };
 RadioButton.defaultProps = {
   textSize: 'medium',

package/dist/es/components/Tabs/Tabs.js

@@ -96,36 +96,41 @@ var Tabs = function Tabs(_ref) {
 
   var _React$useState9 = React.useState(0),
       _React$useState10 = _slicedToArray(_React$useState9, 2),
-      underlineWidth = _React$useState10[0],
-      setUnderlineWidth = _React$useState10[1];
+      activeTabWidth = _React$useState10[0],
+      setActiveTabWidth = _React$useState10[1];
 
   var _React$useState11 = React.useState(0),
       _React$useState12 = _slicedToArray(_React$useState11, 2),
-      underlineTranslate = _React$useState12[0],
-      setUnderlineTranslate = _React$useState12[1];
+      underlineWidth = _React$useState12[0],
+      setUnderlineWidth = _React$useState12[1];
 
-  var _React$useState13 = React.useState('none'),
+  var _React$useState13 = React.useState(0),
       _React$useState14 = _slicedToArray(_React$useState13, 2),
-      underlineTransition = _React$useState14[0],
-      setUnderlineTransition = _React$useState14[1];
+      underlineTranslate = _React$useState14[0],
+      setUnderlineTranslate = _React$useState14[1];
 
-  var _React$useState15 = React.useState('auto'),
+  var _React$useState15 = React.useState('none'),
       _React$useState16 = _slicedToArray(_React$useState15, 2),
-      tabListHeight = _React$useState16[0],
-      setTabListHeight = _React$useState16[1];
+      underlineTransition = _React$useState16[0],
+      setUnderlineTransition = _React$useState16[1];
 
-  var _React$useState17 = React.useState(false),
+  var _React$useState17 = React.useState('auto'),
       _React$useState18 = _slicedToArray(_React$useState17, 2),
-      isSticky = _React$useState18[0],
-      setSticky = _React$useState18[1];
+      tabListHeight = _React$useState18[0],
+      setTabListHeight = _React$useState18[1];
 
-  var _React$useState19 = React.useState({
+  var _React$useState19 = React.useState(false),
+      _React$useState20 = _slicedToArray(_React$useState19, 2),
+      isSticky = _React$useState20[0],
+      setSticky = _React$useState20[1];
+
+  var _React$useState21 = React.useState({
     left: 0,
     right: 0
   }),
-      _React$useState20 = _slicedToArray(_React$useState19, 2),
-      stickyOffset = _React$useState20[0],
-      setStickyOffset = _React$useState20[1];
+      _React$useState22 = _slicedToArray(_React$useState21, 2),
+      stickyOffset = _React$useState22[0],
+      setStickyOffset = _React$useState22[1];
 
   var setTabRef = React.useCallback(function (tab) {
     tab && tabsRef.current.push(tab);
@@ -135,12 +140,6 @@ var Tabs = function Tabs(_ref) {
       return;
     }
 
-    var tabNodeChild = tabsRef.current[currentIndex].firstElementChild;
-
-    var _ref2 = tabNodeChild || {},
-        _ref2$clientWidth = _ref2.clientWidth,
-        clientWidth = _ref2$clientWidth === void 0 ? 0 : _ref2$clientWidth;
-
     var translate = _toConsumableArray(tabsRef.current).splice(0, currentIndex).reduce(function (accWidth, node) {
       var _node$getBoundingClie = node.getBoundingClientRect(),
           width = _node$getBoundingClie.width;
@@ -148,9 +147,9 @@ var Tabs = function Tabs(_ref) {
       return accWidth + width;
     }, 0);
 
-    setUnderlineWidth(clientWidth);
+    setUnderlineWidth(activeTabWidth);
     setUnderlineTranslate(translate);
-  }, [currentIndex]);
+  }, [currentIndex, activeTabWidth]);
   var calculateSticky = React.useCallback(function () {
     if (!sticky || !rootRef.current || !tabListRef.current) {
       return;
@@ -247,12 +246,12 @@ var Tabs = function Tabs(_ref) {
   }, []);
   React.useEffect(function () {
     var observer = new IntersectionObserver(function (entries) {
-      entries.forEach(function (_ref3) {
-        var isIntersecting = _ref3.isIntersecting,
-            _ref3$boundingClientR = _ref3.boundingClientRect,
-            top = _ref3$boundingClientR.top,
-            left = _ref3$boundingClientR.left,
-            right = _ref3$boundingClientR.right;
+      entries.forEach(function (_ref2) {
+        var isIntersecting = _ref2.isIntersecting,
+            _ref2$boundingClientR = _ref2.boundingClientRect,
+            top = _ref2$boundingClientR.top,
+            left = _ref2$boundingClientR.left,
+            right = _ref2$boundingClientR.right;
 
         if (!sticky || !rootRef.current || !tabListRef.current) {
           return;
@@ -294,10 +293,20 @@ var Tabs = function Tabs(_ref) {
   }, [calculateSticky]);
   React.useEffect(function () {
     var handleResize = throttle(function () {
-      calculateUnderline();
       calculateSticky();
     }, 300);
+    var activeTabNode = tabsRef.current[currentIndex];
+    var resizeObserver = new ResizeObserver(function (entries) {
+      if (!entries.length || !entries[0]) {
+        return;
+      }
+
+      var width = entries[0].contentRect.width;
+      setActiveTabWidth(width);
+      calculateUnderline();
+    });
     calculateUnderline();
+    resizeObserver.observe(activeTabNode);
     window.addEventListener('resize', handleResize);
     return function () {
       window.removeEventListener('resize', handleResize);

package/dist/lib/colors/Colors.css

@@ -70,13 +70,13 @@ h5 {
   }
 }
 .colors__list {
+  -webkit-box-pack: space-evenly;
+      -ms-flex-pack: space-evenly;
+          justify-content: space-evenly;
   padding-bottom: 12px;
 }
 @media screen and (max-width: 1023px) {
   .colors__list {
-    -webkit-box-pack: space-evenly;
-        -ms-flex-pack: space-evenly;
-            justify-content: space-evenly;
     -webkit-box-ordinal-group: 3;
         -ms-flex-order: 2;
             order: 2;

package/dist/lib/colors/Colors.js

@@ -256,7 +256,7 @@ var Colors = function Colors() {
     mobile: "12",
     tablet: "12"
   }, renderColorBlock(secondary)), /*#__PURE__*/React.createElement(_GridColumn["default"], {
-    all: "5",
+    all: "10",
     mobile: "12",
     tablet: "12"
   }, renderColorBlock(system))), /*#__PURE__*/React.createElement(_Grid["default"], null, /*#__PURE__*/React.createElement(_GridColumn["default"], {
@@ -265,7 +265,7 @@ var Colors = function Colors() {
     tablet: "12"
   }, renderColorBlock(gradientColors)), /*#__PURE__*/React.createElement(_GridColumn["default"], {
     all: "3",
-    leftOffsetWide: "1",
+    leftOffsetWide: "2",
     leftOffsetTablet: "1",
     leftOffsetDesktop: "1",
     mobile: "12",

package/dist/lib/colors/colorsData.js

@@ -73,6 +73,15 @@ var colors = {
       }, {
         name: 'Background',
         code: '#FFFFFF'
+      }, {
+        name: 'Button Hov. G.',
+        code: '#10E272'
+      }, {
+        name: 'Button Hov. P.',
+        code: '#A500BF'
+      }, {
+        name: 'Button Down',
+        code: '#404D46'
       }]
     }
   },

package/dist/lib/components/ContentArea/ContentArea.css

@@ -5,6 +5,7 @@ h4,
 h5 {
   margin: 0;
 }
+.mfui-content-area_color_base,
 .mfui-content-area_color_white {
   background-color: #FFFFFF;
 }
@@ -81,6 +82,7 @@ h5 {
   padding-right: 0;
   padding-left: 0;
 }
+.mfui-content-area__inner_color_base,
 .mfui-content-area__inner_color_white {
   background-color: #FFFFFF;
 }

package/dist/lib/components/ContentArea/ContentArea.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import './ContentArea.less';
 declare const BACKGROUND_COLORS: {
-    readonly WHITE: "white";
+    readonly BASE: "base";
     readonly TRANSPARENT: "transparent";
     readonly GREEN: "green";
     readonly PURPLE: "purple";
@@ -11,6 +11,8 @@ declare const BACKGROUND_COLORS: {
     readonly CONTENT: "content";
     readonly FULL_BLACK: "fullBlack";
     /** @deprecated */
+    readonly WHITE: "white";
+    /** @deprecated */
     readonly FRESH_ASPHALT: "freshAsphalt";
 };
 export declare type BackgroundColorType = typeof BACKGROUND_COLORS[keyof typeof BACKGROUND_COLORS];

package/dist/lib/components/ContentArea/ContentArea.js

@@ -26,7 +26,7 @@ function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 var BACKGROUND_COLORS = {
-  WHITE: 'white',
+  BASE: 'base',
   TRANSPARENT: 'transparent',
   GREEN: 'green',
   PURPLE: 'purple',
@@ -36,6 +36,9 @@ var BACKGROUND_COLORS = {
   CONTENT: 'content',
   FULL_BLACK: 'fullBlack',
 
+  /** @deprecated */
+  WHITE: 'white',
+
   /** @deprecated */
   FRESH_ASPHALT: 'freshAsphalt'
 };
@@ -67,15 +70,20 @@ var ContentArea = function ContentArea(_ref) {
 };
 
 var colorsCustomPropTypes = function colorsCustomPropTypes(props, propName, componentName) {
-  var deprecatedValue = BACKGROUND_COLORS.FRESH_ASPHALT;
+  var deprecatedBlackValue = BACKGROUND_COLORS.FRESH_ASPHALT;
+  var deprecatedWhiteValue = BACKGROUND_COLORS.WHITE;
   var propValue = props[propName];
 
   if (propValue && !Object.values(BACKGROUND_COLORS).includes(propValue)) {
-    return new Error("Failed prop type: Invalid prop '".concat(propName, "' of value '").concat(propValue, "' supplied to '").concat(componentName, "', \n        expected one of [").concat(Object.values(BACKGROUND_COLORS), "]"));
+    return new Error("Failed prop type: Invalid prop '".concat(propName, "' of value '").concat(propValue, "' supplied to '").concat(componentName, "',\n        expected one of [").concat(Object.values(BACKGROUND_COLORS), "]"));
+  }
+
+  if (propValue && propValue === deprecatedBlackValue) {
+    return new Error("Failed prop type: Invalid prop '".concat(propName, "' of value '").concat(propValue, "' supplied to '").concat(componentName, "',\n        value '").concat(deprecatedBlackValue, "' is deprecated, please use value '").concat(BACKGROUND_COLORS.CONTENT, "'"));
   }
 
-  if (propValue && propValue === BACKGROUND_COLORS.FRESH_ASPHALT) {
-    return new Error("Failed prop type: Invalid prop '".concat(propName, "' of value '").concat(propValue, "' supplied to '").concat(componentName, "',\n        value '").concat(deprecatedValue, "' is deprecated, please use value '").concat(BACKGROUND_COLORS.CONTENT, "'"));
+  if (propValue && propValue === deprecatedWhiteValue) {
+    return new Error("Failed prop type: Invalid prop '".concat(propName, "' of value '").concat(propValue, "' supplied to '").concat(componentName, "',\n        value '").concat(deprecatedWhiteValue, "' is deprecated, please use value '").concat(BACKGROUND_COLORS.BASE, "'"));
   }
 
   return null;

package/dist/lib/components/Paragraph/Paragraph.css

@@ -36,7 +36,8 @@ h5 {
 .mfui-paragraph_color_purple {
   color: #731982;
 }
-.mfui-paragraph_color_base {
+.mfui-paragraph_color_base,
+.mfui-paragraph_color_clearWhite {
   color: #FFFFFF;
 }
 .mfui-paragraph_color_spbSky0 {

package/dist/lib/components/Paragraph/Paragraph.d.ts

@@ -11,6 +11,8 @@ declare const COLORS: {
     FULL_BLACK: string;
     INHERIT: string;
     /** @deprecated */
+    CLEAR_WHITE: string;
+    /** @deprecated */
     FRESH_ASPHALT: string;
 };
 declare type ColorType = typeof COLORS[keyof typeof COLORS];

package/dist/lib/components/Paragraph/Paragraph.js

@@ -36,6 +36,9 @@ var COLORS = {
   FULL_BLACK: 'fullBlack',
   INHERIT: 'inherit',
 
+  /** @deprecated */
+  CLEAR_WHITE: 'clearWhite',
+
   /** @deprecated */
   FRESH_ASPHALT: 'freshAsphalt'
 };
@@ -46,7 +49,7 @@ var Paragraph = function Paragraph(_ref) {
       size = _ref$size === void 0 ? 'regular' : _ref$size,
       align = _ref.align,
       _ref$color = _ref.color,
-      color = _ref$color === void 0 ? 'content' : _ref$color,
+      color = _ref$color === void 0 ? 'freshAsphalt' : _ref$color,
       className = _ref.className,
       _ref$hasMargin = _ref.hasMargin,
       hasMargin = _ref$hasMargin === void 0 ? true : _ref$hasMargin,
@@ -66,15 +69,20 @@ Paragraph.propTypes = {
   size: PropTypes.oneOf(['regular', 'small']),
   hasMargin: PropTypes.bool,
   color: function color(props, propName, componentName) {
-    var deprecatedValue = COLORS.FRESH_ASPHALT;
+    var deprecatedBlackValue = COLORS.FRESH_ASPHALT;
+    var deprecatedWhiteValue = COLORS.CLEAR_WHITE;
     var propValue = props[propName];
 
     if (propValue && !Object.values(COLORS).includes(propValue)) {
       return new Error("Failed prop type: Invalid prop '".concat(propName, "' of value '").concat(propValue, "' supplied to '").concat(componentName, "', \n            expected one of [").concat(Object.values(COLORS), "]"));
     }
 
-    if (propValue && props[propName] === COLORS.FRESH_ASPHALT) {
-      return new Error("Failed prop type: Invalid prop '".concat(propName, "' of value '").concat(propValue, "' supplied to '").concat(componentName, "',\n            value '").concat(deprecatedValue, "' is deprecated, please use value '").concat(COLORS.CONTENT, "'"));
+    if (propValue && props[propName] === deprecatedBlackValue) {
+      return new Error("Failed prop type: Invalid prop '".concat(propName, "' of value '").concat(propValue, "' supplied to '").concat(componentName, "',\n            value '").concat(deprecatedBlackValue, "' is deprecated, please use value '").concat(COLORS.CONTENT, "'"));
+    }
+
+    if (propValue && props[propName] === deprecatedWhiteValue) {
+      return new Error("Failed prop type: Invalid prop '".concat(propName, "' of value '").concat(propValue, "' supplied to '").concat(componentName, "',\n            value '").concat(deprecatedWhiteValue, "' is deprecated, please use value '").concat(COLORS.BASE, "'"));
     }
 
     return null;

package/dist/lib/components/RadioButton/RadioButton.d.ts

@@ -1,7 +1,8 @@
 import * as React from 'react';
+import { IFilterDataAttrs } from '@megafon/ui-helpers';
 import * as PropTypes from 'prop-types';
 import './RadioButton.less';
-export interface IRadioButtonProps {
+export interface IRadioButtonProps extends IFilterDataAttrs {
     /** Значение */
     value: string;
     /** Имя для тега form */
@@ -44,6 +45,9 @@ declare class RadioButton extends React.Component<IRadioButtonProps> {
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         onChange: PropTypes.Requireable<(...args: any[]) => any>;
         inputRef: PropTypes.Requireable<any>;
+        dataAttrs: PropTypes.Requireable<{
+            [x: string]: string;
+        }>;
     };
     static defaultProps: Partial<IRadioButtonProps>;
     handleChange: () => void;

package/dist/lib/components/RadioButton/RadioButton.js

@@ -112,14 +112,15 @@ var RadioButton = /*#__PURE__*/function (_React$Component) {
           inputRef = _this$props2.inputRef,
           className = _this$props2.className,
           _this$props2$classes = _this$props2.classes,
-          classes = _this$props2$classes === void 0 ? {} : _this$props2$classes;
+          classes = _this$props2$classes === void 0 ? {} : _this$props2$classes,
+          dataAttrs = _this$props2.dataAttrs;
       var checkedProp = isChecked !== undefined ? {
         checked: isChecked
       } : {};
       var rootClassNames = Array.isArray(className) ? [].concat((0, _toConsumableArray2["default"])(className), [classes.root]) : [className, classes.root];
-      return /*#__PURE__*/React.createElement("div", {
+      return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({
         className: cn(rootClassNames)
-      }, /*#__PURE__*/React.createElement("label", {
+      }, (0, _uiHelpers.filterDataAttrs)(dataAttrs)), /*#__PURE__*/React.createElement("label", {
         className: cn('label', {
           disabled: disabled
         }, classes.label)
@@ -160,7 +161,8 @@ RadioButton.propTypes = {
   onChange: PropTypes.func,
   inputRef: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOfType([PropTypes.shape({
     current: PropTypes.elementType
-  }), PropTypes.any])])
+  }), PropTypes.any])]),
+  dataAttrs: PropTypes.objectOf(PropTypes.string.isRequired)
 };
 RadioButton.defaultProps = {
   textSize: 'medium',

package/dist/lib/components/Tabs/Tabs.js

@@ -126,36 +126,41 @@ var Tabs = function Tabs(_ref) {
 
   var _React$useState9 = React.useState(0),
       _React$useState10 = (0, _slicedToArray2["default"])(_React$useState9, 2),
-      underlineWidth = _React$useState10[0],
-      setUnderlineWidth = _React$useState10[1];
+      activeTabWidth = _React$useState10[0],
+      setActiveTabWidth = _React$useState10[1];
 
   var _React$useState11 = React.useState(0),
       _React$useState12 = (0, _slicedToArray2["default"])(_React$useState11, 2),
-      underlineTranslate = _React$useState12[0],
-      setUnderlineTranslate = _React$useState12[1];
+      underlineWidth = _React$useState12[0],
+      setUnderlineWidth = _React$useState12[1];
 
-  var _React$useState13 = React.useState('none'),
+  var _React$useState13 = React.useState(0),
       _React$useState14 = (0, _slicedToArray2["default"])(_React$useState13, 2),
-      underlineTransition = _React$useState14[0],
-      setUnderlineTransition = _React$useState14[1];
+      underlineTranslate = _React$useState14[0],
+      setUnderlineTranslate = _React$useState14[1];
 
-  var _React$useState15 = React.useState('auto'),
+  var _React$useState15 = React.useState('none'),
       _React$useState16 = (0, _slicedToArray2["default"])(_React$useState15, 2),
-      tabListHeight = _React$useState16[0],
-      setTabListHeight = _React$useState16[1];
+      underlineTransition = _React$useState16[0],
+      setUnderlineTransition = _React$useState16[1];
 
-  var _React$useState17 = React.useState(false),
+  var _React$useState17 = React.useState('auto'),
       _React$useState18 = (0, _slicedToArray2["default"])(_React$useState17, 2),
-      isSticky = _React$useState18[0],
-      setSticky = _React$useState18[1];
+      tabListHeight = _React$useState18[0],
+      setTabListHeight = _React$useState18[1];
 
-  var _React$useState19 = React.useState({
+  var _React$useState19 = React.useState(false),
+      _React$useState20 = (0, _slicedToArray2["default"])(_React$useState19, 2),
+      isSticky = _React$useState20[0],
+      setSticky = _React$useState20[1];
+
+  var _React$useState21 = React.useState({
     left: 0,
     right: 0
   }),
-      _React$useState20 = (0, _slicedToArray2["default"])(_React$useState19, 2),
-      stickyOffset = _React$useState20[0],
-      setStickyOffset = _React$useState20[1];
+      _React$useState22 = (0, _slicedToArray2["default"])(_React$useState21, 2),
+      stickyOffset = _React$useState22[0],
+      setStickyOffset = _React$useState22[1];
 
   var setTabRef = React.useCallback(function (tab) {
     tab && tabsRef.current.push(tab);
@@ -165,21 +170,15 @@ var Tabs = function Tabs(_ref) {
       return;
     }
 
-    var tabNodeChild = tabsRef.current[currentIndex].firstElementChild;
-
-    var _ref2 = tabNodeChild || {},
-        _ref2$clientWidth = _ref2.clientWidth,
-        clientWidth = _ref2$clientWidth === void 0 ? 0 : _ref2$clientWidth;
-
     var translate = (0, _toConsumableArray2["default"])(tabsRef.current).splice(0, currentIndex).reduce(function (accWidth, node) {
       var _node$getBoundingClie = node.getBoundingClientRect(),
           width = _node$getBoundingClie.width;
 
       return accWidth + width;
     }, 0);
-    setUnderlineWidth(clientWidth);
+    setUnderlineWidth(activeTabWidth);
     setUnderlineTranslate(translate);
-  }, [currentIndex]);
+  }, [currentIndex, activeTabWidth]);
   var calculateSticky = React.useCallback(function () {
     if (!sticky || !rootRef.current || !tabListRef.current) {
       return;
@@ -276,12 +275,12 @@ var Tabs = function Tabs(_ref) {
   }, []);
   React.useEffect(function () {
     var observer = new IntersectionObserver(function (entries) {
-      entries.forEach(function (_ref3) {
-        var isIntersecting = _ref3.isIntersecting,
-            _ref3$boundingClientR = _ref3.boundingClientRect,
-            top = _ref3$boundingClientR.top,
-            left = _ref3$boundingClientR.left,
-            right = _ref3$boundingClientR.right;
+      entries.forEach(function (_ref2) {
+        var isIntersecting = _ref2.isIntersecting,
+            _ref2$boundingClientR = _ref2.boundingClientRect,
+            top = _ref2$boundingClientR.top,
+            left = _ref2$boundingClientR.left,
+            right = _ref2$boundingClientR.right;
 
         if (!sticky || !rootRef.current || !tabListRef.current) {
           return;
@@ -323,10 +322,20 @@ var Tabs = function Tabs(_ref) {
   }, [calculateSticky]);
   React.useEffect(function () {
     var handleResize = (0, _lodash["default"])(function () {
-      calculateUnderline();
       calculateSticky();
     }, 300);
+    var activeTabNode = tabsRef.current[currentIndex];
+    var resizeObserver = new ResizeObserver(function (entries) {
+      if (!entries.length || !entries[0]) {
+        return;
+      }
+
+      var width = entries[0].contentRect.width;
+      setActiveTabWidth(width);
+      calculateUnderline();
+    });
     calculateUnderline();
+    resizeObserver.observe(activeTabNode);
     window.addEventListener('resize', handleResize);
     return function () {
       window.removeEventListener('resize', handleResize);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@megafon/ui-core",
-  "version": "2.1.1",
+  "version": "2.2.0",
   "files": [
     "dist",
     "styles"
@@ -96,5 +96,5 @@
     "react-popper": "^2.2.3",
     "swiper": "^6.5.6"
   },
-  "gitHead": "31bd33b5e87106ea511fbbdc8ad266f70457e3d3"
+  "gitHead": "26b2f120bd0f51992981718c28cb8cd8138e1870"
 }

package/styles/base.less

@@ -19,6 +19,9 @@
 @fury: #F62434;
 @systemBlue: #34AAF2;
 @background: #FFFFFF;
+@buttonHoverGreen: #10E272;
+@buttonhoverPurple: #534455;
+@buttonDown: #404D46;
 
 // Gradients
 @basic: linear-gradient(90deg, #01873F 0%, #00B956 74%, #14CD6A 100%);
@@ -56,11 +59,6 @@
 @fury80: #F8505D;
 @fury20: #FFC5C9;
 
-// old colors
-@buttonHoverGreen: #10E272;
-@buttonhoverPurple: #534455;
-@buttonDown: #404D46;
-
 // Notification Colors
 // TODO: будут отрефакторены после обновления дизайном Notification по новой палитре
 @error: #FFC4C9;