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

package/es/Tab/Tab.js

@@ -2,16 +2,16 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 
 /* eslint-disable react/forbid-component-props */
 
-/* eslint css-modules/no-unused-class: [2, { markAsUsed: ['text', 'tabAlpha', 'alphaActive', 'gammaActive', 'betaActive', 'deltaActive', 'tabGamma', 'tabBeta', 'tabDelta',', 'specialActive', 'tabSpecial', 'alphaActive_border', 'gammaActive_border', 'betaActive_border', 'deltaActive_border', 'tabDefault', 'defaultHover', 'defaultActive', 'defaultActive_border'] }] */
+/* eslint css-modules/no-unused-class: [2, { markAsUsed: ['text', 'icon', 'iconWithText', 'iconWrapper', 'tabAlpha', 'alphaActive', 'gammaActive', 'betaActive', 'deltaActive', 'tabGamma', 'tabBeta', 'tabDelta',', 'specialActive', 'tabSpecial', 'alphaActive_border', 'gammaActive_border', 'betaActive_border', 'deltaActive_border', 'tabDefault', 'defaultHover', 'defaultActive', 'defaultActive_border', 'left_borderTab', 'right_borderTab', 'top_borderTab', 'bottom_borderTab', 'alpha_inline', 'beta_inline', 'delta_inline', 'default_inline', 'alpha_block', 'beta_block', 'delta_block', 'default_block', 'icon_inline', 'icon_block', 'iconWithText_block', 'text_block'] }] */
 import React, { useMemo, useCallback } from 'react';
 import { Tab_defaultProps } from "./props/defaultProps";
 import { Tab_propTypes } from "./props/propTypes";
 import { Box, Container } from "../Layout";
+import { Icon } from '@zohodesk/icons';
+import { renderNode, isRenderable } from '@zohodesk/utils';
 import { cs } from "../utils/Common";
 import { TAB_DIRECTION_MAPPING, VARIANT } from "./utils/tabConfigs";
 import styles from "./Tab.module.css";
-import { renderNode, isRenderable } from '@zohodesk/utils';
-import { Icon } from '@zohodesk/icons';
 const tabTypes = {
   alpha: {
     active: 'alphaActive',
@@ -53,19 +53,28 @@ export default function Tab({
   isAnimate,
   needBorder,
   needAppearance,
+  needHover,
+  hoverOnActive,
   align,
   isVirtual,
   contentAlign,
   contentAlignBox,
   customProps,
+  customClass,
   variant,
-  iconPlacement,
   iconName,
   iconSize,
-  renderIcon,
   renderBefore,
-  renderAfter
+  renderAfter,
+  borderPosition
 }) {
+  let {
+    customTextContainer = '',
+    customText = '',
+    customHover = '',
+    customIconContainer = '',
+    customIcon = ''
+  } = customClass;
   let clickListener = useCallback(event => {
     if (isLink && event && (event.metaKey || event.altKey || event.ctrlKey || event.shiftKey)) {
       event && event.stopPropagation();
@@ -81,49 +90,30 @@ export default function Tab({
     tab: 'tab'
   }, [type]);
   let getTab = useCallback(ref => getTabRef && getTabRef(id, ref, isVirtual), [id, isVirtual]);
-  let activeWithAppearance = cs([styles[styleContent.active], needBorder && !isAnimate && styles[`${styleContent.active}_border`]]);
+  let activeWithAppearance = cs([styles[styleContent.active], needBorder && !isAnimate && styles[`${styleContent.active}_border`], needHover && hoverOnActive && tabTypes[type] && styles[`${type}Hover`], hoverOnActive && customHover]);
   let activeClasses = cs([needAppearance && activeWithAppearance, activeClass]);
-  let inActiveClasses = needAppearance && cs([styles[styleContent.tab], tabTypes[type] && styles[`${type}Hover`]]);
-  let tabClass = cs([styles.tab, TAB_DIRECTION_MAPPING[align] === 'column' ? styles.vertical : styles.horizontal, isDisabled && styles.disabled, needBorder && !isAnimate && needAppearance && styles.border, isActive ? activeClasses : inActiveClasses, variant === VARIANT.ICON && styles.tabVariantIcon, variant === VARIANT.ICON_WITH_TEXT && styles.tabVariantIconWithText, className]);
+  let inActiveClasses = needAppearance && cs([styles[styleContent.tab], needHover && tabTypes[type] && styles[`${type}Hover`], customHover]);
+  const isVerticalAlign = TAB_DIRECTION_MAPPING[align] === 'column';
+  const isIconWithText = variant === VARIANT.ICON_WITH_TEXT;
+  let tabClass = cs([styles.tab, isVerticalAlign ? styles.vertical : styles.horizontal, needAppearance && styles[`${type}_${isVerticalAlign ? 'inline' : 'block'}`], isDisabled && styles.disabled, needBorder && borderPosition && !isAnimate && needAppearance && styles[`${borderPosition}_border`], isActive ? activeClasses : inActiveClasses, className]);
 
-  const _renderIconNode = () => {
-    if (isRenderable(renderIcon)) {
-      return renderNode(renderIcon);
-    }
-
-    if (!iconName) {
-      return null;
-    }
-
-    return /*#__PURE__*/React.createElement(Icon, {
+  const _renderIcon = () => {
+    const showIcon = variant !== VARIANT.TEXT && iconName;
+    return /*#__PURE__*/React.createElement(React.Fragment, null, showIcon ? /*#__PURE__*/React.createElement(Box, {
+      className: cs([styles.iconWrapper, customIconContainer])
+    }, /*#__PURE__*/React.createElement(Icon, {
       name: iconName,
-      size: iconSize
-    });
-  };
-
-  const _renderBeforeNode = () => {
-    if (!isRenderable(renderBefore)) {
-      return null;
-    }
-
-    return renderNode(renderBefore);
-  };
-
-  const _renderAfterNode = () => {
-    if (!isRenderable(renderAfter)) {
-      return null;
-    }
-
-    return renderNode(renderAfter);
+      size: iconSize,
+      className: customIcon
+    })) : null);
   };
 
   const _renderLabel = () => {
-    const showIcon = variant !== VARIANT.TEXT && (isRenderable(renderIcon) || iconName);
     const showText = variant !== VARIANT.ICON && text !== undefined && text !== null;
-    return /*#__PURE__*/React.createElement(React.Fragment, null, showIcon ? _renderIconNode() : null, showText ? /*#__PURE__*/React.createElement(Box, {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, showText ? /*#__PURE__*/React.createElement(Box, {
       flexible: true,
       adjust: true,
-      className: styles.tabText
+      className: cs([styles.tabText, customText])
     }, text) : null);
   };
 
@@ -149,10 +139,12 @@ export default function Tab({
   }, customProps), /*#__PURE__*/React.createElement(Container, {
     alignBox: contentAlignBox,
     align: contentAlign,
-    className: styles.textContainer
-  }, _renderBeforeNode(), _renderLabel(), children ? /*#__PURE__*/React.createElement(Box, {
+    className: cs([styles.textContainer, customTextContainer])
+  }, isRenderable(renderBefore) ? /*#__PURE__*/React.createElement(Box, {
+    shrink: true
+  }, renderNode(renderBefore)) : null, _renderIcon(), _renderLabel(), isRenderable(renderAfter) || children ? /*#__PURE__*/React.createElement(Box, {
     shrink: true
-  }, children) : null, _renderAfterNode()));
+  }, isRenderable(renderAfter) ? renderNode(renderAfter) : children) : null));
 }
 Tab.defaultProps = Tab_defaultProps;
 Tab.propTypes = Tab_propTypes; // if (__DOCS__) {

package/es/Tab/Tab.module.css

@@ -24,8 +24,17 @@
 .disabled {
   cursor: not-allowed;
 }
-.border {
-  border-bottom: 1px solid var(--zdt_tab_default_border);
+.left_border {
+  border-inline-start: 1px solid var(--zdt_tab_default_border);
+}
+.right_border {
+  border-inline-end: 1px solid var(--zdt_tab_default_border);
+}
+.top_border {
+  border-block-start: 1px solid var(--zdt_tab_default_border);
+}
+.bottom_border {
+  border-block-end: 1px solid var(--zdt_tab_default_border);
 }
 
 .alpha,
@@ -62,7 +71,6 @@
   padding-block:0 ;
   font-size: var(--zd_font_size14) ;
   line-height: 4.2857;
-  margin-inline-end: var(--zd_size40) ;
   text-transform: capitalize;
 }
 .tabBeta {
@@ -81,7 +89,6 @@
   padding-block:0 ;
   font-size: var(--zd_font_size11) ;
   line-height: 3;
-  margin-inline-end: var(--zd_size10) ;
 }
 .tabDelta {
   composes: delta;
@@ -95,24 +102,60 @@
   color: var(--zdt_tab_alpha_active_text);
 }
 
-.tabDefault {
+.default {
   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) ;
+}
+.tabDefault {
+  composes: default;
   color: var(--zd-text-secondary);
 }
-.defaultHover:hover { color: var(--zd-text-primary); }
+
+.defaultHover:hover {
+  background-color: var(--zdt_tab_default_hover_bg);
+}
+
 .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) ;
+  composes: default;
   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); }
+
+.defaultActive_border {
+  border-color: var(--zdt_tab_default_border_active);
+}
+
+/* vertical / vertical-reverse: margin-inline-end */
+.beta_inline {
+  margin-inline-end: var(--zd_size40) ;
+}
+.delta_inline {
+  margin-inline-end: var(--zd_size10) ;
+}
+.default_inline {
+  margin-inline-end: var(--zd_size34) ;
+}
+/* horizontal / horizontal-reverse: margin-block-end */
+.beta_block {
+  margin-block-end: var(--zd_size40) ;
+}
+.delta_block {
+  margin-block-end: var(--zd_size10) ;
+}
+.default_block {
+  margin-block-end: var(--zd_size6) ;
+}
+.iconWrapper {
+  composes: dflex alignVertical alignHorizontal from '../common/common.module.css';
+  flex: 0 0 var(--zd_size24) ;
+  min-width: var(--zd_size24) ;
+}
+.icon_block, .icon_inline {
+  padding: var(--zd_size10) ;
+}
+.text_block,
+.iconWithText_block {
+  padding-inline: var(--zd_size10) ;
+}

package/es/Tab/TabWrapper.js

@@ -17,9 +17,11 @@ function TabWrapper({
   needPadding,
   needAppearance,
   align,
+  alignBorderPosition,
   dataId,
   children,
-  dataSelectorId
+  dataSelectorId,
+  borderPosition
 }) {
   let [selectedTabInternal, setSelected] = useState(!hookToDisableInternalState ? defaultTab || 0 : null);
   const setSelectedTab = useCallback(id => {
@@ -47,7 +49,9 @@ function TabWrapper({
       needPadding: needPadding,
       needAppearance: needAppearance,
       hookToDisableInternalState: hookToDisableInternalState,
-      align: align
+      align: align,
+      alignBorderPosition: alignBorderPosition,
+      borderPosition: borderPosition
     }));
   }));
 }

package/es/Tab/Tabs.js

@@ -5,8 +5,9 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 /* eslint css-modules/no-unused-class: [2, {
       markAsUsed: [
           '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_padding','alpha_border','gamma_padding','gamma_border','beta_padding','beta_border','delta_padding','delta_border','default_padding','default_border','textContainer','disabled','alphaActive_border','gammaActive_border','betaActive_border','deltaActive_border',
-          'defaultMoreButton','defaultMoreButtonActive','defaultMenuListItem'
+          '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'
         ]
     }]
 */
@@ -21,12 +22,14 @@ 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, VARIANT } 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 {
@@ -474,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,
@@ -504,6 +507,7 @@ class Tabs extends React.Component {
       needTabBorder,
       needAppearance,
       iconSize,
+      renderMoreTarget,
       getTargetRef,
       position,
       customProps,
@@ -563,7 +567,8 @@ 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} `,
@@ -578,7 +583,7 @@ 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, {
@@ -641,7 +646,9 @@ class Tabs extends React.Component {
         dataId,
         variant,
         iconName,
-        iconSize
+        iconSize,
+        renderBefore,
+        renderAfter
       } = data;
       const value = text ? text : showTitleInMoreOptions ? title : null;
       const showIconInDropdown = variant !== VARIANT.TEXT && iconName;
@@ -658,9 +665,10 @@ class Tabs extends React.Component {
           autoHover: true,
           iconName: iconName,
           iconSize: iconSize,
-          customClass: {
-            customListItem: effectiveMenuItemClass
-          },
+          renderLeftValuePlaceholderNode: renderBefore,
+          renderValueRightPlaceholderNode: isRenderable(renderAfter) ? renderAfter : !showTitleInMoreOptions ? children : null,
+          customClass: effectiveMenuItemClass,
+          customTitleBoxClass: tabsStyle.listItemTitleBox,
           target: "self",
           dataId: `${dataId}_Tab`
         }, ListItemProps));
@@ -675,12 +683,16 @@ class Tabs extends React.Component {
         isLink: isLink,
         href: href,
         autoHover: true,
+        renderBeforeChildren: renderBefore,
+        renderValueRightPlaceholderNode: isRenderable(renderAfter) ? renderAfter : !showTitleInMoreOptions ? children : null,
         customClass: {
-          customListItem: effectiveMenuItemClass
+          customListItem: effectiveMenuItemClass,
+          customTitleBox: tabsStyle.listItemTitleBox,
+          customLeftValuePlaceholder: tabsStyle.listItemLeftValuePlaceholder
         },
         target: "self",
         dataId: `${dataId}_Tab`
-      }, ListItemProps), !showTitleInMoreOptions ? children : null);
+      }, ListItemProps));
     }) : this.renderEmptyState())))) : null);
   }
 
@@ -696,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,
@@ -711,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, {
@@ -727,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,11 @@
   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 {
@@ -89,12 +89,11 @@
   background-color: var(--zd-bg-secondary);
 }
 
-.default_padding {
-  padding-inline-start: var(--zd_size10) ;
-}
+.default_inline  { padding-block-start: var(--zd_size10) ; }
+.default_block   { padding-inline-start: var(--zd_size10) ; }
 
 .default_border {
-  border-bottom: 1px solid var(--zd-border-primary);
+  border-color: var(--zd-border-primary);
 }
 
 .defaultMoreButton {
@@ -138,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 {
@@ -199,4 +198,29 @@
 .listWrapper {
   padding-block: var(--zd_size10) ;
   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

@@ -47,31 +47,6 @@ describe('Tab', () => {
       }));
       expect(asFragment()).toMatchSnapshot();
     });
-    test('renderIcon overrides iconName', () => {
-      const {
-        asFragment
-      } = render( /*#__PURE__*/React.createElement(Tab, {
-        id: "t4",
-        text: "Home",
-        variant: "iconWithText",
-        renderIcon: /*#__PURE__*/React.createElement("span", null, "\u2605"),
-        iconName: "ZD-TB-menu",
-        onSelect: noop
-      }));
-      expect(asFragment()).toMatchSnapshot();
-    });
-    test('renderIcon as function receives no args and renders custom node', () => {
-      const {
-        asFragment
-      } = render( /*#__PURE__*/React.createElement(Tab, {
-        id: "t5",
-        text: "Home",
-        variant: "icon",
-        renderIcon: () => /*#__PURE__*/React.createElement("span", null, "\u2605"),
-        onSelect: noop
-      }));
-      expect(asFragment()).toMatchSnapshot();
-    });
   });
   describe('renderBefore / renderAfter slots', () => {
     test('renderBefore renders a node to the left of the label', () => {

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();
+  });
 });