@zohodesk/dot 1.0.0-temp-59 → 1.0.0-temp-60

package/src/Attachment/Attachment.module.css

@@ -58,11 +58,11 @@
 }
 .medium .atatchName {
   font-size: var(--zd_font_size14);
-  line-height: var(--zd_size20);
+  line-height: 1.42;
 }
 .small .atatchName {
   font-size: var(--zd_font_size12);
-  line-height: var(--zd_size15);
+  line-height: 1.25;
 }
 
 .attachSize {
@@ -90,12 +90,12 @@
 .medium .attachDownload {
   height: var(--zd_size25);
   width: var(--zd_size25);
-  line-height: var(--zd_size23);
+  line-height: 1.4375;
 }
 .small .attachDownload {
   height: var(--zd_size20);
   width: var(--zd_size20);
-  line-height: var(--zd_size18);
+  line-height: 1.125;
 }
 .attachDownload:hover {
   background-color: var(--zdt_attachment_download_hover_bg);

package/src/ImportantNotes/ImportantNotes.js

@@ -10,14 +10,14 @@ export default class ImportantNotes extends React.Component {
   }
 
   render() {
-    let { text, iconName, iconSize, children, iconClass, isCover, className } = this.props;
+    let { text, iconName, iconSize, children, iconClass, isCover } = this.props;
     return (
           <Container 
             isInline={!isCover} 
             isCover={false} 
             alignBox='row' 
             align='top'
-            className={`${style.section} ${className || ''}`}
+            className={style.section}
           >
             {iconName ? (
               <Box className={style.icon} align='start'>
@@ -40,8 +40,7 @@ ImportantNotes.propTypes = {
   iconName: PropTypes.string,
   iconSize: PropTypes.string,
   isCover: PropTypes.bool,
-  text: PropTypes.string,
-  className: PropTypes.string
+  text: PropTypes.string
 };
 ImportantNotes.defaultProps = {
   iconName: 'ZD-helpCentre',

package/src/ImportantNotes/ImportantNotes.module.css

@@ -4,7 +4,7 @@
 }
 .title {
   font-size: var(--zd_font_size13);
-  line-height: var(--zd_font_size18);
+  line-height: 1.38;
   color: var(--zdt_importantnotes_title_text);
 }
 .icon {

package/src/ToastMessage/ToastMessage.module.css

@@ -139,14 +139,14 @@
   font-size: var(--zd_font_size12);
   composes: wbreak from '~@zohodesk/components/lib/common/common.module.css';
   margin-top: var(--zd_size5);
-  line-height: var(--zd_size16);
+  line-height: 1.33;
   color: var(--zdt_toastmessage_alert_text);
 }
 
 .buttonText {
   font-size: inherit;
   text-align: center;
-  line-height: var(--zd_size14);
+  line-height: 0.875;
   padding: 0 var(--zd_size7);
   cursor: pointer;
 }
@@ -221,7 +221,7 @@
 .fill {
   width: var(--zd_size29);
   height: var(--zd_size29);
-  line-height: var(--zd_size29);
+  line-height: 1.8125;
   text-align: center;
   composes: rounded from '~@zohodesk/components/lib/common/common.module.css';
 }

package/src/Upload/Upload.module.css

@@ -76,7 +76,7 @@
   right: 0;
   position: absolute;
   text-align: center;
-  line-height: var(--zd_size10);
+  line-height: 0.83;
   font-size: var(--zd_font_size12);
 }
 .light .uploadclose {

package/src/alert/AlertLookup/AlertLookup.module.css

@@ -4,7 +4,7 @@
 
 .innerSection {
   padding: var(--zd_size30) var(--zd_size20) var(--zd_size20);
-  line-height: var(--zd_size25);
+  line-height: 1.6;
   color: var(--zdt_alertlookup_innersection_text);
   font-size: var(--zd_font_size15);
   word-break: break-word;

package/src/emptystate/CommonEmptyState/CommonEmptyState.module.css

@@ -48,8 +48,11 @@
 .desc {
   margin-right: var(--zd_size4);
 }
-.desc {
-  line-height: var(--zd_size19);
+.small .desc {
+  line-height: 1.58;
+}
+.medium .desc {
+  line-height: 1.35;
 }
 .link {
   cursor: pointer;

package/src/errorstate/EmptyStates.module.css

@@ -27,15 +27,15 @@
 }
 .title {
   font-size: var(--zd_font_size50);
-  line-height: var(--zd_size70);
+  line-height: 1.4;
 }
 .tabletTitle {
   font-size: var(--zd_font_size24);
-  line-height: var(--zd_size50);
+  line-height: 2.08;
 }
 .mobileTitle {
   font-size: var(--zd_font_size22);
-  line-height: var(--zd_size30);
+  line-height: 1.36;
 }
 .subtitle {
   font-size: var(--zd_font_size30);

package/src/errorstate/PermissionPlay/PermissionPlay.module.css

@@ -14,7 +14,7 @@
 }
 .lastBox {
   margin: 0 auto;
-  line-height: var(--zd_size24);
+  line-height: 1.71;
   font-size: var(--zd_font_size14);
   margin-bottom: var(--zd_size20);
 }

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

@@ -141,5 +141,5 @@
   border-radius: var(--zd_size3);
   margin-left: var(--zd_size8);
   height: var(--zd_size18);
-  line-height: var(--zd_size18);
+  line-height: 1.5;
 }

package/src/form/layout/Field/Field.js

@@ -16,10 +16,9 @@ export default class Field extends Component {
     return (
       <React.Fragment>
         <div
-          className={`${
-            column == 'single' ? `${style.singleColumn}` : `${style[width]}`
-          } ${`formFieldLi_${width}`} ${containerClass ? containerClass : ''} `} 
-          data-id={dataId}
+          className={`${containerClass ? containerClass : ''} ${
+            column == 'single' ? `${style.singleColumn}` : `${style[width]} `
+          }`} data-id={dataId}
         >
           <div
             className={`${className ? className : ''} ${`fieldWidth_${width}`}`}

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/layout/SetupDetailLayout/SetupDetailLayout.module.css

@@ -15,7 +15,7 @@
   color: var(--zdt_setupdetail_backicon);
   margin-left: var(--zd_size19);
   border-radius: 50%;
-  line-height: var(--zd_size30);
+  line-height: 2.5;
   cursor: pointer;
 }
 
@@ -24,7 +24,7 @@
 }
 .title {
   font-size: var(--zd_font_size16);
-  line-height: var(--zd_size16);
+  line-height: 1;
   padding-right: var(--zd_size12);
   font-family: var(--zd_semibold);
   color: var(--zdt_setupdetail_backicon);
@@ -43,7 +43,7 @@
 .helpInfo {
   border: 1px solid var(--zdt_setupdetail_helpinfo);
   border-radius: 2px;
-  line-height: var(--zd_size26);
+  line-height: 2.36;
   height: var(--zd_size28);
   width: var(--zd_size28);
   color: var(--zdt_setupdetail_helpinfo_text);
@@ -95,7 +95,7 @@
   text-align: center;
   border: 1px solid var(--zdt_setupdetail_infoicon_border);
   border-radius: 2px;
-  line-height: var(--zd_size24);
+  line-height: 2;
 }
 
 .infoText {

package/src/list/listCommon.module.css

@@ -13,7 +13,7 @@
   font-size: var(--zd_font_size16);
 }
 .secondaryPanel {
-  line-height: var(--zd_size18);
+  line-height: 1.125;
   composes: dflex alignVertical flexwrap from '~@zohodesk/components/lib/common/common.module.css';
 }
 .statusColumn {

package/src/lookup/header/Close/LookupClose.module.css

@@ -2,7 +2,7 @@
   text-align: center;
   width: var(--zd_size25);
   height: var(--zd_size25);
-  line-height: var(--zd_size25);
+  line-height: 2.7;
   cursor: pointer;
   border-radius: 50%;
   color: var(--zdt_lookupclose_default_text);

package/src/lookup/header/ModuleHeader/ModuleHeader.js

@@ -29,14 +29,13 @@ export default class ModuleHeader extends PureComponent {
       miniDescription,
       dataId,
       closeTitle,
-      onSearchKeyDown,
-      palette
+      onSearchKeyDown
     } = this.props;
     return (
       <Container
         align='vertical'
         alignBox='row'
-        className={`${commonStyle.container} ${commonStyle[`${palette}`]}`}
+        className={`${commonStyle.container}`}
         isCover={false}
         wrap='wrap'
         dataId={dataId}
@@ -88,14 +87,9 @@ ModuleHeader.propTypes = {
   title: PropTypes.string,
   dataId: PropTypes.string,
   closeTitle: PropTypes.string,
-  onSearchKeyDown: PropTypes.func,
-  palette: PropTypes.oneOf(['default', 'white'])
+  onSearchKeyDown: PropTypes.func
 };
 
-ModuleHeader.defaultProps = {
-  palette: 'default'
-}
-
 if (__DOCS__) {
   ModuleHeader.docs = {
     componentGroup: 'Lookup'

package/src/lookup/header/ModuleHeader/docs/ModuleHeader__default.docs.js

@@ -22,27 +22,14 @@ export default class ModuleHeader__default extends Component {
   render() {
     let { searchStr } = this.state;
     return (
-      <div>
-        <ModuleHeader
-          title='Find Duplicate'
-          needSearch
-          searchStr={searchStr}
-          onSearchChange={this.handleSearch}
-          searchPlaceHolder='Search'
-          miniDescription="Select a field to search for duplicate records"
-          onLookupClose={()=>{}}
-        />
-        <ModuleHeader
-          title='Find Duplicate'
-          needSearch
-          searchStr={searchStr}
-          onSearchChange={this.handleSearch}
-          searchPlaceHolder='Search'
-          miniDescription="Select a field to search for duplicate records"
-          onLookupClose={()=>{}}
-          palette='white'
-        />
-      </div>
+      <ModuleHeader
+        title='Find Duplicate'
+        needSearch
+        searchStr={searchStr}
+        onSearchChange={this.handleSearch}
+        searchPlaceHolder='Search'
+        miniDescription="Select a field to search for duplicate records"
+      />
     );
   }
 }

package/src/lookup/header/TicketHeader/TicketHeader.js

@@ -32,15 +32,14 @@ export default class TicketHeader extends Component {
       needOnTypeSearch,
       getSearchBoxRef,
       needViewsList,
-      i18nKeys,
-      palette
+      i18nKeys
     } = this.props;
     let { menuEmptyMessage = 'No matches found' } = i18nKeys;
     return (
       <Container
         align='vertical'
         alignBox='row'
-        className={`${commonStyle.container} ${commonStyle[`${palette}`]} ${commonResponsive.container} ${style.container}`}
+        className={`${commonStyle.container} ${commonResponsive.container} ${style.container}`}
         isCover={false}
         wrap='wrap'
       >
@@ -110,13 +109,11 @@ TicketHeader.propTypes = {
   title: PropTypes.string,
   i18nKeys: PropTypes.shape({
     menuEmptyMessage: PropTypes.string
-  }),
-  palette: PropTypes.oneOf(['default', 'white'])
+  })
 };
 
 TicketHeader.defaultProps = {
-  i18nKeys: {},
-  palette: 'default'
+  i18nKeys: {}
 };
 
 if (__DOCS__) {

package/src/lookup/header/ViewDropDown/ViewDropDown.module.css

@@ -27,7 +27,7 @@
 .labelCnt {
   composes: dInflex alignVertical from '~@zohodesk/components/lib/common/common.module.css';
   padding: 0 var(--zd_size12);
-  line-height: var(--zd_size20);
+  line-height: 1.25;
   cursor: pointer;
   color: var(--zdt_viewdropdown_label_text);
 }

package/src/lookup/header/lookupHeaderCommon.module.css

@@ -2,15 +2,9 @@
   min-height: var(--zd_size51);
   position: relative;
   padding: 0 var(--zd_size52) 0 var(--zd_size10);
-}
-.default {
   background-color: var(--zdt_lookupheader_default_bg);
   border-bottom: solid 1px var(--zdt_lookupheader_default_border);
 }
-.white {
-  background-color: var(--dot_white);
-  border-bottom: solid 1px var(--zdt_cta_grey_35_border);
-}
 .searchContainer,
 .title {
   margin: 0 var(--zd_size20);

package/src/setup/header/Search/Search.module.css

@@ -17,7 +17,7 @@
   right: 0;
   bottom: 0;
   color: var(--zdt_search_icon);
-  line-height: var(--zd_size26);
+  line-height: 1.625;
   cursor: pointer;
 }
 .icon:hover {

package/src/setup/header/Views/Views.module.css

@@ -10,7 +10,7 @@
   border: 1px solid var(--zdt_views_border);
   height: var(--zd_size28);
   width: var(--zd_size28);
-  line-height: var(--zd_size26);
+  line-height: 1.625;
 }
 .first {
   border-radius: 2px 0 0 2px;

package/src/setup/helptips/Description/HelpTipsDescription.module.css

@@ -1,6 +1,6 @@
 .text {
   font-size: var(--zd_font_size14);
   color: var(--zdt_helptips_text);
-  line-height: var(--zd_size24);
+  line-height: 1.7;
   margin: var(--zd_size10) 0;
 }

package/src/version2/GlobalNotification/GlobalNotification.module.css

@@ -77,7 +77,7 @@
   font-family: var(--zd_semibold);
   composes: ftsmooth from '~@zohodesk/components/lib/common/common.module.css';
   text-align: left;
-  line-height: var(--zd_size20);
+  line-height:1.42;
 }
 
 .close {

package/src/version2/errorstate/V2_ErrorStates.module.css

@@ -8,7 +8,7 @@
   font-family: var(--zd_bold);
 }
 .desc {
-  line-height: var(--zd_size22);
+  line-height: 1.69;
 }
 .large .errorState {
   width: var(--zd_size450);
@@ -31,7 +31,8 @@
 }
 .medium .desc,
 .small .desc {
-  font-size: var(--zd_font_size13)
+  font-size: var(--zd_font_size13);
+  line-height: 1.69;
 }
 .small .errorState {
   width: var(--zd_size230);

package/src/version2/lookup/AlertHeader/AlertHeaderNew.module.css

@@ -47,7 +47,7 @@
   color: var(--zdt_alertlookupnew_text);
   margin: 0 var(--zd_size5) 0 var(--zd_size10);
   font-size: var(--zd_font_size18);
-  line-height: var(--zd_size22);
+  line-height: 1.2;
   font-family: var(--zd_bold);
   composes: ftsmooth wbreak from '~@zohodesk/components/lib/common/common.module.css';
   vertical-align: middle;

package/src/version2/lookup/AlertLookup/AlertLookupNew.module.css

@@ -6,7 +6,7 @@
   padding: var(--zd_size17) var(--zd_size30) var(--zd_size30);
   color: var(--zdt_alertlookupnew_text);
   font-size: var(--zd_font_size14);
-  line-height: var(--zd_size18);
+  line-height: 1.28;
   composes: wbreak from '~@zohodesk/components/lib/common/common.module.css';
 }
 

package/src/version2/notification/DesktopNotification/DesktopNotification.module.css

@@ -69,7 +69,7 @@
 }
 .subTitle {
   font-size: var(--zd_font_size15);
-  line-height: var(--zd_size20);
+  line-height: 1.3;
   font-family: var(--zd_semibold);
   composes: ftsmooth wbreak from '~@zohodesk/components/lib/common/common.module.css';
 }
@@ -78,7 +78,7 @@
 }
 .infoText {
   font-size: var(--zd_font_size14);
-  line-height: var(--zd_size18);
+  line-height: 1.28;
   composes: wbreak from '~@zohodesk/components/lib/common/common.module.css';
 }
 .secondaryInfo {

package/src/version2/notification/DesktopNotificationHeader/DesktopNotificationHeader.module.css

@@ -15,7 +15,7 @@
   .title {
     margin: 0 var(--zd_size5) 0 var(--zd_size10);
     font-size: var(--zd_font_size18);
-    line-height: var(--zd_size22);
+    line-height: 1.2;
     font-family: var(--zd_bold);
     composes: ftsmooth wbreak from '~@zohodesk/components/lib/common/common.module.css';
   }
@@ -60,7 +60,7 @@
 }
 
 .primary .infoText {
-    line-height: var(--zd_size18);
+    line-height: 1.28;
   }
   
   .primary .close {
@@ -77,7 +77,7 @@
   }
 
   .secondary .infoText {
-    line-height: var(--zd_size20);
+    line-height: 1.42;
   }
 
   .secondary .iconContainer {