@zohodesk/dot 1.9.2 → 1.9.4

package/es/layout/SubtabLayout/SubtabLayout.js

@@ -1,3 +1,5 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 import React from 'react';
 import { SubtabHeader_propTypes, SubtabFooter_propTypes, SubtabContent_propTypes, SubtabLayout_propTypes } from "./props/propTypes";
 import { SubtabHeader_defaultProps, SubtabFooter_defaultProps, SubtabContent_defaultProps, SubtabLayout_defaultProps } from "./props/defaultProps";
@@ -122,15 +124,15 @@ export default class SubtabLayout extends React.Component {
       children,
       dataId
     } = this.props;
-    return /*#__PURE__*/React.createElement(Card, {
+    return /*#__PURE__*/React.createElement(Card, _extends({
       isScrollAttribute: true,
-      dataId: dataId,
-      ...this.props,
+      dataId: dataId
+    }, this.props, {
       childTypes: {
         cardHeader: SubtabHeader,
         cardContent: SubtabContent
       }
-    }, children);
+    }), children);
   }
 
 }

package/es/list/DepartmentDropDown/DepartmentDropDown.js

@@ -1,3 +1,5 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 import React, { Component } from 'react';
 import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
@@ -48,44 +50,49 @@ class DepartmentDropDown extends Component {
       onSearch,
       needSearchFetching,
       searchStr,
-      i18nKeys
+      i18nKeys,
+      customProps
     } = this.props;
+    const {
+      ToggleDropDownProps = {}
+    } = customProps;
     let {
       title = 'Move Department',
       searchEmptyText = 'No results found',
       searchErrorText = 'No results',
       placeholder = 'Search Department'
     } = i18nKeys;
-    return /*#__PURE__*/React.createElement(ToggleDropDown, {
+    return /*#__PURE__*/React.createElement(ToggleDropDown, _extends({
+      keyName: "name",
+      idName: "id",
+      isArrow: false,
+      boxSize: "small",
+      isPadding: false,
+      isNeedEffect: false,
+      isSearch: departmentList.length > 5 || searchStr.length !== 0
+    }, ToggleDropDownProps, {
       title: title,
       options: departmentList,
       value: /*#__PURE__*/React.createElement(DepartmentText, {
         text: departmentName,
         dataTitle: departmentName
       }),
-      keyName: "name",
-      idName: "id",
       onClick: this.onMoveDepartment,
-      isArrow: false,
       isEditable: isEditable,
       onSelectLabel: onSelectLabel,
       isPopupActive: isPopupActive,
       needExternalPopupState: true,
-      isSearch: departmentList.length > 5 || searchStr.length !== 0,
-      boxSize: "small",
       dataId: dataId,
       isDataLoaded: !isFetching,
-      isPadding: false,
       searchErrorText: searchErrorText,
       searchEmptyHint: searchEmptyText,
-      isNeedEffect: false,
       className: style.departmentBox,
       placeHolderText: placeholder,
       getNextOptions: getNextOptions,
       isNextOptions: isNextOptions,
       onSearch: onSearch,
       needSearchFetching: needSearchFetching
-    });
+    }));
   }
 
 }

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

@@ -3,5 +3,6 @@ export const defaultProps = {
   isPopupActive: true,
   isNextOptions: false,
   searchStr: '',
-  i18nKeys: {}
+  i18nKeys: {},
+  customProps: {}
 };

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

@@ -20,5 +20,8 @@ export const propTypes = {
     searchEmptyText: PropTypes.string,
     searchErrorText: PropTypes.string,
     placeholder: PropTypes.string
+  }),
+  customProps: PropTypes.shape({
+    ToggleDropDownProps: PropTypes.object
   })
 };

package/es/list/GridStencils/GridStencils.module.css

@@ -55,14 +55,14 @@
   -webkit-animation-duration: var(--zd_transition10);
   -webkit-animation-fill-mode: forwards;
   -webkit-animation-iteration-count: infinite;
-  -webkit-animation-name: placeHolderShimmer;
+  -webkit-animation-name:  placeHolderShimmer-ltr ;
   -webkit-animation-timing-function: linear;
 }
 [dir=rtl] .stenListBAr {
   -webkit-animation-duration: var(--zd_transition10);
   -webkit-animation-fill-mode: forwards;
   -webkit-animation-iteration-count: infinite;
-  -webkit-animation-name: placeHolderShimmer;
+  -webkit-animation-name:  placeHolderShimmer-rtl ;
   -webkit-animation-timing-function: linear;
 }
 .stenListBAr {
@@ -74,17 +74,17 @@
   -webkit-animation-duration: var(--zd_transition10);
   -webkit-animation-fill-mode: forwards;
   -webkit-animation-iteration-count: infinite;
-  -webkit-animation-name: placeHolderShimmer;
+  -webkit-animation-name:  placeHolderShimmer-ltr ;
   -webkit-animation-timing-function: linear;
 }
 [dir=rtl] .stenListBAr {
   -webkit-animation-duration: var(--zd_transition10);
   -webkit-animation-fill-mode: forwards;
   -webkit-animation-iteration-count: infinite;
-  -webkit-animation-name: placeHolderShimmer;
+  -webkit-animation-name:  placeHolderShimmer-rtl ;
   -webkit-animation-timing-function: linear;
 }
-@keyframes placeHolderShimmer {
+@keyframes placeHolderShimmer-ltr {
   0% {
     background-position: -468px 0;
   }
@@ -93,6 +93,15 @@
     background-position: 468px 0;
   }
 }
+@keyframes placeHolderShimmer-rtl {
+  0% {
+    background-position: right -468px top 0;
+  }
+
+  100% {
+    background-position: right 468px top 0;
+  }
+}
 .threeLayout .stenLoadbody::before {
   transform: scale(0.8);
 }

package/es/list/ListLayout/ListLayout.js

@@ -1,3 +1,5 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 import React, { Component } from 'react';
 import { ListLayout_defaultProps } from "./props/defaultProps";
 import { ListLayout_propTypes, Column_propTypes } from "./props/propTypes";
@@ -67,10 +69,9 @@ export class Column extends Component {
       children,
       className
     } = this.props;
-    return /*#__PURE__*/React.createElement(Box, {
-      className: `${className ? className : ''}`,
-      ...this.props
-    }, children);
+    return /*#__PURE__*/React.createElement(Box, _extends({
+      className: `${className ? className : ''}`
+    }, this.props), children);
   }
 
 }

package/es/list/SecondaryText/AccountName.js

@@ -1,3 +1,5 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 /* eslint-disable react/forbid-component-props */
 
 /**** Libraries ****/
@@ -55,16 +57,16 @@ export default class AccountName extends Component {
     }, /*#__PURE__*/React.createElement(Box, {
       className: style.primaryAccountName,
       shrink: true
-    }, isLink ? /*#__PURE__*/React.createElement(Link, {
+    }, isLink ? /*#__PURE__*/React.createElement(Link, _extends({
       href: href,
       urlName: urlName,
       urlData: urlData,
       onClick: onClick,
       dataId: `${dataId}_link`,
-      className: style.link,
-      ...LinkProps,
+      className: style.link
+    }, LinkProps, {
       ariaLabel: `Account Name ${text}`
-    }, /*#__PURE__*/React.createElement(Typography, {
+    }), /*#__PURE__*/React.createElement(Typography, {
       $tagAttributes_text: TextProps,
       $ui_size: "12",
       $flag_dotted: true,

package/es/list/SecondaryText/ContactName.js

@@ -1,3 +1,5 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 import React, { Component } from 'react';
 import { ContactName_defaultProps } from "./props/defaultProps";
 import { ContactName_propTypes } from "./props/propTypes";
@@ -56,17 +58,17 @@ export default class ContactName extends Component {
       iconClass: style.icon
     })), /*#__PURE__*/React.createElement(Box, {
       flexible: true
-    }, isLink ? /*#__PURE__*/React.createElement(Link, {
+    }, isLink ? /*#__PURE__*/React.createElement(Link, _extends({
       urlName: urlName,
       href: href,
       urlData: urlData,
       onClick: onClick,
       title: dataTitle,
       dataId: `${dataId}_link`,
-      className: style.link,
-      ...LinkProps,
+      className: style.link
+    }, LinkProps, {
       ariaLabel: `Contact Name ${text}`
-    }, /*#__PURE__*/React.createElement(Typography, {
+    }), /*#__PURE__*/React.createElement(Typography, {
       $flag_dotted: true,
       $ui_size: "12",
       $ui_weight: fontWeight,

package/es/list/SecondaryText/Email.js

@@ -1,3 +1,5 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 /* eslint-disable react/forbid-component-props */
 
 /**** Libraries ****/
@@ -32,15 +34,14 @@ export default class Email extends Component {
       LinkProps = {},
       TextProps = {}
     } = customProps;
-    return /*#__PURE__*/React.createElement(React.Fragment, null, isLink ? /*#__PURE__*/React.createElement(Link, {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, isLink ? /*#__PURE__*/React.createElement(Link, _extends({
       href: href,
       title: title,
       urlData: urlData,
       urlName: urlName,
       target: target,
-      className: style.link,
-      ...LinkProps
-    }, /*#__PURE__*/React.createElement(Typography, {
+      className: style.link
+    }, LinkProps), /*#__PURE__*/React.createElement(Typography, {
       $flag_dotted: true,
       $ui_size: "12",
       $ui_weight: fontWeight,

package/es/list/SecondaryText/PhoneNumber.js

@@ -1,3 +1,5 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 /* eslint-disable react/forbid-component-props */
 
 /**** Libraries ****/
@@ -34,7 +36,7 @@ export default class PhoneNumber extends Component {
       LinkProps = {},
       TextProps = {}
     } = customProps;
-    return /*#__PURE__*/React.createElement(React.Fragment, null, isLink ? /*#__PURE__*/React.createElement(Link, {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, isLink ? /*#__PURE__*/React.createElement(Link, _extends({
       href: href,
       title: title,
       urlData: urlData,
@@ -42,9 +44,8 @@ export default class PhoneNumber extends Component {
       dataId: dataId,
       target: target,
       hasReload: hasReload,
-      className: style.link,
-      ...LinkProps
-    }, /*#__PURE__*/React.createElement(Typography, {
+      className: style.link
+    }, LinkProps), /*#__PURE__*/React.createElement(Typography, {
       $ui_size: "12",
       $flag_dotted: true,
       $ui_className: `${style.phoneNumber} ${style.phonetxt} ${className ? className : ''}`,

package/es/list/SecondaryText/TicketId.js

@@ -1,3 +1,5 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 import React, { Component } from 'react';
 import { TicketId_defaultProps } from "./props/defaultProps";
 import { TicketId_propTypes } from "./props/propTypes";
@@ -30,21 +32,19 @@ export default class TicketId extends Component {
       LinkProps = {},
       TicketIdProps = {}
     } = customProps;
-    return /*#__PURE__*/React.createElement("div", {
+    return /*#__PURE__*/React.createElement("div", _extends({
       className: `${style.ticketId} ${isLink ? style.ticketIdLink : ''} ${className ? className : ''}`,
       "data-id": dataId,
       "data-test-id": dataId,
       "data-title": dataTitle,
-      onClick: !isLink && onClick,
-      ...TicketIdProps
-    }, isLink ? /*#__PURE__*/React.createElement(Link, {
+      onClick: !isLink && onClick
+    }, TicketIdProps), isLink ? /*#__PURE__*/React.createElement(Link, _extends({
       urlName: urlName,
       urlData: urlData,
       href: url,
       target: target,
-      onClick: onClick,
-      ...LinkProps
-    }, /*#__PURE__*/React.createElement(Typography, {
+      onClick: onClick
+    }, LinkProps), /*#__PURE__*/React.createElement(Typography, {
       $ui_highlightConfig: isHighlighted ? highlightData : DUMMY_OBJECT
     }, text)) : text);
   }

package/es/list/Subject/Subject.js

@@ -1,3 +1,5 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 import React, { Component } from 'react';
 import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
@@ -40,18 +42,18 @@ export default class Subject extends Component {
     let linkTagAttributes = {
       'data-title-wrap': whiteSpace
     };
-    return /*#__PURE__*/React.createElement(React.Fragment, null, isLink ? /*#__PURE__*/React.createElement(Link, {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, isLink ? /*#__PURE__*/React.createElement(Link, _extends({
       urlName: urlName,
       href: href,
       urlData: urlData,
       onClick: onClick,
-      target: target,
-      ...LinkProps
-    }, children ? children : /*#__PURE__*/React.createElement(Typography, {
+      target: target
+    }, LinkProps), children ? children : /*#__PURE__*/React.createElement(Typography, {
       $tagAttributes_text: linkTagAttributes,
       $i18n_dataTitle: text,
       $ui_className: `${style.subject} ${whiteSpaceClassMapping[whiteSpace]} ${className} ${style.cursorPointer}`,
       customId: dataId,
+      testId: dataId,
       $flag_dotted: isDotted,
       $ui_weight: fontWeight,
       $ui_highlightConfig: isHighlighted ? highlightData : DUMMY_OBJECT

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

@@ -1,3 +1,5 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 /**** Libraries ****/
 import React from 'react';
 import { defaultProps } from "./props/defaultProps";
@@ -68,7 +70,8 @@ export default class StatusListItem extends React.Component {
       a11y,
       needMultiLineText,
       customClass,
-      children
+      children,
+      lhsAlignContent
     } = this.props;
     let options = {};
     let {
@@ -84,13 +87,13 @@ export default class StatusListItem extends React.Component {
       options.target = `_${target}`;
     }
 
-    return /*#__PURE__*/React.createElement(Container, {
+    return /*#__PURE__*/React.createElement(Container, _extends({
       role: role,
       "aria-selected": ariaSelected,
       "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("'", '_'),
@@ -99,10 +102,11 @@ export default class StatusListItem extends React.Component {
       eleRef: this.getRef,
       tagName: isLink ? 'a' : 'li',
       "data-title": isDisabled ? disableTitle : null,
-      tabindex: isDisabled ? '-1' : '0',
-      ...options,
-      ...a11y
+      tabindex: isDisabled ? '-1' : '0'
+    }, options, a11y), /*#__PURE__*/React.createElement(Box, {
+      className: style.contentWrapper
     }, /*#__PURE__*/React.createElement(Box, {
+      align: lhsAlignContent,
       className: `${style.statusType} ${style[bulletColor]}`
     }), /*#__PURE__*/React.createElement(Box, {
       flexible: true,
@@ -120,7 +124,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: 35px;
+}
+
 .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: 48px;
 }
 [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,39 @@
 [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';
+  min-height: calc(var(--statuslistitem_font_size) * var(--statuslistitem_multiline_lineheight));
+  min-width: var(--zd_size20) ;
+}
+.statusType::after{
+  /* css:validation:ignore */
+  --status_listitem_bullet_size: var(--zd_font_size8);
+
+  content: '';
+  height: var(--status_listitem_bullet_size);
+  width: var(--status_listitem_bullet_size);
   border-radius: 50%;
 }
-[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/list/status/StatusListItem/__tests__/__snapshots__/StatusListItem.spec.js.snap

@@ -3,7 +3,7 @@
 exports[`StatusListItem rendering the defult props 1`] = `
 <DocumentFragment>
   <li
-    class="list medium default     withBorder  flex rowdir baseline"
+    class="list medium default     withBorder  flex rowdir vCenter"
     data-a11y-inset-focus="true"
     data-id="undefined"
     data-selector-id="container"
@@ -11,35 +11,42 @@ exports[`StatusListItem rendering the defult props 1`] = `
     tabindex="0"
   >
     <div
-      class="statusType black shrinkOff"
-      data-id="boxComponent"
-      data-selector-id="box"
-      data-test-id="boxComponent"
-    />
-    <div
-      class="grow basis shrinkOn"
+      class="contentWrapper shrinkOff"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <div
-        class="flex cover rowdir vCenter"
-        data-id="containerComponent"
-        data-selector-id="container"
-        data-test-id="containerComponent"
+        class="statusType black shrinkOff selfStart"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      />
+      <div
+        class="grow basis shrinkOn"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
       >
         <div
-          class="value shrinkOn"
-          data-id="boxComponent"
-          data-selector-id="box"
-          data-test-id="boxComponent"
-        />
-        <div
-          class="shrinkOff"
-          data-id="boxComponent"
-          data-selector-id="box"
-          data-test-id="boxComponent"
-        />
+          class="flex cover rowdir vCenter"
+          data-id="containerComponent"
+          data-selector-id="container"
+          data-test-id="containerComponent"
+        >
+          <div
+            class="value shrinkOn"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          />
+          <div
+            class="shrinkOff"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          />
+        </div>
       </div>
     </div>
   </li>

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

@@ -12,5 +12,6 @@ export const defaultProps = {
   bulletColor: 'black',
   a11y: {},
   needMultiLineText: false,
-  customClass: ''
+  customClass: '',
+  lhsAlignContent: 'start'
 };

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

@@ -27,5 +27,6 @@ export const propTypes = {
     ariaHidden: PropTypes.bool
   }),
   customClass: PropTypes.string,
-  children: PropTypes.node
+  children: PropTypes.node,
+  lhsAlignContent: PropTypes.oneOf(['start', 'center', 'end'])
 };