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

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 ;
@@ -24,17 +21,8 @@
 .disabled {
   cursor: not-allowed;
 }
-.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);
+.border {
+  border-bottom: 1px solid var(--zdt_tab_default_border);
 }
 
 .alpha,
@@ -71,6 +59,7 @@
   padding-block:0 ;
   font-size: var(--zd_font_size14) ;
   line-height: 4.2857;
+  margin-inline-end: var(--zd_size40) ;
   text-transform: capitalize;
 }
 .tabBeta {
@@ -89,6 +78,7 @@
   padding-block:0 ;
   font-size: var(--zd_font_size11) ;
   line-height: 3;
+  margin-inline-end: var(--zd_size10) ;
 }
 .tabDelta {
   composes: delta;
@@ -101,61 +91,3 @@
   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,11 +46,9 @@ function TabWrapper(_ref) {
       needPadding = _ref.needPadding,
       needAppearance = _ref.needAppearance,
       align = _ref.align,
-      alignBorderPosition = _ref.alignBorderPosition,
       dataId = _ref.dataId,
       children = _ref.children,
-      dataSelectorId = _ref.dataSelectorId,
-      borderPosition = _ref.borderPosition;
+      dataSelectorId = _ref.dataSelectorId;
 
   var _useState = (0, _react.useState)(!hookToDisableInternalState ? defaultTab || 0 : null),
       _useState2 = _slicedToArray(_useState, 2),
@@ -82,9 +80,7 @@ function TabWrapper(_ref) {
       needPadding: needPadding,
       needAppearance: needAppearance,
       hookToDisableInternalState: hookToDisableInternalState,
-      align: align,
-      alignBorderPosition: alignBorderPosition,
-      borderPosition: borderPosition
+      align: align
     }));
   }));
 }

package/lib/Tab/Tabs.js

@@ -25,8 +25,6 @@ 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");
@@ -43,8 +41,6 @@ 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 }; }
@@ -553,7 +549,7 @@ var Tabs = /*#__PURE__*/function (_React$Component) {
     }
   }, {
     key: "renderTabs",
-    value: function renderTabs(mainTabs, moreTabs, isVirtual, borderPosition) {
+    value: function renderTabs(mainTabs, moreTabs, isVirtual) {
       var _this8 = this;
 
       var _this$props9 = this.props,
@@ -577,7 +573,6 @@ 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,
@@ -605,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;
@@ -636,14 +627,13 @@ var Tabs = /*#__PURE__*/function (_React$Component) {
           needBorder: needTabBorder,
           needAppearance: needAppearance,
           align: align,
-          isVirtual: isVirtual,
-          borderPosition: borderPosition
+          isVirtual: isVirtual
         }, 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(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",
@@ -652,7 +642,7 @@ var Tabs = /*#__PURE__*/function (_React$Component) {
         "aria-label": "MoreTabs",
         role: "link",
         tagName: "button"
-      }), (0, _utils.isRenderable)(renderMoreTarget) ? (0, _utils.renderNode)(renderMoreTarget) : /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
+      }), /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
         name: iconName,
         size: iconSize
       })), isPopupOpen && /*#__PURE__*/_react["default"].createElement(_CustomResponsive.ResponsiveReceiver, {
@@ -711,36 +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,
-              renderBefore = data.renderBefore,
-              renderAfter = data.renderAfter;
+              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,
-              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,
@@ -750,16 +712,12 @@ 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,
-              customTitleBox: _TabsModule["default"].listItemTitleBox,
-              customLeftValuePlaceholder: _TabsModule["default"].listItemLeftValuePlaceholder
+              customListItem: menuItemClass
             },
             target: "self",
             dataId: "".concat(dataId, "_Tab")
-          }, ListItemProps));
+          }, ListItemProps), !showTitleInMoreOptions ? children : null);
         }) : _this8.renderEmptyState()));
       })) : null);
     }
@@ -777,14 +735,10 @@ 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,
-          borderPosition = _this$props10.borderPosition;
-      var effectiveBorderPosition = alignBorderPosition && (needBorder || needTabBorder) ? _tabConfigs.BORDER_POSITION_BY_ALIGN[align] : borderPosition;
-      var isVerticalAlign = _tabConfigs.TAB_DIRECTION_MAPPING[align] === 'column';
+          dataSelectorId = _this$props10.dataSelectorId;
       var _this$state2 = this.state,
           totalDimension = _this$state2.totalDimension,
           tabDimensions = _this$state2.tabDimensions,
@@ -795,7 +749,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")], needBorder && _TabsModule["default"].border, needBorder && effectiveBorderPosition && _TabsModule["default"]["".concat(effectiveBorderPosition, "_borderContainer")], needPadding && _TabsModule["default"]["".concat(type, "_").concat(isVerticalAlign ? 'block' : 'inline')]]);
+      var appearanceClass = (0, _Common.cs)([_TabsModule["default"][type], needBorder && _TabsModule["default"]["".concat(type, "_border")], needPadding && _TabsModule["default"]["".concat(type, "_padding")]]);
       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, {
@@ -811,9 +765,9 @@ 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, effectiveBorderPosition)), /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+      }, this.renderTabs(children, [], true)), /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
         alignBox: _tabConfigs.TAB_DIRECTION_MAPPING[align] === 'column' ? 'row' : 'column'
-      }, 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", {
+      }, 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: (0, _cssUtility.cn)(hlClass),
         ref: this.getHighlightRef,
         "data-id": dataId,

package/lib/Tab/Tabs.module.css

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

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

@@ -15,16 +15,4 @@ 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();
-  });
 });