@zohodesk/dot 1.0.0-temp-224 → 1.0.0-temp-187.22

package/es/list/SecondaryText/props/propTypes.js

@@ -1,4 +1,5 @@
 import PropTypes from 'prop-types';
+import { propTypes as typographyProps } from '@zohodesk/components/es/Typography/props/propTypes';
 export const AccountName_propTypes = {
   className: PropTypes.string,
   dataId: PropTypes.string,
@@ -14,6 +15,8 @@ export const AccountName_propTypes = {
   secondaryAccountHref: PropTypes.string,
   secondaryAccountClick: PropTypes.func,
   secondaryAccountText: PropTypes.string,
+  isHighlighted: PropTypes.bool,
+  highlightData: typographyProps.$ui_highlightConfig,
   customProps: PropTypes.shape({
     LinkProps: PropTypes.object,
     TextProps: PropTypes.object,
@@ -42,6 +45,8 @@ export const ContactName_propTypes = {
     }),
     paidTitle: PropTypes.string
   }),
+  isHighlighted: PropTypes.bool,
+  highlightData: typographyProps.$ui_highlightConfig,
   customProps: PropTypes.shape({
     LinkProps: PropTypes.object,
     TextProps: PropTypes.object
@@ -51,6 +56,8 @@ export const DepartmentText_propTypes = {
   className: PropTypes.string,
   dataId: PropTypes.string,
   dataTitle: PropTypes.string,
+  isHighlighted: PropTypes.bool,
+  highlightData: typographyProps.$ui_highlightConfig,
   text: PropTypes.string
 };
 export const Email_propTypes = {
@@ -63,6 +70,8 @@ export const Email_propTypes = {
   title: PropTypes.string,
   urlData: PropTypes.object,
   urlName: PropTypes.string,
+  isHighlighted: PropTypes.bool,
+  highlightData: typographyProps.$ui_highlightConfig,
   customProps: PropTypes.shape({
     LinkProps: PropTypes.object,
     TextProps: PropTypes.object
@@ -85,6 +94,8 @@ export const PhoneNumber_propTypes = {
   title: PropTypes.string,
   urlData: PropTypes.object,
   urlName: PropTypes.string,
+  isHighlighted: PropTypes.bool,
+  highlightData: typographyProps.$ui_highlightConfig,
   customProps: PropTypes.shape({
     LinkProps: PropTypes.object,
     TextProps: PropTypes.object
@@ -95,6 +106,8 @@ export const PriorityText_propTypes = {
   color: PropTypes.oneOf(['red', 'green', 'gray', 'orange']),
   dataId: PropTypes.string,
   dataTitle: PropTypes.string,
+  isHighlighted: PropTypes.bool,
+  highlightData: typographyProps.$ui_highlightConfig,
   text: PropTypes.string
 };
 export const SecondaryText_propTypes = {
@@ -103,6 +116,8 @@ export const SecondaryText_propTypes = {
   dataTitle: PropTypes.string,
   onClick: PropTypes.func,
   text: PropTypes.string,
+  isHighlighted: PropTypes.bool,
+  highlightData: typographyProps.$ui_highlightConfig,
   customProps: PropTypes.shape({
     SecondaryTextProps: PropTypes.object
   })
@@ -113,6 +128,8 @@ export const StatusText_propTypes = {
   dataId: PropTypes.string,
   dataTitle: PropTypes.string,
   fontWeight: PropTypes.oneOf(['regular', 'semibold', 'bold']),
+  isHighlighted: PropTypes.bool,
+  highlightData: typographyProps.$ui_highlightConfig,
   text: PropTypes.string
 };
 export const TicketId_propTypes = {
@@ -126,6 +143,8 @@ export const TicketId_propTypes = {
   url: PropTypes.string,
   urlData: PropTypes.string,
   urlName: PropTypes.string,
+  isHighlighted: PropTypes.bool,
+  highlightData: typographyProps.$ui_highlightConfig,
   customProps: PropTypes.shape({
     TicketIdProps: PropTypes.object,
     LinkProps: PropTypes.object
@@ -138,5 +157,7 @@ export const Website_propTypes = {
   isLink: PropTypes.bool,
   target: PropTypes.string,
   text: PropTypes.string,
+  isHighlighted: PropTypes.bool,
+  highlightData: typographyProps.$ui_highlightConfig,
   title: PropTypes.string
 };

package/es/list/Subject/Subject.js

@@ -1,6 +1,8 @@
 import React, { Component } from 'react';
 import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
+import Typography from '@zohodesk/components/es/Typography/Typography';
+import { DUMMY_OBJECT } from '@zohodesk/components/es/utils/Common';
 import Link from "../../Link/Link";
 import { whiteSpaceClassMapping } from '@zohodesk/components/es/utils/cssUtils';
 import style from "./Subject.module.css";
@@ -24,30 +26,44 @@ export default class Subject extends Component {
       isDotted,
       children,
       customProps,
-      whiteSpace
+      whiteSpace,
+      isHighlighted,
+      highlightData
     } = this.props;
     let {
       LinkProps = {},
       TextProps = {}
     } = customProps;
+    let tagAttributesText = { ...TextProps,
+      'data-title-wrap': whiteSpace
+    };
+    let linkTagAttributes = {
+      'data-title-wrap': whiteSpace
+    };
     return /*#__PURE__*/React.createElement(React.Fragment, null, isLink ? /*#__PURE__*/React.createElement(Link, {
       urlName: urlName,
       href: href,
       urlData: urlData,
       onClick: onClick,
-      className: `${style.subject} ${isDotted ? style.dotted : ''} ${whiteSpaceClassMapping[whiteSpace]} ${className} ${style[`font_${fontWeight}`]} ${style.cursorPointer}`,
-      dataId: dataId,
-      title: text,
       target: target,
-      "data-title-wrap": whiteSpace,
       ...LinkProps
-    }, children ? children : text) : /*#__PURE__*/React.createElement("span", {
-      className: `${style.subject} ${isDotted ? style.dotted : ''} ${whiteSpaceClassMapping[whiteSpace]} ${className} ${style[`font_${fontWeight}`]}`,
-      "data-title": text,
-      "data-id": dataId,
-      "data-test-id": dataId,
-      "data-title-wrap": whiteSpace,
-      ...TextProps
+    }, children ? children : /*#__PURE__*/React.createElement(Typography, {
+      $tagAttributes_text: linkTagAttributes,
+      $i18n_dataTitle: text,
+      $ui_className: `${style.subject} ${whiteSpaceClassMapping[whiteSpace]} ${className} ${style.cursorPointer}`,
+      customId: dataId,
+      $flag_dotted: isDotted,
+      $ui_weight: fontWeight,
+      $ui_highlightConfig: isHighlighted ? highlightData : DUMMY_OBJECT
+    }, text)) : /*#__PURE__*/React.createElement(Typography, {
+      $tagAttributes_text: tagAttributesText,
+      $ui_className: `${style.subject} ${className} ${whiteSpaceClassMapping[whiteSpace]}`,
+      $flag_dotted: isDotted,
+      $ui_weight: fontWeight,
+      $i18n_dataTitle: text,
+      customId: dataId,
+      testId: dataId,
+      $ui_highlightConfig: isHighlighted ? highlightData : DUMMY_OBJECT
     }, text));
   }
 

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

@@ -2,8 +2,8 @@
 
 exports[`Subject rendering the defult props 1`] = `
 <DocumentFragment>
-  <span
-    class="subject dotted whiteSpace_pre  font_regular"
+  <div
+    class="dotted font_regular subject  whiteSpace_pre"
     data-title-wrap="pre"
   />
 </DocumentFragment>
@@ -11,8 +11,8 @@ exports[`Subject rendering the defult props 1`] = `
 
 exports[`Subject rendering the whiteSpace of -break-spaces 1`] = `
 <DocumentFragment>
-  <span
-    class="subject dotted whiteSpace_breakSpaces  font_regular"
+  <div
+    class="dotted font_regular subject  whiteSpace_breakSpaces"
     data-title-wrap="break-spaces"
   />
 </DocumentFragment>
@@ -20,8 +20,8 @@ exports[`Subject rendering the whiteSpace of -break-spaces 1`] = `
 
 exports[`Subject rendering the whiteSpace of -normal 1`] = `
 <DocumentFragment>
-  <span
-    class="subject dotted whiteSpace_normal  font_regular"
+  <div
+    class="dotted font_regular subject  whiteSpace_normal"
     data-title-wrap="normal"
   />
 </DocumentFragment>
@@ -29,8 +29,8 @@ exports[`Subject rendering the whiteSpace of -normal 1`] = `
 
 exports[`Subject rendering the whiteSpace of -nowrap 1`] = `
 <DocumentFragment>
-  <span
-    class="subject dotted whiteSpace_nowrap  font_regular"
+  <div
+    class="dotted font_regular subject  whiteSpace_nowrap"
     data-title-wrap="nowrap"
   />
 </DocumentFragment>
@@ -38,8 +38,8 @@ exports[`Subject rendering the whiteSpace of -nowrap 1`] = `
 
 exports[`Subject rendering the whiteSpace of -pre 1`] = `
 <DocumentFragment>
-  <span
-    class="subject dotted whiteSpace_pre  font_regular"
+  <div
+    class="dotted font_regular subject  whiteSpace_pre"
     data-title-wrap="pre"
   />
 </DocumentFragment>
@@ -47,8 +47,8 @@ exports[`Subject rendering the whiteSpace of -pre 1`] = `
 
 exports[`Subject rendering the whiteSpace of -pre-line 1`] = `
 <DocumentFragment>
-  <span
-    class="subject dotted whiteSpace_preLine  font_regular"
+  <div
+    class="dotted font_regular subject  whiteSpace_preLine"
     data-title-wrap="pre-line"
   />
 </DocumentFragment>
@@ -56,8 +56,8 @@ exports[`Subject rendering the whiteSpace of -pre-line 1`] = `
 
 exports[`Subject rendering the whiteSpace of -pre-wrap 1`] = `
 <DocumentFragment>
-  <span
-    class="subject dotted whiteSpace_preWrap  font_regular"
+  <div
+    class="dotted font_regular subject  whiteSpace_preWrap"
     data-title-wrap="pre-wrap"
   />
 </DocumentFragment>

package/es/list/Subject/props/defaultProps.js

@@ -4,5 +4,7 @@ export const defaultProps = {
   className: '',
   isDotted: true,
   customProps: {},
-  whiteSpace: 'pre'
+  whiteSpace: 'pre',
+  isHighlighted: false,
+  highlightData: {}
 };

package/es/list/Subject/props/propTypes.js

@@ -1,4 +1,5 @@
 import PropTypes from 'prop-types';
+import { propTypes as typographyProps } from '@zohodesk/components/es/Typography/props/propTypes';
 export const propTypes = {
   className: PropTypes.string,
   dataId: PropTypes.string,
@@ -16,5 +17,8 @@ export const propTypes = {
     LinkProps: PropTypes.object,
     TextProps: PropTypes.object
   }),
-  whiteSpace: PropTypes.oneOf(['normal', 'nowrap', 'pre', 'pre-line', 'pre-wrap', 'break-spaces'])
+  whiteSpace: PropTypes.oneOf(['normal', 'nowrap', 'pre', 'pre-line', 'pre-wrap', 'break-spaces']),
+  // Highlight props
+  isHighlighted: PropTypes.bool,
+  highlightData: typographyProps.$ui_highlightConfig
 };

package/es/list/status/StatusDropdown/StatusDropdown.js

@@ -178,8 +178,12 @@ export class StatusDropdown extends React.Component {
       targetOffset,
       renderTargetElement,
       renderFooterElement,
-      a11y = {}
+      a11y = {},
+      customClass
     } = this.props;
+    const {
+      dropBoxClass = ''
+    } = customClass;
     const {
       tabIndex = 0,
       ariaLabelledby,
@@ -247,7 +251,8 @@ export class StatusDropdown extends React.Component {
         isAnimate: true,
         getRef: getContainerRef,
         customClass: {
-          customDropBoxWrap: style.dropBoxContainer
+          customDropBoxWrap: style.dropBoxContainer,
+          customDropBox: dropBoxClass
         },
         needResponsive: needResponsive,
         isResponsivePadding: true,

package/es/list/status/StatusDropdown/props/defaultProps.js

@@ -18,5 +18,6 @@ export const defaultProps = {
   needMultiLineText: false,
   isFetchingOptions: false,
   isAbsolutePositioningNeeded: true,
-  isRestrictScroll: false
+  isRestrictScroll: false,
+  customClass: {}
 };

package/es/list/status/StatusDropdown/props/propTypes.js

@@ -56,5 +56,8 @@ export const propTypes = {
   positionsOffset: PropTypes.object,
   renderTargetElement: PropTypes.func,
   renderFooterElement: PropTypes.node,
-  targetOffset: PropTypes.object
+  targetOffset: PropTypes.object,
+  customClass: PropTypes.shape({
+    dropBoxClass: PropTypes.string
+  })
 };

package/es/list/status/StatusListItem/StatusListItem.js

@@ -90,7 +90,7 @@ export default class StatusListItem extends React.Component {
       "aria-label": ariaLabel,
       "data-a11y-inset-focus": insetFocus,
       isCover: false,
-      align: "baseline",
+      align: "vertical",
       alignBox: "row",
       className: `${style.list} ${style[size]} ${style[palette]} ${active ? style.active : highlight && !isDisabled ? style.hover : ''} ${autoHover && !isDisabled ? style.effect : ''} ${needTick ? style.withTick : ''} ${isDisabled ? CssProvider('isDisable') : ''} ${needBorder ? style.withBorder : ''} ${customClass}`,
       dataId: String(value).replace("'", '_'),
@@ -102,6 +102,8 @@ export default class StatusListItem extends React.Component {
       tabindex: isDisabled ? '-1' : '0',
       ...options,
       ...a11y
+    }, /*#__PURE__*/React.createElement(Box, {
+      className: style.contentWrapper
     }, /*#__PURE__*/React.createElement(Box, {
       className: `${style.statusType} ${style[bulletColor]}`
     }), /*#__PURE__*/React.createElement(Box, {
@@ -120,7 +122,7 @@ export default class StatusListItem extends React.Component {
     }, /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-ticknew",
       size: "8"
-    })) : null);
+    })) : null));
   }
 
 }

package/es/list/status/StatusListItem/StatusListItem.module.css

@@ -1,9 +1,16 @@
+.varClass {
+  --statuslistitem_multiline_lineheight: 1.5385;
+  --statuslistitem_font_size: var(--zd_font_size13);
+  --statuslistitem_min_height: var(--zd_size35);
+}
+
 .list {
+  composes: varClass;
   color: var(--zdt_statuslistitem_list_text);
-  font-size: var(--zd_font_size13) ;
+  font-size: var(--statuslistitem_font_size);
   position: relative;
   list-style: none;
-  min-height: var(--zd_size35) ;
+  min-height: var(--statuslistitem_min_height);
   cursor: pointer;
 }
 [dir=ltr] .withBorder {
@@ -22,7 +29,7 @@
   padding: var(--zd_size7) var(--zd_size20) ;
 }
 .large {
-  height: var(--zd_size48) ;
+  --statuslistitem_min_height: var(--zd_size48);
 }
 [dir=ltr] .large {
   padding: var(--zd_size10) var(--zd_size3) var(--zd_size10) var(--zd_size25) ;
@@ -36,9 +43,8 @@
 .value {
   composes: dotted from '~@zohodesk/components/es/common/common.module.css';
 }
-.multiLineValue{
-  word-break: break-word;
-  composes: clamp from '~@zohodesk/components/es/common/common.module.css';
+.multiLineValue {
+  composes: lineClamp from '~@zohodesk/components/es/common/common.module.css';
 }
 [dir=ltr] .withBorder.active {
   border-left-color: var(--zdt_statuslistitem_default_active_border);
@@ -88,24 +94,44 @@
 [dir=rtl] .active.withTick {
   padding-left: var(--zd_size39) ;
 }
+.contentWrapper {
+  composes: dflex flexrow alignVertical from '~@zohodesk/components/es/common/common.module.css';
+  width: 100% ;
+}
 /* Status Type */
-.statusType {
-  width: var(--zd_size8) ;
-  height: var(--zd_size8) ;
+.statusType{
+  position: relative;
+  composes: dflex alignVertical alignHorizontal from '~@zohodesk/components/es/common/common.module.css';
+  align-self: flex-start;
+  min-height: calc(var(--statuslistitem_font_size) * var(--statuslistitem_multiline_lineheight));
+  min-width: var(--zd_size20) ;
+}
+.statusType::after{
+  /* css:validation:ignore */
+  --status_listitem_bullet_min_height: var(--zd_font_size8);
+  /* css:validation:ignore */
+  --status_listitem_bullet_min_width: var(--zd_font_size8);
+
+  content: '';
+  height: var(--status_listitem_bullet_min_height);
+  width: var(--status_listitem_bullet_min_width);
+  /* css:theme-validation:ignore */
   border-radius: 50%;
+  background-color: var(--zdt_statuslistitem_black_bg);
 }
-[dir=ltr] .statusType {
-  margin-right: var(--zd_size13) ;
+[dir=ltr] .statusType::after{
+  margin-right: var(--zd_size12) ;
 }
-[dir=rtl] .statusType {
-  margin-left: var(--zd_size13) ;
+[dir=rtl] .statusType::after{
+  margin-left: var(--zd_size12) ;
 }
-.black {
+
+.black.statusType::after {
   background-color: var(--zdt_statuslistitem_black_bg);
 }
-.orange {
+.orange.statusType::after {
   background-color: var(--zdt_statuslistitem_orange_bg);
 }
-.green {
+.green.statusType::after {
   background-color: var(--zdt_statuslistitem_green_bg);
-}
+}

package/es/lookup/header/Search/__tests__/__snapshots__/Search.spec.js.snap

@@ -18,7 +18,7 @@ exports[`Search rendering the customized style search 1`] = `
       data-test-id="boxComponent"
     >
       <div
-        class="varClass customContainer   effect     container   flex rowdir"
+        class="varClass customContainer    effect     container   flex rowdir"
         data-selector-id="textBoxIcon"
       >
         <div
@@ -75,7 +75,7 @@ exports[`Search rendering the defult props 1`] = `
       data-test-id="boxComponent"
     >
       <div
-        class="varClass customContainer   effect     container   flex rowdir"
+        class="varClass customContainer    effect     container   flex rowdir"
         data-selector-id="textBoxIcon"
       >
         <div
@@ -132,7 +132,7 @@ exports[`Search rendering the prop hasSeparator is false 1`] = `
       data-test-id="boxComponent"
     >
       <div
-        class="varClass customContainer   effect     container   flex rowdir"
+        class="varClass customContainer    effect     container   flex rowdir"
         data-selector-id="textBoxIcon"
       >
         <div
@@ -192,7 +192,7 @@ exports[`Search rendering the prop hasSeparator is true 1`] = `
       data-test-id="boxComponent"
     >
       <div
-        class="varClass customContainer   effect     container   flex rowdir"
+        class="varClass customContainer    effect     container   flex rowdir"
         data-selector-id="textBoxIcon"
       >
         <div
@@ -262,7 +262,7 @@ exports[`Search rendering the renderChildren props via function 1`] = `
           data-test-id="boxComponent"
         >
           <div
-            class="varClass customContainer   effect     container   flex rowdir"
+            class="varClass customContainer    effect     container   flex rowdir"
             data-selector-id="textBoxIcon"
           >
             <div
@@ -321,7 +321,7 @@ exports[`Search rendering the search active 1`] = `
       data-test-id="boxComponent"
     >
       <div
-        class="varClass customContainer   effect  active   container   flex rowdir"
+        class="varClass customContainer    effect  active   container   flex rowdir"
         data-selector-id="textBoxIcon"
       >
         <div

package/lib/common/dot_boxShadow.module.css

@@ -37,8 +37,7 @@
     --zd_bs_desktopnotification_container: var(--zd_bs_contrast_outline, 0 4px 20px var(--zdt_desktopnotification_box_shadow));
 
     /* onboarding  */
-    --zd_bs_onboarding_close_icon: var(--zd_bs_contrast_outline, 0px 2px 15px rgba(0, 0, 0, 0.09));
+    --zd_bs_onboarding_close_icon: var(--zd_bs_contrast_outline, 0px 2px 15px var(--zd-shadow-saturation, rgba(0, 0, 0, 0.09)));
     --zd_bs_onboarding_gradient: var(--zd_bs_contrast_outline, 0px 20px 30px 0px var(--zdt_onboarding_bg_box_shadow));
     --zd_bs_onboarding_primary_button: var(--zd_bs_contrast_outline, 0px 4px 20px 0px var(--zdt_onboarding_primary_button_shadow));
-
 }

package/lib/form/fields/CheckBoxField/CheckBoxField.js

@@ -149,10 +149,15 @@ var CheckBoxField = /*#__PURE__*/function (_PureComponent) {
           container: !isDirectCol ? _FieldsModule["default"].checkboxText : ''
         },
         size: fieldSize === 'small' ? 'small' : 'medium',
-        textWeight: isDirectCol ? 'regular' : 'semibold',
+        fontWeight: isDirectCol ? 'regular' : 'semibold',
         testId: isDisabled ? "".concat(dataId, "_label_disabled") : isMandatory ? "".concat(dataId, "_label_mandatory") : "".concat(dataId, "_label"),
         customId: isDisabled ? "".concat(dataId, "_label_disabled") : isMandatory ? "".concat(dataId, "_label_mandatory") : "".concat(dataId, "_label"),
-        onClick: !removeEvent ? this.handleLabelClick : null
+        onClick: !removeEvent ? this.handleLabelClick : null,
+        tagAttributes: {
+          label: {
+            id: id
+          }
+        }
       }, LabelProps)));
 
       return /*#__PURE__*/_react["default"].createElement("div", {

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

@@ -73,15 +73,16 @@ exports[`CheckBoxField rendering the custom children 1`] = `
             data-selector-id="fieldContainer"
             data-test-id="containerComponent"
           >
-            <label
-              class="label title medium default font_primary
-           pointer checkboxText undefined cbTextPointer   "
+            <div
+              class="inlineFlex row alignItems_center container default checkboxText"
               data-id="undefined_label"
-              data-selector-id="label"
+              data-selector-id="undefined_label"
               data-test-id="undefined_label"
             >
-              Label
-            </label>
+              <label
+                class="size14 font_semibold label"
+              />
+            </div>
           </div>
         </div>
       </div>
@@ -164,15 +165,16 @@ exports[`CheckBoxField rendering the custom label children via renderLabelProps
             data-selector-id="fieldContainer"
             data-test-id="containerComponent"
           >
-            <label
-              class="label title medium default font_primary
-           pointer checkboxText undefined cbTextPointer   "
+            <div
+              class="inlineFlex row alignItems_center container default checkboxText"
               data-id="undefined_label"
-              data-selector-id="label"
+              data-selector-id="undefined_label"
               data-test-id="undefined_label"
             >
-              Label
-            </label>
+              <label
+                class="size14 font_semibold label"
+              />
+            </div>
             {}
           </div>
         </div>
@@ -255,15 +257,16 @@ exports[`CheckBoxField rendering the defult props 1`] = `
             data-selector-id="fieldContainer"
             data-test-id="containerComponent"
           >
-            <label
-              class="label title medium default font_primary
-           pointer checkboxText undefined cbTextPointer   "
+            <div
+              class="inlineFlex row alignItems_center container default checkboxText"
               data-id="undefined_label"
-              data-selector-id="label"
+              data-selector-id="undefined_label"
               data-test-id="undefined_label"
             >
-              Label
-            </label>
+              <label
+                class="size14 font_semibold label"
+              />
+            </div>
           </div>
         </div>
       </div>

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

@@ -10,7 +10,7 @@ exports[`CurrencyField rendering the defult props 1`] = `
       class="fieldContainer "
     >
       <div
-        class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container   flex rowdir"
+        class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container   flex rowdir"
         data-selector-id="textBoxIcon"
       >
         <div

package/lib/form/fields/DateField/DateField.js

@@ -196,7 +196,12 @@ var DateField = /*#__PURE__*/function (_PureComponent) {
         htmlFor: getAriaId,
         testId: isDisabled ? "".concat(dataId, "_label_disabled") : isMandatory ? "".concat(dataId, "_label_mandatory") : "".concat(dataId, "_label"),
         customId: isDisabled ? "".concat(dataId, "_label_disabled") : isMandatory ? "".concat(dataId, "_label_mandatory") : "".concat(dataId, "_label"),
-        onClick: isDisabled || isReadOnly ? null : this.handleLabelClick
+        onClick: isDisabled || isReadOnly ? null : this.handleLabelClick,
+        tagAttributes: {
+          label: {
+            id: labelName
+          }
+        }
       }, LabelProps))), /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(_FieldsModule["default"].fieldContainer, " ").concat(labelName ? _FieldsModule["default"]["fieldMargin_".concat(fieldSize)] : '')
       }, isLocked && lockedValueText ? /*#__PURE__*/_react["default"].createElement("div", {

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

@@ -18,7 +18,7 @@ exports[`DateField rendering the defult props 1`] = `
           data-test-id="dateField(formatted_undefined)_widget"
         >
           <div
-            class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container placeHolder  flex rowdir"
+            class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container placeHolder  flex rowdir"
             data-selector-id="textBoxIcon"
           >
             <div

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

@@ -226,7 +226,10 @@ position: relative;
 [dir=rtl] .rightPlaceholder{
   left:var(--zd_size15) 
 }
-   
 .phoneField{
   composes: ltr-zone  from '~@zohodesk/components/es/common/common.module.css';
+}
+
+.lineClampPickListItem{
+  --line-clamp: var(--picklist-field-line-clamp,3);
 }