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

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

@@ -1,27 +1,27 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Tabs rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="shrinkOff"
+    class="noShrink"
     data-id="boxComponent"
     data-selector-id="tabs"
     data-test-id="boxComponent"
   >
     <div
-      class="tab flex cover coldir"
+      class="flex fullSize column tab"
       data-id="containerComponent"
       data-selector-id="container"
       data-test-id="containerComponent"
     >
       <div
-        class="grow basis shrinkOff"
+        class="flexible basis_zero noShrink"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"
       >
         <div
-          class="flex cover coldir"
+          class="flex fullSize column"
           data-id="containerComponent"
           data-selector-id="container"
           data-test-id="containerComponent"

package/es/Tab/props/defaultProps.js

@@ -3,8 +3,7 @@ export const Tab_defaultProps = {
   contentAlign: 'both',
   contentAlignBox: 'row',
   customProps: {},
-  dataSelectorId: 'tab',
-  variant: 'text'
+  dataSelectorId: 'tab'
 };
 export const TabContent_defaultProps = {
   dataId: 'tabContent',
@@ -37,7 +36,7 @@ export const Tabs_defaultProps = {
   searchBoxSize: 'small',
   searchErrorText: 'No results',
   placeHolderText: 'Search',
-  isAbsolutePositioningNeeded: false,
+  isAbsolutePositioningNeeded: true,
   isRestrictScroll: false,
   moreContainerClass: ''
 };

package/es/Tab/props/propTypes.js

@@ -1,6 +1,4 @@
 import PropTypes from 'prop-types';
-import { VARIANT } from "../utils/tabConfigs";
-const renderSlotType = PropTypes.oneOfType([PropTypes.node, PropTypes.func]);
 export const Tab_propTypes = {
   activeClass: PropTypes.string,
   align: PropTypes.oneOf(['vertical', 'horizontal']),
@@ -28,14 +26,7 @@ export const Tab_propTypes = {
   contentAlignBox: PropTypes.oneOf(['row', 'column', 'row-reverse', 'column-reverse']),
   customProps: PropTypes.object,
   isVirtual: PropTypes.bool,
-  dataSelectorId: PropTypes.string,
-  variant: PropTypes.oneOf(Object.values(VARIANT)),
-  iconPlacement: PropTypes.string,
-  iconName: PropTypes.string,
-  iconSize: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  renderIcon: renderSlotType,
-  renderBefore: renderSlotType,
-  renderAfter: renderSlotType
+  dataSelectorId: PropTypes.string
 };
 export const TabContent_propTypes = {
   children: PropTypes.node,
@@ -91,7 +82,7 @@ export const Tabs_propTypes = {
   showTitleInMoreOptions: PropTypes.bool,
   style: PropTypes.object,
   togglePopup: PropTypes.func,
-  type: PropTypes.oneOf(['alpha', 'beta', 'delta', 'default']),
+  type: PropTypes.oneOf(['alpha', 'beta', 'delta']),
   getTargetRef: PropTypes.func,
   containerClass: PropTypes.string,
   customProps: PropTypes.shape({
@@ -123,6 +114,6 @@ export const TabWrapper_propTypes = {
   needPadding: PropTypes.bool,
   needTabBorder: PropTypes.bool,
   onSelect: PropTypes.func,
-  type: PropTypes.oneOf(['alpha', 'beta', 'delta', 'default']),
+  type: PropTypes.oneOf(['alpha', 'beta', 'delta']),
   dataSelectorId: PropTypes.string
 };

package/es/Tab/utils/tabConfigs.js

@@ -1,8 +1,3 @@
-export const VARIANT = {
-  TEXT: 'text',
-  ICON: 'icon',
-  ICON_WITH_TEXT: 'iconWithText'
-};
 export const TAB_ALIGN_MAPPING = {
   vertical: 'column',
   horizontal: 'row',

package/es/Tag/Tag.js

@@ -9,6 +9,7 @@ import Avatar from "../Avatar/Avatar";
 import { Container } from "../Layout";
 import Button from "../semantic/Button/Button";
 import { getUniqueId } from "../Provider/IdProvider";
+import { cn } from "@dot-system/css-utility";
 import style from "./Tag.module.css";
 /*
  * eslint css-modules/no-unused-class: [2, { markAsUsed: ['small', 'medium',
@@ -108,7 +109,7 @@ export default class Tag extends PureComponent {
     } = a11y;
     let isDarkPalette = palette === 'dark';
     return /*#__PURE__*/React.createElement("div", _extends({
-      className: `${style.container} ${needEffect && !isReadOnly ? style.effect : style.readonly} ${active ? `${style.selected} ${style[`active${palette}`]}` : ''} ${onRemove ? active ? `${style[`active${size}Effect`]}` : '' : ''}  ${style[size]} ${rounded ? style.lgRadius : style.smRadius} ${style[palette]} ${disabled ? style.disabled : ''} ${onSelectTag ? style.pointer : ''} ${customTag}`,
+      className: cn(`${style.container} ${needEffect && !isReadOnly ? style.effect : style.readonly} ${active ? `${style.selected} ${style[`active${palette}`]}` : ''} ${onRemove ? active ? `${style[`active${size}Effect`]}` : '' : ''}  ${style[size]} ${rounded ? style.lgRadius : style.smRadius} ${style[palette]} ${disabled ? style.disabled : ''} ${onSelectTag ? style.pointer : ''} ${customTag}`),
       "data-id": active ? `${dataId}_TagSelected` : `${dataId}_Tag`,
       "data-test-id": active ? `${dataId}_TagSelected` : `${dataId}_Tag`,
       onClick: this.handleSelect,
@@ -118,7 +119,7 @@ export default class Tag extends PureComponent {
       "aria-labelledby": getAriaId,
       "data-selector-id": dataSelectorId
     }, customAttributes), renderNode(renderLeftChildren), hasAvatar ? /*#__PURE__*/React.createElement("div", {
-      className: style.avatar
+      className: cn(style.avatar)
     }, /*#__PURE__*/React.createElement(Avatar, _extends({
       palette: isDarkPalette ? 'info' : avatarPalette,
       name: initial,
@@ -127,19 +128,18 @@ export default class Tag extends PureComponent {
       textPalette: isDarkPalette ? 'white' : '',
       customClass: customAvatar
     }, avatarProps))) : null, iconName ? /*#__PURE__*/React.createElement("div", {
-      className: `${style.icon} ${customTagIcon}`,
+      className: cn(`${style.icon} ${customTagIcon}`),
       "aria-hidden": true
     }, /*#__PURE__*/React.createElement(Icon, _extends({
       name: iconName,
       size: iconSize
     }, iconProps))) : null, /*#__PURE__*/React.createElement("div", {
-      className: `${style.text} ${textSizes}`,
+      className: cn(`${style.text} ${textSizes}`),
       "aria-hidden": true,
       id: getAriaId
     }, text), onRemove && /*#__PURE__*/React.createElement(Button, {
       customClass: `${style.close} ${active ? style[`active${closePalette}Close`] : ''}
-            ${rounded ? style.lgRadiusClose : style.smRadiusClose} ${isDarkPalette ? style.darkTagClose : ''}
-            ${customTagClose} ${style[`close${closePalette}`]}`,
+            ${rounded ? style.lgRadiusClose : style.smRadiusClose} ${isDarkPalette ? style.darkTagClose : ''} ${style[`close${closePalette}`]} ${customTagClose}`,
       dataId: `${dataId}_RemoveTag`,
       title: closeTitle,
       onClick: this.handleRemove,