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

package/lib/Tab/Tab.js

@@ -15,6 +15,10 @@ 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");
@@ -41,6 +45,10 @@ var tabTypes = {
   delta: {
     active: 'deltaActive',
     tab: 'tabDelta'
+  },
+  "default": {
+    active: 'defaultActive',
+    tab: 'tabDefault'
   }
 };
 
@@ -67,11 +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;
+      customProps = _ref.customProps,
+      customClass = _ref.customClass,
+      variant = _ref.variant,
+      iconName = _ref.iconName,
+      iconSize = _ref.iconSize,
+      renderBefore = _ref.renderBefore,
+      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();
@@ -91,10 +118,33 @@ 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("".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], 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,
+      className: customIcon
+    })) : null);
+  };
+
+  var _renderLabel = function _renderLabel() {
+    var showText = variant !== _tabConfigs.VARIANT.ICON && text !== undefined && text !== null;
+    return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, showText ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+      flexible: true,
+      adjust: true,
+      className: (0, _Common.cs)([_TabModule["default"].tabText, customText])
+    }, text) : null);
+  };
+
   return /*#__PURE__*/_react["default"].createElement(_Layout.Box, _extends({
     tourId: tourId,
     tagName: isLink ? 'a' : 'div',
@@ -117,14 +167,12 @@ function Tab(_ref) {
   }, customProps), /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
     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, {
+    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));
+  }, (0, _utils.isRenderable)(renderAfter) ? (0, _utils.renderNode)(renderAfter) : children) : null));
 }
 
 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 ;
@@ -21,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,
@@ -59,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 {
@@ -78,7 +89,6 @@
   padding-block:0 ;
   font-size: var(--zd_font_size11) ;
   line-height: 3;
-  margin-inline-end: var(--zd_size10) ;
 }
 .tabDelta {
   composes: delta;
@@ -91,3 +101,61 @@
   composes: delta;
   color: var(--zdt_tab_alpha_active_text);
 }
+
+.default {
+  transition: all var(--zd_transition2);
+  padding-inline: 0 ;
+  padding-block: 0 ;
+  font-size: var(--zd_font_size11) ;
+  line-height: 3;
+}
+.tabDefault {
+  composes: default;
+  color: var(--zd-text-secondary);
+}
+
+.defaultHover:hover {
+  background-color: var(--zdt_tab_default_hover_bg);
+}
+
+.defaultActive {
+  composes: default;
+  color: var(--zd-text-primary);
+}
+
+.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

@@ -25,8 +25,12 @@ var _ResizeObserver = _interopRequireDefault(require("../Responsive/ResizeObserv
 
 var _ListItem = _interopRequireDefault(require("../ListItem/ListItem"));
 
+var _ListItemWithIcon = _interopRequireDefault(require("../ListItem/ListItemWithIcon"));
+
 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"));
@@ -39,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 }; }
@@ -538,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,
@@ -571,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,
@@ -598,6 +605,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;
@@ -625,13 +636,14 @@ 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, " "),
         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",
@@ -640,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, {
@@ -699,8 +711,36 @@ 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,
+              renderBefore = data.renderBefore,
+              renderAfter = data.renderAfter;
           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,
+              renderLeftValuePlaceholderNode: renderBefore,
+              renderValueRightPlaceholderNode: (0, _utils.isRenderable)(renderAfter) ? renderAfter : !showTitleInMoreOptions ? children : null,
+              customClass: effectiveMenuItemClass,
+              customTitleBoxClass: _TabsModule["default"].listItemTitleBox,
+              target: "self",
+              dataId: "".concat(dataId, "_Tab")
+            }, ListItemProps));
+          }
+
           return /*#__PURE__*/_react["default"].createElement(_ListItem["default"], _extends({
             key: id,
             value: value,
@@ -710,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: menuItemClass
+              customListItem: effectiveMenuItemClass,
+              customTitleBox: _TabsModule["default"].listItemTitleBox,
+              customLeftValuePlaceholder: _TabsModule["default"].listItemLeftValuePlaceholder
             },
             target: "self",
             dataId: "".concat(dataId, "_Tab")
-          }, ListItemProps), !showTitleInMoreOptions ? children : null);
+          }, ListItemProps));
         }) : _this8.renderEmptyState()));
       })) : null);
     }
@@ -733,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,
@@ -747,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, {
@@ -763,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,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/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,90 @@ 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();
+    });
+  });
+  describe('renderBefore / renderAfter slots', function () {
+    test('renderBefore renders a node to the left of the label', function () {
+      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 = _render5.asFragment;
+
+      expect(asFragment()).toMatchSnapshot();
+    });
+    test('renderAfter renders a node to the right of the label', function () {
+      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 = _render6.asFragment;
+
+      expect(asFragment()).toMatchSnapshot();
+    });
+    test('renderBefore and renderAfter both render around the label', function () {
+      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 = _render7.asFragment;
+
+      expect(asFragment()).toMatchSnapshot();
+    });
+    test('renderBefore as function renders custom node', function () {
+      var _render8 = (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 = _render8.asFragment;
+
+      expect(asFragment()).toMatchSnapshot();
+    });
+  });
 });