@zohodesk/components 1.6.20 → 1.6.22-exp-1

package/es/Buttongroup/__tests__/__snapshots__/Buttongroup.spec.js.snap

@@ -3,7 +3,7 @@
 exports[`Buttongrop -  Checking the "customclass" 1`] = `
 <DocumentFragment>
   <div
-    class="buttonGroup undefined customClassButtonGroup"
+    class="buttonGroup customClassButtonGroup"
     data-id="ButtonGroup"
     data-selector-id="buttonGroup"
     data-test-id="ButtonGroup"
@@ -28,7 +28,7 @@ exports[`Buttongrop -  Checking the "customclass" 1`] = `
 exports[`Buttongrop -  rendering the "buttonPosition" to  - center 1`] = `
 <DocumentFragment>
   <div
-    class="buttonGroup undefined "
+    class="buttonGroup"
     data-id="ButtonGroup"
     data-selector-id="buttonGroup"
     data-test-id="ButtonGroup"
@@ -53,7 +53,7 @@ exports[`Buttongrop -  rendering the "buttonPosition" to  - center 1`] = `
 exports[`Buttongrop -  rendering the "buttonPosition" to  - left 1`] = `
 <DocumentFragment>
   <div
-    class="buttonGroup undefined "
+    class="buttonGroup"
     data-id="ButtonGroup"
     data-selector-id="buttonGroup"
     data-test-id="ButtonGroup"
@@ -78,7 +78,7 @@ exports[`Buttongrop -  rendering the "buttonPosition" to  - left 1`] = `
 exports[`Buttongrop -  rendering the "buttonPosition" to  - right 1`] = `
 <DocumentFragment>
   <div
-    class="buttonGroup undefined "
+    class="buttonGroup"
     data-id="ButtonGroup"
     data-selector-id="buttonGroup"
     data-test-id="ButtonGroup"
@@ -103,7 +103,7 @@ exports[`Buttongrop -  rendering the "buttonPosition" to  - right 1`] = `
 exports[`Buttongrop -  rendering the "type"   - footer 1`] = `
 <DocumentFragment>
   <div
-    class="buttonGroup footer "
+    class="buttonGroup footer"
     data-id="ButtonGroup"
     data-selector-id="buttonGroup"
     data-test-id="ButtonGroup"
@@ -128,7 +128,7 @@ exports[`Buttongrop -  rendering the "type"   - footer 1`] = `
 exports[`Buttongrop -  rendering the "type"   - header 1`] = `
 <DocumentFragment>
   <div
-    class="buttonGroup header "
+    class="buttonGroup header"
     data-id="ButtonGroup"
     data-selector-id="buttonGroup"
     data-test-id="ButtonGroup"
@@ -153,7 +153,7 @@ exports[`Buttongrop -  rendering the "type"   - header 1`] = `
 exports[`Buttongrop -  rendering the "type"   - tab 1`] = `
 <DocumentFragment>
   <div
-    class="buttonGroup tab "
+    class="buttonGroup tab"
     data-id="ButtonGroup"
     data-selector-id="buttonGroup"
     data-test-id="ButtonGroup"
@@ -178,7 +178,7 @@ exports[`Buttongrop -  rendering the "type"   - tab 1`] = `
 exports[`Buttongrop -  rendering the default props 1`] = `
 <DocumentFragment>
   <div
-    class="buttonGroup undefined "
+    class="buttonGroup"
     data-id="ButtonGroup"
     data-selector-id="buttonGroup"
     data-test-id="ButtonGroup"

package/es/Card/__tests__/__snapshots__/Card.spec.js.snap

@@ -3,13 +3,13 @@
 exports[`Card rendering the a11y 1`] = `
 <DocumentFragment>
   <div
-    class="flex cover coldir"
+    class="flex fullSize column"
     data-id="containerComponent"
     data-selector-id="container"
     data-test-id="containerComponent"
   >
     <div
-      class="grow basis shrinkOff scrolly"
+      class="flexible basis_zero noShrink scroll_vertical"
       data-id="CardContent"
       data-selector-id="cardContent"
       data-test-id="CardContent"
@@ -24,14 +24,14 @@ exports[`Card rendering the a11y 1`] = `
 exports[`Card rendering the children 1`] = `
 <DocumentFragment>
   <div
-    class="flex cover coldir"
+    class="flex fullSize column"
     data-id="containerComponent"
     data-selector-id="container"
     data-test-id="containerComponent"
   >
      
     <div
-      class="grow basis shrinkOff scrolly"
+      class="flexible basis_zero noShrink scroll_vertical"
       data-id="CardContent"
       data-selector-id="cardContent"
       data-test-id="CardContent"
@@ -45,13 +45,13 @@ exports[`Card rendering the children 1`] = `
 exports[`Card rendering the customClass 1`] = `
 <DocumentFragment>
   <div
-    class="customClass flex cover coldir"
+    class="flex fullSize column customClass"
     data-id="containerComponent"
     data-selector-id="container"
     data-test-id="containerComponent"
   >
     <div
-      class="grow basis shrinkOff scrolly"
+      class="flexible basis_zero noShrink scroll_vertical"
       data-id="CardContent"
       data-selector-id="cardContent"
       data-test-id="CardContent"
@@ -65,13 +65,13 @@ exports[`Card rendering the customClass 1`] = `
 exports[`Card rendering the dataId value 1`] = `
 <DocumentFragment>
   <div
-    class="flex cover coldir"
+    class="flex fullSize column"
     data-id="customdataId"
     data-selector-id="container"
     data-test-id="customdataId"
   >
     <div
-      class="grow basis shrinkOff scrolly"
+      class="flexible basis_zero noShrink scroll_vertical"
       data-id="CardContent"
       data-selector-id="cardContent"
       data-test-id="CardContent"
@@ -85,7 +85,7 @@ exports[`Card rendering the dataId value 1`] = `
 exports[`Card rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="flex cover coldir"
+    class="flex fullSize column"
     data-id="containerComponent"
     data-selector-id="container"
     data-test-id="containerComponent"
@@ -96,13 +96,13 @@ exports[`Card rendering the defult props 1`] = `
 exports[`Card rendering the htmlId 1`] = `
 <DocumentFragment>
   <div
-    class="flex cover coldir"
+    class="flex fullSize column"
     data-id="containerComponent"
     data-selector-id="container"
     data-test-id="containerComponent"
   >
     <div
-      class="grow basis shrinkOff scrolly"
+      class="flexible basis_zero noShrink scroll_vertical"
       data-id="CardContent"
       data-selector-id="cardContent"
       data-test-id="CardContent"
@@ -117,7 +117,7 @@ exports[`Card rendering the htmlId 1`] = `
 exports[`Card rendering the isScrollAttribute is true 1`] = `
 <DocumentFragment>
   <div
-    class="flex cover coldir"
+    class="flex fullSize column"
     data-id="containerComponent"
     data-scroll="true"
     data-selector-id="container"
@@ -125,7 +125,7 @@ exports[`Card rendering the isScrollAttribute is true 1`] = `
   >
      
     <div
-      class="grow basis shrinkOff scrolly"
+      class="flexible basis_zero noShrink scroll_vertical"
       data-id="CardContent"
       data-selector-id="cardContent"
       data-test-id="CardContent"
@@ -139,13 +139,13 @@ exports[`Card rendering the isScrollAttribute is true 1`] = `
 exports[`Card should trigger fetch, when scroll to the bottom of the card while isRecentOnBottom = false 1`] = `
 <DocumentFragment>
   <div
-    class="flex cover coldir"
+    class="flex fullSize column"
     data-id="containerComponent"
     data-selector-id="container"
     data-test-id="containerComponent"
   >
     <div
-      class="grow basis shrinkOff scrolly"
+      class="flexible basis_zero noShrink scroll_vertical"
       data-id="scrollToBottomCardContent"
       data-selector-id="cardContent"
       data-test-id="scrollToBottomCardContent"
@@ -161,13 +161,13 @@ exports[`Card should trigger fetch, when scroll to the bottom of the card while
 exports[`Card should trigger fetch, when scroll to the top of the card while scrollDirection = bottomToTop 1`] = `
 <DocumentFragment>
   <div
-    class="flex cover coldir"
+    class="flex fullSize column"
     data-id="containerComponent"
     data-selector-id="container"
     data-test-id="containerComponent"
   >
     <div
-      class="grow basis shrinkOff scrolly"
+      class="flexible basis_zero noShrink scroll_vertical"
       data-id="scrollToTopCardContent"
       data-selector-id="cardContent"
       data-test-id="scrollToTopCardContent"

package/es/Card/__tests__/__snapshots__/CardContent.spec.js.snap

@@ -3,7 +3,7 @@
 exports[`CardContent Should render with name - both 1`] = `
 <DocumentFragment>
   <div
-    class="grow basis shrinkOff scrollboth"
+    class="flexible basis_zero noShrink scroll_both"
     data-id="CardContent"
     data-scroll="true"
     data-selector-id="cardContent"
@@ -19,7 +19,7 @@ exports[`CardContent Should render with name - both 1`] = `
 exports[`CardContent Should render with name - both 2`] = `
 <DocumentFragment>
   <div
-    class="grow basis shrinkOff scrolly preventScrollBubbleBoth"
+    class="flexible basis_zero noShrink scroll_vertical preventScrollBubbleBoth"
     data-id="CardContent"
     data-scroll="true"
     data-selector-id="cardContent"
@@ -35,7 +35,7 @@ exports[`CardContent Should render with name - both 2`] = `
 exports[`CardContent Should render with name - horizontal 1`] = `
 <DocumentFragment>
   <div
-    class="grow basis shrinkOff scrollx"
+    class="flexible basis_zero noShrink scroll_horizontal"
     data-id="CardContent"
     data-scroll="true"
     data-selector-id="cardContent"
@@ -51,7 +51,7 @@ exports[`CardContent Should render with name - horizontal 1`] = `
 exports[`CardContent Should render with name - horizontal 2`] = `
 <DocumentFragment>
   <div
-    class="grow basis shrinkOff scrolly preventScrollBubbleX"
+    class="flexible basis_zero noShrink scroll_vertical preventScrollBubbleX"
     data-id="CardContent"
     data-scroll="true"
     data-selector-id="cardContent"
@@ -67,7 +67,7 @@ exports[`CardContent Should render with name - horizontal 2`] = `
 exports[`CardContent Should render with name - none 1`] = `
 <DocumentFragment>
   <div
-    class="grow basis shrinkOff scrollnone"
+    class="flexible basis_zero noShrink scroll_hidden"
     data-id="CardContent"
     data-scroll="true"
     data-selector-id="cardContent"
@@ -83,7 +83,7 @@ exports[`CardContent Should render with name - none 1`] = `
 exports[`CardContent Should render with name - vertical 1`] = `
 <DocumentFragment>
   <div
-    class="grow basis shrinkOff scrolly"
+    class="flexible basis_zero noShrink scroll_vertical"
     data-id="CardContent"
     data-scroll="true"
     data-selector-id="cardContent"
@@ -99,7 +99,7 @@ exports[`CardContent Should render with name - vertical 1`] = `
 exports[`CardContent Should render with name - vertical 2`] = `
 <DocumentFragment>
   <div
-    class="grow basis shrinkOff scrolly preventScrollBubbleY"
+    class="flexible basis_zero noShrink scroll_vertical preventScrollBubbleY"
     data-id="CardContent"
     data-scroll="true"
     data-selector-id="cardContent"
@@ -115,7 +115,7 @@ exports[`CardContent Should render with name - vertical 2`] = `
 exports[`CardContent rendering children 1`] = `
 <DocumentFragment>
   <div
-    class="grow basis shrinkOff scrolly"
+    class="flexible basis_zero noShrink scroll_vertical"
     data-id="CardContent"
     data-selector-id="cardContent"
     data-test-id="CardContent"
@@ -128,7 +128,7 @@ exports[`CardContent rendering children 1`] = `
 exports[`CardContent rendering customClass is true 1`] = `
 <DocumentFragment>
   <div
-    class="cardCustomClass grow basis shrinkOff scrolly"
+    class="flexible basis_zero noShrink scroll_vertical cardCustomClass"
     data-id="CardContent"
     data-selector-id="cardContent"
     data-test-id="CardContent"
@@ -141,7 +141,7 @@ exports[`CardContent rendering customClass is true 1`] = `
 exports[`CardContent rendering isScrollAttribute is true 1`] = `
 <DocumentFragment>
   <div
-    class="grow basis shrinkOff scrolly"
+    class="flexible basis_zero noShrink scroll_vertical"
     data-id="CardContent"
     data-scroll="true"
     data-selector-id="cardContent"
@@ -155,7 +155,7 @@ exports[`CardContent rendering isScrollAttribute is true 1`] = `
 exports[`CardContent rendering shrink is true 1`] = `
 <DocumentFragment>
   <div
-    class="grow basis shrinkOn scrolly"
+    class="flexible basis_zero shrink scroll_vertical"
     data-id="CardContent"
     data-selector-id="cardContent"
     data-test-id="CardContent"
@@ -168,7 +168,7 @@ exports[`CardContent rendering shrink is true 1`] = `
 exports[`CardContent rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="grow basis shrinkOff scrolly"
+    class="flexible basis_zero noShrink scroll_vertical"
     data-id="CardContent"
     data-selector-id="cardContent"
     data-test-id="CardContent"

package/es/Card/__tests__/__snapshots__/CardHeader.spec.js.snap

@@ -3,7 +3,7 @@
 exports[`CardHeader rendering the Children is true 1`] = `
 <DocumentFragment>
   <div
-    class="notScroll  shrinkOff"
+    class="noShrink notScroll"
     data-id="CardHeader"
     data-selector-id="cardHeader"
     data-test-id="CardHeader"
@@ -16,7 +16,7 @@ exports[`CardHeader rendering the Children is true 1`] = `
 exports[`CardHeader rendering the customClass  1`] = `
 <DocumentFragment>
   <div
-    class="notScroll cardHeader-class shrinkOff"
+    class="noShrink notScroll cardHeader-class"
     data-id="CardHeader"
     data-selector-id="cardHeader"
     data-test-id="CardHeader"
@@ -29,7 +29,7 @@ exports[`CardHeader rendering the customClass  1`] = `
 exports[`CardHeader rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="notScroll  shrinkOff"
+    class="noShrink notScroll"
     data-id="CardHeader"
     data-selector-id="cardHeader"
     data-test-id="CardHeader"
@@ -40,7 +40,7 @@ exports[`CardHeader rendering the defult props 1`] = `
 exports[`CardHeader rendering the isScroll is true 1`] = `
 <DocumentFragment>
   <div
-    class="scroll  shrinkOff"
+    class="noShrink scroll"
     data-id="CardHeader"
     data-selector-id="cardHeader"
     data-test-id="CardHeader"

package/es/CheckBox/CheckBox.js

@@ -100,7 +100,7 @@ export default class CheckBox extends React.Component {
       "aria-hidden": ariaHidden,
       dataSelectorId: dataSelectorId || id
     }, CheckBoxProps), /*#__PURE__*/React.createElement(Box, {
-      className: `${style.boxContainer} ${secondaryText ? style.withSecondaryText : ''} ${style[size]} ${customCBoxSize} ${isFilled ? style.filled : ''} ${!isEditable ? `${style[`disabled`]}` : ''}`,
+      className: `${style.boxContainer} ${secondaryText ? style.withSecondaryText : ''} ${style[size]} ${isFilled ? style.filled : ''} ${!isEditable ? `${style[`disabled`]}` : ''}  ${customCBoxSize}`,
       align: secondaryText ? "start" : undefined
     }, /*#__PURE__*/React.createElement("input", {
       type: "hidden",
@@ -127,7 +127,7 @@ export default class CheckBox extends React.Component {
     })), checked ? /*#__PURE__*/React.createElement("svg", {
       xmlns: "http://www.w3.org/2000/svg",
       viewBox: "0 0 44 44",
-      className: `${style.tick} ${style[`${size}tick`]} ${customTickSize} ${disabled ? CssProvider('isDisabled') : ''}`
+      className: `${style.tick} ${style[`${size}tick`]}  ${disabled ? CssProvider('isDisabled') : ''} ${customTickSize}`
     }, /*#__PURE__*/React.createElement("polyline", {
       points: "12.56 19 19.61 26.06 40.39 5.28",
       className: `${style.tickPath} ${style.checkedtickPath}`