@zohodesk/components 1.0.0-temp-255 → 1.0.0-temp-256

package/es/Tab/__tests__/__snapshots__/Tab.spec.js.snap

@@ -1,5 +1,152 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Tab renderBefore / renderAfter slots renderAfter renders a node to the right of the label 1`] = `
+<DocumentFragment>
+  <div
+    aria-controls="t7"
+    aria-label="Home"
+    aria-selected="false"
+    class="tab horizontal basisAuto shrinkOff"
+    data-id="tabMenu_Tab"
+    data-key="t7"
+    data-selector-id="tab"
+    data-test-id="tabMenu_Tab"
+    role="link"
+    tabindex="0"
+  >
+    <div
+      class="textContainer flex cover rowdir both"
+      data-id="containerComponent"
+      data-selector-id="container"
+      data-test-id="containerComponent"
+    >
+      <div
+        class="tabText grow basisAuto shrinkOff"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        Home
+      </div>
+      <span>
+        3
+      </span>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Tab renderBefore / renderAfter slots renderBefore and renderAfter both render around the label 1`] = `
+<DocumentFragment>
+  <div
+    aria-controls="t8"
+    aria-label="Home"
+    aria-selected="false"
+    class="tab horizontal basisAuto shrinkOff"
+    data-id="tabMenu_Tab"
+    data-key="t8"
+    data-selector-id="tab"
+    data-test-id="tabMenu_Tab"
+    role="link"
+    tabindex="0"
+  >
+    <div
+      class="textContainer flex cover rowdir both"
+      data-id="containerComponent"
+      data-selector-id="container"
+      data-test-id="containerComponent"
+    >
+      <span>
+        ◀
+      </span>
+      <div
+        class="tabText grow basisAuto shrinkOff"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        Home
+      </div>
+      <span>
+        ▶
+      </span>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Tab renderBefore / renderAfter slots renderBefore as function renders custom node 1`] = `
+<DocumentFragment>
+  <div
+    aria-controls="t9"
+    aria-label="Home"
+    aria-selected="false"
+    class="tab horizontal basisAuto shrinkOff"
+    data-id="tabMenu_Tab"
+    data-key="t9"
+    data-selector-id="tab"
+    data-test-id="tabMenu_Tab"
+    role="link"
+    tabindex="0"
+  >
+    <div
+      class="textContainer flex cover rowdir both"
+      data-id="containerComponent"
+      data-selector-id="container"
+      data-test-id="containerComponent"
+    >
+      <span>
+        ◀
+      </span>
+      <div
+        class="tabText grow basisAuto shrinkOff"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        Home
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Tab renderBefore / renderAfter slots renderBefore renders a node to the left of the label 1`] = `
+<DocumentFragment>
+  <div
+    aria-controls="t6"
+    aria-label="Home"
+    aria-selected="false"
+    class="tab horizontal basisAuto shrinkOff"
+    data-id="tabMenu_Tab"
+    data-key="t6"
+    data-selector-id="tab"
+    data-test-id="tabMenu_Tab"
+    role="link"
+    tabindex="0"
+  >
+    <div
+      class="textContainer flex cover rowdir both"
+      data-id="containerComponent"
+      data-selector-id="container"
+      data-test-id="containerComponent"
+    >
+      <span>
+        ◀
+      </span>
+      <div
+        class="tabText grow basisAuto shrinkOff"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        Home
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
 exports[`Tab rendering the defult props 1`] = `
 <DocumentFragment>
   <div
@@ -20,3 +167,172 @@ exports[`Tab rendering the defult props 1`] = `
   </div>
 </DocumentFragment>
 `;
+
+exports[`Tab variant-based label rendering renderIcon as function receives no args and renders custom node 1`] = `
+<DocumentFragment>
+  <div
+    aria-controls="t5"
+    aria-label="Home"
+    aria-selected="false"
+    class="tab horizontal basisAuto shrinkOff"
+    data-id="tabMenu_Tab"
+    data-key="t5"
+    data-selector-id="tab"
+    data-test-id="tabMenu_Tab"
+    role="link"
+    tabindex="0"
+  >
+    <div
+      class="textContainer flex cover rowdir both"
+      data-id="containerComponent"
+      data-selector-id="container"
+      data-test-id="containerComponent"
+    >
+      <span>
+        ★
+      </span>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Tab variant-based label rendering renderIcon overrides iconName 1`] = `
+<DocumentFragment>
+  <div
+    aria-controls="t4"
+    aria-label="Home"
+    aria-selected="false"
+    class="tab horizontal basisAuto shrinkOff"
+    data-id="tabMenu_Tab"
+    data-key="t4"
+    data-selector-id="tab"
+    data-test-id="tabMenu_Tab"
+    role="link"
+    tabindex="0"
+  >
+    <div
+      class="textContainer flex cover rowdir both"
+      data-id="containerComponent"
+      data-selector-id="container"
+      data-test-id="containerComponent"
+    >
+      <span>
+        ★
+      </span>
+      <div
+        class="tabText grow basisAuto shrinkOff"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        Home
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Tab variant-based label rendering variant="icon" renders icon and suppresses text label 1`] = `
+<DocumentFragment>
+  <div
+    aria-controls="t2"
+    aria-label="Home"
+    aria-selected="false"
+    class="tab horizontal basisAuto shrinkOff"
+    data-id="tabMenu_Tab"
+    data-key="t2"
+    data-selector-id="tab"
+    data-test-id="tabMenu_Tab"
+    role="link"
+    tabindex="0"
+  >
+    <div
+      class="textContainer flex cover rowdir both"
+      data-id="containerComponent"
+      data-selector-id="container"
+      data-test-id="containerComponent"
+    >
+      <i
+        aria-hidden="true"
+        class="zd_font_icons basic icon-menu    rtl "
+        data-id="fontIcon"
+        data-selector-id="fontIcon"
+        data-test-id="fontIcon"
+      />
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Tab variant-based label rendering variant="iconWithText" renders icon followed by text 1`] = `
+<DocumentFragment>
+  <div
+    aria-controls="t3"
+    aria-label="Home"
+    aria-selected="false"
+    class="tab horizontal basisAuto shrinkOff"
+    data-id="tabMenu_Tab"
+    data-key="t3"
+    data-selector-id="tab"
+    data-test-id="tabMenu_Tab"
+    role="link"
+    tabindex="0"
+  >
+    <div
+      class="textContainer flex cover rowdir both"
+      data-id="containerComponent"
+      data-selector-id="container"
+      data-test-id="containerComponent"
+    >
+      <i
+        aria-hidden="true"
+        class="zd_font_icons basic icon-menu    rtl "
+        data-id="fontIcon"
+        data-selector-id="fontIcon"
+        data-test-id="fontIcon"
+      />
+      <div
+        class="tabText grow basisAuto shrinkOff"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        Home
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Tab variant-based label rendering variant="text" renders text only 1`] = `
+<DocumentFragment>
+  <div
+    aria-controls="t1"
+    aria-label="Home"
+    aria-selected="false"
+    class="tab horizontal basisAuto shrinkOff"
+    data-id="tabMenu_Tab"
+    data-key="t1"
+    data-selector-id="tab"
+    data-test-id="tabMenu_Tab"
+    role="link"
+    tabindex="0"
+  >
+    <div
+      class="textContainer flex cover rowdir both"
+      data-id="containerComponent"
+      data-selector-id="container"
+      data-test-id="containerComponent"
+    >
+      <div
+        class="tabText grow basisAuto shrinkOff"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        Home
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;

package/es/Tab/props/defaultProps.js

@@ -3,7 +3,8 @@ export const Tab_defaultProps = {
   contentAlign: 'both',
   contentAlignBox: 'row',
   customProps: {},
-  dataSelectorId: 'tab'
+  dataSelectorId: 'tab',
+  variant: 'text'
 };
 export const TabContent_defaultProps = {
   dataId: 'tabContent',
@@ -36,7 +37,7 @@ export const Tabs_defaultProps = {
   searchBoxSize: 'small',
   searchErrorText: 'No results',
   placeHolderText: 'Search',
-  isAbsolutePositioningNeeded: true,
+  isAbsolutePositioningNeeded: false,
   isRestrictScroll: false,
   moreContainerClass: ''
 };

package/es/Tab/props/propTypes.js

@@ -1,4 +1,6 @@
 import PropTypes from 'prop-types';
+import { VARIANT } from "../utils/tabConfigs";
+const renderSlotType = PropTypes.oneOfType([PropTypes.node, PropTypes.func]);
 export const Tab_propTypes = {
   activeClass: PropTypes.string,
   align: PropTypes.oneOf(['vertical', 'horizontal']),
@@ -26,7 +28,14 @@ export const Tab_propTypes = {
   contentAlignBox: PropTypes.oneOf(['row', 'column', 'row-reverse', 'column-reverse']),
   customProps: PropTypes.object,
   isVirtual: PropTypes.bool,
-  dataSelectorId: PropTypes.string
+  dataSelectorId: PropTypes.string,
+  variant: PropTypes.oneOf(Object.values(VARIANT)),
+  iconPlacement: PropTypes.string,
+  iconName: PropTypes.string,
+  iconSize: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  renderIcon: renderSlotType,
+  renderBefore: renderSlotType,
+  renderAfter: renderSlotType
 };
 export const TabContent_propTypes = {
   children: PropTypes.node,
@@ -82,7 +91,7 @@ export const Tabs_propTypes = {
   showTitleInMoreOptions: PropTypes.bool,
   style: PropTypes.object,
   togglePopup: PropTypes.func,
-  type: PropTypes.oneOf(['alpha', 'beta', 'delta']),
+  type: PropTypes.oneOf(['alpha', 'beta', 'delta', 'default']),
   getTargetRef: PropTypes.func,
   containerClass: PropTypes.string,
   customProps: PropTypes.shape({
@@ -114,6 +123,6 @@ export const TabWrapper_propTypes = {
   needPadding: PropTypes.bool,
   needTabBorder: PropTypes.bool,
   onSelect: PropTypes.func,
-  type: PropTypes.oneOf(['alpha', 'beta', 'delta']),
+  type: PropTypes.oneOf(['alpha', 'beta', 'delta', 'default']),
   dataSelectorId: PropTypes.string
 };

package/es/Tab/utils/tabConfigs.js

@@ -1,3 +1,8 @@
+export const VARIANT = {
+  TEXT: 'text',
+  ICON: 'icon',
+  ICON_WITH_TEXT: 'iconWithText'
+};
 export const TAB_ALIGN_MAPPING = {
   vertical: 'column',
   horizontal: 'row',

package/es/utils/datetime/common.js

@@ -14,7 +14,10 @@ export function getTimeOffset() {
   const matchingOffset = Object.keys(offsetMap).find(offset => GMT.getTimezoneOffset() === Number(offset));
   return matchingOffset ? offsetMap[matchingOffset].toString().split(' ') : ['', ''];
 }
-export function formatDate(dateMill, mask) {
+export function formatDate(dateMill, mask, {
+  i18nShortMonths,
+  i18nMonths
+} = {}) {
   let date = new Date(dateMill);
   let O = getTimeOffset()[0];
   let Z = getTimeOffset()[1];
@@ -26,6 +29,10 @@ export function formatDate(dateMill, mask) {
   let M = date.getMinutes();
   let s = date.getSeconds();
   let L = date.getMilliseconds();
+  const defaultShortMonths = dateFormat.monthNames.slice(0, 12);
+  const defaultMonths = dateFormat.monthNames.slice(12);
+  const resolvedShortMonths = Array.isArray(i18nShortMonths) ? i18nShortMonths : defaultShortMonths;
+  const resolvedMonths = Array.isArray(i18nMonths) ? i18nMonths : defaultMonths;
   let flags = {
     d: d,
     O: O,
@@ -38,8 +45,8 @@ export function formatDate(dateMill, mask) {
     DDDD: dateFormat.dayNames[D + 7],
     M: m + 1,
     MM: pad(m + 1, 2),
-    MMM: dateFormat.monthNames[m],
-    MMMM: dateFormat.monthNames[m + 12],
+    MMM: resolvedShortMonths[m],
+    MMMM: resolvedMonths[m],
     yy: String(y).slice(2),
     YY: String(y).slice(2),
     yyyy: y,

package/lib/AppContainer/AppContainer.js

@@ -23,6 +23,10 @@ require("@zohodesk/variables/assets/colorVariables.module.css");
 
 require("@zohodesk/variables/assets/dotVariables.module.css");
 
+require("@zohodesk/variables/assets/sizeVariables.module.css");
+
+require("@zohodesk/variables/assets/fontsizeVariables.module.css");
+
 require("@zohodesk/variables/es/fontFamilyVariables.module.css");
 
 require("@zohodesk/variables/es/fontWeightVariables.module.css");

package/lib/DateTime/DateWidget.js

@@ -102,6 +102,7 @@ var DateWidgetComponent = /*#__PURE__*/function (_React$Component) {
     _this.handleDateIconClick = _this.handleDateIconClick.bind(_assertThisInitialized(_this));
     _this.handleSelectionRangeDetails = _this.handleSelectionRangeDetails.bind(_assertThisInitialized(_this));
     _this.handleBlurSelectionRange = _this.handleBlurSelectionRange.bind(_assertThisInitialized(_this));
+    _this.getI18nMonthLabels = _this.getI18nMonthLabels.bind(_assertThisInitialized(_this));
     _this.state = {
       selected: '',
       displayText: '',
@@ -313,6 +314,15 @@ var DateWidgetComponent = /*#__PURE__*/function (_React$Component) {
 
       !isOpenOnly && togglePopup(e, "".concat(defaultPosition, "Right"));
     }
+  }, {
+    key: "getI18nMonthLabels",
+    value: function getI18nMonthLabels() {
+      var i18nKeys = this.props.i18nKeys;
+      return {
+        i18nShortMonths: i18nKeys.monthNamesShort || _constants.i18nShortMonths,
+        i18nMonths: i18nKeys.monthNames || _constants.i18nMonths
+      };
+    }
   }, {
     key: "handleSelectionRangeDetails",
     value: function handleSelectionRangeDetails(props) {
@@ -328,7 +338,12 @@ var DateWidgetComponent = /*#__PURE__*/function (_React$Component) {
           hour = _this$state2.hour,
           minute = _this$state2.minute,
           noon = _this$state2.noon;
-      var selected = value === _constants.INVALID_DATE ? '' : value; //New UI Changes
+      var selected = value === _constants.INVALID_DATE ? '' : value;
+
+      var _this$getI18nMonthLab = this.getI18nMonthLabels(),
+          localizedShortMonths = _this$getI18nMonthLab.i18nShortMonths,
+          localizedMonths = _this$getI18nMonthLab.i18nMonths; //New UI Changes
+
 
       var dateFormatDetails = (0, _dateFormat.getDateFormatDetails)(dateFormat, {
         isHideCurrentYear: false,
@@ -337,8 +352,8 @@ var DateWidgetComponent = /*#__PURE__*/function (_React$Component) {
         isDateTime: isDateTime
       });
       var dateFormatSelection = (0, _dateFormat.getDateFormatSelection)(dateFormatDetails, isDateTime, {
-        i18nShortMonths: _constants.i18nShortMonths,
-        i18nMonths: _constants.i18nMonths,
+        i18nShortMonths: localizedShortMonths,
+        i18nMonths: localizedMonths,
         selectedValue: selected,
         day: day,
         month: month,
@@ -365,6 +380,11 @@ var DateWidgetComponent = /*#__PURE__*/function (_React$Component) {
           value = props.value,
           is24Hour = props.is24Hour,
           isHideCurrentYear = props.isHideCurrentYear;
+
+      var _this$getI18nMonthLab2 = this.getI18nMonthLabels(),
+          localizedShortMonths = _this$getI18nMonthLab2.i18nShortMonths,
+          localizedMonths = _this$getI18nMonthLab2.i18nMonths;
+
       var dateFormatDetails = (0, _dateFormat.getDateFormatDetails)(dateFormat, {
         isHideCurrentYear: isHideCurrentYear,
         value: value,
@@ -383,7 +403,10 @@ var DateWidgetComponent = /*#__PURE__*/function (_React$Component) {
           format = "".concat(newDateFormat, " ").concat(is24Hour ? 'HH:mm' : 'hh:mm A');
         }
 
-        displayText = (0, _common.formatDate)(convertedValue, format);
+        displayText = (0, _common.formatDate)(convertedValue, format, {
+          i18nShortMonths: localizedShortMonths,
+          i18nMonths: localizedMonths
+        });
       }
 
       return {
@@ -849,6 +872,10 @@ var DateWidgetComponent = /*#__PURE__*/function (_React$Component) {
           isPopupOpen = _this$props9.isPopupOpen;
 
       if (isDateEdited || isFocused || isPopupReady || isPopupOpen) {
+        var _this$getI18nMonthLab3 = this.getI18nMonthLabels(),
+            localizedShortMonths = _this$getI18nMonthLab3.i18nShortMonths,
+            localizedMonths = _this$getI18nMonthLab3.i18nMonths;
+
         var _getDateDetails2 = (0, _dateFormat.getDateDetails)(selected, {
           day: day,
           month: month,
@@ -880,8 +907,8 @@ var DateWidgetComponent = /*#__PURE__*/function (_React$Component) {
           minute: selectedMinute,
           noon: selectedNoon
         }, dateFormatDetails, isDateTime, {
-          i18nShortMonths: _constants.i18nShortMonths,
-          i18nMonths: _constants.i18nMonths,
+          i18nShortMonths: localizedShortMonths,
+          i18nMonths: localizedMonths,
           is24Hour: is24Hour
         });
         return dateTimeString;

package/lib/Provider/LibraryContext.js

@@ -48,7 +48,8 @@ var LibraryContextProvider = function LibraryContextProvider(_ref) {
       shouldStrikeThroughDisabledButton = _ref.shouldStrikeThroughDisabledButton,
       labelRequiredType = _ref.labelRequiredType,
       shouldHighlightRequiredLabel = _ref.shouldHighlightRequiredLabel,
-      children = _ref.children;
+      children = _ref.children,
+      buttonComponentVersion = _ref.buttonComponentVersion;
 
   var _useState = (0, _react.useState)({
     isReducedMotion: isReducedMotion,
@@ -57,6 +58,7 @@ var LibraryContextProvider = function LibraryContextProvider(_ref) {
     hasTagColorInheritedToText: hasTagColorInheritedToText,
     shouldIndicateSwitchState: shouldIndicateSwitchState,
     shouldStrikeThroughDisabledButton: shouldStrikeThroughDisabledButton,
+    buttonComponentVersion: buttonComponentVersion,
     labelRequiredType: labelRequiredType,
     shouldHighlightRequiredLabel: shouldHighlightRequiredLabel
   }),
@@ -85,6 +87,7 @@ LibraryContextProvider.propTypes = {
   direction: _propTypes["default"].string,
   shouldIndicateSwitchState: _propTypes["default"].bool,
   shouldStrikeThroughDisabledButton: _propTypes["default"].bool,
+  buttonComponentVersion: _propTypes["default"].oneOf(['default', 'v1']),
   labelRequiredType: _propTypes["default"].oneOf(['asterisk', 'text']),
   shouldHighlightRequiredLabel: _propTypes["default"].bool
 };
@@ -95,6 +98,7 @@ LibraryContextProvider.defaultProps = {
   hasTagColorInheritedToText: true,
   shouldIndicateSwitchState: false,
   shouldStrikeThroughDisabledButton: false,
+  buttonComponentVersion: 'v1',
   labelRequiredType: 'asterisk',
   shouldHighlightRequiredLabel: true
 };

package/lib/Select/Select.js

@@ -1136,7 +1136,9 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
         }), isFetchingOptions && /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
           isCover: false,
           align: "both"
-        }, /*#__PURE__*/_react["default"].createElement(_Loader["default"], null))), getFooter ? /*#__PURE__*/_react["default"].createElement(_Card.CardFooter, null, getFooter()) : null)) : /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+        }, /*#__PURE__*/_react["default"].createElement(_Loader["default"], null))), getFooter ? /*#__PURE__*/_react["default"].createElement(_Card.CardFooter, null, getFooter({
+          closePopup: _this7.handlePopupClose
+        })) : null)) : /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
           flexible: true
         }, getChildren())));
       }) : null);

package/lib/Tab/Tab.js

@@ -21,6 +21,10 @@ var _tabConfigs = require("./utils/tabConfigs");
 
 var _TabModule = _interopRequireDefault(require("./Tab.module.css"));
 
+var _utils = require("@zohodesk/utils");
+
+var _icons = require("@zohodesk/icons");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -41,6 +45,10 @@ var tabTypes = {
   delta: {
     active: 'deltaActive',
     tab: 'tabDelta'
+  },
+  "default": {
+    active: 'defaultActive',
+    tab: 'tabDefault'
   }
 };
 
@@ -71,7 +79,14 @@ function Tab(_ref) {
       isVirtual = _ref.isVirtual,
       contentAlign = _ref.contentAlign,
       contentAlignBox = _ref.contentAlignBox,
-      customProps = _ref.customProps;
+      customProps = _ref.customProps,
+      variant = _ref.variant,
+      iconPlacement = _ref.iconPlacement,
+      iconName = _ref.iconName,
+      iconSize = _ref.iconSize,
+      renderIcon = _ref.renderIcon,
+      renderBefore = _ref.renderBefore,
+      renderAfter = _ref.renderAfter;
   var clickListener = (0, _react.useCallback)(function (event) {
     if (isLink && event && (event.metaKey || event.altKey || event.ctrlKey || event.shiftKey)) {
       event && event.stopPropagation();
@@ -93,8 +108,50 @@ function Tab(_ref) {
   }, [id, isVirtual]);
   var activeWithAppearance = (0, _Common.cs)([_TabModule["default"][styleContent.active], needBorder && !isAnimate && _TabModule["default"]["".concat(styleContent.active, "_border")]]);
   var activeClasses = (0, _Common.cs)([needAppearance && activeWithAppearance, activeClass]);
-  var inActiveClasses = needAppearance && (0, _Common.cs)([_TabModule["default"][styleContent.tab], tabTypes[type] && _TabModule["default"]["".concat("".concat(type, "Hover"))]]);
-  var tabClass = (0, _Common.cs)([_TabModule["default"].tab, _tabConfigs.TAB_DIRECTION_MAPPING[align] === 'column' ? _TabModule["default"].vertical : _TabModule["default"].horizontal, isDisabled && _TabModule["default"].disabled, needBorder && !isAnimate && needAppearance && _TabModule["default"].border, isActive ? activeClasses : inActiveClasses, className]);
+  var inActiveClasses = needAppearance && (0, _Common.cs)([_TabModule["default"][styleContent.tab], tabTypes[type] && _TabModule["default"]["".concat(type, "Hover")]]);
+  var tabClass = (0, _Common.cs)([_TabModule["default"].tab, _tabConfigs.TAB_DIRECTION_MAPPING[align] === 'column' ? _TabModule["default"].vertical : _TabModule["default"].horizontal, isDisabled && _TabModule["default"].disabled, needBorder && !isAnimate && needAppearance && _TabModule["default"].border, isActive ? activeClasses : inActiveClasses, variant === _tabConfigs.VARIANT.ICON && _TabModule["default"].tabVariantIcon, variant === _tabConfigs.VARIANT.ICON_WITH_TEXT && _TabModule["default"].tabVariantIconWithText, className]);
+
+  var _renderIconNode = function _renderIconNode() {
+    if ((0, _utils.isRenderable)(renderIcon)) {
+      return (0, _utils.renderNode)(renderIcon);
+    }
+
+    if (!iconName) {
+      return null;
+    }
+
+    return /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
+      name: iconName,
+      size: iconSize
+    });
+  };
+
+  var _renderBeforeNode = function _renderBeforeNode() {
+    if (!(0, _utils.isRenderable)(renderBefore)) {
+      return null;
+    }
+
+    return (0, _utils.renderNode)(renderBefore);
+  };
+
+  var _renderAfterNode = function _renderAfterNode() {
+    if (!(0, _utils.isRenderable)(renderAfter)) {
+      return null;
+    }
+
+    return (0, _utils.renderNode)(renderAfter);
+  };
+
+  var _renderLabel = function _renderLabel() {
+    var showIcon = variant !== _tabConfigs.VARIANT.TEXT && ((0, _utils.isRenderable)(renderIcon) || iconName);
+    var showText = variant !== _tabConfigs.VARIANT.ICON && text !== undefined && text !== null;
+    return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, showIcon ? _renderIconNode() : null, showText ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+      flexible: true,
+      adjust: true,
+      className: _TabModule["default"].tabText
+    }, text) : null);
+  };
+
   return /*#__PURE__*/_react["default"].createElement(_Layout.Box, _extends({
     tourId: tourId,
     tagName: isLink ? 'a' : 'div',
@@ -118,13 +175,9 @@ function Tab(_ref) {
     alignBox: contentAlignBox,
     align: contentAlign,
     className: _TabModule["default"].textContainer
-  }, text && /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-    flexible: true,
-    adjust: true,
-    className: _TabModule["default"].tabText
-  }, text), children ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+  }, _renderBeforeNode(), _renderLabel(), children ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
     shrink: true
-  }, children) : null));
+  }, children) : null, _renderAfterNode()));
 }
 
 Tab.defaultProps = _defaultProps.Tab_defaultProps;