@zohodesk/components 1.6.20 → 1.6.22-exp-1

package/README.md

@@ -2,6 +2,16 @@
 
 Dot UI is a customizable React component library built to deliver a clean, accessible, and developer-friendly UI experience. It offers a growing set of reusable components designed to align with modern design systems and streamline application development across projects.
 
+# 1.6.22
+
+- Reordered className values to ensure customClass is always appended last to adopt CSS utility .
+
+# 1.6.21
+
+- **Container,Box**
+  - Moved the code to the @zohodesk/layout package.
+  - Moved Layout.module.css to the @zohodesk/layout package and removed duplicate classes that overlapped with Flex.module.css.
+
 # 1.6.20
 
 **Select**, **MultiSelect**, **GroupSelect**, **SelectWithAvatar**, **SelectWithIcon**, **MultiSelectWithAvatar**, **AdvancedMultiSelect**

package/es/AppContainer/AppContainer.module.css

@@ -8,12 +8,18 @@
   -moz-box-sizing: border-box;
   -ms-box-sizing: border-box;
 }
-.container, .container button, .container input, .container textarea ,.container select {
+
+.container,
+.container button,
+.container input,
+.container textarea,
+.container select {
   /* font-family: var(--zd_regular); */
-  font-family: var(--zd-font-family, ''), var(--zd_fallback_font, ZDLato);
+  font-family: var(--zd-font-family), var(--zd_fallback_font, Lato);
 }
+
 .tooltip {
   height: 0 ;
   font-size: 0 ;
   /* contain:strict */
-}
+}

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

@@ -3,7 +3,7 @@
 exports[`AppContainer rendering the Custom props 1`] = `
 <DocumentFragment>
   <div
-    class="container  flex cover coldir"
+    class="flex fullSize column container"
     data-container="true"
     data-id="AppContainer"
     data-props="true"
@@ -11,14 +11,14 @@ exports[`AppContainer rendering the Custom props 1`] = `
     data-test-id="AppContainer"
   >
     <div
-      class="grow basis shrinkOff"
+      class="flexible basis_zero noShrink"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     />
   </div>
   <div
-    class="container tooltip "
+    class="container tooltip"
     data-id="AppContainer_tooltip"
     data-props="true"
     data-selector-id="appContainer_tooltip"
@@ -30,13 +30,13 @@ exports[`AppContainer rendering the Custom props 1`] = `
 exports[`AppContainer rendering the childern as element 1`] = `
 <DocumentFragment>
   <div
-    class="container  flex cover coldir"
+    class="flex fullSize column container"
     data-id="AppContainer"
     data-selector-id="appContainer"
     data-test-id="AppContainer"
   >
     <div
-      class="grow basis shrinkOff"
+      class="flexible basis_zero noShrink"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -47,7 +47,7 @@ exports[`AppContainer rendering the childern as element 1`] = `
     </div>
   </div>
   <div
-    class="container tooltip "
+    class="container tooltip"
     data-id="AppContainer_tooltip"
     data-selector-id="appContainer_tooltip"
     data-test-id="AppContainer_tooltip"
@@ -58,13 +58,13 @@ exports[`AppContainer rendering the childern as element 1`] = `
 exports[`AppContainer rendering the childern as element in array 1`] = `
 <DocumentFragment>
   <div
-    class="container  flex cover coldir"
+    class="flex fullSize column container"
     data-id="AppContainer"
     data-selector-id="appContainer"
     data-test-id="AppContainer"
   >
     <div
-      class="grow basis shrinkOff"
+      class="flexible basis_zero noShrink"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -78,7 +78,7 @@ exports[`AppContainer rendering the childern as element in array 1`] = `
     </div>
   </div>
   <div
-    class="container tooltip "
+    class="container tooltip"
     data-id="AppContainer_tooltip"
     data-selector-id="appContainer_tooltip"
     data-test-id="AppContainer_tooltip"
@@ -89,20 +89,20 @@ exports[`AppContainer rendering the childern as element in array 1`] = `
 exports[`AppContainer rendering the customClass 1`] = `
 <DocumentFragment>
   <div
-    class="container AppcontainerClass flex cover coldir"
+    class="flex fullSize column container AppcontainerClass"
     data-id="AppContainer"
     data-selector-id="appContainer"
     data-test-id="AppContainer"
   >
     <div
-      class="grow basis shrinkOff"
+      class="flexible basis_zero noShrink"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     />
   </div>
   <div
-    class="container tooltip "
+    class="container tooltip"
     data-id="AppContainer_tooltip"
     data-selector-id="appContainer_tooltip"
     data-test-id="AppContainer_tooltip"
@@ -113,20 +113,20 @@ exports[`AppContainer rendering the customClass 1`] = `
 exports[`AppContainer rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="container  flex cover coldir"
+    class="flex fullSize column container"
     data-id="AppContainer"
     data-selector-id="appContainer"
     data-test-id="AppContainer"
   >
     <div
-      class="grow basis shrinkOff"
+      class="flexible basis_zero noShrink"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     />
   </div>
   <div
-    class="container tooltip "
+    class="container tooltip"
     data-id="AppContainer_tooltip"
     data-selector-id="appContainer_tooltip"
     data-test-id="AppContainer_tooltip"
@@ -137,13 +137,13 @@ exports[`AppContainer rendering the defult props 1`] = `
 exports[`AppContainer rendering the needTooltip is false 1`] = `
 <DocumentFragment>
   <div
-    class="container  flex cover coldir"
+    class="flex fullSize column container"
     data-id="AppContainer"
     data-selector-id="appContainer"
     data-test-id="AppContainer"
   >
     <div
-      class="grow basis shrinkOff"
+      class="flexible basis_zero noShrink"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -155,20 +155,20 @@ exports[`AppContainer rendering the needTooltip is false 1`] = `
 exports[`AppContainer rendering the tooltipClass 1`] = `
 <DocumentFragment>
   <div
-    class="container  flex cover coldir"
+    class="flex fullSize column container"
     data-id="AppContainer"
     data-selector-id="appContainer"
     data-test-id="AppContainer"
   >
     <div
-      class="grow basis shrinkOff"
+      class="flexible basis_zero noShrink"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     />
   </div>
   <div
-    class="container tooltip "
+    class="container tooltip"
     data-id="AppContainer_tooltip"
     data-selector-id="appContainer_tooltip"
     data-test-id="AppContainer_tooltip"
@@ -179,13 +179,13 @@ exports[`AppContainer rendering the tooltipClass 1`] = `
 exports[`AppContainer rendering the tooltipParentClass 1`] = `
 <DocumentFragment>
   <div
-    class="container  flex cover coldir"
+    class="flex fullSize column container"
     data-id="AppContainer"
     data-selector-id="appContainer"
     data-test-id="AppContainer"
   >
     <div
-      class="grow basis shrinkOff"
+      class="flexible basis_zero noShrink"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"

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

@@ -3,7 +3,7 @@
 exports[`Avatar rendering BorderOnActive true 1`] = `
 <DocumentFragment>
   <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"
@@ -21,7 +21,7 @@ exports[`Avatar rendering BorderOnActive true 1`] = `
 exports[`Avatar rendering Name in 2 Word 1`] = `
 <DocumentFragment>
   <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"
@@ -42,7 +42,7 @@ exports[`Avatar rendering Name in 2 Word 1`] = `
 exports[`Avatar rendering NeedBorder false 1`] = `
 <DocumentFragment>
   <div
-    class="avatar medium medium circle primary black  "
+    class="avatar medium medium circle primary black"
     data-id="Avatar"
     data-selector-id="avatar"
     data-test-id="Avatar"
@@ -60,20 +60,20 @@ exports[`Avatar rendering NeedBorder false 1`] = `
 exports[`Avatar rendering alternateSrc 1`] = `
 <DocumentFragment>
   <div
-    class="avatar medium medium circle primary black  "
+    class="avatar medium medium circle primary black"
     data-id="Avatar"
     data-selector-id="avatar"
     data-test-id="Avatar"
   >
     <img
-      class="image animate "
+      class="image animate"
       data-id="Avatar_AvatarImg"
       data-selector-id="avatar_AvatarImg"
       data-test-id="Avatar_AvatarImg"
       src="https://www.w3schools.com/images/w3schools_green.jpg"
     />
     <span
-      class="shadow black "
+      class="shadow black"
     />
   </div>
 </DocumentFragment>
@@ -82,7 +82,7 @@ exports[`Avatar rendering alternateSrc 1`] = `
 exports[`Avatar rendering borderOnHover true 1`] = `
 <DocumentFragment>
   <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"
@@ -100,7 +100,7 @@ exports[`Avatar rendering borderOnHover true 1`] = `
 exports[`Avatar rendering customClass true 1`] = `
 <DocumentFragment>
   <div
-    class="avatar medium medium circle primary black border   customClassAvatar"
+    class="avatar medium medium circle primary black border customClassAvatar"
     data-id="Avatar"
     data-selector-id="avatar"
     data-test-id="Avatar"
@@ -118,7 +118,7 @@ exports[`Avatar rendering customClass true 1`] = `
 exports[`Avatar rendering initial 1`] = `
 <DocumentFragment>
   <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"
@@ -138,20 +138,20 @@ exports[`Avatar rendering initial 1`] = `
 exports[`Avatar rendering isAnimate is false 1`] = `
 <DocumentFragment>
   <div
-    class="avatar medium medium circle primary black  "
+    class="avatar medium medium circle primary black"
     data-id="Avatar"
     data-selector-id="avatar"
     data-test-id="Avatar"
   >
     <img
-      class="image  "
+      class="image"
       data-id="Avatar_AvatarImg"
       data-selector-id="avatar_AvatarImg"
       data-test-id="Avatar_AvatarImg"
       src="https://www.w3schools.com/images/w3schools_green.jpg"
     />
     <span
-      class="shadow black "
+      class="shadow black"
     />
   </div>
 </DocumentFragment>
@@ -160,20 +160,20 @@ exports[`Avatar rendering isAnimate is false 1`] = `
 exports[`Avatar rendering needInnerBorder is true 1`] = `
 <DocumentFragment>
   <div
-    class="avatar medium medium circle primary black  "
+    class="avatar medium medium circle primary black"
     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"
       src="https://www.w3schools.com/images/w3schools_green.jpg"
     />
     <span
-      class="shadow black "
+      class="shadow black"
     />
   </div>
 </DocumentFragment>
@@ -182,7 +182,7 @@ exports[`Avatar rendering needInnerBorder is true 1`] = `
 exports[`Avatar rendering needTitle 1`] = `
 <DocumentFragment>
   <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"
@@ -201,20 +201,20 @@ exports[`Avatar rendering needTitle 1`] = `
 exports[`Avatar rendering showAlternateAvatar is enabled border get disabled 1`] = `
 <DocumentFragment>
   <div
-    class="avatar medium medium circle primary black  "
+    class="avatar medium medium circle primary black"
     data-id="Avatar"
     data-selector-id="avatar"
     data-test-id="Avatar"
   >
     <img
-      class="image animate "
+      class="image animate"
       data-id="Avatar_AvatarImg"
       data-selector-id="avatar_AvatarImg"
       data-test-id="Avatar_AvatarImg"
       src="https://www.w3schools.com/css/img_5terre.jpg"
     />
     <span
-      class="shadow black "
+      class="shadow black"
     />
   </div>
 </DocumentFragment>
@@ -223,13 +223,13 @@ exports[`Avatar rendering showAlternateAvatar is enabled border get disabled 1`]
 exports[`Avatar rendering showDefaultBorder is true 1`] = `
 <DocumentFragment>
   <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"
   >
     <img
-      class="image animate "
+      class="image animate"
       data-id="Avatar_AvatarImg"
       data-selector-id="avatar_AvatarImg"
       data-test-id="Avatar_AvatarImg"
@@ -242,7 +242,7 @@ exports[`Avatar rendering showDefaultBorder is true 1`] = `
 exports[`Avatar rendering src 1`] = `
 <DocumentFragment>
   <div
-    class="avatar medium medium circle primary black  "
+    class="avatar medium medium circle primary black"
     data-id="Avatar"
     data-selector-id="avatar"
     data-test-id="Avatar"
@@ -250,7 +250,7 @@ exports[`Avatar rendering src 1`] = `
   >
     <img
       alt="AvatarName"
-      class="image animate "
+      class="image animate"
       data-id="Avatar_AvatarImg"
       data-selector-id="avatar_AvatarImg"
       data-test-id="Avatar_AvatarImg"
@@ -258,7 +258,7 @@ exports[`Avatar rendering src 1`] = `
       src="https://www.w3schools.com/images/w3schools_green.jpg"
     />
     <span
-      class="shadow black "
+      class="shadow black"
     />
   </div>
 </DocumentFragment>
@@ -267,7 +267,7 @@ exports[`Avatar rendering src 1`] = `
 exports[`Avatar rendering the Custom props 1`] = `
 <DocumentFragment>
   <div
-    class="avatar medium medium circle primary black border   "
+    class="avatar medium medium circle primary black border"
     data-avatar="true"
     data-id="Avatar"
     data-selector-id="avatar"
@@ -286,7 +286,7 @@ exports[`Avatar rendering the Custom props 1`] = `
 exports[`Avatar rendering the defult props 1`] = `
 <DocumentFragment>
   <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"
@@ -304,7 +304,7 @@ exports[`Avatar rendering the defult props 1`] = `
 exports[`Avatar rendering the palette of- default 1`] = `
 <DocumentFragment>
   <div
-    class="avatar medium medium circle default black border   "
+    class="avatar medium medium circle default black border"
     data-id="Avatar"
     data-selector-id="avatar"
     data-test-id="Avatar"
@@ -322,7 +322,7 @@ exports[`Avatar rendering the palette of- default 1`] = `
 exports[`Avatar rendering the palette of- info 1`] = `
 <DocumentFragment>
   <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"
@@ -340,7 +340,7 @@ exports[`Avatar rendering the palette of- info 1`] = `
 exports[`Avatar rendering the palette of- primary 1`] = `
 <DocumentFragment>
   <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"
@@ -358,7 +358,7 @@ exports[`Avatar rendering the palette of- primary 1`] = `
 exports[`Avatar rendering the palette of- secondary 1`] = `
 <DocumentFragment>
   <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"
@@ -376,7 +376,7 @@ exports[`Avatar rendering the palette of- secondary 1`] = `
 exports[`Avatar rendering the shape of- circle 1`] = `
 <DocumentFragment>
   <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"
@@ -394,7 +394,7 @@ exports[`Avatar rendering the shape of- circle 1`] = `
 exports[`Avatar rendering the shape of- square 1`] = `
 <DocumentFragment>
   <div
-    class="avatar medium medium square_medium primary black border   "
+    class="avatar medium medium square_medium primary black border"
     data-id="Avatar"
     data-selector-id="avatar"
     data-test-id="Avatar"
@@ -412,7 +412,7 @@ exports[`Avatar rendering the shape of- square 1`] = `
 exports[`Avatar rendering the size of- black 1`] = `
 <DocumentFragment>
   <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"
@@ -430,7 +430,7 @@ exports[`Avatar rendering the size of- black 1`] = `
 exports[`Avatar rendering the size of- large 1`] = `
 <DocumentFragment>
   <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"
@@ -448,7 +448,7 @@ exports[`Avatar rendering the size of- large 1`] = `
 exports[`Avatar rendering the size of- medium 1`] = `
 <DocumentFragment>
   <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"
@@ -466,7 +466,7 @@ exports[`Avatar rendering the size of- medium 1`] = `
 exports[`Avatar rendering the size of- small 1`] = `
 <DocumentFragment>
   <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"
@@ -484,7 +484,7 @@ exports[`Avatar rendering the size of- small 1`] = `
 exports[`Avatar rendering the size of- white 1`] = `
 <DocumentFragment>
   <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"
@@ -502,7 +502,7 @@ exports[`Avatar rendering the size of- white 1`] = `
 exports[`Avatar rendering the size of- xlarge 1`] = `
 <DocumentFragment>
   <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"
@@ -520,7 +520,7 @@ exports[`Avatar rendering the size of- xlarge 1`] = `
 exports[`Avatar rendering the size of- xmedium 1`] = `
 <DocumentFragment>
   <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"
@@ -538,7 +538,7 @@ exports[`Avatar rendering the size of- xmedium 1`] = `
 exports[`Avatar rendering the size of- xsmall 1`] = `
 <DocumentFragment>
   <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"
@@ -556,7 +556,7 @@ exports[`Avatar rendering the size of- xsmall 1`] = `
 exports[`Avatar rendering the size of- xxsmall 1`] = `
 <DocumentFragment>
   <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"
@@ -574,7 +574,7 @@ exports[`Avatar rendering the size of- xxsmall 1`] = `
 exports[`Avatar rendering title 1`] = `
 <DocumentFragment>
   <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"