@zohodesk/components 1.0.0-temp-256.1 → 1.0.0-temp-259.1

package/lib/DateTime/__tests__/__snapshots__/DateTimePopupFooter.spec.js.snap

@@ -3,7 +3,7 @@
 exports[`DateTimePopupFooter rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="flex row alignItems_center footer"
+    class="d-flex d-flex-row d-items-center footer"
     data-id="containerComponent"
     data-selector-id="container"
     data-test-id="containerComponent"

package/lib/DateTime/__tests__/__snapshots__/DateTimePopupHeader.spec.js.snap

@@ -3,13 +3,13 @@
 exports[`DateTimePopupHeader rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="flex fullSize row alignItems_center justifyContent_center header"
+    class="d-flex d-h-full d-w-full d-flex-row d-items-center d-justify-center header"
     data-id="containerComponent"
     data-selector-id="container"
     data-test-id="containerComponent"
   >
     <div
-      class="noShrink dateText"
+      class="d-flex-shrink-0 dateText"
       data-id="selectYear"
       data-selector-id="box"
       data-test-id="selectYear"
@@ -30,14 +30,14 @@ exports[`DateTimePopupHeader rendering the defult props 1`] = `
       </span>
     </div>
     <div
-      class="flexible basis_zero noShrink"
+      class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     />
     <div
       aria-label="prevMonth"
-      class="noShrink thArrow grid"
+      class="d-flex-shrink-0 thArrow grid"
       data-id="prevMonth"
       data-selector-id="box"
       data-test-id="prevMonth"
@@ -53,7 +53,7 @@ exports[`DateTimePopupHeader rendering the defult props 1`] = `
     </div>
     <div
       aria-label="nextMonth"
-      class="noShrink thArrow grid navigation"
+      class="d-flex-shrink-0 thArrow grid navigation"
       data-id="nextMonth"
       data-selector-id="box"
       data-test-id="nextMonth"

package/lib/DateTime/__tests__/__snapshots__/DateWidget.spec.js.snap

@@ -11,11 +11,11 @@ exports[`DateWidget rendering the defult props 1`] = `
       data-test-id="dateWidget_widget"
     >
       <div
-        class="flex row varClass customContainer border_bottom effect borderColor_default hasBorder container placeHolder"
+        class="d-flex d-flex-row varClass customContainer border_bottom effect borderColor_default hasBorder container placeHolder"
         data-selector-id="textBoxIcon"
       >
         <div
-          class="flexible basis_zero noShrink"
+          class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
@@ -32,25 +32,25 @@ exports[`DateWidget rendering the defult props 1`] = `
           />
         </div>
         <div
-          class="noShrink iconContainer"
+          class="d-flex-shrink-0 iconContainer"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
         >
           <div
-            class="flex fullSize row"
+            class="d-flex d-h-full d-w-full d-flex-row"
             data-id="containerComponent"
             data-selector-id="container"
             data-test-id="containerComponent"
           >
             <div
-              class="noShrink icon"
+              class="d-flex-shrink-0 icon"
               data-id="boxComponent"
               data-selector-id="box"
               data-test-id="boxComponent"
             >
               <div
-                class="inlineFlex column alignItems_center justifyContent_center datePickIcon"
+                class="d-inline-flex d-flex-col d-items-center d-justify-center datePickIcon"
                 data-id="dateWidget_datePicker"
                 data-selector-id="container"
                 data-test-id="dateWidget_datePicker"

package/lib/DateTime/__tests__/__snapshots__/DaysRow.spec.js.snap

@@ -3,7 +3,7 @@
 exports[`DaysRow rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="flex fullSize row days"
+    class="d-flex d-h-full d-w-full d-flex-row days"
     data-id="containerComponent"
     data-selector-id="container"
     data-test-id="containerComponent"

package/lib/DateTime/__tests__/__snapshots__/Time.spec.js.snap

@@ -6,13 +6,13 @@ exports[`Time rendering the defult props 1`] = `
     class="text"
   />
   <div
-    class="flex row alignItems_center timesection"
+    class="d-flex d-flex-row d-items-center timesection"
     data-id="Time_timeContainer"
     data-selector-id="container"
     data-test-id="Time_timeContainer"
   >
     <div
-      class="flexible basis_zero noShrink dropDownContainer"
+      class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 dropDownContainer"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -27,11 +27,11 @@ exports[`Time rendering the defult props 1`] = `
           data-test-id="hourField"
         >
           <div
-            class="flex row varClass customContainer border_bottom effect borderColor_default hasBorder container input"
+            class="d-flex d-flex-row varClass customContainer border_bottom effect borderColor_default hasBorder container input"
             data-selector-id="textBoxIcon"
           >
             <div
-              class="flexible basis_zero noShrink"
+              class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0"
               data-id="boxComponent"
               data-selector-id="box"
               data-test-id="boxComponent"
@@ -57,32 +57,32 @@ exports[`Time rendering the defult props 1`] = `
               />
             </div>
             <div
-              class="noShrink iconContainer"
+              class="d-flex-shrink-0 iconContainer"
               data-id="boxComponent"
               data-selector-id="box"
               data-test-id="boxComponent"
             >
               <div
-                class="flex fullSize row"
+                class="d-flex d-h-full d-w-full d-flex-row"
                 data-id="containerComponent"
                 data-selector-id="container"
                 data-test-id="containerComponent"
               >
                 <div
-                  class="noShrink icon"
+                  class="d-flex-shrink-0 icon"
                   data-id="boxComponent"
                   data-selector-id="box"
                   data-test-id="boxComponent"
                 >
                   <div
-                    class="inlineFlex row alignItems_center justifyContent_center rightPlaceholder"
+                    class="d-inline-flex d-flex-row d-items-center d-justify-center rightPlaceholder"
                     data-id="containerComponent"
                     data-selector-id="container"
                     data-test-id="containerComponent"
                   >
                     <div
                       aria-hidden="true"
-                      class="flex fullSize column alignItems_center justifyContent_center arrowIcon"
+                      class="d-flex d-h-full d-w-full d-flex-col d-items-center d-justify-center arrowIcon"
                       data-id="hourField_downIcon"
                       data-selector-id="container"
                       data-test-id="hourField_downIcon"
@@ -105,7 +105,7 @@ exports[`Time rendering the defult props 1`] = `
       </div>
     </div>
     <div
-      class="flexible basis_zero noShrink dropDownContainer"
+      class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 dropDownContainer"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -120,11 +120,11 @@ exports[`Time rendering the defult props 1`] = `
           data-test-id="minuteField"
         >
           <div
-            class="flex row varClass customContainer border_bottom effect borderColor_default hasBorder container input"
+            class="d-flex d-flex-row varClass customContainer border_bottom effect borderColor_default hasBorder container input"
             data-selector-id="textBoxIcon"
           >
             <div
-              class="flexible basis_zero noShrink"
+              class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0"
               data-id="boxComponent"
               data-selector-id="box"
               data-test-id="boxComponent"
@@ -150,32 +150,32 @@ exports[`Time rendering the defult props 1`] = `
               />
             </div>
             <div
-              class="noShrink iconContainer"
+              class="d-flex-shrink-0 iconContainer"
               data-id="boxComponent"
               data-selector-id="box"
               data-test-id="boxComponent"
             >
               <div
-                class="flex fullSize row"
+                class="d-flex d-h-full d-w-full d-flex-row"
                 data-id="containerComponent"
                 data-selector-id="container"
                 data-test-id="containerComponent"
               >
                 <div
-                  class="noShrink icon"
+                  class="d-flex-shrink-0 icon"
                   data-id="boxComponent"
                   data-selector-id="box"
                   data-test-id="boxComponent"
                 >
                   <div
-                    class="inlineFlex row alignItems_center justifyContent_center rightPlaceholder"
+                    class="d-inline-flex d-flex-row d-items-center d-justify-center rightPlaceholder"
                     data-id="containerComponent"
                     data-selector-id="container"
                     data-test-id="containerComponent"
                   >
                     <div
                       aria-hidden="true"
-                      class="flex fullSize column alignItems_center justifyContent_center arrowIcon"
+                      class="d-flex d-h-full d-w-full d-flex-col d-items-center d-justify-center arrowIcon"
                       data-id="minuteField_downIcon"
                       data-selector-id="container"
                       data-test-id="minuteField_downIcon"
@@ -198,7 +198,7 @@ exports[`Time rendering the defult props 1`] = `
       </div>
     </div>
     <div
-      class="flexible basis_zero noShrink dropDownContainer"
+      class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 dropDownContainer"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -213,11 +213,11 @@ exports[`Time rendering the defult props 1`] = `
           data-test-id="ampmField"
         >
           <div
-            class="flex row varClass customContainer border_bottom effect borderColor_default hasBorder container input"
+            class="d-flex d-flex-row varClass customContainer border_bottom effect borderColor_default hasBorder container input"
             data-selector-id="textBoxIcon"
           >
             <div
-              class="flexible basis_zero noShrink"
+              class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0"
               data-id="boxComponent"
               data-selector-id="box"
               data-test-id="boxComponent"
@@ -243,32 +243,32 @@ exports[`Time rendering the defult props 1`] = `
               />
             </div>
             <div
-              class="noShrink iconContainer"
+              class="d-flex-shrink-0 iconContainer"
               data-id="boxComponent"
               data-selector-id="box"
               data-test-id="boxComponent"
             >
               <div
-                class="flex fullSize row"
+                class="d-flex d-h-full d-w-full d-flex-row"
                 data-id="containerComponent"
                 data-selector-id="container"
                 data-test-id="containerComponent"
               >
                 <div
-                  class="noShrink icon"
+                  class="d-flex-shrink-0 icon"
                   data-id="boxComponent"
                   data-selector-id="box"
                   data-test-id="boxComponent"
                 >
                   <div
-                    class="inlineFlex row alignItems_center justifyContent_center rightPlaceholder"
+                    class="d-inline-flex d-flex-row d-items-center d-justify-center rightPlaceholder"
                     data-id="containerComponent"
                     data-selector-id="container"
                     data-test-id="containerComponent"
                   >
                     <div
                       aria-hidden="true"
-                      class="flex fullSize column alignItems_center justifyContent_center arrowIcon"
+                      class="d-flex d-h-full d-w-full d-flex-col d-items-center d-justify-center arrowIcon"
                       data-id="ampmField_downIcon"
                       data-selector-id="container"
                       data-test-id="ampmField_downIcon"

package/lib/DropDown/DropDownHeading.js

@@ -87,9 +87,4 @@ var DropDownHeading = /*#__PURE__*/function (_React$Component) {
 
 exports["default"] = DropDownHeading;
 DropDownHeading.propTypes = _propTypes.DropDownHeading_propTypes;
-DropDownHeading.defaultProps = _defaultProps.DropDownHeading_defaultProps; // if (__DOCS__) {
-//   DropDownHeading.docs = {
-//     componentGroup: 'Form Elements',
-//     folderName: 'Style Guide'
-//   };
-// }
+DropDownHeading.defaultProps = _defaultProps.DropDownHeading_defaultProps;

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

@@ -31,13 +31,13 @@ exports[`DropDown rendering the defult props 1`] = `
         tabindex="-1"
       >
         <div
-          class="flex row"
+          class="d-flex d-flex-row"
           data-id="containerComponent"
           data-selector-id="container"
           data-test-id="containerComponent"
         >
           <div
-            class="flexible basis_zero shrink scroll_vertical"
+            class="d-min-h-0 d-flex-grow d-basis-0 d-min-w-0 d-flex-shrink d-overflow-y-auto d-overflow-x-hidden"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"

package/lib/Heading/Heading.js

@@ -86,9 +86,4 @@ var Heading = /*#__PURE__*/function (_React$Component) {
 
 exports["default"] = Heading;
 Heading.propTypes = _propTypes.propTypes;
-Heading.defaultProps = _defaultProps.defaultProps; // if (__DOCS__) {
-//   Heading.docs = {
-//     folderName: 'Style Guide',
-//     componentGroup: 'Accessibility'
-//   };
-// }
+Heading.defaultProps = _defaultProps.defaultProps;

package/lib/Label/Label.js

@@ -111,9 +111,4 @@ var Label = /*#__PURE__*/function (_React$Component) {
 
 exports["default"] = Label;
 Label.defaultProps = _defaultProps.defaultProps;
-Label.propTypes = _propTypes.propTypes; // if (__DOCS__) {
-//   Label.docs = {
-//     componentGroup: 'Form Elements',
-//     folderName: 'Style Guide'
-//   };
-// }
+Label.propTypes = _propTypes.propTypes;

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

@@ -292,7 +292,7 @@ exports[`Label rendering the variant of- primary 1`] = `
 exports[`Label rendering with customProps - containerProps & rightPlaceholderNodeProps 1`] = `
 <DocumentFragment>
   <div
-    class="flex row alignItems_center"
+    class="d-flex d-flex-row d-items-center"
     data-id="flex"
     data-test-id="flex"
     style="gap: 6px;"
@@ -307,7 +307,7 @@ exports[`Label rendering with customProps - containerProps & rightPlaceholderNod
       Premium Feature
     </label>
     <div
-      class="flex row alignItems_center"
+      class="d-flex d-flex-row d-items-center"
       data-id="flex"
       data-test-id="flex"
       style="gap: 6px;"
@@ -325,7 +325,7 @@ exports[`Label rendering with customProps - containerProps & rightPlaceholderNod
 exports[`Label rendering with renderRightPlaceholderNode 1`] = `
 <DocumentFragment>
   <div
-    class="flex row alignItems_center"
+    class="d-flex d-flex-row d-items-center"
     data-id="flex"
     data-test-id="flex"
   >
@@ -339,7 +339,7 @@ exports[`Label rendering with renderRightPlaceholderNode 1`] = `
       New Feature
     </label>
     <div
-      class="flex row alignItems_center"
+      class="d-flex d-flex-row d-items-center"
       data-id="flex"
       data-test-id="flex"
     >

package/lib/ListItem/ListContainer.js

@@ -119,11 +119,5 @@ var ListContainer = function ListContainer(props) {
 
 ListContainer.defaultProps = _defaultProps.ListContainerDefaultProps;
 ListContainer.propTypes = _propTypes.ListContainer_Props;
-var _default = ListContainer; // if (__DOCS__) {
-//   ListContainer.docs = {
-//     componentGroup: 'Molecule',
-//     folderName: 'Style Guide'
-//   };
-// }
-
+var _default = ListContainer;
 exports["default"] = _default;

package/lib/ListItem/ListItem.js

@@ -137,8 +137,6 @@ var ListItem = /*#__PURE__*/function (_React$Component) {
           customListItem = _customClass$customLi === void 0 ? '' : _customClass$customLi,
           _customClass$customTi = customClass.customTickIcon,
           customTickIcon = _customClass$customTi === void 0 ? '' : _customClass$customTi,
-          _customClass$customLe = customClass.customLeftValuePlaceholder,
-          customLeftValuePlaceholder = _customClass$customLe === void 0 ? '' : _customClass$customLe,
           _customClass$customVa = customClass.customValueRightPlaceholder,
           customValueRightPlaceholder = _customClass$customVa === void 0 ? '' : _customClass$customVa,
           _customClass$customTi2 = customClass.customTitleBox,
@@ -181,7 +179,7 @@ var ListItem = /*#__PURE__*/function (_React$Component) {
         className: "".concat(_ListItemModule["default"].titleBox, " ").concat(lhsAlignContent !== 'start' ? "".concat(_ListItemModule["default"]["alignLhsBox_".concat(lhsAlignContent)]) : '', " ").concat(customTitleBox)
       }, (0, _utils.isRenderable)(renderBeforeChildren) ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         adjust: true,
-        className: "".concat(_ListItemModule["default"].beforeChild, " ").concat(customLeftValuePlaceholder)
+        className: _ListItemModule["default"].beforeChild
       }, (0, _utils.renderNode)(renderBeforeChildren)) : null, value ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         shrink: true,
         adjust: true,
@@ -212,9 +210,4 @@ var ListItem = /*#__PURE__*/function (_React$Component) {
 
 exports["default"] = ListItem;
 ListItem.defaultProps = _defaultProps.ListItemDefaultProps;
-ListItem.propTypes = _propTypes.ListItem_Props; // if (__DOCS__) {
-//   ListItem.docs = {
-//     componentGroup: 'Molecule',
-//     folderName: 'Style Guide'
-//   };
-// }
+ListItem.propTypes = _propTypes.ListItem_Props;

package/lib/ListItem/ListItemWithAvatar.js

@@ -135,7 +135,6 @@ var ListItemWithAvatar = /*#__PURE__*/function (_React$PureComponent) {
           needMultiLineText = _this$props4.needMultiLineText,
           secondaryValue = _this$props4.secondaryValue,
           renderValueRightPlaceholderNode = _this$props4.renderValueRightPlaceholderNode,
-          renderLeftValuePlaceholderNode = _this$props4.renderLeftValuePlaceholderNode,
           lhsAlignContent = _this$props4.lhsAlignContent;
       var _customProps$ListItem = customProps.ListItemProps,
           ListItemProps = _customProps$ListItem === void 0 ? {} : _customProps$ListItem,
@@ -152,11 +151,7 @@ var ListItemWithAvatar = /*#__PURE__*/function (_React$PureComponent) {
           _customClass$customAv2 = customClass.customAvatarTeam,
           customAvatarTeam = _customClass$customAv2 === void 0 ? '' : _customClass$customAv2,
           _customClass$customVa = customClass.customValueRightPlaceholder,
-          customValueRightPlaceholder = _customClass$customVa === void 0 ? '' : _customClass$customVa,
-          _customClass$customLe = customClass.customLeftValuePlaceholder,
-          customLeftValuePlaceholder = _customClass$customLe === void 0 ? '' : _customClass$customLe,
-          _customClass$customTi = customClass.customTitleBox,
-          customTitleBox = _customClass$customTi === void 0 ? '' : _customClass$customTi;
+          customValueRightPlaceholder = _customClass$customVa === void 0 ? '' : _customClass$customVa;
 
       var listA11y = _objectSpread({
         ariaHidden: true,
@@ -216,11 +211,8 @@ var ListItemWithAvatar = /*#__PURE__*/function (_React$PureComponent) {
         flexible: true,
         className: "".concat(_ListItemModule["default"].leftBox, " ").concat(_ListItemModule["default"].selfAlign_center)
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-        className: "".concat(_ListItemModule["default"].titleBox, " ").concat(customTitleBox)
-      }, (0, _utils.isRenderable)(renderLeftValuePlaceholderNode) ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-        adjust: true,
-        className: "".concat(customLeftValuePlaceholder)
-      }, (0, _utils.renderNode)(renderLeftValuePlaceholderNode)) : null, value ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+        className: _ListItemModule["default"].titleBox
+      }, value ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         shrink: true,
         adjust: true,
         "data-title": isDisabled ? null : title,
@@ -247,9 +239,4 @@ var ListItemWithAvatar = /*#__PURE__*/function (_React$PureComponent) {
 
 exports["default"] = ListItemWithAvatar;
 ListItemWithAvatar.defaultProps = _defaultProps.ListItemWithAvatarDefaultProps;
-ListItemWithAvatar.propTypes = _propTypes.ListItemWithAvatar_Props; // if (__DOCS__) {
-//   ListItemWithAvatar.docs = {
-//     componentGroup: 'Molecule',
-//     folderName: 'Style Guide'
-//   };
-// }
+ListItemWithAvatar.propTypes = _propTypes.ListItemWithAvatar_Props;

package/lib/ListItem/ListItemWithCheckBox.js

@@ -124,7 +124,6 @@ var ListItemWithCheckBox = /*#__PURE__*/function (_React$Component) {
           needMultiLineText = _this$props4.needMultiLineText,
           secondaryValue = _this$props4.secondaryValue,
           renderValueRightPlaceholderNode = _this$props4.renderValueRightPlaceholderNode,
-          renderLeftValuePlaceholderNode = _this$props4.renderLeftValuePlaceholderNode,
           lhsAlignContent = _this$props4.lhsAlignContent,
           lhsJustifyContent = _this$props4.lhsJustifyContent;
 
@@ -143,11 +142,7 @@ var ListItemWithCheckBox = /*#__PURE__*/function (_React$Component) {
           _customClass$customLa = customClass.customLabel,
           customLabel = _customClass$customLa === void 0 ? '' : _customClass$customLa,
           _customClass$customVa = customClass.customValueRightPlaceholder,
-          customValueRightPlaceholder = _customClass$customVa === void 0 ? '' : _customClass$customVa,
-          _customClass$customLe = customClass.customLeftValuePlaceholder,
-          customLeftValuePlaceholder = _customClass$customLe === void 0 ? '' : _customClass$customLe,
-          _customClass$customTi = customClass.customTitleBox,
-          customTitleBox = _customClass$customTi === void 0 ? '' : _customClass$customTi;
+          customValueRightPlaceholder = _customClass$customVa === void 0 ? '' : _customClass$customVa;
       var iconBoxDataId = "".concat(dataId ? dataId : value, "_checkBox");
       return /*#__PURE__*/_react["default"].createElement(_ListContainer["default"], _extends({
         a11y: listA11y,
@@ -189,11 +184,8 @@ var ListItemWithCheckBox = /*#__PURE__*/function (_React$Component) {
         flexible: true,
         className: "".concat(_ListItemModule["default"].leftBox, " ").concat(_ListItemModule["default"].selfAlign_center)
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-        className: "".concat(_ListItemModule["default"].titleBox, " ").concat(customTitleBox)
-      }, (0, _utils.isRenderable)(renderLeftValuePlaceholderNode) ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-        adjust: true,
-        className: "".concat(customLeftValuePlaceholder)
-      }, (0, _utils.renderNode)(renderLeftValuePlaceholderNode)) : null, value ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+        className: _ListItemModule["default"].titleBox
+      }, value ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         shrink: true,
         adjust: true,
         "data-title": isDisabled ? null : title,
@@ -212,9 +204,4 @@ var ListItemWithCheckBox = /*#__PURE__*/function (_React$Component) {
 
 exports["default"] = ListItemWithCheckBox;
 ListItemWithCheckBox.defaultProps = _defaultProps.ListItemWithCheckBoxDefaultProps;
-ListItemWithCheckBox.propTypes = _propTypes.ListItemWithCheckBox_Props; // if (__DOCS__) {
-//   ListItemWithCheckBox.docs = {
-//     componentGroup: 'Molecule',
-//     folderName: 'Style Guide'
-//   };
-// }
+ListItemWithCheckBox.propTypes = _propTypes.ListItemWithCheckBox_Props;

package/lib/ListItem/ListItemWithIcon.js

@@ -128,13 +128,10 @@ var ListItemWithIcon = /*#__PURE__*/function (_React$Component) {
           a11y = _this$props4.a11y,
           customClass = _this$props4.customClass,
           customValueRightPlaceholderClass = _this$props4.customValueRightPlaceholderClass,
-          customLeftValuePlaceholderClass = _this$props4.customLeftValuePlaceholderClass,
-          customTitleBoxClass = _this$props4.customTitleBoxClass,
           customProps = _this$props4.customProps,
           needMultiLineText = _this$props4.needMultiLineText,
           secondaryValue = _this$props4.secondaryValue,
           renderValueRightPlaceholderNode = _this$props4.renderValueRightPlaceholderNode,
-          renderLeftValuePlaceholderNode = _this$props4.renderLeftValuePlaceholderNode,
           lhsAlignContent = _this$props4.lhsAlignContent,
           lhsJustifyContent = _this$props4.lhsJustifyContent;
       var _customProps$ListItem = customProps.ListItemProps,
@@ -192,11 +189,8 @@ var ListItemWithIcon = /*#__PURE__*/function (_React$Component) {
         flexible: true,
         className: "".concat(_ListItemModule["default"].leftBox, " ").concat(_ListItemModule["default"].selfAlign_center)
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-        className: "".concat(_ListItemModule["default"].titleBox, " ").concat(customTitleBoxClass)
-      }, (0, _utils.isRenderable)(renderLeftValuePlaceholderNode) ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-        adjust: true,
-        className: "".concat(customLeftValuePlaceholderClass)
-      }, (0, _utils.renderNode)(renderLeftValuePlaceholderNode)) : null, value ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+        className: _ListItemModule["default"].titleBox
+      }, value ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         shrink: true,
         adjust: true,
         className: needMultiLineText ? _ListItemModule["default"].multiLineValue : _ListItemModule["default"].value,
@@ -224,9 +218,4 @@ var ListItemWithIcon = /*#__PURE__*/function (_React$Component) {
 
 exports["default"] = ListItemWithIcon;
 ListItemWithIcon.defaultProps = _defaultProps.ListItemWithIconDefaultProps;
-ListItemWithIcon.propTypes = _propTypes.ListItemWithIcon_Props; // if (__DOCS__) {
-//   ListItemWithIcon.docs = {
-//     componentGroup: 'Molecule',
-//     folderName: 'Style Guide'
-//   };
-// }
+ListItemWithIcon.propTypes = _propTypes.ListItemWithIcon_Props;

package/lib/ListItem/ListItemWithRadio.js

@@ -125,7 +125,6 @@ var ListItemWithRadio = /*#__PURE__*/function (_React$Component) {
           needMultiLineText = _this$props4.needMultiLineText,
           secondaryValue = _this$props4.secondaryValue,
           renderValueRightPlaceholderNode = _this$props4.renderValueRightPlaceholderNode,
-          renderLeftValuePlaceholderNode = _this$props4.renderLeftValuePlaceholderNode,
           lhsAlignContent = _this$props4.lhsAlignContent,
           lhsJustifyContent = _this$props4.lhsJustifyContent;
       var _customProps$ListItem = customProps.ListItemProps,
@@ -144,11 +143,7 @@ var ListItemWithRadio = /*#__PURE__*/function (_React$Component) {
           _customClass$customRa2 = customClass.customRadioWrap,
           customRadioWrap = _customClass$customRa2 === void 0 ? '' : _customClass$customRa2,
           _customClass$customVa = customClass.customValueRightPlaceholder,
-          customValueRightPlaceholder = _customClass$customVa === void 0 ? '' : _customClass$customVa,
-          _customClass$customLe = customClass.customLeftValuePlaceholder,
-          customLeftValuePlaceholder = _customClass$customLe === void 0 ? '' : _customClass$customLe,
-          _customClass$customTi = customClass.customTitleBox,
-          customTitleBox = _customClass$customTi === void 0 ? '' : _customClass$customTi;
+          customValueRightPlaceholder = _customClass$customVa === void 0 ? '' : _customClass$customVa;
       var iconBoxDataId = "".concat(dataId, "_radio");
       return /*#__PURE__*/_react["default"].createElement(_ListContainer["default"], _extends({
         a11y: listA11y,
@@ -191,11 +186,8 @@ var ListItemWithRadio = /*#__PURE__*/function (_React$Component) {
         flexible: true,
         className: "".concat(_ListItemModule["default"].leftBox, " ").concat(_ListItemModule["default"].selfAlign_center)
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-        className: "".concat(_ListItemModule["default"].titleBox, " ").concat(customTitleBox)
-      }, (0, _utils.isRenderable)(renderLeftValuePlaceholderNode) ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-        adjust: true,
-        className: "".concat(customLeftValuePlaceholder)
-      }, (0, _utils.renderNode)(renderLeftValuePlaceholderNode)) : null, value ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+        className: _ListItemModule["default"].titleBox
+      }, value ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         shrink: true,
         adjust: true,
         "data-title": disableTitle ? null : title,
@@ -214,9 +206,4 @@ var ListItemWithRadio = /*#__PURE__*/function (_React$Component) {
 
 exports["default"] = ListItemWithRadio;
 ListItemWithRadio.defaultProps = _defaultProps.ListItemWithRadioDefaultProps;
-ListItemWithRadio.propTypes = _propTypes.ListItemWithRadio_Props; // if (__DOCS__) {
-//   ListItemWithRadio.docs = {
-//     componentGroup: 'Molecule',
-//     folderName: 'Style Guide'
-//   };
-// }
+ListItemWithRadio.propTypes = _propTypes.ListItemWithRadio_Props;

package/lib/ListItem/__tests__/ListItemWithAvatar.spec.js

@@ -73,27 +73,4 @@ describe('ListItemWithAvatar', function () {
 
     expect(asFragment()).toMatchSnapshot();
   });
-  test('ListItemWithAvatar with renderLeftValuePlaceholderNode', function () {
-    var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ListItemWithAvatar["default"], {
-      renderLeftValuePlaceholderNode: function renderLeftValuePlaceholderNode() {
-        return /*#__PURE__*/_react["default"].createElement("div", null, "Left Placeholder");
-      }
-    })),
-        asFragment = _render8.asFragment;
-
-    expect(asFragment()).toMatchSnapshot();
-  });
-  test('ListItemWithAvatar with renderLeftValuePlaceholderNode & it\'s custom class', function () {
-    var _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ListItemWithAvatar["default"], {
-      renderLeftValuePlaceholderNode: function renderLeftValuePlaceholderNode() {
-        return /*#__PURE__*/_react["default"].createElement("div", null, "Left Placeholder");
-      },
-      customClass: {
-        customLeftValuePlaceholder: "customLeftValuePlaceholderClass"
-      }
-    })),
-        asFragment = _render9.asFragment;
-
-    expect(asFragment()).toMatchSnapshot();
-  });
 });