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

package/es/Tab/Tabs.js

@@ -4,8 +4,10 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 
 /* eslint css-modules/no-unused-class: [2, {
       markAsUsed: [
-          'hidden','alpha','gamma','beta','delta','special','text','maxWidth','widgetList','menuContainer','border','tabText','block','tabAlpha','alphaActive','gammaActive','betaActive','deltaActive','tabGamma','tabBeta','tabDelta','specialActive','tabSpecial',
-          'alpha_padding','alpha_border','gamma_padding','gamma_border','beta_padding','beta_border','delta_padding','delta_border','textContainer','disabled','alphaActive_border','gammaActive_border','betaActive_border','deltaActive_border'
+          'hidden','alpha','gamma','beta','delta','default','special','text','maxWidth','widgetList','menuContainer','border','tabText','block','tabAlpha','alphaActive','gammaActive','betaActive','deltaActive','tabGamma','tabBeta','tabDelta','specialActive','tabSpecial',
+          'alpha_inline','alpha_block','alpha_border','gamma_inline','gamma_block','gamma_border','beta_inline','beta_block','beta_border','delta_inline','delta_block','delta_border','default_inline','default_block','default_border','textContainer','disabled','alphaActive_border','gammaActive_border','betaActive_border','deltaActive_border',
+          'defaultMoreButton','defaultMoreButtonActive','defaultMenuListItem',
+          'left_borderContainer','right_borderContainer','top_borderContainer','bottom_borderContainer'
         ]
     }]
 */
@@ -18,13 +20,16 @@ import { remConvert, getTotalDimension, cs, bind, throttle, cancelBubblingEffect
 import { Box, Container } from "../Layout";
 import ResizeObserver from "../Responsive/ResizeObserver";
 import ListItem from "../ListItem/ListItem";
+import ListItemWithIcon from "../ListItem/ListItemWithIcon";
 import { Icon } from '@zohodesk/icons';
+import { cn } from "@dot-system/css-utility";
 import tabsStyle from "./Tabs.module.css";
 import Popup from "../Popup/Popup";
 import TextBoxIcon from "../TextBoxIcon/TextBoxIcon";
 import ResponsiveDropBox from "../ResponsiveDropBox/ResponsiveDropBox";
 import { ResponsiveReceiver } from "../Responsive/CustomResponsive";
-import { TAB_DIRECTION_MAPPING, TAB_POPUP_POSITION_MAPPING } from "./utils/tabConfigs";
+import { TAB_DIRECTION_MAPPING, TAB_POPUP_POSITION_MAPPING, BORDER_POSITION_BY_ALIGN, VARIANT } from "./utils/tabConfigs";
+import { renderNode, isRenderable } from '@zohodesk/utils';
 import btnstyle from "../semantic/Button/semanticButton.module.css";
 
 class Tabs extends React.Component {
@@ -107,8 +112,7 @@ class Tabs extends React.Component {
     }
   }
 
-  setMaxDim() {
-    let totalDimension = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+  setMaxDim(totalDimension = 0) {
     let {
       selectedTab
     } = this.props; // let actual = Object.keys(tabDimensions).reduce(
@@ -409,10 +413,9 @@ class Tabs extends React.Component {
     togglePopup(e, boxPosition);
   }
 
-  responsiveFunc(_ref) {
-    let {
-      mediaQueryOR
-    } = _ref;
+  responsiveFunc({
+    mediaQueryOR
+  }) {
     return {
       tabletMode: mediaQueryOR([{
         maxWidth: 700
@@ -432,10 +435,9 @@ class Tabs extends React.Component {
     });
   }
 
-  getMoreList(_ref2) {
-    let {
-      moreTabs
-    } = _ref2;
+  getMoreList({
+    moreTabs
+  }) {
     const validElements = [];
     React.Children.map(moreTabs, child => {
       const isValidElement = /*#__PURE__*/React.isValidElement(child);
@@ -447,10 +449,9 @@ class Tabs extends React.Component {
     return validElements;
   }
 
-  handleFilterSuggestions(_ref3) {
-    let {
-      moreTabs
-    } = _ref3;
+  handleFilterSuggestions({
+    moreTabs
+  }) {
     const {
       showTitleInMoreOptions
     } = this.props;
@@ -476,15 +477,15 @@ class Tabs extends React.Component {
       searchErrorText
     } = this.props;
     return /*#__PURE__*/React.createElement("div", {
-      className: tabsStyle.emptyStateContainer
+      className: cn(tabsStyle.emptyStateContainer)
     }, /*#__PURE__*/React.createElement(EmptySearch, {
       size: "small"
     }), /*#__PURE__*/React.createElement("div", {
-      className: tabsStyle.emptyStateTitle
+      className: cn(tabsStyle.emptyStateTitle)
     }, searchErrorText));
   }
 
-  renderTabs(mainTabs, moreTabs, isVirtual) {
+  renderTabs(mainTabs, moreTabs, isVirtual, borderPosition) {
     let {
       selectedTab,
       moreButtonClass,
@@ -506,6 +507,7 @@ class Tabs extends React.Component {
       needTabBorder,
       needAppearance,
       iconSize,
+      renderMoreTarget,
       getTargetRef,
       position,
       customProps,
@@ -534,6 +536,10 @@ class Tabs extends React.Component {
       moreTabs
     });
     const hasSearch = moreTabs.length > 4;
+    const isDefaultType = type === 'default';
+    const defaultMoreClass = isDefaultType ? tabsStyle.defaultMoreButton : '';
+    const defaultMoreActiveClass = isDefaultType ? tabsStyle.defaultMoreButtonActive : '';
+    const effectiveMenuItemClass = isDefaultType ? `${tabsStyle.defaultMenuListItem}${menuItemClass ? ` ${menuItemClass}` : ''}` : menuItemClass;
     return /*#__PURE__*/React.createElement(React.Fragment, null, React.Children.map(mainTabs, child => {
       if (!child) {
         return null;
@@ -561,13 +567,14 @@ class Tabs extends React.Component {
         needBorder: needTabBorder,
         needAppearance: needAppearance,
         align: align,
-        isVirtual: isVirtual
+        isVirtual: isVirtual,
+        borderPosition: borderPosition
       }, classProps));
     }), React.Children.count(moreTabs) ? /*#__PURE__*/React.createElement(Box, {
       className: `${tabsStyle.menu} `,
       dataSelectorId: `${dataSelectorId}_moreIcon`
     }, /*#__PURE__*/React.createElement(Container, _extends({
-      className: `${btnstyle.buttonReset} ${moreButtonClass} ${isPopupOpen ? moreButtonActiveClass : ''}`,
+      className: `${btnstyle.buttonReset} ${defaultMoreClass} ${moreButtonClass} ${isPopupOpen ? `${defaultMoreActiveClass} ${moreButtonActiveClass}` : ''}`,
       align: "both",
       onClick: this.togglePopup,
       dataId: "moreTabs",
@@ -576,72 +583,78 @@ class Tabs extends React.Component {
       "aria-label": "MoreTabs",
       role: "link",
       tagName: "button"
-    }), /*#__PURE__*/React.createElement(Icon, {
+    }), isRenderable(renderMoreTarget) ? renderNode(renderMoreTarget) : /*#__PURE__*/React.createElement(Icon, {
       name: iconName,
       size: iconSize
     })), isPopupOpen && /*#__PURE__*/React.createElement(ResponsiveReceiver, {
       query: this.responsiveFunc,
       responsiveId: "Helmet"
-    }, _ref4 => {
+    }, ({
+      tabletMode
+    }) => /*#__PURE__*/React.createElement(ResponsiveDropBox, _extends({
+      isActive: isPopupReady,
+      isAnimate: true,
+      size: "medium",
+      customClass: {
+        customDropBoxWrap: `${moreContainerClass} ${popupClass}`
+      },
+      boxPosition: position,
+      getRef: getContainerRef,
+      isBoxPaddingNeed: false,
+      isArrow: false,
+      isAbsolutePositioningNeeded: isAbsolutePositioningNeeded,
+      isRestrictScroll: isRestrictScroll,
+      positionsOffset: positionsOffset,
+      targetOffset: targetOffset
+    }, DropBoxProps, {
+      isResponsivePadding: true,
+      needFocusScope: true,
+      dataId: `${dataId}_dropbox`,
+      onClick: removeClose,
+      onClose: this.togglePopup
+    }), getCustomDropBoxHeaderPlaceHolder && getCustomDropBoxHeaderPlaceHolder(this.props), hasSearch ? /*#__PURE__*/React.createElement(Box, {
+      className: tabsStyle.search
+    }, /*#__PURE__*/React.createElement(TextBoxIcon, _extends({
+      placeHolder: placeHolderText,
+      onChange: this.handleChange,
+      value: searchValue,
+      onClear: this.handleSearchValueClear,
+      size: searchBoxSize,
+      customProps: {
+        TextBoxProps: {
+          'data-a11y-autofocus': true
+        }
+      },
+      dataId: `${dataId}_search`,
+      autoComplete: false,
+      name: "search"
+    }, TextBoxIconProps))) : null, /*#__PURE__*/React.createElement(Box, {
+      flexible: true,
+      shrink: true,
+      scroll: "vertical",
+      className: `${tabsStyle.listWrapper} ${tabletMode ? '' : tabsStyle.menuBox} ${moreBoxClass}`,
+      onScroll: this.onScroll,
+      dataId: `${dataId}_Tabs`
+    }, moreTabsListItems.length ? moreTabsListItems.map(data => {
       let {
-        tabletMode
-      } = _ref4;
-      return /*#__PURE__*/React.createElement(ResponsiveDropBox, _extends({
-        isActive: isPopupReady,
-        isAnimate: true,
-        size: "medium",
-        customClass: {
-          customDropBoxWrap: `${moreContainerClass} ${popupClass}`
-        },
-        boxPosition: position,
-        getRef: getContainerRef,
-        isBoxPaddingNeed: false,
-        isArrow: false,
-        isAbsolutePositioningNeeded: isAbsolutePositioningNeeded,
-        isRestrictScroll: isRestrictScroll,
-        positionsOffset: positionsOffset,
-        targetOffset: targetOffset
-      }, DropBoxProps, {
-        isResponsivePadding: true,
-        needFocusScope: true,
-        dataId: `${dataId}_dropbox`,
-        onClick: removeClose,
-        onClose: this.togglePopup
-      }), getCustomDropBoxHeaderPlaceHolder && getCustomDropBoxHeaderPlaceHolder(this.props), hasSearch ? /*#__PURE__*/React.createElement(Box, {
-        className: tabsStyle.search
-      }, /*#__PURE__*/React.createElement(TextBoxIcon, _extends({
-        placeHolder: placeHolderText,
-        onChange: this.handleChange,
-        value: searchValue,
-        onClear: this.handleSearchValueClear,
-        size: searchBoxSize,
-        customProps: {
-          TextBoxProps: {
-            'data-a11y-autofocus': true
-          }
-        },
-        dataId: `${dataId}_search`,
-        autoComplete: false,
-        name: "search"
-      }, TextBoxIconProps))) : null, /*#__PURE__*/React.createElement(Box, {
-        flexible: true,
-        shrink: true,
-        scroll: "vertical",
-        className: `${tabsStyle.listWrapper} ${tabletMode ? '' : tabsStyle.menuBox} ${moreBoxClass}`,
-        onScroll: this.onScroll,
-        dataId: `${dataId}_Tabs`
-      }, moreTabsListItems.length ? moreTabsListItems.map(data => {
-        let {
-          text,
-          id,
-          title,
-          isLink,
-          href,
-          children,
-          dataId
-        } = data;
-        const value = text ? text : showTitleInMoreOptions ? title : null;
-        return /*#__PURE__*/React.createElement(ListItem, _extends({
+        text,
+        id,
+        title,
+        isLink,
+        href,
+        children,
+        dataId,
+        variant,
+        iconName,
+        iconSize,
+        renderBefore,
+        renderAfter
+      } = data;
+      const value = text ? text : showTitleInMoreOptions ? title : null;
+      const showIconInDropdown = variant !== VARIANT.TEXT && iconName;
+
+      if (showIconInDropdown) {
+        return /*#__PURE__*/React.createElement(ListItemWithIcon, _extends({
           key: id,
           value: value,
           onClick: this.moreTabSelect,
@@ -650,14 +663,37 @@ class Tabs extends React.Component {
           isLink: isLink,
           href: href,
           autoHover: true,
-          customClass: {
-            customListItem: menuItemClass
-          },
+          iconName: iconName,
+          iconSize: iconSize,
+          renderLeftValuePlaceholderNode: renderBefore,
+          renderValueRightPlaceholderNode: isRenderable(renderAfter) ? renderAfter : !showTitleInMoreOptions ? children : null,
+          customClass: effectiveMenuItemClass,
+          customTitleBoxClass: tabsStyle.listItemTitleBox,
           target: "self",
           dataId: `${dataId}_Tab`
-        }, ListItemProps), !showTitleInMoreOptions ? children : null);
-      }) : this.renderEmptyState()));
-    })) : null);
+        }, ListItemProps));
+      }
+
+      return /*#__PURE__*/React.createElement(ListItem, _extends({
+        key: id,
+        value: value,
+        onClick: this.moreTabSelect,
+        id: id,
+        title: title || text,
+        isLink: isLink,
+        href: href,
+        autoHover: true,
+        renderBeforeChildren: renderBefore,
+        renderValueRightPlaceholderNode: isRenderable(renderAfter) ? renderAfter : !showTitleInMoreOptions ? children : null,
+        customClass: {
+          customListItem: effectiveMenuItemClass,
+          customTitleBox: tabsStyle.listItemTitleBox,
+          customLeftValuePlaceholder: tabsStyle.listItemLeftValuePlaceholder
+        },
+        target: "self",
+        dataId: `${dataId}_Tab`
+      }, ListItemProps));
+    }) : this.renderEmptyState())))) : null);
   }
 
   render() {
@@ -672,11 +708,15 @@ class Tabs extends React.Component {
       needBorder,
       needPadding,
       align,
+      alignBorderPosition,
       needAppearance,
       children,
       containerClass,
-      dataSelectorId
+      dataSelectorId,
+      borderPosition
     } = this.props;
+    const effectiveBorderPosition = alignBorderPosition && (needBorder || needTabBorder) ? BORDER_POSITION_BY_ALIGN[align] : borderPosition;
+    const isVerticalAlign = TAB_DIRECTION_MAPPING[align] === 'column';
     let {
       totalDimension,
       tabDimensions,
@@ -687,7 +727,7 @@ class Tabs extends React.Component {
       moreTabs,
       otherTabs
     } = this.responsiveTab(totalDimension, tabDimensions);
-    let appearanceClass = cs([tabsStyle[type], needBorder && tabsStyle[`${type}_border`], needPadding && tabsStyle[`${type}_padding`]]);
+    let appearanceClass = cs([tabsStyle[type], needBorder && tabsStyle[`${type}_border`], needBorder && tabsStyle.border, needBorder && effectiveBorderPosition && tabsStyle[`${effectiveBorderPosition}_borderContainer`], needPadding && tabsStyle[`${type}_${isVerticalAlign ? 'block' : 'inline'}`]]);
     let tabsClass = cs([tabsStyle.tab, className, needAppearance && appearanceClass]);
     let hlClass = cs([tabsStyle.highlight, highlightClass, isAnimate && tabsStyle.lineAnimate]);
     return /*#__PURE__*/React.createElement(Box, {
@@ -703,10 +743,10 @@ class Tabs extends React.Component {
     }, renderVirtualTabs && /*#__PURE__*/React.createElement(Container, {
       alignBox: TAB_DIRECTION_MAPPING[align] === 'column' ? 'row' : 'column',
       className: tabsStyle.hidden
-    }, this.renderTabs(children, [], true)), /*#__PURE__*/React.createElement(Container, {
+    }, this.renderTabs(children, [], true, effectiveBorderPosition)), /*#__PURE__*/React.createElement(Container, {
       alignBox: TAB_DIRECTION_MAPPING[align] === 'column' ? 'row' : 'column'
-    }, this.renderTabs(mainTabs, moreTabs, false))), otherTabs.length ? /*#__PURE__*/React.createElement(Box, null, otherTabs) : null, isAnimate && needTabBorder && needAppearance && /*#__PURE__*/React.createElement("div", {
-      className: hlClass,
+    }, this.renderTabs(mainTabs, moreTabs, false, effectiveBorderPosition))), otherTabs.length ? /*#__PURE__*/React.createElement(Box, null, otherTabs) : null, isAnimate && needTabBorder && needAppearance && /*#__PURE__*/React.createElement("div", {
+      className: cn(hlClass),
       ref: this.getHighlightRef,
       "data-id": dataId,
       "data-test-id": dataId

package/es/Tab/Tabs.module.css

@@ -9,14 +9,16 @@
   background-color: var(--zdt_tabs_alpha_bg);
 }
 
-.alpha_padding {
-  padding-inline-start: var(--zd_size15) ;
+.alpha_inline  { padding-block-start: var(--zd_size15) ; }
+.alpha_block   { padding-inline-start: var(--zd_size15) ; }
+
+.border {
+  border-width: 0;
+  border-style: solid;
 }
 
 .alpha_border {
-  border-width: 0 0 1px 0;
   border-color: var(--zdt_tabs_alpha_border);
-  border-style: solid;
 }
 
 .alpha::after {
@@ -61,12 +63,11 @@
   background-color: var(--zdt_tabs_alpha_bg);
 }
 
-.beta_padding {
-  padding-inline-start: var(--zd_size13) ;
-}
+.beta_inline  { padding-block-start: var(--zd_size13) ; }
+.beta_block   { padding-inline-start: var(--zd_size13) ; }
 
 .beta_border {
-  border-bottom: 1px solid var(--zdt_tabs_alpha_border);
+  border-color: var(--zdt_tabs_alpha_border);
 }
 
 .delta {
@@ -74,12 +75,55 @@
   background-color: var(--zdt_tabs_alpha_bg);
 }
 
-.delta_padding {
-  padding-inline-start: var(--zd_size10) ;
-}
+.delta_inline  { padding-block-start: var(--zd_size10) ; }
+.delta_block   { padding-inline-start: var(--zd_size10) ; }
 
 .delta_border {
-  border-bottom: 1px dotted var(--zdt_tabs_alpha_border);
+  border-color: 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_inline  { padding-block-start: var(--zd_size10) ; }
+.default_block   { padding-inline-start: var(--zd_size10) ; }
+
+.default_border {
+  border-color: 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 {
@@ -93,7 +137,7 @@
 .highlight {
   position: absolute;
   bottom: 0 ;
-  border-bottom: 1px solid var(--zdt_tabs_highlight_border);
+  border-block-end: 1px solid var(--zdt_tabs_highlight_border);
 }
 
 .lineAnimate {
@@ -126,7 +170,7 @@
 
 .search {
   padding-block: var(--zd_size6) 0 ;
-  padding-inline:var(--zd_size20) ;
+  padding-inline: var(--zd_size20) ;
 }
 
 .emptyStateContainer {
@@ -153,5 +197,30 @@
 
 .listWrapper {
   padding-block: var(--zd_size10) ;
-  padding-inline:0 ;
+  padding-inline: 0 ;
+}
+
+.listItemTitleBox {
+  gap: var(--zd_size4) ;
 }
+
+.left_borderContainer {
+  border-inline-start-width: 1px;
+}
+
+.right_borderContainer {
+  border-inline-end-width: 1px;
+}
+
+.top_borderContainer {
+  border-block-start-width: 1px;
+}
+
+.bottom_borderContainer {
+  border-block-end-width: 1px;
+}
+
+.listItemLeftValuePlaceholder {
+  height: auto ;
+  margin: 0 ;
+}

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

@@ -1,6 +1,9 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import Tab from "../Tab";
+
+const noop = () => {};
+
 describe('Tab', () => {
   test('rendering the defult props', () => {
     const {
@@ -8,4 +11,88 @@ describe('Tab', () => {
     } = render( /*#__PURE__*/React.createElement(Tab, null));
     expect(asFragment()).toMatchSnapshot();
   });
+  describe('variant-based label rendering', () => {
+    test('variant="text" renders text only', () => {
+      const {
+        asFragment
+      } = render( /*#__PURE__*/React.createElement(Tab, {
+        id: "t1",
+        text: "Home",
+        variant: "text",
+        onSelect: noop
+      }));
+      expect(asFragment()).toMatchSnapshot();
+    });
+    test('variant="icon" renders icon and suppresses text label', () => {
+      const {
+        asFragment
+      } = render( /*#__PURE__*/React.createElement(Tab, {
+        id: "t2",
+        text: "Home",
+        variant: "icon",
+        iconName: "ZD-TB-menu",
+        onSelect: noop
+      }));
+      expect(asFragment()).toMatchSnapshot();
+    });
+    test('variant="iconWithText" renders icon followed by text', () => {
+      const {
+        asFragment
+      } = render( /*#__PURE__*/React.createElement(Tab, {
+        id: "t3",
+        text: "Home",
+        variant: "iconWithText",
+        iconName: "ZD-TB-menu",
+        onSelect: noop
+      }));
+      expect(asFragment()).toMatchSnapshot();
+    });
+  });
+  describe('renderBefore / renderAfter slots', () => {
+    test('renderBefore renders a node to the left of the label', () => {
+      const {
+        asFragment
+      } = render( /*#__PURE__*/React.createElement(Tab, {
+        id: "t6",
+        text: "Home",
+        renderBefore: /*#__PURE__*/React.createElement("span", null, "\u25C0"),
+        onSelect: noop
+      }));
+      expect(asFragment()).toMatchSnapshot();
+    });
+    test('renderAfter renders a node to the right of the label', () => {
+      const {
+        asFragment
+      } = render( /*#__PURE__*/React.createElement(Tab, {
+        id: "t7",
+        text: "Home",
+        renderAfter: /*#__PURE__*/React.createElement("span", null, "3"),
+        onSelect: noop
+      }));
+      expect(asFragment()).toMatchSnapshot();
+    });
+    test('renderBefore and renderAfter both render around the label', () => {
+      const {
+        asFragment
+      } = render( /*#__PURE__*/React.createElement(Tab, {
+        id: "t8",
+        text: "Home",
+        renderBefore: /*#__PURE__*/React.createElement("span", null, "\u25C0"),
+        renderAfter: /*#__PURE__*/React.createElement("span", null, "\u25B6"),
+        onSelect: noop
+      }));
+      expect(asFragment()).toMatchSnapshot();
+    });
+    test('renderBefore as function renders custom node', () => {
+      const {
+        asFragment
+      } = render( /*#__PURE__*/React.createElement(Tab, {
+        id: "t9",
+        text: "Home",
+        renderBefore: () => /*#__PURE__*/React.createElement("span", null, "\u25C0"),
+        onSelect: noop
+      }));
+      expect(asFragment()).toMatchSnapshot();
+    });
+  });
 });

package/es/Tab/__tests__/Tabs.spec.js

@@ -8,4 +8,15 @@ describe('Tabs', () => {
     } = render( /*#__PURE__*/React.createElement(Tabs, null));
     expect(asFragment()).toMatchSnapshot();
   });
+  test('renders custom more-button icon via renderMoreTarget', () => {
+    const customIcon = /*#__PURE__*/React.createElement("span", {
+      "data-testid": "custom-more-icon"
+    }, "\u2022\u2022\u2022");
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Tabs, {
+      renderMoreTarget: customIcon
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
 });