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

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 ;
@@ -91,3 +94,25 @@
   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,6 +25,8 @@ var _ResizeObserver = _interopRequireDefault(require("../Responsive/ResizeObserv
 
 var _ListItem = _interopRequireDefault(require("../ListItem/ListItem"));
 
+var _ListItemWithIcon = _interopRequireDefault(require("../ListItem/ListItemWithIcon"));
+
 var _icons = require("@zohodesk/icons");
 
 var _TabsModule = _interopRequireDefault(require("./Tabs.module.css"));
@@ -598,6 +600,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;
@@ -631,7 +637,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(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",
@@ -699,8 +705,33 @@ 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;
           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,
@@ -711,7 +742,7 @@ var Tabs = /*#__PURE__*/function (_React$Component) {
             href: href,
             autoHover: true,
             customClass: {
-              customListItem: menuItemClass
+              customListItem: effectiveMenuItemClass
             },
             target: "self",
             dataId: "".concat(dataId, "_Tab")

package/lib/Tab/Tabs.module.css

@@ -82,6 +82,51 @@
   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);
 }
@@ -126,7 +171,7 @@
 
 .search {
   padding-block: var(--zd_size6) 0 ;
-  padding-inline:var(--zd_size20) ;
+  padding-inline: var(--zd_size20) ;
 }
 
 .emptyStateContainer {
@@ -153,5 +198,5 @@
 
 .listWrapper {
   padding-block: var(--zd_size10) ;
-  padding-inline:0 ;
-}
+  padding-inline: 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,117 @@ 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();
+    });
+  });
 });

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

@@ -1,5 +1,152 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Tab renderBefore / renderAfter slots renderAfter renders a node to the right of the label 1`] = `
+<DocumentFragment>
+  <div
+    aria-controls="t7"
+    aria-label="Home"
+    aria-selected="false"
+    class="tab horizontal basisAuto shrinkOff"
+    data-id="tabMenu_Tab"
+    data-key="t7"
+    data-selector-id="tab"
+    data-test-id="tabMenu_Tab"
+    role="link"
+    tabindex="0"
+  >
+    <div
+      class="textContainer flex cover rowdir both"
+      data-id="containerComponent"
+      data-selector-id="container"
+      data-test-id="containerComponent"
+    >
+      <div
+        class="tabText grow basisAuto shrinkOff"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        Home
+      </div>
+      <span>
+        3
+      </span>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Tab renderBefore / renderAfter slots renderBefore and renderAfter both render around the label 1`] = `
+<DocumentFragment>
+  <div
+    aria-controls="t8"
+    aria-label="Home"
+    aria-selected="false"
+    class="tab horizontal basisAuto shrinkOff"
+    data-id="tabMenu_Tab"
+    data-key="t8"
+    data-selector-id="tab"
+    data-test-id="tabMenu_Tab"
+    role="link"
+    tabindex="0"
+  >
+    <div
+      class="textContainer flex cover rowdir both"
+      data-id="containerComponent"
+      data-selector-id="container"
+      data-test-id="containerComponent"
+    >
+      <span>
+        ◀
+      </span>
+      <div
+        class="tabText grow basisAuto shrinkOff"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        Home
+      </div>
+      <span>
+        ▶
+      </span>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Tab renderBefore / renderAfter slots renderBefore as function renders custom node 1`] = `
+<DocumentFragment>
+  <div
+    aria-controls="t9"
+    aria-label="Home"
+    aria-selected="false"
+    class="tab horizontal basisAuto shrinkOff"
+    data-id="tabMenu_Tab"
+    data-key="t9"
+    data-selector-id="tab"
+    data-test-id="tabMenu_Tab"
+    role="link"
+    tabindex="0"
+  >
+    <div
+      class="textContainer flex cover rowdir both"
+      data-id="containerComponent"
+      data-selector-id="container"
+      data-test-id="containerComponent"
+    >
+      <span>
+        ◀
+      </span>
+      <div
+        class="tabText grow basisAuto shrinkOff"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        Home
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Tab renderBefore / renderAfter slots renderBefore renders a node to the left of the label 1`] = `
+<DocumentFragment>
+  <div
+    aria-controls="t6"
+    aria-label="Home"
+    aria-selected="false"
+    class="tab horizontal basisAuto shrinkOff"
+    data-id="tabMenu_Tab"
+    data-key="t6"
+    data-selector-id="tab"
+    data-test-id="tabMenu_Tab"
+    role="link"
+    tabindex="0"
+  >
+    <div
+      class="textContainer flex cover rowdir both"
+      data-id="containerComponent"
+      data-selector-id="container"
+      data-test-id="containerComponent"
+    >
+      <span>
+        ◀
+      </span>
+      <div
+        class="tabText grow basisAuto shrinkOff"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        Home
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
 exports[`Tab rendering the defult props 1`] = `
 <DocumentFragment>
   <div
@@ -20,3 +167,172 @@ exports[`Tab rendering the defult props 1`] = `
   </div>
 </DocumentFragment>
 `;
+
+exports[`Tab variant-based label rendering renderIcon as function receives no args and renders custom node 1`] = `
+<DocumentFragment>
+  <div
+    aria-controls="t5"
+    aria-label="Home"
+    aria-selected="false"
+    class="tab horizontal basisAuto shrinkOff"
+    data-id="tabMenu_Tab"
+    data-key="t5"
+    data-selector-id="tab"
+    data-test-id="tabMenu_Tab"
+    role="link"
+    tabindex="0"
+  >
+    <div
+      class="textContainer flex cover rowdir both"
+      data-id="containerComponent"
+      data-selector-id="container"
+      data-test-id="containerComponent"
+    >
+      <span>
+        ★
+      </span>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Tab variant-based label rendering renderIcon overrides iconName 1`] = `
+<DocumentFragment>
+  <div
+    aria-controls="t4"
+    aria-label="Home"
+    aria-selected="false"
+    class="tab horizontal basisAuto shrinkOff"
+    data-id="tabMenu_Tab"
+    data-key="t4"
+    data-selector-id="tab"
+    data-test-id="tabMenu_Tab"
+    role="link"
+    tabindex="0"
+  >
+    <div
+      class="textContainer flex cover rowdir both"
+      data-id="containerComponent"
+      data-selector-id="container"
+      data-test-id="containerComponent"
+    >
+      <span>
+        ★
+      </span>
+      <div
+        class="tabText grow basisAuto shrinkOff"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        Home
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Tab variant-based label rendering variant="icon" renders icon and suppresses text label 1`] = `
+<DocumentFragment>
+  <div
+    aria-controls="t2"
+    aria-label="Home"
+    aria-selected="false"
+    class="tab horizontal basisAuto shrinkOff"
+    data-id="tabMenu_Tab"
+    data-key="t2"
+    data-selector-id="tab"
+    data-test-id="tabMenu_Tab"
+    role="link"
+    tabindex="0"
+  >
+    <div
+      class="textContainer flex cover rowdir both"
+      data-id="containerComponent"
+      data-selector-id="container"
+      data-test-id="containerComponent"
+    >
+      <i
+        aria-hidden="true"
+        class="zd_font_icons basic icon-menu    rtl "
+        data-id="fontIcon"
+        data-selector-id="fontIcon"
+        data-test-id="fontIcon"
+      />
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Tab variant-based label rendering variant="iconWithText" renders icon followed by text 1`] = `
+<DocumentFragment>
+  <div
+    aria-controls="t3"
+    aria-label="Home"
+    aria-selected="false"
+    class="tab horizontal basisAuto shrinkOff"
+    data-id="tabMenu_Tab"
+    data-key="t3"
+    data-selector-id="tab"
+    data-test-id="tabMenu_Tab"
+    role="link"
+    tabindex="0"
+  >
+    <div
+      class="textContainer flex cover rowdir both"
+      data-id="containerComponent"
+      data-selector-id="container"
+      data-test-id="containerComponent"
+    >
+      <i
+        aria-hidden="true"
+        class="zd_font_icons basic icon-menu    rtl "
+        data-id="fontIcon"
+        data-selector-id="fontIcon"
+        data-test-id="fontIcon"
+      />
+      <div
+        class="tabText grow basisAuto shrinkOff"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        Home
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Tab variant-based label rendering variant="text" renders text only 1`] = `
+<DocumentFragment>
+  <div
+    aria-controls="t1"
+    aria-label="Home"
+    aria-selected="false"
+    class="tab horizontal basisAuto shrinkOff"
+    data-id="tabMenu_Tab"
+    data-key="t1"
+    data-selector-id="tab"
+    data-test-id="tabMenu_Tab"
+    role="link"
+    tabindex="0"
+  >
+    <div
+      class="textContainer flex cover rowdir both"
+      data-id="containerComponent"
+      data-selector-id="container"
+      data-test-id="containerComponent"
+    >
+      <div
+        class="tabText grow basisAuto shrinkOff"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        Home
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;

package/lib/Tab/props/defaultProps.js

@@ -9,7 +9,8 @@ var Tab_defaultProps = {
   contentAlign: 'both',
   contentAlignBox: 'row',
   customProps: {},
-  dataSelectorId: 'tab'
+  dataSelectorId: 'tab',
+  variant: 'text'
 };
 exports.Tab_defaultProps = Tab_defaultProps;
 var TabContent_defaultProps = {
@@ -45,7 +46,7 @@ var Tabs_defaultProps = {
   searchBoxSize: 'small',
   searchErrorText: 'No results',
   placeHolderText: 'Search',
-  isAbsolutePositioningNeeded: true,
+  isAbsolutePositioningNeeded: false,
   isRestrictScroll: false,
   moreContainerClass: ''
 };

package/lib/Tab/props/propTypes.js

@@ -7,8 +7,12 @@ exports.Tabs_propTypes = exports.Tab_propTypes = exports.TabWrapper_propTypes =
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _tabConfigs = require("../utils/tabConfigs");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+var renderSlotType = _propTypes["default"].oneOfType([_propTypes["default"].node, _propTypes["default"].func]);
+
 var Tab_propTypes = {
   activeClass: _propTypes["default"].string,
   align: _propTypes["default"].oneOf(['vertical', 'horizontal']),
@@ -36,7 +40,14 @@ var Tab_propTypes = {
   contentAlignBox: _propTypes["default"].oneOf(['row', 'column', 'row-reverse', 'column-reverse']),
   customProps: _propTypes["default"].object,
   isVirtual: _propTypes["default"].bool,
-  dataSelectorId: _propTypes["default"].string
+  dataSelectorId: _propTypes["default"].string,
+  variant: _propTypes["default"].oneOf(Object.values(_tabConfigs.VARIANT)),
+  iconPlacement: _propTypes["default"].string,
+  iconName: _propTypes["default"].string,
+  iconSize: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
+  renderIcon: renderSlotType,
+  renderBefore: renderSlotType,
+  renderAfter: renderSlotType
 };
 exports.Tab_propTypes = Tab_propTypes;
 var TabContent_propTypes = {
@@ -95,7 +106,7 @@ var Tabs_propTypes = {
   showTitleInMoreOptions: _propTypes["default"].bool,
   style: _propTypes["default"].object,
   togglePopup: _propTypes["default"].func,
-  type: _propTypes["default"].oneOf(['alpha', 'beta', 'delta']),
+  type: _propTypes["default"].oneOf(['alpha', 'beta', 'delta', 'default']),
   getTargetRef: _propTypes["default"].func,
   containerClass: _propTypes["default"].string,
   customProps: _propTypes["default"].shape({
@@ -128,7 +139,7 @@ var TabWrapper_propTypes = {
   needPadding: _propTypes["default"].bool,
   needTabBorder: _propTypes["default"].bool,
   onSelect: _propTypes["default"].func,
-  type: _propTypes["default"].oneOf(['alpha', 'beta', 'delta']),
+  type: _propTypes["default"].oneOf(['alpha', 'beta', 'delta', 'default']),
   dataSelectorId: _propTypes["default"].string
 };
 exports.TabWrapper_propTypes = TabWrapper_propTypes;