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

package/lib/Tab/Tab.js

@@ -15,16 +15,16 @@ var _propTypes = require("./props/propTypes");
 
 var _Layout = require("../Layout");
 
+var _icons = require("@zohodesk/icons");
+
+var _utils = require("@zohodesk/utils");
+
 var _Common = require("../utils/Common");
 
 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); }
@@ -75,18 +75,30 @@ function Tab(_ref) {
       isAnimate = _ref.isAnimate,
       needBorder = _ref.needBorder,
       needAppearance = _ref.needAppearance,
+      needHover = _ref.needHover,
+      hoverOnActive = _ref.hoverOnActive,
       align = _ref.align,
       isVirtual = _ref.isVirtual,
       contentAlign = _ref.contentAlign,
       contentAlignBox = _ref.contentAlignBox,
       customProps = _ref.customProps,
+      customClass = _ref.customClass,
       variant = _ref.variant,
-      iconPlacement = _ref.iconPlacement,
       iconName = _ref.iconName,
       iconSize = _ref.iconSize,
-      renderIcon = _ref.renderIcon,
       renderBefore = _ref.renderBefore,
-      renderAfter = _ref.renderAfter;
+      renderAfter = _ref.renderAfter,
+      borderPosition = _ref.borderPosition;
+  var _customClass$customTe = customClass.customTextContainer,
+      customTextContainer = _customClass$customTe === void 0 ? '' : _customClass$customTe,
+      _customClass$customTe2 = customClass.customText,
+      customText = _customClass$customTe2 === void 0 ? '' : _customClass$customTe2,
+      _customClass$customHo = customClass.customHover,
+      customHover = _customClass$customHo === void 0 ? '' : _customClass$customHo,
+      _customClass$customIc = customClass.customIconContainer,
+      customIconContainer = _customClass$customIc === void 0 ? '' : _customClass$customIc,
+      _customClass$customIc2 = customClass.customIcon,
+      customIcon = _customClass$customIc2 === void 0 ? '' : _customClass$customIc2;
   var clickListener = (0, _react.useCallback)(function (event) {
     if (isLink && event && (event.metaKey || event.altKey || event.ctrlKey || event.shiftKey)) {
       event && event.stopPropagation();
@@ -106,49 +118,30 @@ function Tab(_ref) {
   var getTab = (0, _react.useCallback)(function (ref) {
     return getTabRef && getTabRef(id, ref, isVirtual);
   }, [id, isVirtual]);
-  var activeWithAppearance = (0, _Common.cs)([_TabModule["default"][styleContent.active], needBorder && !isAnimate && _TabModule["default"]["".concat(styleContent.active, "_border")]]);
+  var activeWithAppearance = (0, _Common.cs)([_TabModule["default"][styleContent.active], needBorder && !isAnimate && _TabModule["default"]["".concat(styleContent.active, "_border")], needHover && hoverOnActive && tabTypes[type] && _TabModule["default"]["".concat(type, "Hover")], hoverOnActive && customHover]);
   var activeClasses = (0, _Common.cs)([needAppearance && activeWithAppearance, activeClass]);
-  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, {
+  var inActiveClasses = needAppearance && (0, _Common.cs)([_TabModule["default"][styleContent.tab], needHover && tabTypes[type] && _TabModule["default"]["".concat(type, "Hover")], customHover]);
+  var isVerticalAlign = _tabConfigs.TAB_DIRECTION_MAPPING[align] === 'column';
+  var isIconWithText = variant === _tabConfigs.VARIANT.ICON_WITH_TEXT;
+  var tabClass = (0, _Common.cs)([_TabModule["default"].tab, isVerticalAlign ? _TabModule["default"].vertical : _TabModule["default"].horizontal, needAppearance && _TabModule["default"]["".concat(type, "_").concat(isVerticalAlign ? 'inline' : 'block')], isDisabled && _TabModule["default"].disabled, needBorder && borderPosition && !isAnimate && needAppearance && _TabModule["default"]["".concat(borderPosition, "_border")], isActive ? activeClasses : inActiveClasses, className]);
+
+  var _renderIcon = function _renderIcon() {
+    var showIcon = variant !== _tabConfigs.VARIANT.TEXT && iconName;
+    return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, showIcon ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+      className: (0, _Common.cs)([_TabModule["default"].iconWrapper, customIconContainer])
+    }, /*#__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);
+      size: iconSize,
+      className: customIcon
+    })) : null);
   };
 
   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, {
+    return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, showText ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
       flexible: true,
       adjust: true,
-      className: _TabModule["default"].tabText
+      className: (0, _Common.cs)([_TabModule["default"].tabText, customText])
     }, text) : null);
   };
 
@@ -174,10 +167,12 @@ function Tab(_ref) {
   }, customProps), /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
     alignBox: contentAlignBox,
     align: contentAlign,
-    className: _TabModule["default"].textContainer
-  }, _renderBeforeNode(), _renderLabel(), children ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+    className: (0, _Common.cs)([_TabModule["default"].textContainer, customTextContainer])
+  }, (0, _utils.isRenderable)(renderBefore) ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+    shrink: true
+  }, (0, _utils.renderNode)(renderBefore)) : null, _renderIcon(), _renderLabel(), (0, _utils.isRenderable)(renderAfter) || children ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
     shrink: true
-  }, children) : null, _renderAfterNode()));
+  }, (0, _utils.isRenderable)(renderAfter) ? (0, _utils.renderNode)(renderAfter) : children) : null));
 }
 
 Tab.defaultProps = _defaultProps.Tab_defaultProps;

package/lib/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/lib/Tab/TabWrapper.js

@@ -46,9 +46,11 @@ function TabWrapper(_ref) {
       needPadding = _ref.needPadding,
       needAppearance = _ref.needAppearance,
       align = _ref.align,
+      alignBorderPosition = _ref.alignBorderPosition,
       dataId = _ref.dataId,
       children = _ref.children,
-      dataSelectorId = _ref.dataSelectorId;
+      dataSelectorId = _ref.dataSelectorId,
+      borderPosition = _ref.borderPosition;
 
   var _useState = (0, _react.useState)(!hookToDisableInternalState ? defaultTab || 0 : null),
       _useState2 = _slicedToArray(_useState, 2),
@@ -80,7 +82,9 @@ function TabWrapper(_ref) {
       needPadding: needPadding,
       needAppearance: needAppearance,
       hookToDisableInternalState: hookToDisableInternalState,
-      align: align
+      align: align,
+      alignBorderPosition: alignBorderPosition,
+      borderPosition: borderPosition
     }));
   }));
 }

package/lib/Tab/Tabs.js

@@ -29,6 +29,8 @@ var _ListItemWithIcon = _interopRequireDefault(require("../ListItem/ListItemWith
 
 var _icons = require("@zohodesk/icons");
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _TabsModule = _interopRequireDefault(require("./Tabs.module.css"));
 
 var _Popup = _interopRequireDefault(require("../Popup/Popup"));
@@ -41,6 +43,8 @@ var _CustomResponsive = require("../Responsive/CustomResponsive");
 
 var _tabConfigs = require("./utils/tabConfigs");
 
+var _utils = require("@zohodesk/utils");
+
 var _semanticButtonModule = _interopRequireDefault(require("../semantic/Button/semanticButton.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -540,16 +544,16 @@ var Tabs = /*#__PURE__*/function (_React$Component) {
     value: function renderEmptyState() {
       var searchErrorText = this.props.searchErrorText;
       return /*#__PURE__*/_react["default"].createElement("div", {
-        className: _TabsModule["default"].emptyStateContainer
+        className: (0, _cssUtility.cn)(_TabsModule["default"].emptyStateContainer)
       }, /*#__PURE__*/_react["default"].createElement(_EmptySearch["default"], {
         size: "small"
       }), /*#__PURE__*/_react["default"].createElement("div", {
-        className: _TabsModule["default"].emptyStateTitle
+        className: (0, _cssUtility.cn)(_TabsModule["default"].emptyStateTitle)
       }, searchErrorText));
     }
   }, {
     key: "renderTabs",
-    value: function renderTabs(mainTabs, moreTabs, isVirtual) {
+    value: function renderTabs(mainTabs, moreTabs, isVirtual, borderPosition) {
       var _this8 = this;
 
       var _this$props9 = this.props,
@@ -573,6 +577,7 @@ var Tabs = /*#__PURE__*/function (_React$Component) {
           needTabBorder = _this$props9.needTabBorder,
           needAppearance = _this$props9.needAppearance,
           iconSize = _this$props9.iconSize,
+          renderMoreTarget = _this$props9.renderMoreTarget,
           getTargetRef = _this$props9.getTargetRef,
           position = _this$props9.position,
           customProps = _this$props9.customProps,
@@ -631,7 +636,8 @@ var Tabs = /*#__PURE__*/function (_React$Component) {
           needBorder: needTabBorder,
           needAppearance: needAppearance,
           align: align,
-          isVirtual: isVirtual
+          isVirtual: isVirtual,
+          borderPosition: borderPosition
         }, classProps));
       }), _react["default"].Children.count(moreTabs) ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         className: "".concat(_TabsModule["default"].menu, " "),
@@ -646,7 +652,7 @@ var Tabs = /*#__PURE__*/function (_React$Component) {
         "aria-label": "MoreTabs",
         role: "link",
         tagName: "button"
-      }), /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
+      }), (0, _utils.isRenderable)(renderMoreTarget) ? (0, _utils.renderNode)(renderMoreTarget) : /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
         name: iconName,
         size: iconSize
       })), isPopupOpen && /*#__PURE__*/_react["default"].createElement(_CustomResponsive.ResponsiveReceiver, {
@@ -708,7 +714,9 @@ var Tabs = /*#__PURE__*/function (_React$Component) {
               dataId = data.dataId,
               variant = data.variant,
               iconName = data.iconName,
-              iconSize = data.iconSize;
+              iconSize = data.iconSize,
+              renderBefore = data.renderBefore,
+              renderAfter = data.renderAfter;
           var value = text ? text : showTitleInMoreOptions ? title : null;
           var showIconInDropdown = variant !== _tabConfigs.VARIANT.TEXT && iconName;
 
@@ -724,9 +732,10 @@ var Tabs = /*#__PURE__*/function (_React$Component) {
               autoHover: true,
               iconName: iconName,
               iconSize: iconSize,
-              customClass: {
-                customListItem: effectiveMenuItemClass
-              },
+              renderLeftValuePlaceholderNode: renderBefore,
+              renderValueRightPlaceholderNode: (0, _utils.isRenderable)(renderAfter) ? renderAfter : !showTitleInMoreOptions ? children : null,
+              customClass: effectiveMenuItemClass,
+              customTitleBoxClass: _TabsModule["default"].listItemTitleBox,
               target: "self",
               dataId: "".concat(dataId, "_Tab")
             }, ListItemProps));
@@ -741,12 +750,16 @@ var Tabs = /*#__PURE__*/function (_React$Component) {
             isLink: isLink,
             href: href,
             autoHover: true,
+            renderBeforeChildren: renderBefore,
+            renderValueRightPlaceholderNode: (0, _utils.isRenderable)(renderAfter) ? renderAfter : !showTitleInMoreOptions ? children : null,
             customClass: {
-              customListItem: effectiveMenuItemClass
+              customListItem: effectiveMenuItemClass,
+              customTitleBox: _TabsModule["default"].listItemTitleBox,
+              customLeftValuePlaceholder: _TabsModule["default"].listItemLeftValuePlaceholder
             },
             target: "self",
             dataId: "".concat(dataId, "_Tab")
-          }, ListItemProps), !showTitleInMoreOptions ? children : null);
+          }, ListItemProps));
         }) : _this8.renderEmptyState()));
       })) : null);
     }
@@ -764,10 +777,14 @@ var Tabs = /*#__PURE__*/function (_React$Component) {
           needBorder = _this$props10.needBorder,
           needPadding = _this$props10.needPadding,
           align = _this$props10.align,
+          alignBorderPosition = _this$props10.alignBorderPosition,
           needAppearance = _this$props10.needAppearance,
           children = _this$props10.children,
           containerClass = _this$props10.containerClass,
-          dataSelectorId = _this$props10.dataSelectorId;
+          dataSelectorId = _this$props10.dataSelectorId,
+          borderPosition = _this$props10.borderPosition;
+      var effectiveBorderPosition = alignBorderPosition && (needBorder || needTabBorder) ? _tabConfigs.BORDER_POSITION_BY_ALIGN[align] : borderPosition;
+      var isVerticalAlign = _tabConfigs.TAB_DIRECTION_MAPPING[align] === 'column';
       var _this$state2 = this.state,
           totalDimension = _this$state2.totalDimension,
           tabDimensions = _this$state2.tabDimensions,
@@ -778,7 +795,7 @@ var Tabs = /*#__PURE__*/function (_React$Component) {
           moreTabs = _this$responsiveTab.moreTabs,
           otherTabs = _this$responsiveTab.otherTabs;
 
-      var appearanceClass = (0, _Common.cs)([_TabsModule["default"][type], needBorder && _TabsModule["default"]["".concat(type, "_border")], needPadding && _TabsModule["default"]["".concat(type, "_padding")]]);
+      var appearanceClass = (0, _Common.cs)([_TabsModule["default"][type], needBorder && _TabsModule["default"]["".concat(type, "_border")], needBorder && _TabsModule["default"].border, needBorder && effectiveBorderPosition && _TabsModule["default"]["".concat(effectiveBorderPosition, "_borderContainer")], needPadding && _TabsModule["default"]["".concat(type, "_").concat(isVerticalAlign ? 'block' : 'inline')]]);
       var tabsClass = (0, _Common.cs)([_TabsModule["default"].tab, className, needAppearance && appearanceClass]);
       var hlClass = (0, _Common.cs)([_TabsModule["default"].highlight, highlightClass, isAnimate && _TabsModule["default"].lineAnimate]);
       return /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
@@ -794,10 +811,10 @@ var Tabs = /*#__PURE__*/function (_React$Component) {
       }, renderVirtualTabs && /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
         alignBox: _tabConfigs.TAB_DIRECTION_MAPPING[align] === 'column' ? 'row' : 'column',
         className: _TabsModule["default"].hidden
-      }, this.renderTabs(children, [], true)), /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+      }, this.renderTabs(children, [], true, effectiveBorderPosition)), /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
         alignBox: _tabConfigs.TAB_DIRECTION_MAPPING[align] === 'column' ? 'row' : 'column'
-      }, this.renderTabs(mainTabs, moreTabs, false))), otherTabs.length ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, null, otherTabs) : null, isAnimate && needTabBorder && needAppearance && /*#__PURE__*/_react["default"].createElement("div", {
-        className: hlClass,
+      }, this.renderTabs(mainTabs, moreTabs, false, effectiveBorderPosition))), otherTabs.length ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, null, otherTabs) : null, isAnimate && needTabBorder && needAppearance && /*#__PURE__*/_react["default"].createElement("div", {
+        className: (0, _cssUtility.cn)(hlClass),
         ref: this.getHighlightRef,
         "data-id": dataId,
         "data-test-id": dataId

package/lib/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/lib/Tab/__tests__/Tab.spec.js

@@ -53,71 +53,44 @@ describe('Tab', function () {
 
       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"], {
+      var _render5 = (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;
+          asFragment = _render5.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"], {
+      var _render6 = (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;
+          asFragment = _render6.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"], {
+      var _render7 = (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;
+          asFragment = _render7.asFragment;
 
       expect(asFragment()).toMatchSnapshot();
     });
     test('renderBefore as function renders custom node', function () {
-      var _render10 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tab["default"], {
+      var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tab["default"], {
         id: "t9",
         text: "Home",
         renderBefore: function renderBefore() {
@@ -125,7 +98,7 @@ describe('Tab', function () {
         },
         onSelect: noop
       })),
-          asFragment = _render10.asFragment;
+          asFragment = _render8.asFragment;
 
       expect(asFragment()).toMatchSnapshot();
     });

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

@@ -15,4 +15,16 @@ describe('Tabs', function () {
 
     expect(asFragment()).toMatchSnapshot();
   });
+  test('renders custom more-button icon via renderMoreTarget', function () {
+    var customIcon = /*#__PURE__*/_react["default"].createElement("span", {
+      "data-testid": "custom-more-icon"
+    }, "\u2022\u2022\u2022");
+
+    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tabs["default"], {
+      renderMoreTarget: customIcon
+    })),
+        asFragment = _render2.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
 });