@zohodesk/components 1.0.0-temp-199.19 → 1.0.0-temp-245.1

package/assets/Appearance/dark/mode/Component_v1_DarkMode.module.css

@@ -8,4 +8,9 @@
 	--zdt_v1_switch_onLabel: hsla(217, 23.08%, calc(17.84% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_v1_switch_offLabel: hsla(217, 13.73%, calc(70.00% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_v1_switch_offLabel_hover: hsla(210, 7.41%, calc(89.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	
+	/* label */
+	--zdt_v1_label_text: hsla(210, 7.41%, calc(89.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_v1_label_required_text: hsla(0, 71.91%, calc(53.92% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_label_disabled_text: var(--dot_inputDisable);
 }

package/assets/Appearance/light/mode/Component_v1_LightMode.module.css

@@ -8,4 +8,9 @@
 	--zdt_v1_switch_onLabel: hsla(0, 0.00%, calc(100.00% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_v1_switch_offLabel: hsla(220, 10.45%, calc(39.41% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_v1_switch_offLabel_hover: hsla(0, 0.00%, calc(0.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	
+	/* label */
+	--zdt_v1_label_text: hsla(0, 0.00%, calc(0.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_v1_label_required_text: hsla(0, 71.91%, calc(53.92% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_label_disabled_text: var(--dot_inputDisable);
 }

package/assets/Appearance/pureDark/mode/Component_v1_PureDarkMode.module.css

@@ -8,4 +8,9 @@
 	--zdt_v1_switch_onLabel: hsla(0, 0.00%, calc(12.94% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_v1_switch_offLabel: hsla(0, 0.00%, calc(60.00% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_v1_switch_offLabel_hover: hsla(210, 7.41%, calc(89.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	
+	/* label */
+	--zdt_v1_label_text: hsla(210, 7.41%, calc(89.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_v1_label_required_text: hsla(0, 71.91%, calc(53.92% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_label_disabled_text: var(--dot_inputDisable);
 }

package/es/ListItem/ListItem.module.css

@@ -15,9 +15,6 @@
 
   /* listitem tick icon default variables */
   --listitem_tickicon_color: var(--zdt_listitem_default_tickicon);
-
-  /* multiLine value for list item */
-  --listitem_multiline_lineheight: 1.5385;
 }[dir=ltr] .varClass {
   --listitem_avatar_margin: 0 var(--zd_size15) 0 0;
 }[dir=rtl] .varClass {
@@ -79,9 +76,8 @@
 [dir=rtl] .beforeChild{
   margin-left: var(--zd_size10) ;
 }
-/* css:lineheight-validation:ignore */
 .value, .multiLineValue {
-  line-height: var(--listitem_multiline_lineheight);
+  line-height: 1.5385;
 }
 .multiLineValue,.multiLine{
  composes: lineClamp from '../common/common.module.css';
@@ -127,8 +123,7 @@
 .lhsBox_medium,
 .lhsBox_large{
   composes: varClass;
-  /* --listitem_doubleline_content_height: calc(var(--listitem_font_size) * 2 ); */
-  --listitem_doubleline_content_height: calc((var(--listitem_font_size) * var(--listitem_multiline_lineheight)) * 2 );
+  --listitem_doubleline_content_height: calc(var(--listitem_font_size) * 2 );
   height: 100% ;
   composes: dflex alignVertical from '../common/common.module.css';
 }

package/es/MultiSelect/AdvancedGroupMultiSelect.js

@@ -889,12 +889,8 @@ class AdvancedGroupMultiSelect extends React.Component {
       autoComplete,
       getTargetRef,
       isFocus,
-      limit,
-      customProps
+      limit
     } = this.props;
-    const {
-      SuggestionsProps = {}
-    } = customProps;
     let {
       clearText = MULTISELECT_I18N_KEYS.clearText,
       limitReachedMessage = MULTISELECT_I18N_KEYS.limitReachedMessage
@@ -1063,7 +1059,7 @@ class AdvancedGroupMultiSelect extends React.Component {
           a11y: {
             role: 'heading'
           }
-        })), /*#__PURE__*/React.createElement(Suggestions, { ...SuggestionsProps,
+        })), /*#__PURE__*/React.createElement(Suggestions, {
           suggestions: suggestions,
           selectedOptions: selectedOptionIds,
           getRef: this.suggestionItemRef,

package/es/MultiSelect/MultiSelect.js

@@ -1095,9 +1095,9 @@ export class MultiSelectComponent extends React.Component {
       isLoading,
       selectAllText,
       needSelectAll,
+      customProps,
       isVirtualizerEnabled,
-      limit,
-      customProps
+      limit
     } = this.props;
     const {
       selectedOptions,

package/es/MultiSelect/Suggestions.js

@@ -193,23 +193,18 @@ export default class Suggestions extends React.PureComponent {
       htmlId,
       a11y,
       getVirtualizerPublicMethods,
-      setVirtualizerContainerRefFunction,
-      customClass
+      setVirtualizerContainerRefFunction
     } = this.props;
     const {
       ariaParentRole,
       ariaMultiselectable
     } = a11y;
-    const {
-      containerClass = ''
-    } = customClass;
     return /*#__PURE__*/React.createElement(Container, {
       isCover: false,
       role: ariaParentRole,
       id: htmlId,
       tabindex: "0",
-      "aria-multiselectable": ariaMultiselectable,
-      className: containerClass
+      "aria-multiselectable": ariaMultiselectable
     }, /*#__PURE__*/React.createElement(Box, {
       dataId: `${dataId}`,
       className: className ? className : ''

package/es/MultiSelect/props/defaultProps.js

@@ -38,7 +38,6 @@ export const AdvancedGroupMultiSelect_defaultProps = {
   palette: 'default',
   isLoading: false,
   dataSelectorId: 'advancedGroupMultiSelect',
-  customProps: {},
   allowValueFallback: true
 };
 export const AdvancedMultiSelect_defaultProps = {
@@ -170,6 +169,5 @@ export const SelectedOptions_defaultProps = {
 export const Suggestions_defaultProps = {
   a11y: {},
   isVirtualizerEnabled: false,
-  customClass: {},
   needMultiLineText: false
 };

package/es/MultiSelect/props/propTypes.js

@@ -114,8 +114,7 @@ export const MultiSelect_propTypes = {
   setAriaId: PropTypes.string,
   ariaErrorId: PropTypes.string,
   customProps: PropTypes.shape({
-    TextBoxIconProps: PropTypes.object,
-    SuggestionsProps: PropTypes.object
+    TextBoxIconProps: PropTypes.object
   }),
   isFocus: PropTypes.bool,
   allowValueFallback: PropTypes.bool,
@@ -200,11 +199,7 @@ export const Suggestions_propTypes = {
   })),
   renderBeforeChildren: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
   limit: PropTypes.number,
-  limitReachedMessage: PropTypes.string,
-  customClass: PropTypes.shape({
-    containerClass: PropTypes.string
-  }),
-  needMultiLineText: PropTypes.bool
+  limitReachedMessage: PropTypes.string
 };
 export const AdvancedGroupMultiSelect_propTypes = {
   animationStyle: PropTypes.string,
@@ -278,10 +273,7 @@ export const AdvancedGroupMultiSelect_propTypes = {
   dataSelectorId: PropTypes.string,
   isFocus: PropTypes.bool,
   allowValueFallback: PropTypes.bool,
-  limit: PropTypes.number,
-  customProps: PropTypes.shape({
-    SuggestionsProps: PropTypes.object
-  })
+  limit: PropTypes.number
 };
 export const AdvancedMultiSelect_propTypes = { ...MultiSelect_propTypes,
   selectedOptionDetails: PropTypes.string,

package/es/Provider/LibraryContext.js

@@ -11,6 +11,8 @@ const LibraryContextProvider = _ref => {
     hasTagColorInheritedToText,
     shouldIndicateSwitchState,
     shouldStrikeThroughDisabledButton,
+    labelRequiredType,
+    shouldHighlightRequiredLabel,
     children
   } = _ref;
   const [value, setValue] = useState({
@@ -19,7 +21,9 @@ const LibraryContextProvider = _ref => {
     coloredTagVariant,
     hasTagColorInheritedToText,
     shouldIndicateSwitchState,
-    shouldStrikeThroughDisabledButton
+    shouldStrikeThroughDisabledButton,
+    labelRequiredType,
+    shouldHighlightRequiredLabel
   });
 
   function setGlobalContext(key, data) {
@@ -44,7 +48,9 @@ LibraryContextProvider.propTypes = {
   hasTagColorInheritedToText: PropTypes.bool,
   direction: PropTypes.string,
   shouldIndicateSwitchState: PropTypes.bool,
-  shouldStrikeThroughDisabledButton: PropTypes.bool
+  shouldStrikeThroughDisabledButton: PropTypes.bool,
+  labelRequiredType: PropTypes.oneOf(['asterisk', 'text']),
+  shouldHighlightRequiredLabel: PropTypes.bool
 };
 LibraryContextProvider.defaultProps = {
   isReducedMotion: getLibraryConfig('isReducedMotion'),
@@ -52,6 +58,8 @@ LibraryContextProvider.defaultProps = {
   coloredTagVariant: 'bold',
   hasTagColorInheritedToText: true,
   shouldIndicateSwitchState: false,
-  shouldStrikeThroughDisabledButton: false
+  shouldStrikeThroughDisabledButton: false,
+  labelRequiredType: 'asterisk',
+  shouldHighlightRequiredLabel: true
 };
 export default LibraryContextProvider;

package/es/Select/GroupSelect.js

@@ -623,7 +623,7 @@ export class GroupSelectComponent extends PureComponent {
     let {
       TextBoxIconProps = {},
       TextBoxProps = {},
-      SuggestionsProps = {}
+      SuggestionsProps
     } = customProps;
     return /*#__PURE__*/React.createElement("div", {
       className: `${style.container} ${style[`box_${size}`]} ${isReadOnly ? style.readonly : ''} ${borderColor === 'transparent' ? style.transparentContainer : ''} ${iconOnHover && (isReadOnly || isDisabled) ? style.iconOnHoverReadonly : iconOnHover && !(isReadOnly || isDisabled) ? style.iconOnHoverStyle : ''}`,

package/es/Select/SelectWithAvatar.js

@@ -169,8 +169,8 @@ class SelectWithAvatarComponent extends SelectComponent {
       needEffect,
       isLoading,
       dataSelectorId,
-      getTargetRef,
-      customProps
+      customProps,
+      getTargetRef
     } = this.props;
     i18nKeys = Object.assign({}, i18nKeys, {
       emptyText: i18nKeys.emptyText || emptyMessage,
@@ -195,7 +195,7 @@ class SelectWithAvatarComponent extends SelectComponent {
     let {
       TextBoxProps,
       DropdownSearchTextBoxProps,
-      SuggestionsProps = {}
+      SuggestionsProps
     } = customProps;
     return /*#__PURE__*/React.createElement("div", {
       className: `${style.wrapper}  ${isDisabled ? style.disabled : ''} ${isReadOnly ? style.readOnly : ''} ${needEffect && !(isDisabled || isReadOnly) ? style.effect : ''} ${className ? className : ''}`,

package/es/Select/SelectWithIcon.js

@@ -357,8 +357,7 @@ class SelectWithIcon extends Component {
       htmlId,
       isLoading,
       dataSelectorId,
-      customProps,
-      customClass
+      customProps
     } = this.props;
     i18nKeys = Object.assign({}, i18nKeys, {
       emptyText: i18nKeys.emptyText || emptyMessage,
@@ -376,11 +375,8 @@ class SelectWithIcon extends Component {
       TextBoxProps = {},
       DropdownSearchTextBoxProps = {},
       TextBoxIconProps = {},
-      ListItemProps = {}
+      ListItemProps
     } = customProps;
-    const {
-      dropBoxClass = ''
-    } = customClass;
     return /*#__PURE__*/React.createElement("div", {
       className: `${style.container} ${style[`box_${size}`]} ${isReadOnly ? style.readonly : ''} ${borderColor === 'transparent' ? style.transparentContainer : ''}`,
       "data-title": isDisabled ? title : null,
@@ -477,10 +473,7 @@ class SelectWithIcon extends Component {
         size: boxSize,
         isPadding: false,
         isResponsivePadding: true,
-        alignBox: "row",
-        customClass: {
-          customDropBox: dropBoxClass
-        }
+        alignBox: "row"
       }, isLoading ? /*#__PURE__*/React.createElement(Container, {
         align: "both",
         className: style.loader

package/es/Select/props/defaultProps.js

@@ -102,8 +102,7 @@ export const SelectWithAvatar_defaultProps = {
   i18nKeys: {},
   customProps: {},
   needEffect: true,
-  isLoading: false,
-  customProps: {}
+  isLoading: false
 };
 export const SelectWithIcon_defaultProps = {
   isReadOnly: false,
@@ -132,6 +131,5 @@ export const SelectWithIcon_defaultProps = {
   isLoading: false,
   isAbsolutePositioningNeeded: true,
   isRestrictScroll: false,
-  customProps: {},
-  customClass: {}
+  customProps: {}
 };

package/es/Select/props/propTypes.js

@@ -186,8 +186,7 @@ export const GroupSelect_propTypes = {
   isDefaultSelectValue: PropTypes.bool,
   customProps: PropTypes.shape({
     TextBoxProps: PropTypes.object,
-    TextBoxIconProps: PropTypes.object,
-    SuggestionsProps: PropTypes.object
+    TextBoxIconProps: PropTypes.object
   }),
   allowValueFallback: PropTypes.bool
 };
@@ -250,10 +249,7 @@ export const SelectWithAvatar_propTypes = { ...Select_propTypes,
   htmlId: PropTypes.string,
   needEffect: PropTypes.bool,
   isLoading: PropTypes.bool,
-  dataSelectorId: PropTypes.string,
-  customProps: PropTypes.shape({
-    SuggestionsProps: PropTypes.object
-  })
+  dataSelectorId: PropTypes.string
 };
 export const SelectWithIcon_propTypes = {
   animationStyle: PropTypes.oneOf(['default', 'bounce']),
@@ -318,10 +314,6 @@ export const SelectWithIcon_propTypes = {
     TextBoxProps: PropTypes.object,
     DropdownSearchTextBoxProps: PropTypes.object,
     SuggestionsProps: PropTypes.object,
-    TextBoxIconProps: PropTypes.object,
-    ListItemProps: PropTypes.object
-  }),
-  customClass: PropTypes.shape({
-    dropBoxClass: PropTypes.string
+    TextBoxIconProps: PropTypes.object
   })
 };

package/es/common/common.module.css

@@ -501,7 +501,7 @@
 }
 .lineClamp {
   composes: wbreak clamp;
-  -webkit-line-clamp: var(--line-clamp, 3);
+  -webkit-line-clamp: var(--line-clamp,2);
 }
 
 .offSelection {

package/es/v1/Label/Label.js

@@ -1,40 +1,91 @@
 import React from 'react';
-import { defaultProps } from "./props/defaultProps";
+import defaultProps from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
-import style from "../../Label/Label.module.css";
-import colors from "../../Label/LabelColors.module.css";
-export default function Label(props) {
+import cssJSLogic from "./css/cssJSLogic";
+import { mergeStyle, renderNode, isRenderable } from '@zohodesk/utils';
+import { withComponentRegistrar } from '@zohodesk/dotkit/es/react/ComponentRegistry';
+import Flex from '@zohodesk/layout/es/Flex/Flex';
+import Typography from "../../Typography/Typography";
+import defaultStyle from "./css/Label_v1.module.css";
+
+const Label = props => {
   const {
-    text,
-    type,
-    palette,
-    size,
-    clipped,
     htmlFor,
-    title,
     onClick,
-    dataId,
-    dataSelectorId,
-    variant,
+    text,
+    customId,
+    testId,
+    tagAttributes,
+    a11yAttributes,
+    customProps,
+    isRequired,
+    requiredType,
+    isClipped,
+    renderRightPlaceholderNode,
+    renderLeftPlaceholderNode,
     customClass,
-    id,
-    a11y = {}
+    size
   } = props;
   const {
-    tabIndex
-  } = a11y;
-  return /*#__PURE__*/React.createElement("label", {
-    className: `${style.label} ${style[type]} ${style[size]} ${colors[palette]} ${style[`font_${variant}`]}
-          ${clipped ? style.dotted : ''} ${onClick ? style.pointer : style.cursor} ${customClass} `,
-    htmlFor: htmlFor,
-    "data-title": title,
-    "data-id": dataId,
-    "data-test-id": dataId,
-    "data-selector-id": dataSelectorId,
-    onClick: onClick,
-    id: id,
-    tabIndex: tabIndex
-  }, text);
-}
+    container: tagAttributes_container,
+    label: tagAttributes_label
+  } = tagAttributes;
+  const {
+    container: a11yAttributes_container,
+    label: a11yAttributes_label
+  } = a11yAttributes;
+  const {
+    container: customProps_container,
+    label: customProps_label
+  } = customProps;
+  const {
+    container: customClass_container
+  } = customClass;
+  const style = mergeStyle(defaultStyle);
+  const {
+    labelClass,
+    requiredClass,
+    asteriskClass
+  } = cssJSLogic({ ...props,
+    style
+  });
+  const a11yAttributes_requiredText = {
+    'aria-hidden': 'true'
+  };
+
+  const renderRequired = () => /*#__PURE__*/React.createElement(Typography, {
+    $ui_tagName: "span",
+    $ui_className: requiredClass,
+    $a11yAttributes_text: a11yAttributes_requiredText
+  }, requiredType === 'text' ? '(Required)' : requiredType === 'asterisk' ? '*' : null);
+
+  return /*#__PURE__*/React.createElement(Flex, { ...customProps_container,
+    $tagAttributes_container: {
+      'data-selector-id': customId,
+      ...tagAttributes_container
+    },
+    $ui_displayMode: "inline",
+    $ui_alignItems: "center",
+    $a11yAttributes_container: a11yAttributes_container,
+    testId: testId,
+    customId: customId,
+    $ui_className: customClass_container
+  }, isRenderable(renderRightPlaceholderNode) ? renderNode(renderRightPlaceholderNode) : null, /*#__PURE__*/React.createElement(Typography, { ...customProps_label,
+    $tagAttributes_text: {
+      htmlFor,
+      onClick,
+      ...tagAttributes_label
+    },
+    $ui_tagName: "label",
+    $ui_className: labelClass,
+    $i18n_dataTitle: text,
+    $a11yAttributes_text: a11yAttributes_label,
+    $ui_size: style[size]
+  }, text, isRequired ? !isClipped && renderRequired() : null), isRequired ? isClipped && renderRequired() : null, isRenderable(renderLeftPlaceholderNode) ? renderNode(renderLeftPlaceholderNode) : null);
+};
+
+export default withComponentRegistrar(Label, {
+  name: 'ZDC_v1_Label'
+});
 Label.defaultProps = defaultProps;
 Label.propTypes = propTypes;

package/es/v1/Label/css/Label_v1.module.css

@@ -0,0 +1,58 @@
+:root {
+    --label_text_color: var(--zdt_v1_label_text);
+    --label_required_color: var(--zdt_v1_label_required_text);
+    --label_disabled_color: var(--zdt_v1_label_disabled_text);
+}
+.label {
+    font-size: var(--zd_font_size14) ;
+    color: var(--label_text_color);
+    cursor: pointer;
+}
+
+.dotted {
+    composes: dotted from '../../../common/common.module.css';
+    max-width: 100% ;
+}
+
+.required {
+    color: var(--label_required_color);
+}
+
+/* .asterisk{
+    height: 16px;
+} */
+.asterisk:after {
+    content: "*";
+    color: var(--label_required_color);
+}
+[dir=ltr] .asterisk:after {
+    margin-left: var(--zd_size2) ;
+}
+[dir=rtl] .asterisk:after {
+    margin-right: var(--zd_size2) ;
+}
+
+.requiredTxt {
+    color: var(--label_required_color);
+    font-size: var(--zd_font_size14) ;
+}
+
+[dir=ltr] .requiredTxt {
+    margin-left: var(--zd_size5) ;
+}
+
+[dir=rtl] .requiredTxt {
+    margin-right: var(--zd_size5) ;
+}
+
+.disabled {
+    color: var(--label_disabled_color);
+}
+
+.medium{
+    font-size: var(--zd_font_size14) ;
+}
+
+.small{
+    font-size: var(--zd_font_size13) ;
+}

package/es/v1/Label/css/cssJSLogic.js

@@ -0,0 +1,35 @@
+import compileClassNames from '@zohodesk/utils/es/compileClassNames';
+export default function cssJSLogic(_ref) {
+  let {
+    style,
+    ...props
+  } = _ref;
+  const {
+    isClipped,
+    shouldHighlightRequired,
+    isRequired,
+    isDisabled,
+    customClass
+  } = props;
+  const {
+    label: customClass_label
+  } = customClass;
+  const labelClass = compileClassNames({
+    [style.label]: true,
+    [style.dotted]: isClipped,
+    [style.required]: isRequired && shouldHighlightRequired,
+    [style.disabled]: isDisabled && !isRequired,
+    [customClass_label]: !!customClass_label
+  });
+  const requiredClass = compileClassNames({
+    [style.requiredTxt]: true
+  });
+  const asteriskClass = compileClassNames({
+    [style.asterisk]: true
+  });
+  return {
+    labelClass,
+    requiredClass,
+    asteriskClass
+  };
+}

package/es/v1/Label/props/defaultProps.js

@@ -1,11 +1,11 @@
-export const defaultProps = {
-  clipped: false,
-  dataId: 'label',
-  palette: 'default',
-  size: 'medium',
-  text: 'Label',
-  type: 'title',
-  variant: 'default',
-  customClass: '',
-  dataSelectorId: 'label'
+export default {
+  customProps: {},
+  tagAttributes: {},
+  a11yAttributes: {},
+  customClass: {},
+  shouldHighlightRequired: true,
+  isDisabled: false,
+  isClipped: false,
+  requiredType: 'asterisk',
+  size: 'medium'
 };

package/es/v1/Label/props/propTypes.js

@@ -1,19 +1,27 @@
 import PropTypes from 'prop-types';
-export const propTypes = {
-  clipped: PropTypes.bool,
-  dataId: PropTypes.string,
-  dataSelectorId: PropTypes.string,
+export default {
   htmlFor: PropTypes.string,
-  onClick: PropTypes.func,
-  palette: PropTypes.oneOf(['default', 'primary', 'secondary', 'danger', 'mandatory', 'disable', 'dark']),
-  size: PropTypes.oneOf(['xsmall', 'small', 'medium', 'large']),
   text: PropTypes.string,
-  title: PropTypes.string,
-  type: PropTypes.oneOf(['title', 'subtitle']),
-  variant: PropTypes.oneOf(['primary', 'default']),
-  customClass: PropTypes.string,
-  a11y: PropTypes.shape({
-    tabIndex: PropTypes.string
+  onClick: PropTypes.func,
+  a11yAttributes: PropTypes.shape({
+    container: PropTypes.object,
+    label: PropTypes.object
+  }),
+  tagAttributes: PropTypes.shape({
+    container: PropTypes.object,
+    label: PropTypes.object
+  }),
+  customProps: PropTypes.shape({
+    container: PropTypes.object,
+    label: PropTypes.object
   }),
-  id: PropTypes.string
+  customId: PropTypes.string,
+  testId: PropTypes.string,
+  customClass: PropTypes.object,
+  requiredType: PropTypes.oneOf(['asterisk', 'text']),
+  shouldHighlightRequired: PropTypes.bool,
+  isClipped: PropTypes.bool,
+  isRequired: PropTypes.bool,
+  isDisabled: PropTypes.bool,
+  size: PropTypes.oneOf(['small', 'medium'])
 };

package/lib/ListItem/ListItem.module.css

@@ -15,9 +15,6 @@
 
   /* listitem tick icon default variables */
   --listitem_tickicon_color: var(--zdt_listitem_default_tickicon);
-
-  /* multiLine value for list item */
-  --listitem_multiline_lineheight: 1.5385;
 }[dir=ltr] .varClass {
   --listitem_avatar_margin: 0 var(--zd_size15) 0 0;
 }[dir=rtl] .varClass {
@@ -79,9 +76,8 @@
 [dir=rtl] .beforeChild{
   margin-left: var(--zd_size10) ;
 }
-/* css:lineheight-validation:ignore */
 .value, .multiLineValue {
-  line-height: var(--listitem_multiline_lineheight);
+  line-height: 1.5385;
 }
 .multiLineValue,.multiLine{
  composes: lineClamp from '../common/common.module.css';
@@ -127,8 +123,7 @@
 .lhsBox_medium,
 .lhsBox_large{
   composes: varClass;
-  /* --listitem_doubleline_content_height: calc(var(--listitem_font_size) * 2 ); */
-  --listitem_doubleline_content_height: calc((var(--listitem_font_size) * var(--listitem_multiline_lineheight)) * 2 );
+  --listitem_doubleline_content_height: calc(var(--listitem_font_size) * 2 );
   height: 100% ;
   composes: dflex alignVertical from '../common/common.module.css';
 }