@zohodesk/dot 1.0.0-temp-187.18 → 1.0.0-temp-187.20

package/README.md

@@ -2,6 +2,18 @@
 
 In this Library, we Provide Some Basic Components to Build Your Application
 
+# 1.8.5
+
+- **RadioField**
+  - Focus using ref not working - Issue fixed
+
+# 1.8.4
+
+- **ValidationMessage**
+  - `renderLeftChildren`, `renderRightChildren`,`a11yAttributes`,`alignChildren`, `tagAttributes` & `id` prop supports added.
+  - Wrapper _Flex_ support ,`customProps` prop supports added.
+  - a11y prop removed
+
 # 1.8.3
 
 - **RadioField**

package/es/form/fields/RadioField/RadioField.js

@@ -15,13 +15,13 @@ import style from "../Fields.module.css";
 export default class RadioField extends PureComponent {
   constructor(props) {
     super(props);
+    this.handleChange = this.handleChange.bind(this);
+    this.updateData = this.updateData.bind(this);
+    this.handleFocus = this.handleFocus.bind(this);
     this.data = {
       radios: {},
       focus: this.handleFocus
     };
-    this.handleChange = this.handleChange.bind(this);
-    this.updateData = this.updateData.bind(this);
-    this.handleFocus = this.handleFocus.bind(this);
   }
 
   componentDidMount() {

package/es/form/fields/ValidationMessage/ValidationMessage.js

@@ -1,11 +1,20 @@
 import React from 'react';
 import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
+import Flex from '@zohodesk/layout/es/Flex/Flex';
+import { renderNode, isRenderable } from '@zohodesk/utils';
 import Label from '@zohodesk/components/es/Label/Label';
 import colors from '@zohodesk/components/es/Label/LabelColors.module.css';
-import style from "./ValidationMessage.module.css";
 import { Icon } from '@zohodesk/icons';
+import { DUMMY_OBJECT } from '@zohodesk/components/es/utils/Common';
+import style from "./ValidationMessage.module.css";
 export default class ValidationMessage extends React.Component {
+  constructor(props) {
+    super(props);
+    this.a11yMerged = {};
+    this.tagMerged = {};
+  }
+
   render() {
     let {
       palette,
@@ -16,21 +25,52 @@ export default class ValidationMessage extends React.Component {
       size,
       dataId,
       clipped,
-      a11y,
+      alignChildren,
       tooltip,
-      dataSelectorId
+      dataSelectorId,
+      renderLeftChildren,
+      renderRightChildren,
+      id,
+      customProps,
+      a11yAttributes,
+      tagAttributes,
+      customClass
     } = this.props;
-    let {
-      role = 'alert'
-    } = a11y;
-    return /*#__PURE__*/React.createElement("div", {
-      role: role,
-      onClick: onClick,
-      className: `${type === 'primary' ? style.primary : style.secondary}`,
-      "data-id": "errorMsgContainer",
-      "data-test-id": "errorMsgContainer",
-      "data-selector-id": dataSelectorId
-    }, /*#__PURE__*/React.createElement(Label, {
+    const {
+      wrapper: wrapperProps
+    } = customProps || DUMMY_OBJECT;
+    const {
+      label: customLabelClass = '',
+      wrapper: customWrapperClass = ''
+    } = customClass || DUMMY_OBJECT;
+    const {
+      wrapper: wrapperA11y
+    } = a11yAttributes || DUMMY_OBJECT;
+    const {
+      wrapper: wrapperTagAttr
+    } = tagAttributes || DUMMY_OBJECT;
+    const isLeftChildrenRenderable = isRenderable(renderLeftChildren);
+    const isRightChildrenRenderable = isRenderable(renderRightChildren);
+    this.a11yMerged = {
+      wrapper: { ...wrapperA11y,
+        role: 'alert'
+      }
+    };
+    this.tagMerged = {
+      wrapper: { ...wrapperTagAttr,
+        'data-selector-id': dataSelectorId
+      }
+    };
+    return /*#__PURE__*/React.createElement(Flex, { ...wrapperProps,
+      $ui_alignItems: alignChildren,
+      $ui_displayMode: isRightChildrenRenderable || isLeftChildrenRenderable ? 'flex' : null,
+      $event_onClick: onClick,
+      testId: "errorMsgContainer",
+      customId: "errorMsgContainer",
+      $ui_className: `${type === 'primary' ? style.primary : style.secondary} ${customWrapperClass}`,
+      $a11yAttributes_container: this.a11yMerged.wrapper,
+      $tagAttributes_container: this.tagMerged.wrapper
+    }, renderNode(renderLeftChildren), /*#__PURE__*/React.createElement(Label, {
       text: text,
       htmlFor: htmlFor,
       palette: palette,
@@ -38,14 +78,15 @@ export default class ValidationMessage extends React.Component {
       dataId: dataId,
       clipped: clipped,
       title: clipped ? text : '',
-      customClass: style.lable
+      customClass: `${style.lable} ${customLabelClass}`,
+      id: id
     }), tooltip ? /*#__PURE__*/React.createElement("span", {
       className: `${style.icon} ${colors[palette]}`,
       "data-title": tooltip
     }, /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-information57",
       size: "14"
-    })) : null);
+    })) : null, renderNode(renderRightChildren));
   }
 
 }

package/es/form/fields/ValidationMessage/__tests__/__snapshots__/ValidationMessage.spec.js.snap

@@ -3,7 +3,7 @@
 exports[`ValidationMessage rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="primary"
+    class="primary "
     data-id="errorMsgContainer"
     data-selector-id="validationMessage"
     data-test-id="errorMsgContainer"
@@ -11,7 +11,7 @@ exports[`ValidationMessage rendering the defult props 1`] = `
   >
     <label
       class="label title xsmall mandatory font_default
-           cursor lable "
+           cursor lable  "
       data-id="label"
       data-selector-id="label"
       data-test-id="label"

package/es/form/fields/ValidationMessage/props/defaultProps.js

@@ -3,5 +3,6 @@ export const defaultProps = {
   size: 'xsmall',
   type: 'primary',
   a11y: {},
-  dataSelectorId: 'validationMessage'
+  dataSelectorId: 'validationMessage',
+  alignChildren: 'start'
 };

package/es/form/fields/ValidationMessage/props/propTypes.js

@@ -6,11 +6,25 @@ export const propTypes = {
   size: PropTypes.oneOf(['xsmall', 'small', 'medium', 'large']),
   text: PropTypes.string,
   type: PropTypes.oneOf(['primary', 'secondary']),
-  a11y: PropTypes.shape({
-    role: PropTypes.string
-  }),
   tooltip: PropTypes.string,
   htmlFor: PropTypes.string,
   dataId: PropTypes.string,
-  dataSelectorId: PropTypes.string
+  dataSelectorId: PropTypes.string,
+  renderLeftChildren: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+  renderRightChildren: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+  id: PropTypes.string,
+  alignChildren: PropTypes.oneOf(['start', 'center', 'end', 'baseline']),
+  customProps: PropTypes.shape({
+    wrapper: PropTypes.object
+  }),
+  tagAttributes: PropTypes.shape({
+    wrapper: PropTypes.object
+  }),
+  a11yAttributes: PropTypes.shape({
+    wrapper: PropTypes.object
+  }),
+  customClass: PropTypes.shape({
+    label: PropTypes.string,
+    wrapper: PropTypes.string
+  })
 };

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

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

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

@@ -1,9 +1,16 @@
+.varClass {
+  --statuslistitem_multiline_lineheight: 1.5385;
+  --statuslistitem_font_size: var(--zd_font_size13);
+  --statuslistitem_min_height: var(--zd_size35);
+}
+
 .list {
+  composes: varClass;
   color: var(--zdt_statuslistitem_list_text);
-  font-size: var(--zd_font_size13) ;
+  font-size: var(--statuslistitem_font_size);
   position: relative;
   list-style: none;
-  min-height: var(--zd_size35) ;
+  min-height: var(--statuslistitem_min_height);
   cursor: pointer;
 }
 [dir=ltr] .withBorder {
@@ -22,7 +29,7 @@
   padding: var(--zd_size7) var(--zd_size20) ;
 }
 .large {
-  height: var(--zd_size48) ;
+  --statuslistitem_min_height: var(--zd_size48);
 }
 [dir=ltr] .large {
   padding: var(--zd_size10) var(--zd_size3) var(--zd_size10) var(--zd_size25) ;
@@ -87,28 +94,41 @@
 [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 {
+.statusType{
+  position: relative;
+  composes: dflex alignVertical alignHorizontal from '~@zohodesk/components/es/common/common.module.css';
+  align-self: flex-start;
+  min-height: calc(var(--statuslistitem_font_size) * var(--statuslistitem_multiline_lineheight));
+  min-width: var(--zd_size20) ;
+}
+.statusType::after{
+  content: '';
   --status_listitem_bullet_min_height: var(--zd_size8);
   --status_listitem_bullet_min_width: var(--zd_size8);
-  min-height: var(--status_listitem_bullet_min_height);
-  min-width: var(--status_listitem_bullet_min_width);
-  width: var(--zd_size8) ;
-  height: var(--zd_size8) ;
+  height: var(--status_listitem_bullet_min_height);
+  width: var(--status_listitem_bullet_min_width);
+  /* css:theme-validation:ignore */
   border-radius: 50%;
+  background-color: var(--zdt_statuslistitem_black_bg);
 }
-[dir=ltr] .statusType {
-  margin-right: var(--zd_size13) ;
+[dir=ltr] .statusType::after{
+  margin-right: var(--zd_size12) ;
 }
-[dir=rtl] .statusType {
-  margin-left: var(--zd_size13) ;
+[dir=rtl] .statusType::after{
+  margin-left: var(--zd_size12) ;
 }
-.black {
+
+.black.statusType::after {
   background-color: var(--zdt_statuslistitem_black_bg);
 }
-.orange {
+.orange.statusType::after {
   background-color: var(--zdt_statuslistitem_orange_bg);
 }
-.green {
+.green.statusType::after {
   background-color: var(--zdt_statuslistitem_green_bg);
-}
+}

package/lib/form/fields/RadioField/RadioField.js

@@ -70,13 +70,13 @@ var RadioField = /*#__PURE__*/function (_PureComponent) {
     _classCallCheck(this, RadioField);
 
     _this = _super.call(this, props);
+    _this.handleChange = _this.handleChange.bind(_assertThisInitialized(_this));
+    _this.updateData = _this.updateData.bind(_assertThisInitialized(_this));
+    _this.handleFocus = _this.handleFocus.bind(_assertThisInitialized(_this));
     _this.data = {
       radios: {},
       focus: _this.handleFocus
     };
-    _this.handleChange = _this.handleChange.bind(_assertThisInitialized(_this));
-    _this.updateData = _this.updateData.bind(_assertThisInitialized(_this));
-    _this.handleFocus = _this.handleFocus.bind(_assertThisInitialized(_this));
     return _this;
   }
 

package/lib/form/fields/ValidationMessage/ValidationMessage.js

@@ -13,16 +13,30 @@ var _defaultProps = require("./props/defaultProps");
 
 var _propTypes = require("./props/propTypes");
 
+var _Flex = _interopRequireDefault(require("@zohodesk/layout/es/Flex/Flex"));
+
+var _utils = require("@zohodesk/utils");
+
 var _Label = _interopRequireDefault(require("@zohodesk/components/es/Label/Label"));
 
 var _LabelColorsModule = _interopRequireDefault(require("@zohodesk/components/es/Label/LabelColors.module.css"));
 
-var _ValidationMessageModule = _interopRequireDefault(require("./ValidationMessage.module.css"));
-
 var _icons = require("@zohodesk/icons");
 
+var _Common = require("@zohodesk/components/es/utils/Common");
+
+var _ValidationMessageModule = _interopRequireDefault(require("./ValidationMessage.module.css"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+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); }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
@@ -48,10 +62,15 @@ var ValidationMessage = /*#__PURE__*/function (_React$Component) {
 
   var _super = _createSuper(ValidationMessage);
 
-  function ValidationMessage() {
+  function ValidationMessage(props) {
+    var _this;
+
     _classCallCheck(this, ValidationMessage);
 
-    return _super.apply(this, arguments);
+    _this = _super.call(this, props);
+    _this.a11yMerged = {};
+    _this.tagMerged = {};
+    return _this;
   }
 
   _createClass(ValidationMessage, [{
@@ -66,19 +85,54 @@ var ValidationMessage = /*#__PURE__*/function (_React$Component) {
           size = _this$props.size,
           dataId = _this$props.dataId,
           clipped = _this$props.clipped,
-          a11y = _this$props.a11y,
+          alignChildren = _this$props.alignChildren,
           tooltip = _this$props.tooltip,
-          dataSelectorId = _this$props.dataSelectorId;
-      var _a11y$role = a11y.role,
-          role = _a11y$role === void 0 ? 'alert' : _a11y$role;
-      return /*#__PURE__*/_react["default"].createElement("div", {
-        role: role,
-        onClick: onClick,
-        className: "".concat(type === 'primary' ? _ValidationMessageModule["default"].primary : _ValidationMessageModule["default"].secondary),
-        "data-id": "errorMsgContainer",
-        "data-test-id": "errorMsgContainer",
-        "data-selector-id": dataSelectorId
-      }, /*#__PURE__*/_react["default"].createElement(_Label["default"], {
+          dataSelectorId = _this$props.dataSelectorId,
+          renderLeftChildren = _this$props.renderLeftChildren,
+          renderRightChildren = _this$props.renderRightChildren,
+          id = _this$props.id,
+          customProps = _this$props.customProps,
+          a11yAttributes = _this$props.a11yAttributes,
+          tagAttributes = _this$props.tagAttributes,
+          customClass = _this$props.customClass;
+
+      var _ref = customProps || _Common.DUMMY_OBJECT,
+          wrapperProps = _ref.wrapper;
+
+      var _ref2 = customClass || _Common.DUMMY_OBJECT,
+          _ref2$label = _ref2.label,
+          customLabelClass = _ref2$label === void 0 ? '' : _ref2$label,
+          _ref2$wrapper = _ref2.wrapper,
+          customWrapperClass = _ref2$wrapper === void 0 ? '' : _ref2$wrapper;
+
+      var _ref3 = a11yAttributes || _Common.DUMMY_OBJECT,
+          wrapperA11y = _ref3.wrapper;
+
+      var _ref4 = tagAttributes || _Common.DUMMY_OBJECT,
+          wrapperTagAttr = _ref4.wrapper;
+
+      var isLeftChildrenRenderable = (0, _utils.isRenderable)(renderLeftChildren);
+      var isRightChildrenRenderable = (0, _utils.isRenderable)(renderRightChildren);
+      this.a11yMerged = {
+        wrapper: _objectSpread(_objectSpread({}, wrapperA11y), {}, {
+          role: 'alert'
+        })
+      };
+      this.tagMerged = {
+        wrapper: _objectSpread(_objectSpread({}, wrapperTagAttr), {}, {
+          'data-selector-id': dataSelectorId
+        })
+      };
+      return /*#__PURE__*/_react["default"].createElement(_Flex["default"], _extends({}, wrapperProps, {
+        $ui_alignItems: alignChildren,
+        $ui_displayMode: isRightChildrenRenderable || isLeftChildrenRenderable ? 'flex' : null,
+        $event_onClick: onClick,
+        testId: "errorMsgContainer",
+        customId: "errorMsgContainer",
+        $ui_className: "".concat(type === 'primary' ? _ValidationMessageModule["default"].primary : _ValidationMessageModule["default"].secondary, " ").concat(customWrapperClass),
+        $a11yAttributes_container: this.a11yMerged.wrapper,
+        $tagAttributes_container: this.tagMerged.wrapper
+      }), (0, _utils.renderNode)(renderLeftChildren), /*#__PURE__*/_react["default"].createElement(_Label["default"], {
         text: text,
         htmlFor: htmlFor,
         palette: palette,
@@ -86,14 +140,15 @@ var ValidationMessage = /*#__PURE__*/function (_React$Component) {
         dataId: dataId,
         clipped: clipped,
         title: clipped ? text : '',
-        customClass: _ValidationMessageModule["default"].lable
+        customClass: "".concat(_ValidationMessageModule["default"].lable, " ").concat(customLabelClass),
+        id: id
       }), tooltip ? /*#__PURE__*/_react["default"].createElement("span", {
         className: "".concat(_ValidationMessageModule["default"].icon, " ").concat(_LabelColorsModule["default"][palette]),
         "data-title": tooltip
       }, /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
         name: "ZD-information57",
         size: "14"
-      })) : null);
+      })) : null, (0, _utils.renderNode)(renderRightChildren));
     }
   }]);
 

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

@@ -3,7 +3,7 @@
 exports[`ValidationMessage rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="primary"
+    class="primary "
     data-id="errorMsgContainer"
     data-selector-id="validationMessage"
     data-test-id="errorMsgContainer"
@@ -11,7 +11,7 @@ exports[`ValidationMessage rendering the defult props 1`] = `
   >
     <label
       class="label title xsmall mandatory font_default
-           cursor lable "
+           cursor lable  "
       data-id="label"
       data-selector-id="label"
       data-test-id="label"

package/lib/form/fields/ValidationMessage/props/defaultProps.js

@@ -9,6 +9,7 @@ var defaultProps = {
   size: 'xsmall',
   type: 'primary',
   a11y: {},
-  dataSelectorId: 'validationMessage'
+  dataSelectorId: 'validationMessage',
+  alignChildren: 'start'
 };
 exports.defaultProps = defaultProps;

package/lib/form/fields/ValidationMessage/props/propTypes.js

@@ -16,12 +16,26 @@ var propTypes = {
   size: _propTypes["default"].oneOf(['xsmall', 'small', 'medium', 'large']),
   text: _propTypes["default"].string,
   type: _propTypes["default"].oneOf(['primary', 'secondary']),
-  a11y: _propTypes["default"].shape({
-    role: _propTypes["default"].string
-  }),
   tooltip: _propTypes["default"].string,
   htmlFor: _propTypes["default"].string,
   dataId: _propTypes["default"].string,
-  dataSelectorId: _propTypes["default"].string
+  dataSelectorId: _propTypes["default"].string,
+  renderLeftChildren: _propTypes["default"].oneOfType([_propTypes["default"].node, _propTypes["default"].func]),
+  renderRightChildren: _propTypes["default"].oneOfType([_propTypes["default"].node, _propTypes["default"].func]),
+  id: _propTypes["default"].string,
+  alignChildren: _propTypes["default"].oneOf(['start', 'center', 'end', 'baseline']),
+  customProps: _propTypes["default"].shape({
+    wrapper: _propTypes["default"].object
+  }),
+  tagAttributes: _propTypes["default"].shape({
+    wrapper: _propTypes["default"].object
+  }),
+  a11yAttributes: _propTypes["default"].shape({
+    wrapper: _propTypes["default"].object
+  }),
+  customClass: _propTypes["default"].shape({
+    label: _propTypes["default"].string,
+    wrapper: _propTypes["default"].string
+  })
 };
 exports.propTypes = propTypes;

package/lib/list/status/StatusListItem/StatusListItem.js

@@ -135,7 +135,7 @@ var StatusListItem = /*#__PURE__*/function (_React$Component) {
         "aria-label": ariaLabel,
         "data-a11y-inset-focus": insetFocus,
         isCover: false,
-        align: "baseline",
+        align: "center",
         alignBox: "row",
         className: "".concat(_StatusListItemModule["default"].list, " ").concat(_StatusListItemModule["default"][size], " ").concat(_StatusListItemModule["default"][palette], " ").concat(active ? _StatusListItemModule["default"].active : highlight && !isDisabled ? _StatusListItemModule["default"].hover : '', " ").concat(autoHover && !isDisabled ? _StatusListItemModule["default"].effect : '', " ").concat(needTick ? _StatusListItemModule["default"].withTick : '', " ").concat(isDisabled ? (0, _CssProvider["default"])('isDisable') : '', " ").concat(needBorder ? _StatusListItemModule["default"].withBorder : '', " ").concat(customClass),
         dataId: String(value).replace("'", '_'),
@@ -146,6 +146,8 @@ var StatusListItem = /*#__PURE__*/function (_React$Component) {
         "data-title": isDisabled ? disableTitle : null,
         tabindex: isDisabled ? '-1' : '0'
       }, options, a11y), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+        className: _StatusListItemModule["default"].contentWrapper
+      }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         className: "".concat(_StatusListItemModule["default"].statusType, " ").concat(_StatusListItemModule["default"][bulletColor])
       }), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         flexible: true,
@@ -163,7 +165,7 @@ var StatusListItem = /*#__PURE__*/function (_React$Component) {
       }, /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
         name: "ZD-ticknew",
         size: "8"
-      })) : null);
+      })) : null));
     }
   }]);
 

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

@@ -1,9 +1,16 @@
+.varClass {
+  --statuslistitem_multiline_lineheight: 1.5385;
+  --statuslistitem_font_size: var(--zd_font_size13);
+  --statuslistitem_min_height: var(--zd_size35);
+}
+
 .list {
+  composes: varClass;
   color: var(--zdt_statuslistitem_list_text);
-  font-size: var(--zd_font_size13) ;
+  font-size: var(--statuslistitem_font_size);
   position: relative;
   list-style: none;
-  min-height: var(--zd_size35) ;
+  min-height: var(--statuslistitem_min_height);
   cursor: pointer;
 }
 [dir=ltr] .withBorder {
@@ -22,7 +29,7 @@
   padding: var(--zd_size7) var(--zd_size20) ;
 }
 .large {
-  height: var(--zd_size48) ;
+  --statuslistitem_min_height: var(--zd_size48);
 }
 [dir=ltr] .large {
   padding: var(--zd_size10) var(--zd_size3) var(--zd_size10) var(--zd_size25) ;
@@ -87,28 +94,41 @@
 [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 {
+.statusType{
+  position: relative;
+  composes: dflex alignVertical alignHorizontal from '~@zohodesk/components/es/common/common.module.css';
+  align-self: flex-start;
+  min-height: calc(var(--statuslistitem_font_size) * var(--statuslistitem_multiline_lineheight));
+  min-width: var(--zd_size20) ;
+}
+.statusType::after{
+  content: '';
   --status_listitem_bullet_min_height: var(--zd_size8);
   --status_listitem_bullet_min_width: var(--zd_size8);
-  min-height: var(--status_listitem_bullet_min_height);
-  min-width: var(--status_listitem_bullet_min_width);
-  width: var(--zd_size8) ;
-  height: var(--zd_size8) ;
+  height: var(--status_listitem_bullet_min_height);
+  width: var(--status_listitem_bullet_min_width);
+  /* css:theme-validation:ignore */
   border-radius: 50%;
+  background-color: var(--zdt_statuslistitem_black_bg);
 }
-[dir=ltr] .statusType {
-  margin-right: var(--zd_size13) ;
+[dir=ltr] .statusType::after{
+  margin-right: var(--zd_size12) ;
 }
-[dir=rtl] .statusType {
-  margin-left: var(--zd_size13) ;
+[dir=rtl] .statusType::after{
+  margin-left: var(--zd_size12) ;
 }
-.black {
+
+.black.statusType::after {
   background-color: var(--zdt_statuslistitem_black_bg);
 }
-.orange {
+.orange.statusType::after {
   background-color: var(--zdt_statuslistitem_orange_bg);
 }
-.green {
+.green.statusType::after {
   background-color: var(--zdt_statuslistitem_green_bg);
-}
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/dot",
-  "version": "1.0.0-temp-187.18",
+  "version": "1.0.0-temp-187.20",
   "main": "lib/index",
   "module": "es/index.js",
   "private": false,
@@ -83,13 +83,13 @@
     "@zohodesk/virtualizer": "1.0.13",
     "react-sortable-hoc": "^0.8.3",
     "velocity-react": "1.4.3",
-    "@zohodesk/dotkit": "1.0.5",
+    "@zohodesk/dotkit": "1.0.7",
     "@zohodesk/react-cli": "1.1.27"
   },
   "peerDependencies": {
     "velocity-react": "1.4.3",
     "@zohodesk/variables": "1.2.0",
-    "@zohodesk/components": "1.5.6",
+    "@zohodesk/components": "1.5.8",
     "@zohodesk/icons": "1.1.6",
     "@zohodesk/svg": "1.2.6",
     "@zohodesk/virtualizer": "1.0.13",