@zohodesk/components 1.6.2 → 1.6.4

package/lib/ListItem/ListItem.module.css

@@ -1,3 +1,4 @@
+/* css:lineheight-validation:ignore */
 .varClass {
   /* listitem default variables */
   --listitem_font_size: 13px;
@@ -15,10 +16,15 @@
 
   /* listitem tick icon default variables */
   --listitem_tickicon_color: var(--zdt_listitem_default_tickicon);
-}[dir=ltr] .varClass {
+
+  /* line-height for multiline text */
+  --listitem_multiline_lineheight: 1.5385;
+}
+[dir=ltr] .varClass {
   --listitem_avatar_margin: 0 15px 0 0
     /*rtl: 0 0 0 15px*/;
-}[dir=rtl] .varClass {
+}
+[dir=rtl] .varClass {
   --listitem_avatar_margin: 0 0 0 15px;
 }
 .list {
@@ -75,18 +81,27 @@
 .children,.secondaryValue {
   composes: dotted from '../common/common.module.css';
 }
+.beforeChild{
+  height: calc(var(--listitem_font_size) * var(--listitem_multiline_lineheight));
+}
 [dir=ltr] .beforeChild{
   margin-right: var(--zd_size10) ;
 }
 [dir=rtl] .beforeChild{
   margin-left: var(--zd_size10) ;
 }
+  /* css:lineheight-validation:ignore */
 .value, .multiLineValue {
-  line-height: 1.5385;
+  line-height: var(--listitem_multiline_lineheight);
 }
 .multiLineValue,.multiLine{
  composes: lineClamp from '../common/common.module.css';
 }
+.iconBox,
+.leftAvatar,
+.lhsBoxInner {
+  composes: dflex from '../common/common.module.css';
+}
 .iconBox {
   width: var(--zd_size20) ;
   text-align: center;
@@ -104,10 +119,16 @@
 .leftAvatar {
   margin: var(--listitem_avatar_margin);
 }
+.iconWrapper{
+  height: calc(var(--listitem_font_size) * var(--listitem_multiline_lineheight));
+}
 
+.iconWrapper,
 .lhsJustifyContent_start,
 .lhsJustifyContent_center,
-.lhsJustifyContent_end {
+.lhsJustifyContent_end,
+.beforeChild,
+.titleBox {
   composes: dflex alignVertical from '../common/common.module.css';
 }
 .lhsJustifyContent_start {
@@ -119,27 +140,24 @@
 .lhsJustifyContent_end {
   composes: justifyFend from '../common/common.module.css';
 }
-
-.lhsBox {
-  composes: dflex from '../common/common.module.css';
-  align-self: stretch;
+.selfAlign_center{
+  align-self: center;
 }
-.lhsBox_small,
-.lhsBox_medium,
-.lhsBox_large{
-  composes: varClass;
-  --listitem_doubleline_content_height: calc(var(--listitem_font_size) * 2 );
-  height: 100% ;
-  composes: dflex alignVertical from '../common/common.module.css';
+
+.contentWrapper {
+  composes: dflex flexrow from '../common/common.module.css';
+  align-items: stretch;
+  width: 100% ;
 }
-.lhsBox_small {
-  max-height: calc(var(--listitem_doubleline_content_height) + var(--zd_size7)); /* 7px = listitem min-height - (top + bottom padding) - doubleLine content height */
+.alignLhsBox_end {
+  align-items: flex-end;
 }
-.lhsBox_medium {
-  max-height: calc(var(--listitem_doubleline_content_height) + var(--zd_size8)); /* 8px = listitem min-height - (top + bottom padding) - doubleLine content height */
+.alignLhsBox_center {
+  align-items: center;
 }
-.lhsBox_large {
-  max-height: calc(var(--listitem_doubleline_content_height) + var(--zd_size15)); /* 15px = listitem min-height - (top + bottom padding) - doubleLine content height */
+.lhsBoxInner{
+  height: 100% ;
+  max-height: calc((var(--listitem_font_size) * var(--listitem_multiline_lineheight)) * 2 );
 }
 .defaultHover, .primaryHover, .dangerHover, .secondaryHover, .darkHover {
   background-color: var(--listitem_highlight_bg_color);
@@ -285,5 +303,5 @@
 }
 
 .titleBox {
-  composes: dflex alignVertical from '../common/common.module.css';
+  align-items: stretch;
 }

package/lib/ListItem/ListItemWithAvatar.js

@@ -178,11 +178,13 @@ var ListItemWithAvatar = /*#__PURE__*/function (_React$PureComponent) {
         disableTitle: disableTitle,
         title: null,
         customProps: ListItemProps
-      }, ContainerProps), name || imgSrc ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-        className: "".concat(_ListItemModule["default"].leftAvatar, " ").concat(lhsAlignContent !== 'center' ? "".concat(_ListItemModule["default"].lhsBox) : '')
+      }, ContainerProps), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+        className: _ListItemModule["default"].contentWrapper
+      }, name || imgSrc ? /*#__PURE__*/_react["default"].createElement("div", {
+        className: "".concat(_ListItemModule["default"].leftAvatar)
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         align: lhsAlignContent,
-        className: _ListItemModule["default"]["lhsBox_".concat(size)]
+        className: "".concat(_ListItemModule["default"].lhsBoxInner, " ").concat(_ListItemModule["default"].alignLhsBox_center)
       }, isTeam ? /*#__PURE__*/_react["default"].createElement(_AvatarTeam["default"], _extends({
         name: name,
         size: "small",
@@ -205,7 +207,7 @@ var ListItemWithAvatar = /*#__PURE__*/function (_React$PureComponent) {
         customClass: customAvatar
       }, AvatarProps)))) : null, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         flexible: true,
-        className: _ListItemModule["default"].leftBox
+        className: "".concat(_ListItemModule["default"].leftBox, " ").concat(_ListItemModule["default"].selfAlign_center)
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         className: _ListItemModule["default"].titleBox
       }, value ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
@@ -226,7 +228,7 @@ var ListItemWithAvatar = /*#__PURE__*/function (_React$PureComponent) {
       }, /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
         name: "ZD-ticknew",
         size: "8"
-      })) : null);
+      })) : null));
     }
   }]);
 

package/lib/ListItem/ListItemWithCheckBox.js

@@ -141,6 +141,7 @@ var ListItemWithCheckBox = /*#__PURE__*/function (_React$Component) {
           customLabel = _customClass$customLa === void 0 ? '' : _customClass$customLa,
           _customClass$customVa = customClass.customValueRightPlaceholder,
           customValueRightPlaceholder = _customClass$customVa === void 0 ? '' : _customClass$customVa;
+      var iconBoxDataId = "".concat(dataId ? dataId : value, "_checkBox");
       return /*#__PURE__*/_react["default"].createElement(_ListContainer["default"], _extends({
         a11y: listA11y,
         size: size,
@@ -160,11 +161,14 @@ var ListItemWithCheckBox = /*#__PURE__*/function (_React$Component) {
         title: null,
         customProps: ListItemProps
       }, ContainerProps), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-        className: "".concat(_ListItemModule["default"].iconBox, " ").concat(_ListItemModule["default"].lhsBox, " ").concat(_ListItemModule["default"]["lhsJustifyContent_".concat(lhsJustifyContent)]),
-        dataId: "".concat(dataId ? dataId : value, "_checkBox")
+        className: _ListItemModule["default"].contentWrapper
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        className: "".concat(_ListItemModule["default"].iconBox, " ").concat(_ListItemModule["default"]["lhsJustifyContent_".concat(lhsJustifyContent)]),
+        "data-id": iconBoxDataId,
+        "data-test-id": iconBoxDataId
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         align: lhsAlignContent,
-        className: lhsAlignContent !== 'center' ? _ListItemModule["default"]["lhsBox_".concat(size)] : ''
+        className: lhsAlignContent !== 'center' ? _ListItemModule["default"].lhsBoxInner : ''
       }, /*#__PURE__*/_react["default"].createElement(_CheckBox["default"], {
         checked: checked,
         a11y: {
@@ -176,7 +180,7 @@ var ListItemWithCheckBox = /*#__PURE__*/function (_React$Component) {
         }
       }))), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         flexible: true,
-        className: _ListItemModule["default"].leftBox
+        className: "".concat(_ListItemModule["default"].leftBox, " ").concat(_ListItemModule["default"].selfAlign_center)
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         className: _ListItemModule["default"].titleBox
       }, value ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
@@ -189,7 +193,7 @@ var ListItemWithCheckBox = /*#__PURE__*/function (_React$Component) {
       }, (0, _utils.renderNode)(renderValueRightPlaceholderNode)) : null), secondaryValue ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         "data-title": isDisabled ? null : secondaryValue,
         className: "".concat(_ListItemModule["default"].secondaryField, " ").concat(needMultiLineText ? _ListItemModule["default"].multiLine : _ListItemModule["default"].secondaryValue)
-      }, secondaryValue) : null));
+      }, secondaryValue) : null)));
     }
   }]);
 

package/lib/ListItem/ListItemWithIcon.js

@@ -144,6 +144,7 @@ var ListItemWithIcon = /*#__PURE__*/function (_React$Component) {
 
       var ariaHidden = listA11y.ariaHidden;
       var dataIdString = dataId ? "".concat(dataId.replace("'", '_')) : value.toLowerCase().replace("'", '_');
+      var iconBoxDataId = dataId ? "".concat(dataId, "_Icon") : "".concat(value.toLowerCase().replace("'", '_'), "_Icon");
       return /*#__PURE__*/_react["default"].createElement(_ListContainer["default"], _extends({
         a11y: listA11y,
         size: size,
@@ -166,14 +167,16 @@ var ListItemWithIcon = /*#__PURE__*/function (_React$Component) {
         disableTitle: disableTitle,
         title: null,
         customProps: ListItemProps
-      }, ContainerProps), iconName && /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+      }, ContainerProps), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+        className: "".concat(_ListItemModule["default"].contentWrapper, " ").concat(!iconName && lhsAlignContent !== 'start' ? _ListItemModule["default"]["alignLhsBox_".concat(lhsAlignContent)] : '')
+      }, iconName && /*#__PURE__*/_react["default"].createElement("div", {
         "aria-hidden": true,
-        align: lhsAlignContent,
-        className: "".concat(_ListItemModule["default"].iconBox, " ").concat(_ListItemModule["default"].lhsBox, " ").concat(_ListItemModule["default"]["lhsJustifyContent_".concat(lhsJustifyContent)]),
-        dataId: dataId ? "".concat(dataId, "_Icon") : "".concat(value.toLowerCase().replace("'", '_'), "_Icon")
+        className: "".concat(_ListItemModule["default"].iconBox, " ").concat(_ListItemModule["default"]["lhsJustifyContent_".concat(lhsJustifyContent)]),
+        "data-id": iconBoxDataId,
+        "data-test-id": iconBoxDataId
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         align: lhsAlignContent,
-        className: lhsAlignContent !== 'center' ? _ListItemModule["default"]["lhsBox_".concat(size)] : ''
+        className: _ListItemModule["default"].iconWrapper
       }, /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
         iconClass: iconClass,
         name: iconName,
@@ -182,7 +185,7 @@ var ListItemWithIcon = /*#__PURE__*/function (_React$Component) {
         className: iconClass
       }) : null, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         flexible: true,
-        className: _ListItemModule["default"].leftBox
+        className: "".concat(_ListItemModule["default"].leftBox, " ").concat(_ListItemModule["default"].selfAlign_center)
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         className: _ListItemModule["default"].titleBox
       }, value ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
@@ -204,7 +207,7 @@ var ListItemWithIcon = /*#__PURE__*/function (_React$Component) {
       }, /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
         name: "ZD-ticknew",
         size: "8"
-      })) : null);
+      })) : null));
     }
   }]);
 

package/lib/ListItem/ListItemWithRadio.js

@@ -142,6 +142,7 @@ var ListItemWithRadio = /*#__PURE__*/function (_React$Component) {
           customRadioWrap = _customClass$customRa2 === void 0 ? '' : _customClass$customRa2,
           _customClass$customVa = customClass.customValueRightPlaceholder,
           customValueRightPlaceholder = _customClass$customVa === void 0 ? '' : _customClass$customVa;
+      var iconBoxDataId = "".concat(dataId, "_radio");
       return /*#__PURE__*/_react["default"].createElement(_ListContainer["default"], _extends({
         a11y: listA11y,
         size: size,
@@ -161,12 +162,14 @@ var ListItemWithRadio = /*#__PURE__*/function (_React$Component) {
         title: null,
         customProps: ListItemProps
       }, ContainerProps), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-        align: lhsAlignContent,
-        className: "".concat(_ListItemModule["default"].iconBox, " ").concat(_ListItemModule["default"].lhsBox, " ").concat(_ListItemModule["default"]["lhsJustifyContent_".concat(lhsJustifyContent)]),
-        dataId: "".concat(dataId, "_radio")
+        className: _ListItemModule["default"].contentWrapper
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        className: "".concat(_ListItemModule["default"].iconBox, " ").concat(_ListItemModule["default"]["lhsJustifyContent_".concat(lhsJustifyContent)]),
+        "data-id": iconBoxDataId,
+        "data-test-id": iconBoxDataId
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         align: lhsAlignContent,
-        className: lhsAlignContent !== 'center' ? _ListItemModule["default"]["lhsBox_".concat(size)] : ''
+        className: lhsAlignContent !== 'center' ? _ListItemModule["default"].lhsBoxInner : ''
       }, /*#__PURE__*/_react["default"].createElement(_Radio["default"], {
         checked: checked,
         id: id,
@@ -179,7 +182,7 @@ var ListItemWithRadio = /*#__PURE__*/function (_React$Component) {
         }
       }))), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         flexible: true,
-        className: _ListItemModule["default"].leftBox
+        className: "".concat(_ListItemModule["default"].leftBox, " ").concat(_ListItemModule["default"].selfAlign_center)
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         className: _ListItemModule["default"].titleBox
       }, value ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
@@ -192,7 +195,7 @@ var ListItemWithRadio = /*#__PURE__*/function (_React$Component) {
       }, (0, _utils.renderNode)(renderValueRightPlaceholderNode)) : null), secondaryValue ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         "data-title": isDisabled ? null : secondaryValue,
         className: "".concat(_ListItemModule["default"].secondaryField, " ").concat(needMultiLineText ? _ListItemModule["default"].multiLine : _ListItemModule["default"].secondaryValue)
-      }, secondaryValue) : null));
+      }, secondaryValue) : null)));
     }
   }]);
 

package/lib/ListItem/__tests__/__snapshots__/ListItem.spec.js.snap

@@ -18,7 +18,7 @@ exports[`ListItem ListItem with renderValueRightPlaceholderNode & it's custom cl
       data-test-id="boxComponent"
     >
       <div
-        class="titleBox shrinkOff"
+        class="titleBox   shrinkOff"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"
@@ -57,7 +57,7 @@ exports[`ListItem ListItem with renderValueRightPlaceholderNode 1`] = `
       data-test-id="boxComponent"
     >
       <div
-        class="titleBox shrinkOff"
+        class="titleBox   shrinkOff"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"
@@ -96,7 +96,7 @@ exports[`ListItem Should render with renderBeforeChildren 1`] = `
       data-test-id="boxComponent"
     >
       <div
-        class="titleBox shrinkOff"
+        class="titleBox   shrinkOff"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"
@@ -143,7 +143,7 @@ exports[`ListItem rendering the defult props 1`] = `
       data-test-id="boxComponent"
     >
       <div
-        class="titleBox shrinkOff"
+        class="titleBox   shrinkOff"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"