@zohodesk/dot 1.0.0-temp-232.1 → 1.0.0-temp-233.2

package/es/form/fields/CheckBoxField/__tests__/__snapshots__/CheckBoxField.spec.js.snap

@@ -3,28 +3,27 @@
 exports[`CheckBoxField rendering the custom children 1`] = `
 <DocumentFragment>
   <div
-    class="container "
+    class="container"
     data-selector-id="checkBoxField"
   >
     <div
-      class="checkboxFieldContainer "
+      class="checkboxFieldContainer"
     >
       <div
-        class="flex rowdir top"
+        class="flex row alignItems_start"
         data-id="containerComponent"
         data-selector-id="container"
         data-test-id="containerComponent"
       >
         <div
-          class="checkboxRow shrinkOff"
+          class="noShrink checkboxRow"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
         >
           <div
             aria-checked="false"
-            class="container pointer primary 
-           inflex rowdir vCenter"
+            class="inlineFlex row alignItems_center container pointer primary"
             data-id="checkBox"
             data-selector-id="container"
             data-test-id="checkBox"
@@ -32,7 +31,7 @@ exports[`CheckBoxField rendering the custom children 1`] = `
             tabindex="0"
           >
             <div
-              class="boxContainer  medium  filled  shrinkOff"
+              class="noShrink boxContainer medium filled"
               data-id="boxComponent"
               data-selector-id="box"
               data-test-id="boxComponent"
@@ -41,7 +40,7 @@ exports[`CheckBoxField rendering the custom children 1`] = `
                 type="hidden"
               />
               <label
-                class="checkbox pointer medium "
+                class="checkbox pointer medium"
               >
                 <svg
                   viewBox="0 0 40 40"
@@ -62,13 +61,13 @@ exports[`CheckBoxField rendering the custom children 1`] = `
           </div>
         </div>
         <div
-          class="grow basis shrinkOff"
+          class="flexible basis_zero noShrink"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
         >
           <div
-            class="flex rowdir vCenter"
+            class="flex row alignItems_center"
             data-id="containerComponent"
             data-selector-id="fieldContainer"
             data-test-id="containerComponent"
@@ -95,28 +94,27 @@ exports[`CheckBoxField rendering the custom children 1`] = `
 exports[`CheckBoxField rendering the custom label children via renderLabelProps 1`] = `
 <DocumentFragment>
   <div
-    class="container "
+    class="container"
     data-selector-id="checkBoxField"
   >
     <div
-      class="checkboxFieldContainer "
+      class="checkboxFieldContainer"
     >
       <div
-        class="flex rowdir top"
+        class="flex row alignItems_start"
         data-id="containerComponent"
         data-selector-id="container"
         data-test-id="containerComponent"
       >
         <div
-          class="checkboxRow shrinkOff"
+          class="noShrink checkboxRow"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
         >
           <div
             aria-checked="false"
-            class="container pointer primary 
-           inflex rowdir vCenter"
+            class="inlineFlex row alignItems_center container pointer primary"
             data-id="checkBox"
             data-selector-id="container"
             data-test-id="checkBox"
@@ -124,7 +122,7 @@ exports[`CheckBoxField rendering the custom label children via renderLabelProps
             tabindex="0"
           >
             <div
-              class="boxContainer  medium  filled  shrinkOff"
+              class="noShrink boxContainer medium filled"
               data-id="boxComponent"
               data-selector-id="box"
               data-test-id="boxComponent"
@@ -133,7 +131,7 @@ exports[`CheckBoxField rendering the custom label children via renderLabelProps
                 type="hidden"
               />
               <label
-                class="checkbox pointer medium "
+                class="checkbox pointer medium"
               >
                 <svg
                   viewBox="0 0 40 40"
@@ -154,13 +152,13 @@ exports[`CheckBoxField rendering the custom label children via renderLabelProps
           </div>
         </div>
         <div
-          class="grow basis shrinkOff"
+          class="flexible basis_zero noShrink"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
         >
           <div
-            class="flex rowdir vCenter"
+            class="flex row alignItems_center"
             data-id="containerComponent"
             data-selector-id="fieldContainer"
             data-test-id="containerComponent"
@@ -187,28 +185,27 @@ exports[`CheckBoxField rendering the custom label children via renderLabelProps
 exports[`CheckBoxField rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="container "
+    class="container"
     data-selector-id="checkBoxField"
   >
     <div
-      class="checkboxFieldContainer "
+      class="checkboxFieldContainer"
     >
       <div
-        class="flex rowdir top"
+        class="flex row alignItems_start"
         data-id="containerComponent"
         data-selector-id="container"
         data-test-id="containerComponent"
       >
         <div
-          class="checkboxRow shrinkOff"
+          class="noShrink checkboxRow"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
         >
           <div
             aria-checked="false"
-            class="container pointer primary 
-           inflex rowdir vCenter"
+            class="inlineFlex row alignItems_center container pointer primary"
             data-id="checkBox"
             data-selector-id="container"
             data-test-id="checkBox"
@@ -216,7 +213,7 @@ exports[`CheckBoxField rendering the defult props 1`] = `
             tabindex="0"
           >
             <div
-              class="boxContainer  medium  filled  shrinkOff"
+              class="noShrink boxContainer medium filled"
               data-id="boxComponent"
               data-selector-id="box"
               data-test-id="boxComponent"
@@ -225,7 +222,7 @@ exports[`CheckBoxField rendering the defult props 1`] = `
                 type="hidden"
               />
               <label
-                class="checkbox pointer medium "
+                class="checkbox pointer medium"
               >
                 <svg
                   viewBox="0 0 40 40"
@@ -246,13 +243,13 @@ exports[`CheckBoxField rendering the defult props 1`] = `
           </div>
         </div>
         <div
-          class="grow basis shrinkOff"
+          class="flexible basis_zero noShrink"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
         >
           <div
-            class="flex rowdir vCenter"
+            class="flex row alignItems_center"
             data-id="containerComponent"
             data-selector-id="fieldContainer"
             data-test-id="containerComponent"

package/es/form/fields/CurrencyField/CurrencyField.js

@@ -13,6 +13,7 @@ import { getUniqueId } from '@zohodesk/components/es/Provider/IdProvider';
 import FieldContainer from "../FieldContainer/FieldContainer";
 /**** CSS ****/
 
+import { cn } from "@dot-system/css-utility";
 import style from "../Fields.module.css";
 export default class CurrencyField extends PureComponent {
   constructor(props) {
@@ -121,7 +122,7 @@ export default class CurrencyField extends PureComponent {
     let uniqueId = htmlId ? htmlId : this.getNextId();
     const isFocusable = !needReadOnlyStyle || !isReadOnly && needReadOnlyStyle;
     return /*#__PURE__*/React.createElement("div", {
-      className: `${style.container} ${isDisabled ? style.disabled : isReadOnly ? style.readonly : ''}`,
+      className: cn(`${style.container} ${isDisabled ? style.disabled : isReadOnly ? style.readonly : ''}`),
       "data-title": isDisabled ? title : null,
       "data-selector-id": dataSelectorId
     }, labelName && /*#__PURE__*/React.createElement(FieldContainer, {
@@ -143,7 +144,7 @@ export default class CurrencyField extends PureComponent {
       customId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`,
       testId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`
     }, LabelProps))), /*#__PURE__*/React.createElement("div", {
-      className: `${style.fieldContainer} ${labelName ? style[`fieldMargin_${fieldSize}`] : ''}`
+      className: cn(`${style.fieldContainer} ${labelName ? style[`fieldMargin_${fieldSize}`] : ''}`)
     }, /*#__PURE__*/React.createElement(TextBoxIcon, _extends({
       htmlId: uniqueId,
       id: id,

package/es/form/fields/CurrencyField/__tests__/__snapshots__/CurrencyField.spec.js.snap

@@ -3,24 +3,24 @@
 exports[`CurrencyField rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="container "
+    class="container"
     data-selector-id="currencyField"
   >
     <div
-      class="fieldContainer "
+      class="fieldContainer"
     >
       <div
-        class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container   flex rowdir"
+        class="flex row varClass customContainer border_bottom effect borderColor_default hasBorder container"
         data-selector-id="textBoxIcon"
       >
         <div
-          class="grow basis shrinkOff"
+          class="flexible basis_zero noShrink"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
         >
           <input
-            class="  container xmedium  primary  effect  borderColor_default  "
+            class="container xmedium primary effect borderColor_default"
             data-id="textBoxIcon"
             data-selector-id="textBoxIcon"
             data-test-id="textBoxIcon"
@@ -31,13 +31,13 @@ exports[`CurrencyField rendering the defult props 1`] = `
           />
         </div>
         <div
-          class="iconContainer  shrinkOff"
+          class="noShrink iconContainer"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
         >
           <div
-            class="flex cover rowdir"
+            class="flex fullSize row"
             data-id="containerComponent"
             data-selector-id="container"
             data-test-id="containerComponent"

package/es/form/fields/DateField/DateField.js

@@ -13,6 +13,7 @@ import { getUniqueId } from '@zohodesk/components/es/Provider/IdProvider';
 import FieldContainer from "../FieldContainer/FieldContainer";
 /**** CSS ****/
 
+import { cn } from "@dot-system/css-utility";
 import style from "../Fields.module.css";
 export default class DateField extends PureComponent {
   constructor(props) {
@@ -125,7 +126,7 @@ export default class DateField extends PureComponent {
     } = customProps;
     let getAriaId = htmlId ? htmlId : this.getNextId();
     return /*#__PURE__*/React.createElement("div", {
-      className: `${style.container} ${isDisabled ? style.disabled : isReadOnly ? style.readonly : ''}`,
+      className: cn(`${style.container} ${isDisabled ? style.disabled : isReadOnly ? style.readonly : ''}`),
       "data-title": isDisabled ? title : null,
       "data-selector-id": dataSelectorId
     }, labelName && /*#__PURE__*/React.createElement(FieldContainer, {
@@ -153,9 +154,9 @@ export default class DateField extends PureComponent {
         }
       }
     }, LabelProps))), /*#__PURE__*/React.createElement("div", {
-      className: `${style.fieldContainer} ${labelName ? style[`fieldMargin_${fieldSize}`] : ''}`
+      className: cn(`${style.fieldContainer} ${labelName ? style[`fieldMargin_${fieldSize}`] : ''}`)
     }, isLocked && lockedValueText ? /*#__PURE__*/React.createElement("div", {
-      className: style.lockText
+      className: cn(style.lockText)
     }, lockedValueText) : /*#__PURE__*/React.createElement(DateWidget, _extends({
       textBoxSize: fieldSize === 'medium' ? textBoxSize : 'xsmall',
       textBoxVariant: textBoxVariant,

package/es/form/fields/DateField/__tests__/__snapshots__/DateField.spec.js.snap

@@ -3,33 +3,33 @@
 exports[`DateField rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="container "
+    class="container"
     data-selector-id="dateField"
   >
     <div
-      class="fieldContainer "
+      class="fieldContainer"
     >
       <div
         class="container"
       >
         <div
-          class=" textBox  enabled"
+          class="textBox enabled"
           data-id="dateField(formatted_undefined)_widget"
           data-test-id="dateField(formatted_undefined)_widget"
         >
           <div
-            class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container placeHolder  flex rowdir"
+            class="flex row varClass customContainer border_bottom effect borderColor_default hasBorder container placeHolder"
             data-selector-id="textBoxIcon"
           >
             <div
-              class="grow basis shrinkOff"
+              class="flexible basis_zero noShrink"
               data-id="boxComponent"
               data-selector-id="box"
               data-test-id="boxComponent"
             >
               <input
                 autocomplete="off"
-                class=" pointer container xmedium  primary  effect  borderColor_default  "
+                class="pointer container xmedium primary effect borderColor_default"
                 data-id="dateField(formatted_undefined)"
                 data-selector-id="textBoxIcon"
                 data-test-id="dateField(formatted_undefined)"
@@ -40,32 +40,32 @@ exports[`DateField rendering the defult props 1`] = `
               />
             </div>
             <div
-              class="iconContainer  shrinkOff"
+              class="noShrink iconContainer"
               data-id="boxComponent"
               data-selector-id="box"
               data-test-id="boxComponent"
             >
               <div
-                class="flex cover rowdir"
+                class="flex fullSize row"
                 data-id="containerComponent"
                 data-selector-id="container"
                 data-test-id="containerComponent"
               >
                 <div
-                  class="icon  shrinkOff"
+                  class="noShrink icon"
                   data-id="boxComponent"
                   data-selector-id="box"
                   data-test-id="boxComponent"
                 >
                   <div
-                    class="datePickIcon inflex coldir both"
+                    class="inlineFlex column alignItems_center justifyContent_center datePickIcon"
                     data-id="dateField(formatted_undefined)_datePicker"
                     data-selector-id="container"
                     data-test-id="dateField(formatted_undefined)_datePicker"
                   >
                     <i
                       aria-hidden="true"
-                      class="zd_font_icons basic icon-Datepicker    "
+                      class="zd_font_icons basic icon-Datepicker"
                       data-id="fontIcon"
                       data-selector-id="fontIcon"
                       data-test-id="fontIcon"

package/es/form/fields/FieldContainer/FieldContainer.js

@@ -10,6 +10,7 @@ import { Container } from '@zohodesk/components/es/Layout';
 import { Icon } from '@zohodesk/icons';
 /**** CSS ****/
 
+import { cn } from "@dot-system/css-utility";
 import style from "../Fields.module.css";
 export default class FieldContainer extends PureComponent {
   constructor(props) {
@@ -57,7 +58,7 @@ export default class FieldContainer extends PureComponent {
       "data-title": ePhiTitle,
       "data-id": `${dataId}_ePHI`,
       "data-test-id": `${dataId}_ePHI`,
-      className: style.ePhiTag
+      className: cn(style.ePhiTag)
     }, ePhiText) : null, renderEnd ? renderEnd() : null);
   }
 

package/es/form/fields/FieldContainer/__tests__/__snapshots__/FieldContainer.spec.js.snap

@@ -3,7 +3,7 @@
 exports[`FieldContainer rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="flex rowdir vCenter"
+    class="flex row alignItems_center"
     data-id="containerComponent"
     data-selector-id="fieldContainer"
     data-test-id="containerComponent"

package/es/form/fields/MultiSelectField/MultiSelectField.js

@@ -13,6 +13,7 @@ import { getUniqueId } from '@zohodesk/components/es/Provider/IdProvider';
 import FieldContainer from "../FieldContainer/FieldContainer";
 /** CSS */
 
+import { cn } from "@dot-system/css-utility";
 import style from "../Fields.module.css";
 export default class MultiSelectField extends PureComponent {
   constructor(props) {
@@ -137,7 +138,7 @@ export default class MultiSelectField extends PureComponent {
     let isDarkPalette = palette === 'dark';
     let uniqueId = htmlId ? htmlId : this.getNextId();
     return /*#__PURE__*/React.createElement("div", {
-      className: `${style.container} ${isDisabled ? style.disabled : isReadOnly ? style.readonly : ''}`,
+      className: cn(`${style.container} ${isDisabled ? style.disabled : isReadOnly ? style.readonly : ''}`),
       "data-title": isDisabled ? title : null,
       "data-selector-id": dataSelectorId
     }, labelName && /*#__PURE__*/React.createElement(FieldContainer, {

package/es/form/fields/MultiSelectField/__tests__/__snapshots__/MultiSelectField.spec.js.snap

@@ -3,37 +3,36 @@
 exports[`MultiSelectField rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="container "
+    class="container"
     data-selector-id="multiSelectField"
   >
     <div
-      class="wrapper     effect"
+      class="wrapper effect"
       data-id="multiSelect"
       data-selector-id="multiSelect"
       data-test-id="multiSelect"
     >
       <div
-        class="container medium borderColor_default   hasBorder flex cover rowdir wrap vCenter"
+        class="flex fullSize row wrap alignItems_center container medium borderColor_default hasBorder"
         data-id="containerComponent"
         data-selector-id="container"
         data-test-id="containerComponent"
       >
         <div
-          class="wrapper grow basisAuto shrinkOn"
+          class="flexible basis_auto shrink wrapper"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
         >
           <span
-            class=" custmSpan custmSpanMedium 
-          "
+            class="custmSpan custmSpanMedium"
           />
           <div
-            class="varClass customContainer    effect     container custmInputWrapper  flex rowdir"
+            class="flex row varClass customContainer effect container custmInputWrapper"
             data-selector-id="textBoxIcon"
           >
             <div
-              class="grow basis shrinkOff"
+              class="flexible basis_zero noShrink"
               data-id="boxComponent"
               data-selector-id="box"
               data-test-id="boxComponent"
@@ -43,7 +42,7 @@ exports[`MultiSelectField rendering the defult props 1`] = `
                 aria-haspopup="true"
                 aria-required="true"
                 autocomplete="off"
-                class="  container medium  default  effect  borderColor_default  "
+                class="container medium default effect borderColor_default"
                 data-id="multiSelect_textBox"
                 data-selector-id="textBoxIcon"
                 data-test-id="multiSelect_textBox"
@@ -55,25 +54,25 @@ exports[`MultiSelectField rendering the defult props 1`] = `
               />
             </div>
             <div
-              class="iconContainer  shrinkOff"
+              class="noShrink iconContainer"
               data-id="boxComponent"
               data-selector-id="box"
               data-test-id="boxComponent"
             >
               <div
-                class="flex cover rowdir"
+                class="flex fullSize row"
                 data-id="containerComponent"
                 data-selector-id="container"
                 data-test-id="containerComponent"
               >
                 <div
-                  class="icon  shrinkOff"
+                  class="noShrink icon"
                   data-id="boxComponent"
                   data-selector-id="box"
                   data-test-id="boxComponent"
                 >
                   <div
-                    class="rightPlaceholder inflex rowdir vCenter"
+                    class="inlineFlex row alignItems_center rightPlaceholder"
                     data-id="containerComponent"
                     data-selector-id="container"
                     data-test-id="containerComponent"

package/es/form/fields/PhoneField/__tests__/__snapshots__/PhoneField.spec.js.snap

@@ -3,36 +3,36 @@
 exports[`PhoneField rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="container  flex cover rowdir"
+    class="flex fullSize row container"
     data-id="containerComponent"
     data-selector-id="phoneField"
     data-test-id="containerComponent"
   >
     <div
-      class="phoneField grow basis shrinkOff"
+      class="flexible basis_zero noShrink phoneField"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <div
-        class="container "
+        class="container"
         data-selector-id="textBoxField"
       >
         <div
-          class="fieldContainer "
+          class="fieldContainer"
         >
           <div
-            class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container   flex rowdir"
+            class="flex row varClass customContainer border_bottom effect borderColor_default hasBorder container"
             data-selector-id="textBoxIcon"
           >
             <div
-              class="grow basis shrinkOff"
+              class="flexible basis_zero noShrink"
               data-id="boxComponent"
               data-selector-id="box"
               data-test-id="boxComponent"
             >
               <input
-                class="  container xmedium  primary  effect  borderColor_default  "
+                class="container xmedium primary effect borderColor_default"
                 data-id="textBoxIcon"
                 data-selector-id="textBoxIcon"
                 data-test-id="textBoxIcon"
@@ -43,13 +43,13 @@ exports[`PhoneField rendering the defult props 1`] = `
               />
             </div>
             <div
-              class="iconContainer  shrinkOff"
+              class="noShrink iconContainer"
               data-id="boxComponent"
               data-selector-id="box"
               data-test-id="boxComponent"
             >
               <div
-                class="flex cover rowdir"
+                class="flex fullSize row"
                 data-id="containerComponent"
                 data-selector-id="container"
                 data-test-id="containerComponent"
@@ -60,7 +60,7 @@ exports[`PhoneField rendering the defult props 1`] = `
       </div>
     </div>
     <div
-      class="shrinkOff"
+      class="noShrink"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"

package/es/form/fields/RadioField/RadioField.js

@@ -13,6 +13,7 @@ import Radio from '@zohodesk/components/es/Radio/Radio';
 import ValidationMessage from "../ValidationMessage/ValidationMessage";
 /** Css */
 
+import { cn } from "@dot-system/css-utility";
 import style from "../Fields.module.css";
 export default class RadioField extends PureComponent {
   constructor(props) {
@@ -119,7 +120,7 @@ export default class RadioField extends PureComponent {
       customRadioClass = ''
     } = customClass;
     return /*#__PURE__*/React.createElement("div", {
-      className: `${style.container} ${isDisabled ? style.disabled : isReadOnly ? style.readonly : ''} ${customWrapperClass}`,
+      className: cn(`${style.container} ${isDisabled ? style.disabled : isReadOnly ? style.readonly : ''} ${customWrapperClass}`),
       "data-title": isDisabled ? title : null,
       "data-selector-id": dataSelectorId
     }, labelName && /*#__PURE__*/React.createElement(Label, _extends({
@@ -140,7 +141,7 @@ export default class RadioField extends PureComponent {
         }
       }
     }, LabelProps)), /*#__PURE__*/React.createElement("div", {
-      className: `${style.fieldContainer} ${isBoxStyle ? style.radiosWrapper : ''} ${labelName ? isBoxStyle ? style.fieldMargin_large : style.fieldMargin_medium : ''} ${style.radioContainer}`
+      className: cn(`${style.fieldContainer} ${isBoxStyle ? style.radiosWrapper : ''} ${labelName ? isBoxStyle ? style.fieldMargin_large : style.fieldMargin_medium : ''} ${style.radioContainer}`)
     }, options.map((option, index) => {
       let {
         text,
@@ -161,16 +162,16 @@ export default class RadioField extends PureComponent {
         iconClass: style.infoIcon
       }, InfoIconProps)), renderRightPlaceholderNode) : renderRightPlaceholderNode;
       const radioBoxClasses = isBoxStyle ? compileClassNames({
-        [customRadioClass]: !!customRadioClass,
         [style.radioBox]: true,
         [style.withSecondaryText]: !!secondaryText,
         [style.primaryTextOnly]: !secondaryText,
         [style.hoverableRadioBox]: !isDisabledState,
-        [style.radioBoxActive]: isChecked
+        [style.radioBoxActive]: isChecked,
+        [customRadioClass]: !!customRadioClass
       }) : '';
       return /*#__PURE__*/React.createElement("span", {
         key: text,
-        className: `${!isBoxStyle ? style.radio : ''} ${style.radioWrap} ${customRadioWrapperClass}`
+        className: cn(`${!isBoxStyle ? style.radio : ''} ${style.radioWrap} ${customRadioWrapperClass}`)
       }, /*#__PURE__*/React.createElement(Radio, _extends({}, customProps, {
         id: index,
         value: value,