@zohodesk/components 1.6.20 → 1.6.22-exp-1

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

@@ -3,13 +3,13 @@
 exports[`AvatarTeam rendering CustomClass - customAvatar 1`] = `
 <DocumentFragment>
   <span
-    class="container  "
+    class="container"
     data-id="avatarTeamComp"
     data-selector-id="avatarTeam"
     data-test-id="avatarTeamComp"
   >
     <div
-      class="avatar medium medium circle primary black border   TeamCustomClass"
+      class="avatar medium medium circle primary black border TeamCustomClass"
       data-id="Avatar"
       data-selector-id="avatar"
       data-test-id="Avatar"
@@ -22,8 +22,7 @@ exports[`AvatarTeam rendering CustomClass - customAvatar 1`] = `
       />
     </div>
     <span
-      class="team nofill 
-          mediumteam "
+      class="team nofill mediumteam"
     />
   </span>
 </DocumentFragment>
@@ -32,13 +31,13 @@ exports[`AvatarTeam rendering CustomClass - customAvatar 1`] = `
 exports[`AvatarTeam rendering CustomClass - customAvatarTeam 1`] = `
 <DocumentFragment>
   <span
-    class="container  "
+    class="container"
     data-id="avatarTeamComp"
     data-selector-id="avatarTeam"
     data-test-id="avatarTeamComp"
   >
     <div
-      class="avatar medium medium circle primary black border   "
+      class="avatar medium medium circle primary black border"
       data-id="Avatar"
       data-selector-id="avatar"
       data-test-id="Avatar"
@@ -51,8 +50,7 @@ exports[`AvatarTeam rendering CustomClass - customAvatarTeam 1`] = `
       />
     </div>
     <span
-      class="team nofill 
-          mediumteam AvatarTeamCustomAvatar"
+      class="team nofill mediumteam AvatarTeamCustomAvatar"
     />
   </span>
 </DocumentFragment>
@@ -61,13 +59,13 @@ exports[`AvatarTeam rendering CustomClass - customAvatarTeam 1`] = `
 exports[`AvatarTeam rendering border is true 1`] = `
 <DocumentFragment>
   <span
-    class="container borderOnHover "
+    class="container borderOnHover"
     data-id="avatarTeamComp"
     data-selector-id="avatarTeam"
     data-test-id="avatarTeamComp"
   >
     <div
-      class="avatar medium medium circle primary black border borderOnHover  "
+      class="avatar medium medium circle primary black border borderOnHover"
       data-id="Avatar"
       data-selector-id="avatar"
       data-test-id="Avatar"
@@ -80,8 +78,7 @@ exports[`AvatarTeam rendering border is true 1`] = `
       />
     </div>
     <span
-      class="team nofill 
-          mediumteam "
+      class="team nofill mediumteam"
     />
   </span>
 </DocumentFragment>
@@ -90,13 +87,13 @@ exports[`AvatarTeam rendering border is true 1`] = `
 exports[`AvatarTeam rendering borderOnActive 1`] = `
 <DocumentFragment>
   <span
-    class="container borderOnActive "
+    class="container borderOnActive"
     data-id="avatarTeamComp"
     data-selector-id="avatarTeam"
     data-test-id="avatarTeamComp"
   >
     <div
-      class="avatar medium medium circle primary black border borderOnActive  "
+      class="avatar medium medium circle primary black border borderOnActive"
       data-id="Avatar"
       data-selector-id="avatar"
       data-test-id="Avatar"
@@ -109,8 +106,7 @@ exports[`AvatarTeam rendering borderOnActive 1`] = `
       />
     </div>
     <span
-      class="team nofill 
-          mediumteam "
+      class="team nofill mediumteam"
     />
   </span>
 </DocumentFragment>
@@ -119,19 +115,19 @@ exports[`AvatarTeam rendering borderOnActive 1`] = `
 exports[`AvatarTeam rendering customProps - AvatarProps 1`] = `
 <DocumentFragment>
   <span
-    class="container  "
+    class="container"
     data-id="avatarTeamComp"
     data-selector-id="avatarTeam"
     data-test-id="avatarTeamComp"
   >
     <div
-      class="avatar small small circle primary black border   "
+      class="avatar small small circle primary black border"
       data-id="Avatar"
       data-selector-id="avatar"
       data-test-id="Avatar"
     >
       <img
-        class="image  innerBorder"
+        class="image innerBorder"
         data-id="Avatar_AvatarImg"
         data-selector-id="avatar_AvatarImg"
         data-test-id="Avatar_AvatarImg"
@@ -139,8 +135,7 @@ exports[`AvatarTeam rendering customProps - AvatarProps 1`] = `
       />
     </div>
     <span
-      class="team nofill 
-          mediumteam "
+      class="team nofill mediumteam"
     />
   </span>
 </DocumentFragment>
@@ -149,7 +144,7 @@ exports[`AvatarTeam rendering customProps - AvatarProps 1`] = `
 exports[`AvatarTeam rendering customProps - AvatarTeamProps 1`] = `
 <DocumentFragment>
   <span
-    class="container  "
+    class="container"
     data-id="avatarTeamComp"
     data-selector-id="avatarTeam"
     data-team-avatar="true"
@@ -157,7 +152,7 @@ exports[`AvatarTeam rendering customProps - AvatarTeamProps 1`] = `
     isbold="Prakash the King maker"
   >
     <div
-      class="avatar medium medium circle primary black border   "
+      class="avatar medium medium circle primary black border"
       data-id="Avatar"
       data-selector-id="avatar"
       data-test-id="Avatar"
@@ -170,8 +165,7 @@ exports[`AvatarTeam rendering customProps - AvatarTeamProps 1`] = `
       />
     </div>
     <span
-      class="team nofill 
-          mediumteam "
+      class="team nofill mediumteam"
     />
   </span>
 </DocumentFragment>
@@ -180,13 +174,13 @@ exports[`AvatarTeam rendering customProps - AvatarTeamProps 1`] = `
 exports[`AvatarTeam rendering the Props of Avatar 1`] = `
 <DocumentFragment>
   <span
-    class="container borderOnActive "
+    class="container borderOnActive"
     data-id="avatarTeamComp"
     data-selector-id="avatarTeam"
     data-test-id="avatarTeamComp"
   >
     <div
-      class="avatar medium medium circle primary black border borderOnActive  "
+      class="avatar medium medium circle primary black border borderOnActive"
       data-id="Avatar"
       data-selector-id="avatar"
       data-test-id="Avatar"
@@ -203,8 +197,7 @@ exports[`AvatarTeam rendering the Props of Avatar 1`] = `
       />
     </div>
     <span
-      class="team nofill 
-          mediumteam "
+      class="team nofill mediumteam"
     />
   </span>
 </DocumentFragment>
@@ -213,13 +206,13 @@ exports[`AvatarTeam rendering the Props of Avatar 1`] = `
 exports[`AvatarTeam rendering the defult props 1`] = `
 <DocumentFragment>
   <span
-    class="container  "
+    class="container"
     data-id="avatarTeamComp"
     data-selector-id="avatarTeam"
     data-test-id="avatarTeamComp"
   >
     <div
-      class="avatar medium medium circle primary black border   "
+      class="avatar medium medium circle primary black border"
       data-id="Avatar"
       data-selector-id="avatar"
       data-test-id="Avatar"
@@ -232,8 +225,7 @@ exports[`AvatarTeam rendering the defult props 1`] = `
       />
     </div>
     <span
-      class="team nofill 
-          mediumteam "
+      class="team nofill mediumteam"
     />
   </span>
 </DocumentFragment>
@@ -242,13 +234,13 @@ exports[`AvatarTeam rendering the defult props 1`] = `
 exports[`AvatarTeam rendering the onClick prop with asFragment and toMatchSnapshot 1`] = `
 <DocumentFragment>
   <span
-    class="container borderOnHover "
+    class="container borderOnHover"
     data-id="avatarTeamComp"
     data-selector-id="avatarTeam"
     data-test-id="avatarTeamComp"
   >
     <div
-      class="avatar medium medium circle primary black border borderOnHover  "
+      class="avatar medium medium circle primary black border borderOnHover"
       data-id="Avatar"
       data-selector-id="avatar"
       data-test-id="Avatar"
@@ -262,8 +254,7 @@ exports[`AvatarTeam rendering the onClick prop with asFragment and toMatchSnapsh
       />
     </div>
     <span
-      class="team nofill 
-          mediumteam "
+      class="team nofill mediumteam"
     />
   </span>
 </DocumentFragment>
@@ -272,13 +263,13 @@ exports[`AvatarTeam rendering the onClick prop with asFragment and toMatchSnapsh
 exports[`AvatarTeam rendering the palette of- info 1`] = `
 <DocumentFragment>
   <span
-    class="container  "
+    class="container"
     data-id="avatarTeamComp"
     data-selector-id="avatarTeam"
     data-test-id="avatarTeamComp"
   >
     <div
-      class="avatar medium medium circle info black border   "
+      class="avatar medium medium circle info black border"
       data-id="Avatar"
       data-selector-id="avatar"
       data-test-id="Avatar"
@@ -291,8 +282,7 @@ exports[`AvatarTeam rendering the palette of- info 1`] = `
       />
     </div>
     <span
-      class="team nofill 
-          mediumteam "
+      class="team nofill mediumteam"
     />
   </span>
 </DocumentFragment>
@@ -301,13 +291,13 @@ exports[`AvatarTeam rendering the palette of- info 1`] = `
 exports[`AvatarTeam rendering the palette of- primary 1`] = `
 <DocumentFragment>
   <span
-    class="container  "
+    class="container"
     data-id="avatarTeamComp"
     data-selector-id="avatarTeam"
     data-test-id="avatarTeamComp"
   >
     <div
-      class="avatar medium medium circle primary black border   "
+      class="avatar medium medium circle primary black border"
       data-id="Avatar"
       data-selector-id="avatar"
       data-test-id="Avatar"
@@ -320,8 +310,7 @@ exports[`AvatarTeam rendering the palette of- primary 1`] = `
       />
     </div>
     <span
-      class="team nofill 
-          mediumteam "
+      class="team nofill mediumteam"
     />
   </span>
 </DocumentFragment>
@@ -330,13 +319,13 @@ exports[`AvatarTeam rendering the palette of- primary 1`] = `
 exports[`AvatarTeam rendering the palette of- secondary 1`] = `
 <DocumentFragment>
   <span
-    class="container  "
+    class="container"
     data-id="avatarTeamComp"
     data-selector-id="avatarTeam"
     data-test-id="avatarTeamComp"
   >
     <div
-      class="avatar medium medium circle secondary white border   "
+      class="avatar medium medium circle secondary white border"
       data-id="Avatar"
       data-selector-id="avatar"
       data-test-id="Avatar"
@@ -349,8 +338,7 @@ exports[`AvatarTeam rendering the palette of- secondary 1`] = `
       />
     </div>
     <span
-      class="team nofill 
-          mediumteam "
+      class="team nofill mediumteam"
     />
   </span>
 </DocumentFragment>
@@ -359,13 +347,13 @@ exports[`AvatarTeam rendering the palette of- secondary 1`] = `
 exports[`AvatarTeam rendering the palette with isFilled of- info 1`] = `
 <DocumentFragment>
   <span
-    class="container  "
+    class="container"
     data-id="avatarTeamComp"
     data-selector-id="avatarTeam"
     data-test-id="avatarTeamComp"
   >
     <div
-      class="avatar medium medium circle info black border   "
+      class="avatar medium medium circle info black border"
       data-id="Avatar"
       data-selector-id="avatar"
       data-test-id="Avatar"
@@ -378,8 +366,7 @@ exports[`AvatarTeam rendering the palette with isFilled of- info 1`] = `
       />
     </div>
     <span
-      class="team infoFilled 
-          mediumteam "
+      class="team infoFilled mediumteam"
     />
   </span>
 </DocumentFragment>
@@ -388,13 +375,13 @@ exports[`AvatarTeam rendering the palette with isFilled of- info 1`] = `
 exports[`AvatarTeam rendering the palette with isFilled of- primary 1`] = `
 <DocumentFragment>
   <span
-    class="container  "
+    class="container"
     data-id="avatarTeamComp"
     data-selector-id="avatarTeam"
     data-test-id="avatarTeamComp"
   >
     <div
-      class="avatar medium medium circle primary black border   "
+      class="avatar medium medium circle primary black border"
       data-id="Avatar"
       data-selector-id="avatar"
       data-test-id="Avatar"
@@ -407,8 +394,7 @@ exports[`AvatarTeam rendering the palette with isFilled of- primary 1`] = `
       />
     </div>
     <span
-      class="team primaryFilled 
-          mediumteam "
+      class="team primaryFilled mediumteam"
     />
   </span>
 </DocumentFragment>
@@ -417,13 +403,13 @@ exports[`AvatarTeam rendering the palette with isFilled of- primary 1`] = `
 exports[`AvatarTeam rendering the palette with isFilled of- secondary 1`] = `
 <DocumentFragment>
   <span
-    class="container  "
+    class="container"
     data-id="avatarTeamComp"
     data-selector-id="avatarTeam"
     data-test-id="avatarTeamComp"
   >
     <div
-      class="avatar medium medium circle secondary white border   "
+      class="avatar medium medium circle secondary white border"
       data-id="Avatar"
       data-selector-id="avatar"
       data-test-id="Avatar"
@@ -436,8 +422,7 @@ exports[`AvatarTeam rendering the palette with isFilled of- secondary 1`] = `
       />
     </div>
     <span
-      class="team secondaryFilled 
-          mediumteam "
+      class="team secondaryFilled mediumteam"
     />
   </span>
 </DocumentFragment>
@@ -446,13 +431,13 @@ exports[`AvatarTeam rendering the palette with isFilled of- secondary 1`] = `
 exports[`AvatarTeam rendering the sizes of- large 1`] = `
 <DocumentFragment>
   <span
-    class="container  "
+    class="container"
     data-id="avatarTeamComp"
     data-selector-id="avatarTeam"
     data-test-id="avatarTeamComp"
   >
     <div
-      class="avatar large large circle primary black border   "
+      class="avatar large large circle primary black border"
       data-id="Avatar"
       data-selector-id="avatar"
       data-test-id="Avatar"
@@ -465,8 +450,7 @@ exports[`AvatarTeam rendering the sizes of- large 1`] = `
       />
     </div>
     <span
-      class="team nofill 
-          largeteam "
+      class="team nofill largeteam"
     />
   </span>
 </DocumentFragment>
@@ -475,13 +459,13 @@ exports[`AvatarTeam rendering the sizes of- large 1`] = `
 exports[`AvatarTeam rendering the sizes of- medium 1`] = `
 <DocumentFragment>
   <span
-    class="container  "
+    class="container"
     data-id="avatarTeamComp"
     data-selector-id="avatarTeam"
     data-test-id="avatarTeamComp"
   >
     <div
-      class="avatar medium medium circle primary black border   "
+      class="avatar medium medium circle primary black border"
       data-id="Avatar"
       data-selector-id="avatar"
       data-test-id="Avatar"
@@ -494,8 +478,7 @@ exports[`AvatarTeam rendering the sizes of- medium 1`] = `
       />
     </div>
     <span
-      class="team nofill 
-          mediumteam "
+      class="team nofill mediumteam"
     />
   </span>
 </DocumentFragment>
@@ -504,13 +487,13 @@ exports[`AvatarTeam rendering the sizes of- medium 1`] = `
 exports[`AvatarTeam rendering the sizes of- small 1`] = `
 <DocumentFragment>
   <span
-    class="container  "
+    class="container"
     data-id="avatarTeamComp"
     data-selector-id="avatarTeam"
     data-test-id="avatarTeamComp"
   >
     <div
-      class="avatar small small circle primary black border   "
+      class="avatar small small circle primary black border"
       data-id="Avatar"
       data-selector-id="avatar"
       data-test-id="Avatar"
@@ -523,8 +506,7 @@ exports[`AvatarTeam rendering the sizes of- small 1`] = `
       />
     </div>
     <span
-      class="team nofill 
-          smallteam "
+      class="team nofill smallteam"
     />
   </span>
 </DocumentFragment>
@@ -533,13 +515,13 @@ exports[`AvatarTeam rendering the sizes of- small 1`] = `
 exports[`AvatarTeam rendering the sizes of- xlarge 1`] = `
 <DocumentFragment>
   <span
-    class="container  "
+    class="container"
     data-id="avatarTeamComp"
     data-selector-id="avatarTeam"
     data-test-id="avatarTeamComp"
   >
     <div
-      class="avatar xlarge xlarge circle primary black border   "
+      class="avatar xlarge xlarge circle primary black border"
       data-id="Avatar"
       data-selector-id="avatar"
       data-test-id="Avatar"
@@ -552,8 +534,7 @@ exports[`AvatarTeam rendering the sizes of- xlarge 1`] = `
       />
     </div>
     <span
-      class="team nofill 
-          xlargeteam "
+      class="team nofill xlargeteam"
     />
   </span>
 </DocumentFragment>
@@ -562,13 +543,13 @@ exports[`AvatarTeam rendering the sizes of- xlarge 1`] = `
 exports[`AvatarTeam rendering the sizes of- xmedium 1`] = `
 <DocumentFragment>
   <span
-    class="container  "
+    class="container"
     data-id="avatarTeamComp"
     data-selector-id="avatarTeam"
     data-test-id="avatarTeamComp"
   >
     <div
-      class="avatar xmedium xmedium circle primary black border   "
+      class="avatar xmedium xmedium circle primary black border"
       data-id="Avatar"
       data-selector-id="avatar"
       data-test-id="Avatar"
@@ -581,8 +562,7 @@ exports[`AvatarTeam rendering the sizes of- xmedium 1`] = `
       />
     </div>
     <span
-      class="team nofill 
-          xmediumteam "
+      class="team nofill xmediumteam"
     />
   </span>
 </DocumentFragment>
@@ -591,13 +571,13 @@ exports[`AvatarTeam rendering the sizes of- xmedium 1`] = `
 exports[`AvatarTeam rendering the sizes of- xsmall 1`] = `
 <DocumentFragment>
   <span
-    class="container  "
+    class="container"
     data-id="avatarTeamComp"
     data-selector-id="avatarTeam"
     data-test-id="avatarTeamComp"
   >
     <div
-      class="avatar xsmall xsmall circle primary black border   "
+      class="avatar xsmall xsmall circle primary black border"
       data-id="Avatar"
       data-selector-id="avatar"
       data-test-id="Avatar"
@@ -610,8 +590,7 @@ exports[`AvatarTeam rendering the sizes of- xsmall 1`] = `
       />
     </div>
     <span
-      class="team nofill 
-          xsmallteam "
+      class="team nofill xsmallteam"
     />
   </span>
 </DocumentFragment>
@@ -620,13 +599,13 @@ exports[`AvatarTeam rendering the sizes of- xsmall 1`] = `
 exports[`AvatarTeam rendering the sizes of- xxsmall 1`] = `
 <DocumentFragment>
   <span
-    class="container  "
+    class="container"
     data-id="avatarTeamComp"
     data-selector-id="avatarTeam"
     data-test-id="avatarTeamComp"
   >
     <div
-      class="avatar xxsmall xxsmall circle primary black border   "
+      class="avatar xxsmall xxsmall circle primary black border"
       data-id="Avatar"
       data-selector-id="avatar"
       data-test-id="Avatar"
@@ -639,8 +618,7 @@ exports[`AvatarTeam rendering the sizes of- xxsmall 1`] = `
       />
     </div>
     <span
-      class="team nofill 
-          xxsmallteam "
+      class="team nofill xxsmallteam"
     />
   </span>
 </DocumentFragment>
@@ -649,13 +627,13 @@ exports[`AvatarTeam rendering the sizes of- xxsmall 1`] = `
 exports[`AvatarTeam rendering the textPalette of- black 1`] = `
 <DocumentFragment>
   <span
-    class="container  "
+    class="container"
     data-id="avatarTeamComp"
     data-selector-id="avatarTeam"
     data-test-id="avatarTeamComp"
   >
     <div
-      class="avatar medium medium circle primary black border   "
+      class="avatar medium medium circle primary black border"
       data-id="Avatar"
       data-selector-id="avatar"
       data-test-id="Avatar"
@@ -668,8 +646,7 @@ exports[`AvatarTeam rendering the textPalette of- black 1`] = `
       />
     </div>
     <span
-      class="team nofill 
-          mediumteam "
+      class="team nofill mediumteam"
     />
   </span>
 </DocumentFragment>
@@ -678,13 +655,13 @@ exports[`AvatarTeam rendering the textPalette of- black 1`] = `
 exports[`AvatarTeam rendering the textPalette of- white 1`] = `
 <DocumentFragment>
   <span
-    class="container  "
+    class="container"
     data-id="avatarTeamComp"
     data-selector-id="avatarTeam"
     data-test-id="avatarTeamComp"
   >
     <div
-      class="avatar medium medium circle primary white border   "
+      class="avatar medium medium circle primary white border"
       data-id="Avatar"
       data-selector-id="avatar"
       data-test-id="Avatar"
@@ -697,8 +674,7 @@ exports[`AvatarTeam rendering the textPalette of- white 1`] = `
       />
     </div>
     <span
-      class="team nofill 
-          mediumteam "
+      class="team nofill mediumteam"
     />
   </span>
 </DocumentFragment>

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

@@ -3,7 +3,7 @@
 exports[`Button component Should be render with the basic set customButtonclass with buttonClass  1`] = `
 <DocumentFragment>
   <button
-    class="customButtonClass bold primary medium"
+    class="bold primary medium customButtonClass"
     data-id="buttonComp"
     data-selector-id="button"
     data-test-id="buttonComp"
@@ -117,7 +117,7 @@ exports[`Button component Should render CustomStatusclassname of buttons - loadi
         class="loading mediumloading"
       >
         <div
-          class="customStautusClassName loadingelement primaryelement"
+          class="loadingelement primaryelement customStautusClassName"
         />
       </div>
     </div>
@@ -142,7 +142,7 @@ exports[`Button component Should render CustomStatusclassname of buttons - succe
         class="successstate"
       >
         <div
-          class="customStautusClassName tickElement primaryTick"
+          class="tickElement primaryTick customStautusClassName"
         />
       </div>
     </div>

package/es/Button/css/cssJSLogic.js

@@ -25,7 +25,6 @@ export default function cssJSLogic({
   let statusLower = status.toLowerCase();
   let canStrikeThrough = !strikeExcludedPalettes.includes(paletteLower);
   let buttonClass = compileClassNames({
-    [customButton]: !!customButton,
     [style.bold]: isBold,
     [style.default]: !needAppearance,
     [style[paletteLower]]: needAppearance,
@@ -34,20 +33,21 @@ export default function cssJSLogic({
     [style[`${size}Btn`]]: needAppearance && children,
     [style[`${size}Btn${paletteLower}`]]: needAppearance && children && rounded,
     [`${style[`${paletteLower}Strike`]} ${style.strike}`]: disabled && canStrikeThrough && shouldStrikeThroughDisabled,
-    [style.loader]: !!needAppearance && statusLower !== 'none'
+    [style.loader]: !!needAppearance && statusLower !== 'none',
+    [customButton]: !!customButton
   });
   let loaderParentClass = compileClassNames({
-    [customStatusSize]: !!customStatusSize,
     [style.loading]: statusLower === 'loading',
     [style[`${size}loading`]]: statusLower === 'loading',
-    [style.successstate]: statusLower != 'loading'
+    [style.successstate]: statusLower != 'loading',
+    [customStatusSize]: !!customStatusSize
   });
   let loaderChildClass = compileClassNames({
-    [customStatus]: !!customStatus,
     [style.loadingelement]: statusLower === 'loading',
     [style[`${paletteLower}element`]]: statusLower === 'loading',
     [style.tickElement]: statusLower != 'loading',
-    [style[`${paletteLower}Tick`]]: statusLower != 'loading'
+    [style[`${paletteLower}Tick`]]: statusLower != 'loading',
+    [customStatus]: !!customStatus
   });
   return {
     buttonClass,