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

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

@@ -17,11 +17,9 @@ function TabWrapper({
   needPadding,
   needAppearance,
   align,
-  alignBorderPosition,
   dataId,
   children,
-  dataSelectorId,
-  borderPosition
+  dataSelectorId
 }) {
   let [selectedTabInternal, setSelected] = useState(!hookToDisableInternalState ? defaultTab || 0 : null);
   const setSelectedTab = useCallback(id => {
@@ -49,9 +47,7 @@ function TabWrapper({
       needPadding: needPadding,
       needAppearance: needAppearance,
       hookToDisableInternalState: hookToDisableInternalState,
-      align: align,
-      alignBorderPosition: alignBorderPosition,
-      borderPosition: borderPosition
+      align: align
     }));
   }));
 }

package/es/Tab/Tabs.js

@@ -4,10 +4,8 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 
 /* eslint css-modules/no-unused-class: [2, {
       markAsUsed: [
-          'hidden','alpha','gamma','beta','delta','default','special','text','maxWidth','widgetList','menuContainer','border','tabText','block','tabAlpha','alphaActive','gammaActive','betaActive','deltaActive','tabGamma','tabBeta','tabDelta','specialActive','tabSpecial',
-          'alpha_inline','alpha_block','alpha_border','gamma_inline','gamma_block','gamma_border','beta_inline','beta_block','beta_border','delta_inline','delta_block','delta_border','default_inline','default_block','default_border','textContainer','disabled','alphaActive_border','gammaActive_border','betaActive_border','deltaActive_border',
-          'defaultMoreButton','defaultMoreButtonActive','defaultMenuListItem',
-          'left_borderContainer','right_borderContainer','top_borderContainer','bottom_borderContainer'
+          'hidden','alpha','gamma','beta','delta','special','text','maxWidth','widgetList','menuContainer','border','tabText','block','tabAlpha','alphaActive','gammaActive','betaActive','deltaActive','tabGamma','tabBeta','tabDelta','specialActive','tabSpecial',
+          'alpha_padding','alpha_border','gamma_padding','gamma_border','beta_padding','beta_border','delta_padding','delta_border','textContainer','disabled','alphaActive_border','gammaActive_border','betaActive_border','deltaActive_border'
         ]
     }]
 */
@@ -20,7 +18,6 @@ import { remConvert, getTotalDimension, cs, bind, throttle, cancelBubblingEffect
 import { Box, Container } from "../Layout";
 import ResizeObserver from "../Responsive/ResizeObserver";
 import ListItem from "../ListItem/ListItem";
-import ListItemWithIcon from "../ListItem/ListItemWithIcon";
 import { Icon } from '@zohodesk/icons';
 import { cn } from "@dot-system/css-utility";
 import tabsStyle from "./Tabs.module.css";
@@ -28,8 +25,7 @@ import Popup from "../Popup/Popup";
 import TextBoxIcon from "../TextBoxIcon/TextBoxIcon";
 import ResponsiveDropBox from "../ResponsiveDropBox/ResponsiveDropBox";
 import { ResponsiveReceiver } from "../Responsive/CustomResponsive";
-import { TAB_DIRECTION_MAPPING, TAB_POPUP_POSITION_MAPPING, BORDER_POSITION_BY_ALIGN, VARIANT } from "./utils/tabConfigs";
-import { renderNode, isRenderable } from '@zohodesk/utils';
+import { TAB_DIRECTION_MAPPING, TAB_POPUP_POSITION_MAPPING } from "./utils/tabConfigs";
 import btnstyle from "../semantic/Button/semanticButton.module.css";
 
 class Tabs extends React.Component {
@@ -485,7 +481,7 @@ class Tabs extends React.Component {
     }, searchErrorText));
   }
 
-  renderTabs(mainTabs, moreTabs, isVirtual, borderPosition) {
+  renderTabs(mainTabs, moreTabs, isVirtual) {
     let {
       selectedTab,
       moreButtonClass,
@@ -507,7 +503,6 @@ class Tabs extends React.Component {
       needTabBorder,
       needAppearance,
       iconSize,
-      renderMoreTarget,
       getTargetRef,
       position,
       customProps,
@@ -536,10 +531,6 @@ class Tabs extends React.Component {
       moreTabs
     });
     const hasSearch = moreTabs.length > 4;
-    const isDefaultType = type === 'default';
-    const defaultMoreClass = isDefaultType ? tabsStyle.defaultMoreButton : '';
-    const defaultMoreActiveClass = isDefaultType ? tabsStyle.defaultMoreButtonActive : '';
-    const effectiveMenuItemClass = isDefaultType ? `${tabsStyle.defaultMenuListItem}${menuItemClass ? ` ${menuItemClass}` : ''}` : menuItemClass;
     return /*#__PURE__*/React.createElement(React.Fragment, null, React.Children.map(mainTabs, child => {
       if (!child) {
         return null;
@@ -567,14 +558,13 @@ class Tabs extends React.Component {
         needBorder: needTabBorder,
         needAppearance: needAppearance,
         align: align,
-        isVirtual: isVirtual,
-        borderPosition: borderPosition
+        isVirtual: isVirtual
       }, classProps));
     }), React.Children.count(moreTabs) ? /*#__PURE__*/React.createElement(Box, {
       className: `${tabsStyle.menu} `,
       dataSelectorId: `${dataSelectorId}_moreIcon`
     }, /*#__PURE__*/React.createElement(Container, _extends({
-      className: `${btnstyle.buttonReset} ${defaultMoreClass} ${moreButtonClass} ${isPopupOpen ? `${defaultMoreActiveClass} ${moreButtonActiveClass}` : ''}`,
+      className: `${btnstyle.buttonReset} ${moreButtonClass} ${isPopupOpen ? moreButtonActiveClass : ''}`,
       align: "both",
       onClick: this.togglePopup,
       dataId: "moreTabs",
@@ -583,7 +573,7 @@ class Tabs extends React.Component {
       "aria-label": "MoreTabs",
       role: "link",
       tagName: "button"
-    }), isRenderable(renderMoreTarget) ? renderNode(renderMoreTarget) : /*#__PURE__*/React.createElement(Icon, {
+    }), /*#__PURE__*/React.createElement(Icon, {
       name: iconName,
       size: iconSize
     })), isPopupOpen && /*#__PURE__*/React.createElement(ResponsiveReceiver, {
@@ -643,37 +633,9 @@ class Tabs extends React.Component {
         isLink,
         href,
         children,
-        dataId,
-        variant,
-        iconName,
-        iconSize,
-        renderBefore,
-        renderAfter
+        dataId
       } = data;
       const value = text ? text : showTitleInMoreOptions ? title : null;
-      const showIconInDropdown = variant !== VARIANT.TEXT && iconName;
-
-      if (showIconInDropdown) {
-        return /*#__PURE__*/React.createElement(ListItemWithIcon, _extends({
-          key: id,
-          value: value,
-          onClick: this.moreTabSelect,
-          id: id,
-          title: title || text,
-          isLink: isLink,
-          href: href,
-          autoHover: true,
-          iconName: iconName,
-          iconSize: iconSize,
-          renderLeftValuePlaceholderNode: renderBefore,
-          renderValueRightPlaceholderNode: isRenderable(renderAfter) ? renderAfter : !showTitleInMoreOptions ? children : null,
-          customClass: effectiveMenuItemClass,
-          customTitleBoxClass: tabsStyle.listItemTitleBox,
-          target: "self",
-          dataId: `${dataId}_Tab`
-        }, ListItemProps));
-      }
-
       return /*#__PURE__*/React.createElement(ListItem, _extends({
         key: id,
         value: value,
@@ -683,16 +645,12 @@ class Tabs extends React.Component {
         isLink: isLink,
         href: href,
         autoHover: true,
-        renderBeforeChildren: renderBefore,
-        renderValueRightPlaceholderNode: isRenderable(renderAfter) ? renderAfter : !showTitleInMoreOptions ? children : null,
         customClass: {
-          customListItem: effectiveMenuItemClass,
-          customTitleBox: tabsStyle.listItemTitleBox,
-          customLeftValuePlaceholder: tabsStyle.listItemLeftValuePlaceholder
+          customListItem: menuItemClass
         },
         target: "self",
         dataId: `${dataId}_Tab`
-      }, ListItemProps));
+      }, ListItemProps), !showTitleInMoreOptions ? children : null);
     }) : this.renderEmptyState())))) : null);
   }
 
@@ -708,15 +666,11 @@ class Tabs extends React.Component {
       needBorder,
       needPadding,
       align,
-      alignBorderPosition,
       needAppearance,
       children,
       containerClass,
-      dataSelectorId,
-      borderPosition
+      dataSelectorId
     } = this.props;
-    const effectiveBorderPosition = alignBorderPosition && (needBorder || needTabBorder) ? BORDER_POSITION_BY_ALIGN[align] : borderPosition;
-    const isVerticalAlign = TAB_DIRECTION_MAPPING[align] === 'column';
     let {
       totalDimension,
       tabDimensions,
@@ -727,7 +681,7 @@ class Tabs extends React.Component {
       moreTabs,
       otherTabs
     } = this.responsiveTab(totalDimension, tabDimensions);
-    let appearanceClass = cs([tabsStyle[type], needBorder && tabsStyle[`${type}_border`], needBorder && tabsStyle.border, needBorder && effectiveBorderPosition && tabsStyle[`${effectiveBorderPosition}_borderContainer`], needPadding && tabsStyle[`${type}_${isVerticalAlign ? 'block' : 'inline'}`]]);
+    let appearanceClass = cs([tabsStyle[type], needBorder && tabsStyle[`${type}_border`], needPadding && tabsStyle[`${type}_padding`]]);
     let tabsClass = cs([tabsStyle.tab, className, needAppearance && appearanceClass]);
     let hlClass = cs([tabsStyle.highlight, highlightClass, isAnimate && tabsStyle.lineAnimate]);
     return /*#__PURE__*/React.createElement(Box, {
@@ -743,9 +697,9 @@ class Tabs extends React.Component {
     }, renderVirtualTabs && /*#__PURE__*/React.createElement(Container, {
       alignBox: TAB_DIRECTION_MAPPING[align] === 'column' ? 'row' : 'column',
       className: tabsStyle.hidden
-    }, this.renderTabs(children, [], true, effectiveBorderPosition)), /*#__PURE__*/React.createElement(Container, {
+    }, this.renderTabs(children, [], true)), /*#__PURE__*/React.createElement(Container, {
       alignBox: TAB_DIRECTION_MAPPING[align] === 'column' ? 'row' : 'column'
-    }, this.renderTabs(mainTabs, moreTabs, false, effectiveBorderPosition))), otherTabs.length ? /*#__PURE__*/React.createElement(Box, null, otherTabs) : null, isAnimate && needTabBorder && needAppearance && /*#__PURE__*/React.createElement("div", {
+    }, this.renderTabs(mainTabs, moreTabs, false))), otherTabs.length ? /*#__PURE__*/React.createElement(Box, null, otherTabs) : null, isAnimate && needTabBorder && needAppearance && /*#__PURE__*/React.createElement("div", {
       className: cn(hlClass),
       ref: this.getHighlightRef,
       "data-id": dataId,

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

@@ -1,9 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import Tab from "../Tab";
-
-const noop = () => {};
-
 describe('Tab', () => {
   test('rendering the defult props', () => {
     const {
@@ -11,88 +8,4 @@ describe('Tab', () => {
     } = render( /*#__PURE__*/React.createElement(Tab, null));
     expect(asFragment()).toMatchSnapshot();
   });
-  describe('variant-based label rendering', () => {
-    test('variant="text" renders text only', () => {
-      const {
-        asFragment
-      } = render( /*#__PURE__*/React.createElement(Tab, {
-        id: "t1",
-        text: "Home",
-        variant: "text",
-        onSelect: noop
-      }));
-      expect(asFragment()).toMatchSnapshot();
-    });
-    test('variant="icon" renders icon and suppresses text label', () => {
-      const {
-        asFragment
-      } = render( /*#__PURE__*/React.createElement(Tab, {
-        id: "t2",
-        text: "Home",
-        variant: "icon",
-        iconName: "ZD-TB-menu",
-        onSelect: noop
-      }));
-      expect(asFragment()).toMatchSnapshot();
-    });
-    test('variant="iconWithText" renders icon followed by text', () => {
-      const {
-        asFragment
-      } = render( /*#__PURE__*/React.createElement(Tab, {
-        id: "t3",
-        text: "Home",
-        variant: "iconWithText",
-        iconName: "ZD-TB-menu",
-        onSelect: noop
-      }));
-      expect(asFragment()).toMatchSnapshot();
-    });
-  });
-  describe('renderBefore / renderAfter slots', () => {
-    test('renderBefore renders a node to the left of the label', () => {
-      const {
-        asFragment
-      } = render( /*#__PURE__*/React.createElement(Tab, {
-        id: "t6",
-        text: "Home",
-        renderBefore: /*#__PURE__*/React.createElement("span", null, "\u25C0"),
-        onSelect: noop
-      }));
-      expect(asFragment()).toMatchSnapshot();
-    });
-    test('renderAfter renders a node to the right of the label', () => {
-      const {
-        asFragment
-      } = render( /*#__PURE__*/React.createElement(Tab, {
-        id: "t7",
-        text: "Home",
-        renderAfter: /*#__PURE__*/React.createElement("span", null, "3"),
-        onSelect: noop
-      }));
-      expect(asFragment()).toMatchSnapshot();
-    });
-    test('renderBefore and renderAfter both render around the label', () => {
-      const {
-        asFragment
-      } = render( /*#__PURE__*/React.createElement(Tab, {
-        id: "t8",
-        text: "Home",
-        renderBefore: /*#__PURE__*/React.createElement("span", null, "\u25C0"),
-        renderAfter: /*#__PURE__*/React.createElement("span", null, "\u25B6"),
-        onSelect: noop
-      }));
-      expect(asFragment()).toMatchSnapshot();
-    });
-    test('renderBefore as function renders custom node', () => {
-      const {
-        asFragment
-      } = render( /*#__PURE__*/React.createElement(Tab, {
-        id: "t9",
-        text: "Home",
-        renderBefore: () => /*#__PURE__*/React.createElement("span", null, "\u25C0"),
-        onSelect: noop
-      }));
-      expect(asFragment()).toMatchSnapshot();
-    });
-  });
 });

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

@@ -8,15 +8,4 @@ describe('Tabs', () => {
     } = render( /*#__PURE__*/React.createElement(Tabs, null));
     expect(asFragment()).toMatchSnapshot();
   });
-  test('renders custom more-button icon via renderMoreTarget', () => {
-    const customIcon = /*#__PURE__*/React.createElement("span", {
-      "data-testid": "custom-more-icon"
-    }, "\u2022\u2022\u2022");
-    const {
-      asFragment
-    } = render( /*#__PURE__*/React.createElement(Tabs, {
-      renderMoreTarget: customIcon
-    }));
-    expect(asFragment()).toMatchSnapshot();
-  });
 });