@zohodesk/dot 1.0.0-temp-51 → 1.0.0-temp-55

package/src/form/fields/RadioField/RadioField.js

@@ -52,7 +52,13 @@ export default class RadioField extends PureComponent {
     } = customProps;
     return (
       <div
-        className={`${style.container} ${isDisabled ? style.disabled : ''}`}
+        className={`${style.container} ${
+          isDisabled
+            ? style.disabled
+            : isReadOnly
+            ? style.readonly
+            : ''
+        }`}
         data-title={isDisabled ? title : ''}
       >
         {labelName && (
@@ -63,7 +69,7 @@ export default class RadioField extends PureComponent {
             palette={
               isMandatory ? 'mandatory' : isDisabled ? 'primary' : 'default'
             }
-            customClass={`${isMandatory ? style.labelMandatory : ''}`}
+            customClass={`${style.fieldLabel} ${isMandatory ? style.labelMandatory : ''}`}
             dataId={
               isDisabled
                 ? `${dataId}_label_disabled`

package/src/form/fields/SelectField/SelectField.js

@@ -100,7 +100,13 @@ export default class SelectField extends PureComponent {
     let uniqueId = htmlId ? htmlId : this.getNextId();
     return (
       <div
-        className={`${style.container} ${isDisabled ? style.disabled : ''}`}
+        className={`${style.container} ${
+          isDisabled
+            ? style.disabled
+            : isReadOnly
+            ? style.readonly
+            : ''
+        }`}
         data-title={isDisabled ? title : ''}
       >
         {labelName && (
@@ -115,7 +121,7 @@ export default class SelectField extends PureComponent {
                   ? 'primary'
                   : labelPalette
               }
-              customClass={`${labelCustomClass} ${
+              customClass={`${style.fieldLabel} ${labelCustomClass} ${
                 isMandatory ? style.labelMandatory : ''
               }`}
               htmlFor={uniqueId}

package/src/form/fields/TagsMultiSelect/TagsMultiSelect.js

@@ -141,10 +141,10 @@ export default class TagsMultiSelect extends React.Component {
                   <Box className={style.tag} key={index}>
                     <Tag
                       text={name}
-                      onRemove={deleteTag.bind(this, name)}
+                      onRemove={isReadOnly ? null : deleteTag.bind(this, name)}
                       closeTitle={i18nKeys.deleteText}
                       palette={tagType === 'SYSTEM' ? 'primary' : 'default'}
-                      disabled={isReadOnly}
+                      isReadOnly={isReadOnly}
                     />
                   </Box>
                 ) : null;
@@ -176,7 +176,7 @@ export default class TagsMultiSelect extends React.Component {
               isReadOnly={isReadOnly}
               ref={this.textBoxRef}
               needBorder={false}
-              placeHolder={tagsList.length ? '' : '-'}
+              placeHolder={tagsList.length ? '' : (i18nKeys.placeholderText || '-')}
               onClick={!isReadOnly ? handleTogglePopup : undefined}
               customClass={{
                 customTBoxWrap: style.custmInp,
@@ -308,7 +308,8 @@ TagsMultiSelect.propTypes = {
     errorMessage: PropTypes.string.isRequired,
     deleteText: PropTypes.string.isRequired,
     lessText: PropTypes.string.isRequired,
-    moreText: PropTypes.string.isRequired
+    moreText: PropTypes.string.isRequired,
+    placeholderText: PropTypes.string
   }),
   borderColor: PropTypes.oneOf(['transparent', 'default', 'dark']),
   needBorder: PropTypes.bool,

package/src/form/fields/TagsMultiSelectField/TagsMultiSelectField.js

@@ -168,7 +168,15 @@ const TagsMultiSelectField = props => {
   }, []);
 
   return (
-    <div className={style.container}>
+    <div 
+      className={`${style.container} ${
+          isDisabled
+            ? fieldStyle.disabled
+            : isReadOnly
+            ? fieldStyle.readonly
+            : ''
+        }`}
+    >
       <Container alignBox='row' align='baseline' isCover={false}>
         {labelName && (
           <Label
@@ -179,7 +187,7 @@ const TagsMultiSelectField = props => {
             palette={
               isMandatory ? 'mandatory' : isDisabled ? 'primary' : labelPalette
             }
-            customClass={`${isMandatory ? fieldStyle.labelMandatory : ''} ${
+            customClass={`${fieldStyle.fieldLabel} ${isMandatory ? fieldStyle.labelMandatory : ''} ${
               labelClass ? labelClass : ''
             }`}
             dataId={

package/src/form/fields/TextBoxField/TextBoxField.js

@@ -88,7 +88,13 @@ export default class TextBoxField extends PureComponent {
 
     return (
       <div
-        className={`${style.container} ${isDisabled ? style.disabled : ''}`}
+        className={`${style.container} ${
+          isDisabled
+            ? style.disabled
+            : isReadOnly
+            ? style.readonly
+            : ''
+        }`}
         data-title={isDisabled ? title : ''}
       >
         {labelName && (
@@ -103,7 +109,7 @@ export default class TextBoxField extends PureComponent {
                   ? 'primary'
                   : labelPalette
               }
-              customClass={`${labelCustomClass} ${
+              customClass={`${style.fieldLabel} ${labelCustomClass} ${
                 isMandatory ? style.labelMandatory : ''
               }`}
               htmlFor={uniqueId}

package/src/form/fields/TextEditorField/TextEditorField.js

@@ -98,7 +98,15 @@ export default class TextEditorField extends PureComponent {
     } = customProps;
     let { ePhiTitle = '', ePhiText = '', ePhiStatus = false } = ePhiData;
     return (
-      <div className={`${style.container} ${className}`}>
+      <div 
+        className={`${style.container} ${
+          isDisabled
+            ? style.disabled
+            : isReadOnly
+            ? style.readonly
+            : ''
+        } ${className || ''}`}
+      >
         <Container isCover={false} alignBox='row' align='vertical'>
           {labelName && (
             <Box>
@@ -114,7 +122,7 @@ export default class TextEditorField extends PureComponent {
                     : labelPalette
                 }
                 onClick={this.handleLabelClick}
-                customClass={`${labelCustomClass} ${
+                customClass={`${style.fieldLabel} ${labelCustomClass} ${
                   isMandatory ? style.labelMandatory : ''
                 }`}
                 dataId={

package/src/form/fields/TextEditorWrapper/TextEditorWrapper.js

@@ -47,7 +47,7 @@ export default class TextEditorWrapper extends Component {
     ) {
       this.setState({ isEditorShow: true });
     } else {
-      if (!this.state.isEditorFocus) {
+      if (!this.state.isEditorFocus && !this.props.isEditorDefaultOpen) {
         this.setState({ isEditorShow: false });
       }
     }

package/src/form/fields/TextareaField/TextareaField.js

@@ -87,7 +87,13 @@ export default class TextareaField extends PureComponent {
     let uniqueId = htmlId ? htmlId : this.getNextId();
     return (
       <div
-        className={`${style.container} ${isDisabled ? style.disabled : ''}`}
+        className={`${style.container} ${
+          isDisabled
+            ? style.disabled
+            : isReadOnly
+            ? style.readonly
+            : ''
+        }`}
         data-title={isDisabled ? title : ''}
       >
         {labelName && (
@@ -103,7 +109,7 @@ export default class TextareaField extends PureComponent {
                   ? 'primary'
                   : labelPalette
               }
-              customClass={`${labelCustomClass} ${
+              customClass={`${style.fieldLabel} ${labelCustomClass} ${
                 isMandatory ? style.labelMandatory : ''
               }`}
               htmlFor={uniqueId}

package/src/form/layout/Section/Section.js

@@ -14,21 +14,18 @@ export default class Section extends Component {
       titleClass,
       className,
       column,
-      formName,
-      innerContainerClass
+      formName
     } = this.props;
     return (
       <div data-id={dataId} className={containerClass ? containerClass : ''}>
-        <div className={innerContainerClass ? innerContainerClass : '' }>
-          {title && <div className={titleClass ? titleClass : ''}>{title}</div>}
-          <div
-            className={`${className ? className : ''} ${
-              column == 'single' ? style.singleColumn : ''
-            }`}
-            data-id={formName && formName}
-          >
-            {this.props.children}
-          </div>
+        {title && <div className={titleClass ? titleClass : ''}>{title}</div>}
+        <div
+          className={`${className ? className : ''} ${
+            column == 'single' ? style.singleColumn : ''
+          }`}
+          data-id={formName && formName}
+        >
+          {this.props.children}
         </div>
       </div>
     );
@@ -40,8 +37,7 @@ Section.propTypes = {
   containerClass: PropTypes.string,
   dataId: PropTypes.string,
   title: PropTypes.string,
-  titleClass: PropTypes.string,
-  innerContainerClass: PropTypes.string
+  titleClass: PropTypes.string
 };
 if (__DOCS__) {
   Section.docs = {

package/src/version2/GlobalNotification/GlobalNotification.js

@@ -36,7 +36,7 @@ export default class GlobalNotification extends React.Component {
   }
 
   render() {
-    let { type, message, hideMessage, onClick,i18nKeys={} } = this.props;
+    let { type, message, hideMessage, onClick, i18nKeys={}, customProps } = this.props;
     let { closeTitle = 'Close' } = i18nKeys;
     return (
       <GlobalNotificationUI
@@ -45,6 +45,7 @@ export default class GlobalNotification extends React.Component {
         hideMessage={hideMessage}
         onClick={onClick}
         closeTitle={closeTitle}
+        customProps={customProps}
       />
     );
   }
@@ -56,8 +57,14 @@ GlobalNotification.propTypes = {
   onClick: PropTypes.func,
   showMessage: PropTypes.bool,
   type: PropTypes.oneOf(['success', 'danger', 'info', 'warning', 'error']),
-  i18nKeys: PropTypes.object
+  i18nKeys: PropTypes.object,
+  customProps:PropTypes.shape({
+    ExtraProps: PropTypes.object
+  })
 };
+GlobalNotification.defaultProps = {
+  customProps: {}
+}
 if (__DOCS__) {
   GlobalNotification.docs = {
     componentGroup: 'GlobalNotification',
@@ -71,9 +78,10 @@ export function GlobalNotificationUI(props) {
     hideMessage && hideMessage(e);
     onClose && onClose(e);
   }
-  let { type = '', message, onClick, closeTitle='' } = props;
+  let { type = '', message, onClick, closeTitle='', customProps={} } = props;
+  let { ExtraProps={} } = customProps;
   return (
-    <div className={`${style.message} ${type ? style[type] : ''}`} data-id={`show_${type}_message`}>
+    <div className={`${style.message} ${type ? style[type] : ''}`} data-id={`show_${type}_message`} {...ExtraProps} >
       <Container
         className={`${style.container}`}
         alignBox='row'

package/src/version2/notification/DesktopNotification/DesktopNotification.js

@@ -58,11 +58,13 @@ export function DesktopNotificationUI(props) {
     onClose,
     needClose,
     customClass = {},
-    i18nKeys = {}
+    i18nKeys = {},
+    customProps
   } = props;
   let { closeTitle = 'Close' } = i18nKeys;
   let { containerClass } = customClass;
   let { buttonPalette = 'dangerFilled' } = buttonPaletteObject[type] || {};
+  let { ExtraProps={} } = customProps;
 
   function onClickSubmit(e) {
     onSubmit && onSubmit();
@@ -94,6 +96,7 @@ export function DesktopNotificationUI(props) {
         isCover={false}
         dataId={dataId}
         isInline={uiVariantTwo}
+        {...ExtraProps}
       >
         <Box>
           <DesktopNotificationHeader
@@ -227,7 +230,10 @@ DesktopNotification.propTypes = {
     'info',
     'notification',
     'alarm'
-  ])
+  ]),
+  customProps:PropTypes.shape({
+    ExtraProps: PropTypes.object
+  })
 };
 DesktopNotification.defaultProps = {
   isMore: false,
@@ -240,7 +246,8 @@ DesktopNotification.defaultProps = {
   needIcon: true,
   titleVariant: 'primary',
   isShrinkView: false,
-  needClose: true
+  needClose: true,
+  customProps: {}
 };
 
 if (__DOCS__) {