@zohodesk/dot 1.8.2 → 1.8.4

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

@@ -8,6 +8,7 @@ export const defaultProps = {
   labelSize: 'medium',
   labelPalette: 'default',
   isActive: false,
+  customClass: {},
   customProps: {},
   dataSelectorId: 'radioField'
 };

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

@@ -22,6 +22,12 @@ export const propTypes = {
   validationRuleMessage: PropTypes.string,
   validationRulePalette: PropTypes.string,
   variant: PropTypes.oneOf(['primary', 'default', 'secondary']),
+  customClass: {
+    customWrapperClass: PropTypes.string,
+    customLabelClass: PropTypes.string,
+    customRadioWrapperClass: PropTypes.string,
+    customRadioClass: PropTypes.string
+  },
   customProps: PropTypes.shape({
     LabelProps: PropTypes.object,
     RadioProps: PropTypes.object,

package/es/form/fields/ValidationMessage/ValidationMessage.js

@@ -1,11 +1,20 @@
 import React from 'react';
 import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
+import Flex from '@zohodesk/layout/es/Flex/Flex';
+import { renderNode, isRenderable } from '@zohodesk/utils';
 import Label from '@zohodesk/components/es/Label/Label';
 import colors from '@zohodesk/components/es/Label/LabelColors.module.css';
-import style from "./ValidationMessage.module.css";
 import { Icon } from '@zohodesk/icons';
+import { DUMMY_OBJECT } from '@zohodesk/components/es/utils/Common';
+import style from "./ValidationMessage.module.css";
 export default class ValidationMessage extends React.Component {
+  constructor(props) {
+    super(props);
+    this.a11yMerged = {};
+    this.tagMerged = {};
+  }
+
   render() {
     let {
       palette,
@@ -16,21 +25,52 @@ export default class ValidationMessage extends React.Component {
       size,
       dataId,
       clipped,
-      a11y,
+      alignChildren,
       tooltip,
-      dataSelectorId
+      dataSelectorId,
+      renderLeftChildren,
+      renderRightChildren,
+      id,
+      customProps,
+      a11yAttributes,
+      tagAttributes,
+      customClass
     } = this.props;
-    let {
-      role = 'alert'
-    } = a11y;
-    return /*#__PURE__*/React.createElement("div", {
-      role: role,
-      onClick: onClick,
-      className: `${type === 'primary' ? style.primary : style.secondary}`,
-      "data-id": "errorMsgContainer",
-      "data-test-id": "errorMsgContainer",
-      "data-selector-id": dataSelectorId
-    }, /*#__PURE__*/React.createElement(Label, {
+    const {
+      wrapper: wrapperProps
+    } = customProps || DUMMY_OBJECT;
+    const {
+      label: customLabelClass = '',
+      wrapper: customWrapperClass = ''
+    } = customClass || DUMMY_OBJECT;
+    const {
+      wrapper: wrapperA11y
+    } = a11yAttributes || DUMMY_OBJECT;
+    const {
+      wrapper: wrapperTagAttr
+    } = tagAttributes || DUMMY_OBJECT;
+    const isLeftChildrenRenderable = isRenderable(renderLeftChildren);
+    const isRightChildrenRenderable = isRenderable(renderRightChildren);
+    this.a11yMerged = {
+      wrapper: { ...wrapperA11y,
+        role: 'alert'
+      }
+    };
+    this.tagMerged = {
+      wrapper: { ...wrapperTagAttr,
+        'data-selector-id': dataSelectorId
+      }
+    };
+    return /*#__PURE__*/React.createElement(Flex, { ...wrapperProps,
+      $ui_alignItems: alignChildren,
+      $ui_displayMode: isRightChildrenRenderable || isLeftChildrenRenderable ? 'flex' : null,
+      $event_onClick: onClick,
+      testId: "errorMsgContainer",
+      customId: "errorMsgContainer",
+      $ui_className: `${type === 'primary' ? style.primary : style.secondary} ${customWrapperClass}`,
+      $a11yAttributes_container: this.a11yMerged.wrapper,
+      $tagAttributes_container: this.tagMerged.wrapper
+    }, renderNode(renderLeftChildren), /*#__PURE__*/React.createElement(Label, {
       text: text,
       htmlFor: htmlFor,
       palette: palette,
@@ -38,14 +78,15 @@ export default class ValidationMessage extends React.Component {
       dataId: dataId,
       clipped: clipped,
       title: clipped ? text : '',
-      customClass: style.lable
+      customClass: `${style.lable} ${customLabelClass}`,
+      id: id
     }), tooltip ? /*#__PURE__*/React.createElement("span", {
       className: `${style.icon} ${colors[palette]}`,
       "data-title": tooltip
     }, /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-information57",
       size: "14"
-    })) : null);
+    })) : null, renderNode(renderRightChildren));
   }
 
 }

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

@@ -3,7 +3,7 @@
 exports[`ValidationMessage rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="primary"
+    class="primary "
     data-id="errorMsgContainer"
     data-selector-id="validationMessage"
     data-test-id="errorMsgContainer"
@@ -11,7 +11,7 @@ exports[`ValidationMessage rendering the defult props 1`] = `
   >
     <label
       class="label title xsmall mandatory font_default
-           cursor lable "
+           cursor lable  "
       data-id="label"
       data-selector-id="label"
       data-test-id="label"

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

@@ -3,5 +3,6 @@ export const defaultProps = {
   size: 'xsmall',
   type: 'primary',
   a11y: {},
-  dataSelectorId: 'validationMessage'
+  dataSelectorId: 'validationMessage',
+  alignChildren: 'start'
 };

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

@@ -6,11 +6,25 @@ export const propTypes = {
   size: PropTypes.oneOf(['xsmall', 'small', 'medium', 'large']),
   text: PropTypes.string,
   type: PropTypes.oneOf(['primary', 'secondary']),
-  a11y: PropTypes.shape({
-    role: PropTypes.string
-  }),
   tooltip: PropTypes.string,
   htmlFor: PropTypes.string,
   dataId: PropTypes.string,
-  dataSelectorId: PropTypes.string
+  dataSelectorId: PropTypes.string,
+  renderLeftChildren: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+  renderRightChildren: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+  id: PropTypes.string,
+  alignChildren: PropTypes.oneOf(['start', 'center', 'end', 'baseline']),
+  customProps: PropTypes.shape({
+    wrapper: PropTypes.object
+  }),
+  tagAttributes: PropTypes.shape({
+    wrapper: PropTypes.object
+  }),
+  a11yAttributes: PropTypes.shape({
+    wrapper: PropTypes.object
+  }),
+  customClass: PropTypes.shape({
+    label: PropTypes.string,
+    wrapper: PropTypes.string
+  })
 };

package/es/list/AvatarFlip/__tests__/__snapshots__/AvatarFlip.spec.js.snap

@@ -29,7 +29,7 @@ exports[`AvatarFlip rendering the defult props 1`] = `
           tabindex="0"
         >
           <div
-            class="boxContainer medium  filled  shrinkOff"
+            class="boxContainer  medium  filled  shrinkOff"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"