@megafon/ui-core 5.4.6 → 5.6.0

package/dist/es/components/Search/Search.js

@@ -1,5 +1,6 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _extends from "@babel/runtime/helpers/extends";
+import "core-js/modules/es.array.slice.js";
 import "core-js/modules/es.regexp.exec.js";
 import "core-js/modules/es.string.replace.js";
 import "core-js/modules/es.string.split.js";
@@ -11,6 +12,8 @@ import React from 'react';
 import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
 import debounce from 'lodash.debounce';
 import * as PropTypes from 'prop-types';
+import Caption from "../Caption/Caption";
+import Header from "../Header/Header";
 import Preloader from "../Preloader/Preloader";
 import "./Search.css";
 
@@ -40,6 +43,7 @@ var ClearIcon = function ClearIcon(props) {
 };
 
 var SEARCH_QUERY_REGEX = /[^A-Z-a-zА-ЯЁа-яё0-9]/g;
+var MAX_POPULAR_ITEMS_LENGTH = 5;
 export var Verification = {
   VALID: 'valid',
   ERROR: 'error'
@@ -72,10 +76,16 @@ var Search = function Search(_ref) {
       _ref$type = _ref.type,
       type = _ref$type === void 0 ? 'textfield' : _ref$type,
       showLoader = _ref.showLoader,
+      showNotFound = _ref.showNotFound,
+      textNotFound = _ref.textNotFound,
+      _ref$popularItems = _ref.popularItems,
+      popularItems = _ref$popularItems === void 0 ? [] : _ref$popularItems,
+      popularTitle = _ref.popularTitle,
       onChange = _ref.onChange,
       onSubmit = _ref.onSubmit,
       onBlur = _ref.onBlur,
-      onFocus = _ref.onFocus;
+      onFocus = _ref.onFocus,
+      onPopularItemClick = _ref.onPopularItemClick;
 
   var _React$useState = React.useState(value),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -92,15 +102,24 @@ var Search = function Search(_ref) {
       isFocused = _React$useState6[0],
       setFocus = _React$useState6[1];
 
+  var _React$useState7 = React.useState(-1),
+      _React$useState8 = _slicedToArray(_React$useState7, 2),
+      popularActiveIndex = _React$useState8[0],
+      setPopularActiveIndex = _React$useState8[1];
+
   var debouncedOnChange = React.useRef(debounce(function (inputValue) {
     return onChange && onChange(inputValue);
   }, changeDelay));
   var highlightedItem = React.useRef(null);
   var fieldNode = React.useRef(null);
+  var correctPopularItems = React.useMemo(function () {
+    return popularItems.slice(0, MAX_POPULAR_ITEMS_LENGTH);
+  }, [popularItems]);
   var isCompact = type === 'compact';
   var showClearIcon = isCompact && !!searchQuery;
   var showTextFieldSubmit = !hideIcon && !isCompact && !showLoader;
   var showAdditionalElement = !hideIcon || showLoader || showClearIcon;
+  var showPopularItems = !!correctPopularItems.length;
   var handleChange = React.useCallback(function (e) {
     var _e$target$value = e.target.value,
         inputValue = _e$target$value === void 0 ? '' : _e$target$value;
@@ -120,6 +139,11 @@ var Search = function Search(_ref) {
       setActiveIndex(index);
     };
   }, []);
+  var handlePopularItemHover = React.useCallback(function (index) {
+    return function () {
+      setPopularActiveIndex(index);
+    };
+  }, []);
   var handleSearchSubmit = React.useCallback(function () {
     onSubmit && searchQuery && onSubmit(searchQuery);
   }, [searchQuery, onSubmit]);
@@ -149,26 +173,90 @@ var Search = function Search(_ref) {
       setActiveIndex(-1);
     }
   }, [activeIndex]);
-  var handleKeyDown = React.useCallback(function (e) {
-    if (e.key === 'ArrowDown' && activeIndex < items.length - 1) {
-      setActiveIndex(function (index) {
-        return index + 1;
-      });
-      e.preventDefault();
-    } else if (e.key === 'ArrowUp' && activeIndex > -1) {
-      setActiveIndex(function (index) {
-        return index - 1;
-      });
-      e.preventDefault();
-    } else if (e.key === 'Enter' && activeIndex > -1) {
-      handleItemSubmit(activeIndex);
-      e.preventDefault();
-    } else if (e.key === 'Enter' && activeIndex === -1) {
-      handleSearchSubmit();
+  var handlePopularItemMouseDown = React.useCallback(function (e) {
+    e.preventDefault();
+  }, []);
+  var handlePopularItemMouseUp = React.useCallback(function () {
+    var _a;
+
+    var chosenValue = popularItems[popularActiveIndex].title;
+    (_a = fieldNode === null || fieldNode === void 0 ? void 0 : fieldNode.current) === null || _a === void 0 ? void 0 : _a.blur();
+    onPopularItemClick === null || onPopularItemClick === void 0 ? void 0 : onPopularItemClick(chosenValue);
+  }, [onPopularItemClick, popularActiveIndex, popularItems]);
+  var handleKeyDownPopularItems = React.useCallback(function (e) {
+    var _a;
+
+    switch (true) {
+      case e.key === 'ArrowDown' && popularActiveIndex < popularItems.length - 1:
+        setPopularActiveIndex(function (index) {
+          return index + 1;
+        });
+        e.preventDefault();
+        break;
+
+      case e.key === 'ArrowUp' && popularActiveIndex > -1:
+        setPopularActiveIndex(function (index) {
+          return index - 1;
+        });
+        e.preventDefault();
+        break;
+
+      case e.key === 'Enter' && popularActiveIndex > -1:
+        {
+          var currentHref = (_a = popularItems[popularActiveIndex]) === null || _a === void 0 ? void 0 : _a.href;
+          handlePopularItemMouseUp();
+
+          if (currentHref) {
+            window.location.href = currentHref;
+          }
+
+          break;
+        }
+
+      default:
+        break;
+    }
+
+    return false;
+  }, [popularActiveIndex, popularItems, handlePopularItemMouseUp]);
+  var handleKeyDownItems = React.useCallback(function (e) {
+    switch (true) {
+      case e.key === 'ArrowDown' && activeIndex < items.length - 1:
+        setActiveIndex(function (index) {
+          return index + 1;
+        });
+        e.preventDefault();
+        break;
+
+      case e.key === 'ArrowUp' && activeIndex > -1:
+        setActiveIndex(function (index) {
+          return index - 1;
+        });
+        e.preventDefault();
+        break;
+
+      case e.key === 'Enter' && activeIndex > -1:
+        handleItemSubmit(activeIndex);
+        e.preventDefault();
+        break;
+
+      case e.key === 'Enter' && activeIndex === -1:
+        handleSearchSubmit();
+        break;
+
+      default:
+        break;
     }
 
     return false;
-  }, [activeIndex, items, handleItemSubmit, handleSearchSubmit]);
+  }, [activeIndex, handleItemSubmit, handleSearchSubmit, items.length]);
+  var handleKeyDown = React.useCallback(function (e) {
+    if (showNotFound && showPopularItems) {
+      return handleKeyDownPopularItems(e);
+    }
+
+    return handleKeyDownItems(e);
+  }, [handleKeyDownItems, handleKeyDownPopularItems, showNotFound, showPopularItems]);
 
   var handleClearClick = function handleClearClick() {
     var _a; // TODO: После обновления TS до 4 версии, установить @types/lodash.debounce и убрать disable
@@ -266,6 +354,53 @@ var Search = function Search(_ref) {
     })));
   };
 
+  var renderPopularItems = function renderPopularItems() {
+    return /*#__PURE__*/React.createElement("div", {
+      className: cn('popular-list')
+    }, correctPopularItems.map(function (_ref3, i) {
+      var title = _ref3.title,
+          href = _ref3.href,
+          icon = _ref3.icon;
+      var Elem = href ? 'a' : 'div';
+      return /*#__PURE__*/React.createElement(Elem, _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.popularItem, i + 1), {
+        className: cn('popular-item', {
+          active: popularActiveIndex === i
+        }, [classes === null || classes === void 0 ? void 0 : classes.popularItem]),
+        key: i,
+        href: href,
+        onMouseDown: handlePopularItemMouseDown,
+        onMouseUp: handlePopularItemMouseUp,
+        onMouseEnter: handlePopularItemHover(i)
+      }), icon && /*#__PURE__*/React.createElement("span", {
+        className: cn('popular-icon')
+      }, icon), /*#__PURE__*/React.createElement(Header, {
+        className: cn('popular-item-title'),
+        as: "h5"
+      }, title));
+    }));
+  };
+
+  var renderNotFound = function renderNotFound() {
+    return /*#__PURE__*/React.createElement("div", {
+      className: cn('list', {
+        'not-found': true
+      })
+    }, /*#__PURE__*/React.createElement("div", {
+      className: cn('list-inner')
+    }, /*#__PURE__*/React.createElement("div", {
+      className: cn('not-found-text', {
+        'show-popular': showPopularItems
+      }, [classes === null || classes === void 0 ? void 0 : classes.textNotFound])
+    }, textNotFound || 'Ничего не нашлось'), showPopularItems && /*#__PURE__*/React.createElement("div", {
+      className: cn('popular-wrap')
+    }, /*#__PURE__*/React.createElement(Caption, {
+      className: cn('popular-title', [classes === null || classes === void 0 ? void 0 : classes.popularTitle]),
+      variant: "medium",
+      color: "gray",
+      hasMargin: false
+    }, popularTitle || 'Популярные действия'), renderPopularItems())));
+  };
+
   return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     className: cn({
       open: isFocused,
@@ -304,7 +439,7 @@ var Search = function Search(_ref) {
     delay: false,
     className: cn('loader'),
     sizeAll: "small"
-  }), showClearIcon && renderClearButton()), !!items.length && renderList()), noticeText && /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.notice), {
+  }), showClearIcon && renderClearButton()), !!items.length && !showNotFound && renderList(), showNotFound && renderNotFound()), noticeText && /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.notice), {
     className: cn('notice', {
       error: verification === Verification.ERROR,
       success: verification === Verification.VALID
@@ -320,7 +455,8 @@ Search.propTypes = {
     submit: PropTypes.objectOf(PropTypes.string.isRequired),
     item: PropTypes.objectOf(PropTypes.string.isRequired),
     itemTitle: PropTypes.objectOf(PropTypes.string.isRequired),
-    notice: PropTypes.objectOf(PropTypes.string.isRequired)
+    notice: PropTypes.objectOf(PropTypes.string.isRequired),
+    popularItem: PropTypes.objectOf(PropTypes.string.isRequired)
   }),
   value: PropTypes.string,
   label: PropTypes.string,
@@ -343,11 +479,23 @@ Search.propTypes = {
     input: PropTypes.string,
     listItemTitle: PropTypes.string,
     control: PropTypes.string,
-    icon: PropTypes.string
+    icon: PropTypes.string,
+    textNotFound: PropTypes.string,
+    popularTitle: PropTypes.string,
+    popularItem: PropTypes.string
   }),
+  showNotFound: PropTypes.bool,
+  textNotFound: PropTypes.string,
+  popularItems: PropTypes.arrayOf(PropTypes.shape({
+    title: PropTypes.string.isRequired,
+    href: PropTypes.string,
+    icon: PropTypes.element
+  }).isRequired),
+  popularTitle: PropTypes.string,
   onChange: PropTypes.func,
   onSubmit: PropTypes.func,
   onBlur: PropTypes.func,
-  onFocus: PropTypes.func
+  onFocus: PropTypes.func,
+  onPopularItemClick: PropTypes.func
 };
 export default Search;

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

@@ -28,6 +28,7 @@ export interface ITabsProps {
         innerIndents?: string;
         tab?: string;
         activeTab?: string;
+        panel?: string;
     };
     /** Дополнительные data атрибуты к внутренним элементам */
     dataAttrs?: {

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

@@ -329,10 +329,10 @@ var Tabs = function Tabs(_ref) {
       return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.panel, i + 1), {
         className: cn('panel', {
           current: isCurrentPanel
-        })
+        }, [classes === null || classes === void 0 ? void 0 : classes.panel])
       }), panel);
     });
-  }, [children, currentIndex, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.panel, renderOnlyCurrentPanel]);
+  }, [children, currentIndex, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.panel, renderOnlyCurrentPanel, classes === null || classes === void 0 ? void 0 : classes.panel]);
   React.useEffect(function () {
     if (!sticky) {
       return undefined;
@@ -459,7 +459,8 @@ Tabs.propTypes = {
     swiperWrapper: PropTypes.string,
     innerIndents: PropTypes.string,
     tab: PropTypes.string,
-    activeTab: PropTypes.string
+    activeTab: PropTypes.string,
+    panel: PropTypes.string
   }),
   dataAttrs: PropTypes.shape({
     root: PropTypes.objectOf(PropTypes.string.isRequired),

package/dist/es/hooks/useSwipe.js

@@ -22,18 +22,23 @@ function useSwipe(element) {
 
   var _React$useState = React.useState(null),
       _React$useState2 = _slicedToArray(_React$useState, 2),
-      initialTouchPosition = _React$useState2[0],
-      setInitialTouchPosition = _React$useState2[1];
+      initialTouchPositionX = _React$useState2[0],
+      setInitialTouchPositionX = _React$useState2[1];
 
-  var _React$useState3 = React.useState(TransitionSteps.INITIAL_STEP),
+  var _React$useState3 = React.useState(null),
       _React$useState4 = _slicedToArray(_React$useState3, 2),
-      transitionStep = _React$useState4[0],
-      setTransitionStep = _React$useState4[1];
+      initialTouchPositionY = _React$useState4[0],
+      setInitialTouchPositionY = _React$useState4[1];
 
-  var _React$useState5 = React.useState(''),
+  var _React$useState5 = React.useState(TransitionSteps.INITIAL_STEP),
       _React$useState6 = _slicedToArray(_React$useState5, 2),
-      transform = _React$useState6[0],
-      setTransform = _React$useState6[1];
+      transitionStep = _React$useState6[0],
+      setTransitionStep = _React$useState6[1];
+
+  var _React$useState7 = React.useState(''),
+      _React$useState8 = _slicedToArray(_React$useState7, 2),
+      transform = _React$useState8[0],
+      setTransform = _React$useState8[1];
 
   var animationFrameId = React.useRef(0);
   var currentElement = element;
@@ -47,38 +52,58 @@ function useSwipe(element) {
     animationFrameId.current = window.requestAnimationFrame(function () {
       var _a;
 
-      setTransitionStep(TransitionSteps.MOVE_STEP);
+      if (!initialTouchPositionY) {
+        setInitialTouchPositionY(e.touches[0].clientY);
+        return;
+      }
 
-      if (!currentElement) {
+      if (!initialTouchPositionX) {
+        setInitialTouchPositionX(e.touches[0].clientX);
+        return;
+      }
+
+      var positionsDiffX = initialTouchPositionX - e.touches[0].clientX;
+      var positionsDiffY = initialTouchPositionY - e.touches[0].clientY;
+
+      if (Math.abs(positionsDiffY) > Math.abs(positionsDiffX)) {
         return;
       }
 
-      if (!initialTouchPosition) {
-        setInitialTouchPosition(e.touches[0].clientX);
+      setTransitionStep(TransitionSteps.MOVE_STEP);
+
+      if (!currentElement) {
         return;
       }
 
-      var positionsDiff = initialTouchPosition - e.touches[0].clientX;
+      var positionsDiff = initialTouchPositionX - e.touches[0].clientX;
       var values = !!currentTransform && currentTransform !== 'none' ? (_a = currentTransform.match(/\(((?:[0-9][,\s]*)+)\)/)) === null || _a === void 0 ? void 0 : _a[0].split(', ') : undefined;
       var currentTranslateX = !values || Number.isNaN(Number(values === null || values === void 0 ? void 0 : values[4])) ? 0 : Number(values === null || values === void 0 ? void 0 : values[4]);
       positionsDiff !== 0 && setTransform("translateX(".concat(currentTranslateX - positionsDiff, "px)"));
       animationFrameId.current = 0;
     });
-  }, [currentElement, animationFrameId, initialTouchPosition, currentTransform]);
+  }, [initialTouchPositionX, initialTouchPositionY, currentElement, currentTransform]);
   var handleWindowTouchEnd = React.useCallback(function (e) {
-    var _a;
+    var _a, _b;
 
-    if (!currentElement || !isTransitionMoveStep || !initialTouchPosition) {
+    if (!currentElement || !isTransitionMoveStep || !initialTouchPositionX || !initialTouchPositionY) {
       return;
     }
 
     window.cancelAnimationFrame(animationFrameId.current);
+    var touchPositionY = (_a = e.changedTouches[0]) === null || _a === void 0 ? void 0 : _a.clientY;
+    var touchPositionX = (_b = e.changedTouches[0]) === null || _b === void 0 ? void 0 : _b.clientX;
+
+    if (Math.abs(touchPositionY - initialTouchPositionY) > Math.abs(touchPositionX - initialTouchPositionX)) {
+      setInitialTouchPositionX(null);
+      setInitialTouchPositionY(null);
+      return;
+    }
+
     var windowCenterPosition = window.innerWidth / 2;
-    var touchPosition = (_a = e.changedTouches[0]) === null || _a === void 0 ? void 0 : _a.clientX;
-    var isRightSwipe = touchPosition > initialTouchPosition;
-    var isLeftSwipe = touchPosition < initialTouchPosition;
-    var isMoreHalfSwiped = Math.abs(initialTouchPosition - touchPosition) > windowCenterPosition;
-    setInitialTouchPosition(null);
+    var isRightSwipe = touchPositionX > initialTouchPositionX;
+    var isLeftSwipe = touchPositionX < initialTouchPositionX;
+    var isMoreHalfSwiped = Math.abs(initialTouchPositionX - touchPositionX) > windowCenterPosition;
+    setInitialTouchPositionX(null);
 
     switch (true) {
       case isMoreHalfSwiped && isRightSwipe:
@@ -101,7 +126,7 @@ function useSwipe(element) {
           setTransitionStep(TransitionSteps.INITIAL_STEP);
         }
     }
-  }, [currentElement, isTransitionMoveStep, initialTouchPosition, animationFrameId]);
+  }, [currentElement, isTransitionMoveStep, initialTouchPositionX, initialTouchPositionY]);
   React.useEffect(function () {
     if (!isMobile || !currentElement) {
       return;

package/dist/es/index.d.ts

@@ -7,6 +7,7 @@ export { default as Caption } from './components/Caption/Caption';
 export { default as Carousel } from './components/Carousel/Carousel';
 export { default as Checkbox } from './components/Checkbox/Checkbox';
 export { default as checkBreakpointsPropTypes } from './components/Carousel/checkBreakpointsPropTypes';
+export { default as Chip } from './components/Chip/Chip';
 export { default as Collapse } from './components/Collapse/Collapse';
 export { default as ContentArea } from './components/ContentArea/ContentArea';
 export { default as Counter } from './components/Counter/Counter';

package/dist/es/index.js

@@ -7,6 +7,7 @@ export { default as Caption } from "./components/Caption/Caption";
 export { default as Carousel } from "./components/Carousel/Carousel";
 export { default as Checkbox } from "./components/Checkbox/Checkbox";
 export { default as checkBreakpointsPropTypes } from "./components/Carousel/checkBreakpointsPropTypes";
+export { default as Chip } from "./components/Chip/Chip";
 export { default as Collapse } from "./components/Collapse/Collapse";
 export { default as ContentArea } from "./components/ContentArea/ContentArea";
 export { default as Counter } from "./components/Counter/Counter";

package/dist/lib/components/Button/Button.css

@@ -40,10 +40,14 @@
   line-height: 14px;
 }
 .mfui-button_size-all_extra-small .mfui-button__icon,
-.mfui-button_size-all_extra-small .mfui-button__icon-arrow {
+.mfui-button_size-all_extra-small .mfui-button__icon-arrow,
+.mfui-button_size-all_extra-small.mfui-button_content-type_icon-text .mfui-button__icon {
   width: 20px;
   height: 20px;
 }
+.mfui-button_size-all_extra-small.mfui-button_content-type_icon-text .mfui-button__icon {
+  margin-right: 2px;
+}
 .mfui-button_size-all_small {
   min-width: 40px;
   height: 40px;
@@ -54,12 +58,17 @@
   width: 20px;
   height: 20px;
 }
+.mfui-button_size-all_small.mfui-button_content-type_icon-text .mfui-button__icon {
+  width: 32px;
+  height: 32px;
+}
 .mfui-button_size-all_medium {
   min-width: 52px;
   height: 52px;
 }
 .mfui-button_size-all_medium .mfui-button__icon,
-.mfui-button_size-all_medium .mfui-button__icon-arrow {
+.mfui-button_size-all_medium .mfui-button__icon-arrow,
+.mfui-button_size-all_medium.mfui-button_content-type_icon-text .mfui-button__icon {
   width: 32px;
   height: 32px;
 }
@@ -68,7 +77,8 @@
   height: 60px;
 }
 .mfui-button_size-all_large .mfui-button__icon,
-.mfui-button_size-all_large .mfui-button__icon-arrow {
+.mfui-button_size-all_large .mfui-button__icon-arrow,
+.mfui-button_size-all_large.mfui-button_content-type_icon-text .mfui-button__icon {
   width: 32px;
   height: 32px;
 }
@@ -99,10 +109,14 @@
     line-height: 14px;
   }
   .mfui-button_size-desktop_extra-small .mfui-button__icon,
-  .mfui-button_size-desktop_extra-small .mfui-button__icon-arrow {
+  .mfui-button_size-desktop_extra-small .mfui-button__icon-arrow,
+  .mfui-button_size-desktop_extra-small.mfui-button_content-type_icon-text .mfui-button__icon {
     width: 20px;
     height: 20px;
   }
+  .mfui-button_size-desktop_extra-small.mfui-button_content-type_icon-text .mfui-button__icon {
+    margin-right: 2px;
+  }
   .mfui-button_size-desktop_small {
     min-width: 40px;
     height: 40px;
@@ -113,12 +127,17 @@
     width: 20px;
     height: 20px;
   }
+  .mfui-button_size-desktop_small.mfui-button_content-type_icon-text .mfui-button__icon {
+    width: 32px;
+    height: 32px;
+  }
   .mfui-button_size-desktop_medium {
     min-width: 52px;
     height: 52px;
   }
   .mfui-button_size-desktop_medium .mfui-button__icon,
-  .mfui-button_size-desktop_medium .mfui-button__icon-arrow {
+  .mfui-button_size-desktop_medium .mfui-button__icon-arrow,
+  .mfui-button_size-desktop_medium.mfui-button_content-type_icon-text .mfui-button__icon {
     width: 32px;
     height: 32px;
   }
@@ -127,7 +146,8 @@
     height: 60px;
   }
   .mfui-button_size-desktop_large .mfui-button__icon,
-  .mfui-button_size-desktop_large .mfui-button__icon-arrow {
+  .mfui-button_size-desktop_large .mfui-button__icon-arrow,
+  .mfui-button_size-desktop_large.mfui-button_content-type_icon-text .mfui-button__icon {
     width: 32px;
     height: 32px;
   }
@@ -159,10 +179,14 @@
     line-height: 14px;
   }
   .mfui-button_size-wide_extra-small .mfui-button__icon,
-  .mfui-button_size-wide_extra-small .mfui-button__icon-arrow {
+  .mfui-button_size-wide_extra-small .mfui-button__icon-arrow,
+  .mfui-button_size-wide_extra-small.mfui-button_content-type_icon-text .mfui-button__icon {
     width: 20px;
     height: 20px;
   }
+  .mfui-button_size-wide_extra-small.mfui-button_content-type_icon-text .mfui-button__icon {
+    margin-right: 2px;
+  }
   .mfui-button_size-wide_small {
     min-width: 40px;
     height: 40px;
@@ -173,12 +197,17 @@
     width: 20px;
     height: 20px;
   }
+  .mfui-button_size-wide_small.mfui-button_content-type_icon-text .mfui-button__icon {
+    width: 32px;
+    height: 32px;
+  }
   .mfui-button_size-wide_medium {
     min-width: 52px;
     height: 52px;
   }
   .mfui-button_size-wide_medium .mfui-button__icon,
-  .mfui-button_size-wide_medium .mfui-button__icon-arrow {
+  .mfui-button_size-wide_medium .mfui-button__icon-arrow,
+  .mfui-button_size-wide_medium.mfui-button_content-type_icon-text .mfui-button__icon {
     width: 32px;
     height: 32px;
   }
@@ -187,7 +216,8 @@
     height: 60px;
   }
   .mfui-button_size-wide_large .mfui-button__icon,
-  .mfui-button_size-wide_large .mfui-button__icon-arrow {
+  .mfui-button_size-wide_large .mfui-button__icon-arrow,
+  .mfui-button_size-wide_large.mfui-button_content-type_icon-text .mfui-button__icon {
     width: 32px;
     height: 32px;
   }
@@ -219,10 +249,14 @@
     line-height: 14px;
   }
   .mfui-button_size-tablet_extra-small .mfui-button__icon,
-  .mfui-button_size-tablet_extra-small .mfui-button__icon-arrow {
+  .mfui-button_size-tablet_extra-small .mfui-button__icon-arrow,
+  .mfui-button_size-tablet_extra-small.mfui-button_content-type_icon-text .mfui-button__icon {
     width: 20px;
     height: 20px;
   }
+  .mfui-button_size-tablet_extra-small.mfui-button_content-type_icon-text .mfui-button__icon {
+    margin-right: 2px;
+  }
   .mfui-button_size-tablet_small {
     min-width: 40px;
     height: 40px;
@@ -233,12 +267,17 @@
     width: 20px;
     height: 20px;
   }
+  .mfui-button_size-tablet_small.mfui-button_content-type_icon-text .mfui-button__icon {
+    width: 32px;
+    height: 32px;
+  }
   .mfui-button_size-tablet_medium {
     min-width: 52px;
     height: 52px;
   }
   .mfui-button_size-tablet_medium .mfui-button__icon,
-  .mfui-button_size-tablet_medium .mfui-button__icon-arrow {
+  .mfui-button_size-tablet_medium .mfui-button__icon-arrow,
+  .mfui-button_size-tablet_medium.mfui-button_content-type_icon-text .mfui-button__icon {
     width: 32px;
     height: 32px;
   }
@@ -247,7 +286,8 @@
     height: 60px;
   }
   .mfui-button_size-tablet_large .mfui-button__icon,
-  .mfui-button_size-tablet_large .mfui-button__icon-arrow {
+  .mfui-button_size-tablet_large .mfui-button__icon-arrow,
+  .mfui-button_size-tablet_large.mfui-button_content-type_icon-text .mfui-button__icon {
     width: 32px;
     height: 32px;
   }
@@ -279,10 +319,14 @@
     line-height: 14px;
   }
   .mfui-button_size-mobile_extra-small .mfui-button__icon,
-  .mfui-button_size-mobile_extra-small .mfui-button__icon-arrow {
+  .mfui-button_size-mobile_extra-small .mfui-button__icon-arrow,
+  .mfui-button_size-mobile_extra-small.mfui-button_content-type_icon-text .mfui-button__icon {
     width: 20px;
     height: 20px;
   }
+  .mfui-button_size-mobile_extra-small.mfui-button_content-type_icon-text .mfui-button__icon {
+    margin-right: 2px;
+  }
   .mfui-button_size-mobile_small {
     min-width: 40px;
     height: 40px;
@@ -293,12 +337,17 @@
     width: 20px;
     height: 20px;
   }
+  .mfui-button_size-mobile_small.mfui-button_content-type_icon-text .mfui-button__icon {
+    width: 32px;
+    height: 32px;
+  }
   .mfui-button_size-mobile_medium {
     min-width: 52px;
     height: 52px;
   }
   .mfui-button_size-mobile_medium .mfui-button__icon,
-  .mfui-button_size-mobile_medium .mfui-button__icon-arrow {
+  .mfui-button_size-mobile_medium .mfui-button__icon-arrow,
+  .mfui-button_size-mobile_medium.mfui-button_content-type_icon-text .mfui-button__icon {
     width: 32px;
     height: 32px;
   }
@@ -307,7 +356,8 @@
     height: 60px;
   }
   .mfui-button_size-mobile_large .mfui-button__icon,
-  .mfui-button_size-mobile_large .mfui-button__icon-arrow {
+  .mfui-button_size-mobile_large .mfui-button__icon-arrow,
+  .mfui-button_size-mobile_large.mfui-button_content-type_icon-text .mfui-button__icon {
     width: 32px;
     height: 32px;
   }
@@ -395,14 +445,8 @@
   padding: 0;
 }
 .mfui-button_content-type_icon-text .mfui-button__icon {
-  width: 32px;
-  height: 32px;
   margin-right: 4px;
 }
-.mfui-button_content-type_icon-text.mfui-button_size-all_small .mfui-button__icon,
-.mfui-button_content-type_icon-text.mfui-button_size-all_extra-small .mfui-button__icon {
-  display: none;
-}
 .mfui-button_type_text.mfui-button_theme_green {
   width: -webkit-fit-content;
   width: -moz-fit-content;