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

package/lib/Tab/Tab.js

@@ -21,10 +21,6 @@ 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); }
@@ -45,10 +41,6 @@ var tabTypes = {
   delta: {
     active: 'deltaActive',
     tab: 'tabDelta'
-  },
-  "default": {
-    active: 'defaultActive',
-    tab: 'tabDefault'
   }
 };
 
@@ -79,14 +71,7 @@ function Tab(_ref) {
       isVirtual = _ref.isVirtual,
       contentAlign = _ref.contentAlign,
       contentAlignBox = _ref.contentAlignBox,
-      customProps = _ref.customProps,
-      variant = _ref.variant,
-      iconPlacement = _ref.iconPlacement,
-      iconName = _ref.iconName,
-      iconSize = _ref.iconSize,
-      renderIcon = _ref.renderIcon,
-      renderBefore = _ref.renderBefore,
-      renderAfter = _ref.renderAfter;
+      customProps = _ref.customProps;
   var clickListener = (0, _react.useCallback)(function (event) {
     if (isLink && event && (event.metaKey || event.altKey || event.ctrlKey || event.shiftKey)) {
       event && event.stopPropagation();
@@ -108,50 +93,8 @@ function Tab(_ref) {
   }, [id, isVirtual]);
   var activeWithAppearance = (0, _Common.cs)([_TabModule["default"][styleContent.active], needBorder && !isAnimate && _TabModule["default"]["".concat(styleContent.active, "_border")]]);
   var activeClasses = (0, _Common.cs)([needAppearance && activeWithAppearance, activeClass]);
-  var inActiveClasses = needAppearance && (0, _Common.cs)([_TabModule["default"][styleContent.tab], tabTypes[type] && _TabModule["default"]["".concat(type, "Hover")]]);
-  var tabClass = (0, _Common.cs)([_TabModule["default"].tab, _tabConfigs.TAB_DIRECTION_MAPPING[align] === 'column' ? _TabModule["default"].vertical : _TabModule["default"].horizontal, isDisabled && _TabModule["default"].disabled, needBorder && !isAnimate && needAppearance && _TabModule["default"].border, isActive ? activeClasses : inActiveClasses, variant === _tabConfigs.VARIANT.ICON && _TabModule["default"].tabVariantIcon, variant === _tabConfigs.VARIANT.ICON_WITH_TEXT && _TabModule["default"].tabVariantIconWithText, className]);
-
-  var _renderIconNode = function _renderIconNode() {
-    if ((0, _utils.isRenderable)(renderIcon)) {
-      return (0, _utils.renderNode)(renderIcon);
-    }
-
-    if (!iconName) {
-      return null;
-    }
-
-    return /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
-      name: iconName,
-      size: iconSize
-    });
-  };
-
-  var _renderBeforeNode = function _renderBeforeNode() {
-    if (!(0, _utils.isRenderable)(renderBefore)) {
-      return null;
-    }
-
-    return (0, _utils.renderNode)(renderBefore);
-  };
-
-  var _renderAfterNode = function _renderAfterNode() {
-    if (!(0, _utils.isRenderable)(renderAfter)) {
-      return null;
-    }
-
-    return (0, _utils.renderNode)(renderAfter);
-  };
-
-  var _renderLabel = function _renderLabel() {
-    var showIcon = variant !== _tabConfigs.VARIANT.TEXT && ((0, _utils.isRenderable)(renderIcon) || iconName);
-    var showText = variant !== _tabConfigs.VARIANT.ICON && text !== undefined && text !== null;
-    return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, showIcon ? _renderIconNode() : null, showText ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-      flexible: true,
-      adjust: true,
-      className: _TabModule["default"].tabText
-    }, text) : null);
-  };
-
+  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]);
   return /*#__PURE__*/_react["default"].createElement(_Layout.Box, _extends({
     tourId: tourId,
     tagName: isLink ? 'a' : 'div',
@@ -175,9 +118,13 @@ function Tab(_ref) {
     alignBox: contentAlignBox,
     align: contentAlign,
     className: _TabModule["default"].textContainer
-  }, _renderBeforeNode(), _renderLabel(), children ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+  }, text && /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+    flexible: true,
+    adjust: true,
+    className: _TabModule["default"].tabText
+  }, text), children ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
     shrink: true
-  }, children) : null, _renderAfterNode()));
+  }, children) : null));
 }
 
 Tab.defaultProps = _defaultProps.Tab_defaultProps;

package/lib/Tab/Tab.module.css

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

package/lib/Tab/Tabs.js

@@ -25,10 +25,10 @@ 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"));
@@ -540,11 +540,11 @@ 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));
     }
   }, {
@@ -600,10 +600,6 @@ 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;
@@ -637,7 +633,7 @@ var Tabs = /*#__PURE__*/function (_React$Component) {
         className: "".concat(_TabsModule["default"].menu, " "),
         dataSelectorId: "".concat(dataSelectorId, "_moreIcon")
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, _extends({
-        className: "".concat(_semanticButtonModule["default"].buttonReset, " ").concat(defaultMoreClass, " ").concat(moreButtonClass, " ").concat(isPopupOpen ? "".concat(defaultMoreActiveClass, " ").concat(moreButtonActiveClass) : ''),
+        className: "".concat(_semanticButtonModule["default"].buttonReset, " ").concat(moreButtonClass, " ").concat(isPopupOpen ? moreButtonActiveClass : ''),
         align: "both",
         onClick: this.togglePopup,
         dataId: "moreTabs",
@@ -705,33 +701,8 @@ var Tabs = /*#__PURE__*/function (_React$Component) {
               isLink = data.isLink,
               href = data.href,
               children = data.children,
-              dataId = data.dataId,
-              variant = data.variant,
-              iconName = data.iconName,
-              iconSize = data.iconSize;
+              dataId = data.dataId;
           var value = text ? text : showTitleInMoreOptions ? title : null;
-          var showIconInDropdown = variant !== _tabConfigs.VARIANT.TEXT && iconName;
-
-          if (showIconInDropdown) {
-            return /*#__PURE__*/_react["default"].createElement(_ListItemWithIcon["default"], _extends({
-              key: id,
-              value: value,
-              onClick: _this8.moreTabSelect,
-              id: id,
-              title: title || text,
-              isLink: isLink,
-              href: href,
-              autoHover: true,
-              iconName: iconName,
-              iconSize: iconSize,
-              customClass: {
-                customListItem: effectiveMenuItemClass
-              },
-              target: "self",
-              dataId: "".concat(dataId, "_Tab")
-            }, ListItemProps));
-          }
-
           return /*#__PURE__*/_react["default"].createElement(_ListItem["default"], _extends({
             key: id,
             value: value,
@@ -742,7 +713,7 @@ var Tabs = /*#__PURE__*/function (_React$Component) {
             href: href,
             autoHover: true,
             customClass: {
-              customListItem: effectiveMenuItemClass
+              customListItem: menuItemClass
             },
             target: "self",
             dataId: "".concat(dataId, "_Tab")
@@ -797,7 +768,7 @@ var Tabs = /*#__PURE__*/function (_React$Component) {
       }, this.renderTabs(children, [], true)), /*#__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,
+        className: (0, _cssUtility.cn)(hlClass),
         ref: this.getHighlightRef,
         "data-id": dataId,
         "data-test-id": dataId

package/lib/Tab/Tabs.module.css

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

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

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