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

package/es/v1/helpers/colorHelpers/colorHelper.js

@@ -48,37 +48,27 @@ const toBorderIntensity = (tone, hasState, isLighter) => {
   return `${tone}-${isLighter ? intensity.borderLight : intensity.base}`;
 };
 
-export const getBgClass = _ref => {
-  let {
-    state,
-    tone,
-    isLighter
-  } = _ref;
-  return paletteBgStyle[withState(state, `bg-${toBgIntensity(tone, !!state, isLighter)}`)];
-};
-export const getTextClass = _ref2 => {
-  let {
-    state,
-    textTone
-  } = _ref2;
-  return paletteTextStyle[withState(state, `text-${toTextIntensity(textTone, !!state)}`)];
-};
-export const getBorderClass = _ref3 => {
-  let {
-    state,
-    tone,
-    isLighter
-  } = _ref3;
-  return paletteBorderStyle[withState(state, `border-${toBorderIntensity(tone, !!state, isLighter)}`)];
-};
-
-const buildPaletteClasses = (config, _ref4) => {
-  let {
-    bgAppearance,
-    borderAppearance,
-    paletteShade,
-    isSelected
-  } = _ref4;
+export const getBgClass = ({
+  state,
+  tone,
+  isLighter
+}) => paletteBgStyle[withState(state, `bg-${toBgIntensity(tone, !!state, isLighter)}`)];
+export const getTextClass = ({
+  state,
+  textTone
+}) => paletteTextStyle[withState(state, `text-${toTextIntensity(textTone, !!state)}`)];
+export const getBorderClass = ({
+  state,
+  tone,
+  isLighter
+}) => paletteBorderStyle[withState(state, `border-${toBorderIntensity(tone, !!state, isLighter)}`)];
+
+const buildPaletteClasses = (config, {
+  bgAppearance,
+  borderAppearance,
+  paletteShade,
+  isSelected
+}) => {
   const {
     tone,
     textTone,
@@ -159,14 +149,13 @@ const buildPaletteClasses = (config, _ref4) => {
   };
 };
 
-const getPaletteClasses = _ref5 => {
-  let {
-    palette,
-    bgAppearance,
-    borderAppearance,
-    paletteShade,
-    isSelected
-  } = _ref5;
+const getPaletteClasses = ({
+  palette,
+  bgAppearance,
+  borderAppearance,
+  paletteShade,
+  isSelected
+}) => {
   const config = PALETTE_CONFIG[palette];
   return config ? buildPaletteClasses(config, {
     bgAppearance,

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/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;

package/lib/Tab/Tab.module.css

@@ -11,6 +11,9 @@
   width: 100% ;
   max-width: 100% ;
 }
+.textContainer {
+  gap: var(--zd_size4) ;
+}
 .textContainer,
 .tabText {
   max-width: inherit ;
@@ -91,3 +94,25 @@
   composes: delta;
   color: var(--zdt_tab_alpha_active_text);
 }
+
+.tabDefault {
+  transition: all var(--zd_transition2);
+  padding-inline: 0 ;
+  padding-block: 0 ;
+  font-size: var(--zd_font_size11) ;
+  line-height: 3;
+  margin-inline-end: var(--zd_size34) ;
+  color: var(--zd-text-secondary);
+}
+.defaultHover:hover { color: var(--zd-text-primary); }
+.defaultActive {
+  transition: all var(--zd_transition2);
+  padding-inline: 0 ;
+  padding-block: 0 ;
+  font-size: var(--zd_font_size11) ;
+  line-height: 3;
+  margin-inline-end: var(--zd_size34) ;
+  color: var(--zd-text-primary);
+  border-bottom: 1px solid var(--zdt_tab_alpha_active_border);
+}
+.defaultActive_border { border-color: var(--zdt_tab_alpha_active_border); }

package/lib/Tab/Tabs.js

@@ -25,6 +25,8 @@ var _ResizeObserver = _interopRequireDefault(require("../Responsive/ResizeObserv
 
 var _ListItem = _interopRequireDefault(require("../ListItem/ListItem"));
 
+var _ListItemWithIcon = _interopRequireDefault(require("../ListItem/ListItemWithIcon"));
+
 var _icons = require("@zohodesk/icons");
 
 var _TabsModule = _interopRequireDefault(require("./Tabs.module.css"));
@@ -598,6 +600,10 @@ var Tabs = /*#__PURE__*/function (_React$Component) {
         moreTabs: moreTabs
       });
       var hasSearch = moreTabs.length > 4;
+      var isDefaultType = type === 'default';
+      var defaultMoreClass = isDefaultType ? _TabsModule["default"].defaultMoreButton : '';
+      var defaultMoreActiveClass = isDefaultType ? _TabsModule["default"].defaultMoreButtonActive : '';
+      var effectiveMenuItemClass = isDefaultType ? "".concat(_TabsModule["default"].defaultMenuListItem).concat(menuItemClass ? " ".concat(menuItemClass) : '') : menuItemClass;
       return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, _react["default"].Children.map(mainTabs, function (child) {
         if (!child) {
           return null;
@@ -631,7 +637,7 @@ var Tabs = /*#__PURE__*/function (_React$Component) {
         className: "".concat(_TabsModule["default"].menu, " "),
         dataSelectorId: "".concat(dataSelectorId, "_moreIcon")
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, _extends({
-        className: "".concat(_semanticButtonModule["default"].buttonReset, " ").concat(moreButtonClass, " ").concat(isPopupOpen ? moreButtonActiveClass : ''),
+        className: "".concat(_semanticButtonModule["default"].buttonReset, " ").concat(defaultMoreClass, " ").concat(moreButtonClass, " ").concat(isPopupOpen ? "".concat(defaultMoreActiveClass, " ").concat(moreButtonActiveClass) : ''),
         align: "both",
         onClick: this.togglePopup,
         dataId: "moreTabs",
@@ -699,8 +705,33 @@ var Tabs = /*#__PURE__*/function (_React$Component) {
               isLink = data.isLink,
               href = data.href,
               children = data.children,
-              dataId = data.dataId;
+              dataId = data.dataId,
+              variant = data.variant,
+              iconName = data.iconName,
+              iconSize = data.iconSize;
           var value = text ? text : showTitleInMoreOptions ? title : null;
+          var showIconInDropdown = variant !== _tabConfigs.VARIANT.TEXT && iconName;
+
+          if (showIconInDropdown) {
+            return /*#__PURE__*/_react["default"].createElement(_ListItemWithIcon["default"], _extends({
+              key: id,
+              value: value,
+              onClick: _this8.moreTabSelect,
+              id: id,
+              title: title || text,
+              isLink: isLink,
+              href: href,
+              autoHover: true,
+              iconName: iconName,
+              iconSize: iconSize,
+              customClass: {
+                customListItem: effectiveMenuItemClass
+              },
+              target: "self",
+              dataId: "".concat(dataId, "_Tab")
+            }, ListItemProps));
+          }
+
           return /*#__PURE__*/_react["default"].createElement(_ListItem["default"], _extends({
             key: id,
             value: value,
@@ -711,7 +742,7 @@ var Tabs = /*#__PURE__*/function (_React$Component) {
             href: href,
             autoHover: true,
             customClass: {
-              customListItem: menuItemClass
+              customListItem: effectiveMenuItemClass
             },
             target: "self",
             dataId: "".concat(dataId, "_Tab")

package/lib/Tab/Tabs.module.css

@@ -82,6 +82,51 @@
   border-bottom: 1px dotted var(--zdt_tabs_alpha_border);
 }
 
+.default {
+  height: var(--zd_size35) ;
+  transition: padding var(--zd_transition3);
+  z-index: 2;
+  background-color: var(--zd-bg-secondary);
+}
+
+.default_padding {
+  padding-inline-start: var(--zd_size10) ;
+}
+
+.default_border {
+  border-bottom: 1px solid var(--zd-border-primary);
+}
+
+.defaultMoreButton {
+  max-height: var(--zd_size28) ;
+  color: var(--zd-text-secondary);
+  padding: var(--zd_size6) ;
+  border: 1px solid var(--zd-border-transparent);
+  border-radius: 4px;
+  margin-top: var(--zd_size3) ;
+  cursor: pointer;
+}
+
+.defaultMoreButton:hover {
+  border-color: var(--zdt_rippleeffect_navy_border);
+}
+
+.defaultMoreButtonActive {
+  border-color: var(--zdt_cta_secondary_light_border);
+  background: var(--zd-bg-brandLight);
+}
+
+.defaultMoreButtonActive:hover {
+  border-color: var(--zdt_cta_secondary_light_border);
+  background: var(--zd-bg-brandLight);
+}
+
+.defaultMenuListItem {
+  font-size: var(--zd_font_size11) ;
+  text-transform: uppercase;
+  letter-spacing: 0.4px;
+}
+
 .delta .highlight {
   border-color: var(--zdt_tabs_delta_border);
 }
@@ -126,7 +171,7 @@
 
 .search {
   padding-block: var(--zd_size6) 0 ;
-  padding-inline:var(--zd_size20) ;
+  padding-inline: var(--zd_size20) ;
 }
 
 .emptyStateContainer {
@@ -153,5 +198,5 @@
 
 .listWrapper {
   padding-block: var(--zd_size10) ;
-  padding-inline:0 ;
-}
+  padding-inline: 0 ;
+}

package/lib/Tab/__tests__/Tab.spec.js

@@ -8,6 +8,8 @@ var _Tab = _interopRequireDefault(require("../Tab"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+var noop = function noop() {};
+
 describe('Tab', function () {
   test('rendering the defult props', function () {
     var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tab["default"], null)),
@@ -15,4 +17,117 @@ describe('Tab', function () {
 
     expect(asFragment()).toMatchSnapshot();
   });
+  describe('variant-based label rendering', function () {
+    test('variant="text" renders text only', function () {
+      var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tab["default"], {
+        id: "t1",
+        text: "Home",
+        variant: "text",
+        onSelect: noop
+      })),
+          asFragment = _render2.asFragment;
+
+      expect(asFragment()).toMatchSnapshot();
+    });
+    test('variant="icon" renders icon and suppresses text label', function () {
+      var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tab["default"], {
+        id: "t2",
+        text: "Home",
+        variant: "icon",
+        iconName: "ZD-TB-menu",
+        onSelect: noop
+      })),
+          asFragment = _render3.asFragment;
+
+      expect(asFragment()).toMatchSnapshot();
+    });
+    test('variant="iconWithText" renders icon followed by text', function () {
+      var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tab["default"], {
+        id: "t3",
+        text: "Home",
+        variant: "iconWithText",
+        iconName: "ZD-TB-menu",
+        onSelect: noop
+      })),
+          asFragment = _render4.asFragment;
+
+      expect(asFragment()).toMatchSnapshot();
+    });
+    test('renderIcon overrides iconName', function () {
+      var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tab["default"], {
+        id: "t4",
+        text: "Home",
+        variant: "iconWithText",
+        renderIcon: /*#__PURE__*/_react["default"].createElement("span", null, "\u2605"),
+        iconName: "ZD-TB-menu",
+        onSelect: noop
+      })),
+          asFragment = _render5.asFragment;
+
+      expect(asFragment()).toMatchSnapshot();
+    });
+    test('renderIcon as function receives no args and renders custom node', function () {
+      var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tab["default"], {
+        id: "t5",
+        text: "Home",
+        variant: "icon",
+        renderIcon: function renderIcon() {
+          return /*#__PURE__*/_react["default"].createElement("span", null, "\u2605");
+        },
+        onSelect: noop
+      })),
+          asFragment = _render6.asFragment;
+
+      expect(asFragment()).toMatchSnapshot();
+    });
+  });
+  describe('renderBefore / renderAfter slots', function () {
+    test('renderBefore renders a node to the left of the label', function () {
+      var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tab["default"], {
+        id: "t6",
+        text: "Home",
+        renderBefore: /*#__PURE__*/_react["default"].createElement("span", null, "\u25C0"),
+        onSelect: noop
+      })),
+          asFragment = _render7.asFragment;
+
+      expect(asFragment()).toMatchSnapshot();
+    });
+    test('renderAfter renders a node to the right of the label', function () {
+      var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tab["default"], {
+        id: "t7",
+        text: "Home",
+        renderAfter: /*#__PURE__*/_react["default"].createElement("span", null, "3"),
+        onSelect: noop
+      })),
+          asFragment = _render8.asFragment;
+
+      expect(asFragment()).toMatchSnapshot();
+    });
+    test('renderBefore and renderAfter both render around the label', function () {
+      var _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tab["default"], {
+        id: "t8",
+        text: "Home",
+        renderBefore: /*#__PURE__*/_react["default"].createElement("span", null, "\u25C0"),
+        renderAfter: /*#__PURE__*/_react["default"].createElement("span", null, "\u25B6"),
+        onSelect: noop
+      })),
+          asFragment = _render9.asFragment;
+
+      expect(asFragment()).toMatchSnapshot();
+    });
+    test('renderBefore as function renders custom node', function () {
+      var _render10 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tab["default"], {
+        id: "t9",
+        text: "Home",
+        renderBefore: function renderBefore() {
+          return /*#__PURE__*/_react["default"].createElement("span", null, "\u25C0");
+        },
+        onSelect: noop
+      })),
+          asFragment = _render10.asFragment;
+
+      expect(asFragment()).toMatchSnapshot();
+    });
+  });
 });