@zohodesk/dot 1.0.0-temp-191.1 → 1.0.0-temp-193

package/es/IconButton/IconButton.module.css

@@ -1,22 +1,22 @@
-.varClass {
-  --iconColor: var(--zdt_iconButton_icon_black);
-}
-.wrapper {
-  height: var(--zd_size28) ;
-  width: var(--zd_size28) ;
-  composes: offSelection from '~@zohodesk/components/lib/common/common.module.css';
-  composes: varClass;
-  color: var(--iconColor);
-  cursor: pointer;
-}
-.primary {
-  --iconColor: var(--zdt_iconButton_icon_primary);
-}
-.primary:hover {
-  --iconColor: var(--zdt_iconButton_icon_primaryHover);
-}
-.primary_active,
-.primaryFilled,
-.primaryFilled_active {
-  --iconColor: var(--zdt_iconButton_icon_primaryActive);
-}
+.varClass {
+  --iconColor: var(--zdt_iconButton_icon_black);
+}
+.wrapper {
+  height: var(--zd_size28) ;
+  width: var(--zd_size28) ;
+  composes: offSelection from '~@zohodesk/components/lib/common/common.module.css';
+  composes: varClass;
+  color: var(--iconColor);
+  cursor: pointer;
+}
+.primary {
+  --iconColor: var(--zdt_iconButton_icon_primary);
+}
+.primary:hover {
+  --iconColor: var(--zdt_iconButton_icon_primaryHover);
+}
+.primary_active,
+.primaryFilled,
+.primaryFilled_active {
+  --iconColor: var(--zdt_iconButton_icon_primaryActive);
+}

package/es/TagWithIcon/TagWithIcon.module.css

@@ -1,67 +1,67 @@
-.varClass {
-  --tag_bg_color: var(--zdt_tagWithIconGrey_bg);
-  --tag_text_color: var(--zdt_tagWithIconGrey_text);
-  --tag_border_color: var(--zdt_tagWithIconGrey_border);
-  --tag_small_fontSize: var(--zd_font_size10);
-  --tag_large_fontSize: var(--zd_font_size12);
-}
-
-.wrapper {
-  composes: varClass;
-  color: var(--tag_text_color);
-  background-color: var(--tag_bg_color);
-}
-
-.small,
-.large {
-  max-width: 100% ;
-  height: var(--zd_size18) ;
-}
-
-.small, .large {
-  border: 1px solid var(--tag_border_color);
-  border-radius: var(--zd_size4);
-  padding: 0 var(--zd_size6) ;
-}
-
-.bold {
-  composes: semibold from '~@zohodesk/components/lib/common/common.module.css';
-}
-
-.small_text {
-  font-size: var(--tag_small_fontSize);
-}
-
-.large_text {
-  font-size: var(--tag_large_fontSize);
-}
-
-.text {
-  composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
-}
-
-[dir=ltr] .iconSpace {
-  margin-right: var(--zd_size4) ;
-}
-
-[dir=rtl] .iconSpace {
-  margin-left: var(--zd_size4) ;
-}
-
-.yellow {
-  --tag_bg_color: var(--zdt_tagWithIconYellow_bg);
-  --tag_text_color: var(--zdt_tagWithIconYellow_text);
-  --tag_border_color: var(--zdt_tagWithIconYellow_border);
-}
-
-.grey {
-  --tag_bg_color: var(--zdt_tagWithIconGrey_bg);
-  --tag_text_color: var(--zdt_tagWithIconGrey_text);
-  --tag_border_color: var(--zdt_tagWithIconGrey_border);
-}
-
-.blue {
-  --tag_bg_color: var(--zdt_tagWithIconBlue_bg);
-  --tag_text_color: var(--zdt_tagWithIconBlue_text);
-  --tag_border_color: var(--zdt_tagWithIconBlue_border);
+.varClass {
+  --tag_bg_color: var(--zdt_tagWithIconGrey_bg);
+  --tag_text_color: var(--zdt_tagWithIconGrey_text);
+  --tag_border_color: var(--zdt_tagWithIconGrey_border);
+  --tag_small_fontSize: var(--zd_font_size10);
+  --tag_large_fontSize: var(--zd_font_size12);
+}
+
+.wrapper {
+  composes: varClass;
+  color: var(--tag_text_color);
+  background-color: var(--tag_bg_color);
+}
+
+.small,
+.large {
+  max-width: 100% ;
+  height: var(--zd_size18) ;
+}
+
+.small, .large {
+  border: 1px solid var(--tag_border_color);
+  border-radius: var(--zd_size4);
+  padding: 0 var(--zd_size6) ;
+}
+
+.bold {
+  composes: semibold from '~@zohodesk/components/lib/common/common.module.css';
+}
+
+.small_text {
+  font-size: var(--tag_small_fontSize);
+}
+
+.large_text {
+  font-size: var(--tag_large_fontSize);
+}
+
+.text {
+  composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
+}
+
+[dir=ltr] .iconSpace {
+  margin-right: var(--zd_size4) ;
+}
+
+[dir=rtl] .iconSpace {
+  margin-left: var(--zd_size4) ;
+}
+
+.yellow {
+  --tag_bg_color: var(--zdt_tagWithIconYellow_bg);
+  --tag_text_color: var(--zdt_tagWithIconYellow_text);
+  --tag_border_color: var(--zdt_tagWithIconYellow_border);
+}
+
+.grey {
+  --tag_bg_color: var(--zdt_tagWithIconGrey_bg);
+  --tag_text_color: var(--zdt_tagWithIconGrey_text);
+  --tag_border_color: var(--zdt_tagWithIconGrey_border);
+}
+
+.blue {
+  --tag_bg_color: var(--zdt_tagWithIconBlue_bg);
+  --tag_text_color: var(--zdt_tagWithIconBlue_text);
+  --tag_border_color: var(--zdt_tagWithIconBlue_border);
 }

package/es/avatar/AvatarIcon/AvatarIcon.module.css

@@ -1,58 +1,58 @@
-.varClass {
-  --icon_color: var(--zdt_avatarIcon_dark_icon);
-  --border_color: var(--zdt_avatarIcon_default_border);
-  --border_hoverColor: var(--zdt_avatarIcon_default_hover_border);
-}
-.container {
-  vertical-align: middle;
-  composes: varClass;
-  border-width: 1px;
-  border-style: solid;
-  border-radius: 50%;
-  border-color: var(--border_color)
-}
-.borderOnHover:hover, .borderOnActive {
-  border-color: var(--border_hoverColor)
-}
-.default {
-  --border_color: var(--zdt_avatarIcon_default_border);
-  --border_hoverColor: var(--zdt_avatarIcon_default_hover_border);
-}
-.primary {
-  --border_color: var(--zdt_avatarIcon_primary_border);
-  --border_hoverColor: var(--zdt_avatarIcon_primary_hover_border);
-}
-.secondary {
-  --border_color: var(--zdt_avatarIcon_secondary_border);
-  --border_hoverColor: var(--zdt_avatarIcon_secondary_hover_border);
-}
-.success {
-  --border_color: var(--zdt_avatarIcon_success_border);
-  --border_hoverColor: var(--zdt_avatarIcon_success_hover_border);
-}
-.danger {
-  --border_color: var(--zdt_avatarIcon_danger_border);
-  --border_hoverColor: var(--zdt_avatarIcon_danger_hover_border);
-}
-.iconColor {
-  color: var(--icon_color);
-}
-.icon_danger {
-  --icon_color: var(--zdt_avatarIcon_danger_icon);
-}
-.icon_primary {
-  --icon_color: var(--zdt_avatarIcon_primary_icon);
-}
-.icon_grey {
-  --icon_color: var(--zdt_avatarIcon_grey_icon);
-}
-.icon_success {
-  --icon_color: var(--zdt_avatarIcon_success_icon);
-}
-.icon_smoke18 {
-  --icon_color: var(--zdt_avatarIcon_smoke_icon);
-}
-.icon_dark {
-  --icon_color: var(--zdt_avatarIcon_dark_icon);
-}
-
+.varClass {
+  --icon_color: var(--zdt_avatarIcon_dark_icon);
+  --border_color: var(--zdt_avatarIcon_default_border);
+  --border_hoverColor: var(--zdt_avatarIcon_default_hover_border);
+}
+.container {
+  vertical-align: middle;
+  composes: varClass;
+  border-width: 1px;
+  border-style: solid;
+  border-radius: 50%;
+  border-color: var(--border_color)
+}
+.borderOnHover:hover, .borderOnActive {
+  border-color: var(--border_hoverColor)
+}
+.default {
+  --border_color: var(--zdt_avatarIcon_default_border);
+  --border_hoverColor: var(--zdt_avatarIcon_default_hover_border);
+}
+.primary {
+  --border_color: var(--zdt_avatarIcon_primary_border);
+  --border_hoverColor: var(--zdt_avatarIcon_primary_hover_border);
+}
+.secondary {
+  --border_color: var(--zdt_avatarIcon_secondary_border);
+  --border_hoverColor: var(--zdt_avatarIcon_secondary_hover_border);
+}
+.success {
+  --border_color: var(--zdt_avatarIcon_success_border);
+  --border_hoverColor: var(--zdt_avatarIcon_success_hover_border);
+}
+.danger {
+  --border_color: var(--zdt_avatarIcon_danger_border);
+  --border_hoverColor: var(--zdt_avatarIcon_danger_hover_border);
+}
+.iconColor {
+  color: var(--icon_color);
+}
+.icon_danger {
+  --icon_color: var(--zdt_avatarIcon_danger_icon);
+}
+.icon_primary {
+  --icon_color: var(--zdt_avatarIcon_primary_icon);
+}
+.icon_grey {
+  --icon_color: var(--zdt_avatarIcon_grey_icon);
+}
+.icon_success {
+  --icon_color: var(--zdt_avatarIcon_success_icon);
+}
+.icon_smoke18 {
+  --icon_color: var(--zdt_avatarIcon_smoke_icon);
+}
+.icon_dark {
+  --icon_color: var(--zdt_avatarIcon_dark_icon);
+}
+

package/es/common/dot_boxShadow.module.css

@@ -35,6 +35,4 @@
 
     /* desktop notification */
     --zd_bs_desktopnotification_container: var(--zd_bs_contrast_outline, 0 4px 20px var(--zdt_desktopnotification_box_shadow));
-
-
 }

package/es/emptystate/CommonEmptyState/CommonEmptyState.module.css

@@ -1,92 +1,92 @@
-.varClass {
-  --titleColor: var(--zdt_commonEmptyState_default_title);
-  --descriptionColor: var(--zdt_commonEmptyState_default_description);
-  --linkColor: var(--zdt_commonEmptyState_default_link);
-  --linkHoverColor: var(--zdt_commonEmptyState_default_link_hover);
-}
-.container {
-  composes: varClass;
-  text-align: center;
-}
-[dir=ltr] .container {
-  margin-left: auto ;
-  margin-right: auto ;
-}
-[dir=rtl] .container {
-  margin-right: auto ;
-  margin-left: auto ;
-}
-.fluid {
-  max-width: var(--zd_size430) ;
-}
-.title {
-  font-family: var(--zd_semibold);
-  color: var(--titleColor);
-  word-wrap: break-word;
-}
-.small .title {
-  font-size: var(--zd_font_size16) ;
-}
-.medium .title {
-  font-size: var(--zd_font_size20) ;
-}
-.linkWrapper,
-.linkDescWrapper {
-  color: var(--descriptionColor);
-}
-.small .linkWrapper,
-.small .linkDescWrapper {
-  font-size: var(--zd_font_size12) ;
-}
-.medium .linkWrapper,
-.medium .linkDescWrapper {
-  font-size: var(--zd_font_size14) ;
-}
-.medium .linkWrapper {
-  margin-top: var(--zd_size18) ;
-}
-.small .linkWrapper {
-  margin-top: var(--zd_size12) ;
-}
-.linkDescWrapper {
-  margin-top: var(--zd_size20) ;
-}
-.desc{
-  word-wrap: break-word;
-}
-[dir=ltr] .linkDesc, [dir=ltr] .desc {
-  margin-right: var(--zd_size4) ;
-}
-[dir=rtl] .linkDesc, [dir=rtl] .desc {
-  margin-left: var(--zd_size4) ;
-}
-.small .desc {
-  line-height: 1.584;
-}
-.medium .desc {
-  line-height: 1.358;
-}
-.link {
-  color: var(--linkColor);
-  display: inline-block;
-  cursor: pointer;
-}
-.link:hover {
-  color: var(--linkHoverColor);
-}
-.children {
-  margin-top: var(--zd_size15) ;
-}
-
-.default {
-  --titleColor: var(--zdt_commonEmptyState_default_title);
-  --linkColor: var(--zdt_commonEmptyState_default_link);
-  --linkHoverColor: var(--zdt_commonEmptyState_default_link_hover);
-  --descriptionColor: var(--zdt_commonEmptyState_default_description);
-}
-.dark {
-  --titleColor: var(--zdt_commonEmptyState_dark_title);
-  --linkColor: var(--zdt_commonEmptyState_dark_link);
-  --linkHoverColor: var(--zdt_commonEmptyState_dark_link_hover);
-  --descriptionColor: var(--zdt_commonEmptyState_dark_description);
-}
+.varClass {
+  --titleColor: var(--zdt_commonEmptyState_default_title);
+  --descriptionColor: var(--zdt_commonEmptyState_default_description);
+  --linkColor: var(--zdt_commonEmptyState_default_link);
+  --linkHoverColor: var(--zdt_commonEmptyState_default_link_hover);
+}
+.container {
+  composes: varClass;
+  text-align: center;
+}
+[dir=ltr] .container {
+  margin-left: auto ;
+  margin-right: auto ;
+}
+[dir=rtl] .container {
+  margin-right: auto ;
+  margin-left: auto ;
+}
+.fluid {
+  max-width: var(--zd_size430) ;
+}
+.title {
+  font-family: var(--zd_semibold);
+  color: var(--titleColor);
+  word-wrap: break-word;
+}
+.small .title {
+  font-size: var(--zd_font_size16) ;
+}
+.medium .title {
+  font-size: var(--zd_font_size20) ;
+}
+.linkWrapper,
+.linkDescWrapper {
+  color: var(--descriptionColor);
+}
+.small .linkWrapper,
+.small .linkDescWrapper {
+  font-size: var(--zd_font_size12) ;
+}
+.medium .linkWrapper,
+.medium .linkDescWrapper {
+  font-size: var(--zd_font_size14) ;
+}
+.medium .linkWrapper {
+  margin-top: var(--zd_size18) ;
+}
+.small .linkWrapper {
+  margin-top: var(--zd_size12) ;
+}
+.linkDescWrapper {
+  margin-top: var(--zd_size20) ;
+}
+.desc{
+  word-wrap: break-word;
+}
+[dir=ltr] .linkDesc, [dir=ltr] .desc {
+  margin-right: var(--zd_size4) ;
+}
+[dir=rtl] .linkDesc, [dir=rtl] .desc {
+  margin-left: var(--zd_size4) ;
+}
+.small .desc {
+  line-height: 1.584;
+}
+.medium .desc {
+  line-height: 1.358;
+}
+.link {
+  color: var(--linkColor);
+  display: inline-block;
+  cursor: pointer;
+}
+.link:hover {
+  color: var(--linkHoverColor);
+}
+.children {
+  margin-top: var(--zd_size15) ;
+}
+
+.default {
+  --titleColor: var(--zdt_commonEmptyState_default_title);
+  --linkColor: var(--zdt_commonEmptyState_default_link);
+  --linkHoverColor: var(--zdt_commonEmptyState_default_link_hover);
+  --descriptionColor: var(--zdt_commonEmptyState_default_description);
+}
+.dark {
+  --titleColor: var(--zdt_commonEmptyState_dark_title);
+  --linkColor: var(--zdt_commonEmptyState_dark_link);
+  --linkHoverColor: var(--zdt_commonEmptyState_dark_link_hover);
+  --descriptionColor: var(--zdt_commonEmptyState_dark_description);
+}

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

@@ -60,7 +60,7 @@ exports[`DateField rendering the defult props 1`] = `
                   data-test-id="boxComponent"
                 >
                   <div
-                    class="flex cover coldir both"
+                    class="datePickIcon inflex coldir both"
                     data-id="dateField(formatted_undefined)_datePicker"
                     data-selector-id="container"
                     data-test-id="dateField(formatted_undefined)_datePicker"

package/es/form/fields/Fields.module.css

@@ -201,3 +201,20 @@
 [dir=rtl] .ePhiTag {
   margin-right: var(--zd_size8) ;
 }
+
+.hasChildren{
+position: relative;
+}
+
+.rightPlaceholder{
+  position: absolute;
+  bottom:var(--zd_size4) 
+}
+
+[dir=ltr] .rightPlaceholder{
+  right:var(--zd_size15) 
+}
+
+[dir=rtl] .rightPlaceholder{
+  left:var(--zd_size15) 
+}

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

@@ -75,7 +75,7 @@ exports[`MultiSelectField rendering the defult props 1`] = `
                   data-test-id="boxComponent"
                 >
                   <div
-                    class="flex cover rowdir vCenter"
+                    class="rightPlaceholder inflex rowdir vCenter"
                     data-id="containerComponent"
                     data-selector-id="container"
                     data-test-id="containerComponent"

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

@@ -71,7 +71,7 @@ exports[`SelectField rendering the defult props 1`] = `
                   data-test-id="boxComponent"
                 >
                   <div
-                    class="flex cover rowdir both"
+                    class="rightPlaceholder inflex rowdir both"
                     data-id="containerComponent"
                     data-selector-id="container"
                     data-test-id="containerComponent"

package/es/form/fields/TextareaField/TextareaField.js

@@ -85,7 +85,9 @@ export default class TextareaField extends PureComponent {
       lockedInfoText,
       isLocked,
       customProps,
-      renderLabelProps
+      renderLabelProps,
+      renderRightPlaceholderNode,
+      rightPlaceholderCustomClass
     } = this.props;
     const {
       LabelProps = {},
@@ -94,27 +96,7 @@ export default class TextareaField extends PureComponent {
       ValidationMessageProps2 = {}
     } = customProps;
     let uniqueId = htmlId ? htmlId : this.getNextId();
-    return /*#__PURE__*/React.createElement("div", {
-      className: `${style.container} ${isDisabled ? style.disabled : isReadOnly ? style.readonly : ''}`,
-      "data-title": isDisabled ? title : null,
-      "data-selector-id": dataSelectorId
-    }, labelName && /*#__PURE__*/React.createElement(FieldContainer, {
-      infoText: infoText,
-      isLocked: isLocked,
-      lockedInfoText: lockedInfoText,
-      renderProps: renderLabelProps
-    }, /*#__PURE__*/React.createElement(Label, {
-      text: labelName,
-      id: id,
-      size: fieldSize === 'small' ? 'small' : 'medium',
-      palette: isMandatory ? 'mandatory' : isDisabled ? 'primary' : labelPalette,
-      customClass: `${style.fieldLabel} ${labelCustomClass} ${isMandatory ? style.labelMandatory : ''}`,
-      htmlFor: uniqueId,
-      dataId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`,
-      ...LabelProps
-    })), /*#__PURE__*/React.createElement("div", {
-      className: `${style.fieldContainer} ${labelName ? style[`fieldMargin_${fieldSize}`] : ''}`
-    }, /*#__PURE__*/React.createElement(Textarea, {
+    let textAreaContent = /*#__PURE__*/React.createElement(Textarea, {
       onChange: this.handleChange,
       animated: animated,
       size: fieldSize === 'medium' ? textBoxSize : 'xmedium',
@@ -137,7 +119,32 @@ export default class TextareaField extends PureComponent {
       a11y: {
         ariaLabelledby: labelName
       }
-    }), validationMessage && /*#__PURE__*/React.createElement(ValidationMessage, {
+    });
+    return /*#__PURE__*/React.createElement("div", {
+      className: `${style.container} ${isDisabled ? style.disabled : isReadOnly ? style.readonly : ''}`,
+      "data-title": isDisabled ? title : null,
+      "data-selector-id": dataSelectorId
+    }, labelName && /*#__PURE__*/React.createElement(FieldContainer, {
+      infoText: infoText,
+      isLocked: isLocked,
+      lockedInfoText: lockedInfoText,
+      renderProps: renderLabelProps
+    }, /*#__PURE__*/React.createElement(Label, {
+      text: labelName,
+      id: id,
+      size: fieldSize === 'small' ? 'small' : 'medium',
+      palette: isMandatory ? 'mandatory' : isDisabled ? 'primary' : labelPalette,
+      customClass: `${style.fieldLabel} ${labelCustomClass} ${isMandatory ? style.labelMandatory : ''}`,
+      htmlFor: uniqueId,
+      dataId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`,
+      ...LabelProps
+    })), /*#__PURE__*/React.createElement("div", {
+      className: `${style.fieldContainer} ${labelName ? style[`fieldMargin_${fieldSize}`] : ''}`
+    }, !renderRightPlaceholderNode ? textAreaContent : /*#__PURE__*/React.createElement("div", {
+      className: style.hasChildren
+    }, textAreaContent, /*#__PURE__*/React.createElement("div", {
+      className: `${style.rightPlaceholder} ${rightPlaceholderCustomClass}`
+    }, renderRightPlaceholderNode)), validationMessage && /*#__PURE__*/React.createElement(ValidationMessage, {
       text: validationMessage,
       palette: validationPalette,
       type: errorType,

package/es/form/fields/TextareaField/props/defaultProps.js

@@ -11,5 +11,6 @@ export const defaultProps = {
   labelCustomClass: '',
   customProps: {},
   dataSelectorId: 'textareaField',
+  rightPlaceholderClass: '',
   ...FieldCommonDefaultProps()
 };

package/es/form/fields/TextareaField/props/propTypes.js

@@ -31,5 +31,7 @@ export const propTypes = {
     ValidationMessageProps2: PropTypes.object
   }),
   htmlId: PropTypes.string,
+  renderRightPlaceholderNode: PropTypes.node,
+  rightPlaceholderCustomClass: PropTypes.string,
   ...FieldCommonPropTypes
 };