@zohodesk/components 1.5.5 → 1.5.7

package/README.md

@@ -2,6 +2,22 @@
 
 Dot UI is a customizable React component library built to deliver a clean, accessible, and developer-friendly UI experience. It offers a growing set of reusable components designed to align with modern design systems and streamline application development across projects.
 
+# 1.5.7
+
+- **ListContainer, ListItem, ListItemWithIcon**
+  - `danger` value supported for the **palette** prop.
+
+# 1.5.6
+
+- **ListItemWithRadio, ListItemWithCheckBox**
+  - `needBorder` prop supported
+
+- **ArrowIcon**
+  - Fixes of visible state and color from the container hover
+
+- **AppContainer**  
+  - The --zd-font-family variable now includes an empty string ('') as its fallback font-family value.
+
 # 1.5.5
 
 - **Popup**

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

@@ -183,6 +183,8 @@
 	--zdt_listitem_active_border: var(--zdt_cta_primary_border);
 	--zdt_listitem_primary_bg: var(--dot_listItemActive);
 	--zdt_listitem_secondary_bg: var(--zdtm_cta_primary_bg_default);
+	--zdt_listitem_danger_bg: rgba(255, 107, 107, 0.05);
+	--zdt_listitem_danger_text: hsla(0, 100.00%, calc(70.98% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_listitem_secondary_text: hsla(0, 0.00%, calc(12.94% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	
 	/* ribbon */

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

@@ -183,6 +183,8 @@
 	--zdt_listitem_active_border: var(--zdt_cta_primary_border);
 	--zdt_listitem_primary_bg: var(--dot_listItemActive);
 	--zdt_listitem_secondary_bg: var(--zdtm_cta_primary_bg_default);
+	--zdt_listitem_danger_bg: rgb(253,243,243);
+	--zdt_listitem_danger_text: hsla(0, 71.91%, calc(53.92% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_listitem_secondary_text: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	
 	/* ribbon */

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

@@ -183,6 +183,8 @@
 	--zdt_listitem_active_border: var(--zdt_cta_primary_border);
 	--zdt_listitem_primary_bg: var(--dot_listItemActive);
 	--zdt_listitem_secondary_bg: var(--zdtm_cta_primary_bg_default);
+	--zdt_listitem_danger_bg: rgba(255, 107, 107, 0.05);
+	--zdt_listitem_danger_text: hsla(0, 100.00%, calc(70.98% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_listitem_secondary_text: hsla(0, 0.00%, calc(12.94% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	
 	/* ribbon */

package/es/AppContainer/AppContainer.module.css

@@ -10,7 +10,7 @@
 }
 .container, .container button, .container input, .container textarea ,.container select {
   /* font-family: var(--zd_regular); */
-  font-family: var(--zd-font-family), var(--zd_fallback_font, ZDLato);
+  font-family: var(--zd-font-family, ''), var(--zd_fallback_font, ZDLato);
 }
 .tooltip {
   height: 0 ;

package/es/ListItem/ListItem.module.css

@@ -136,7 +136,7 @@
 .lhsBox_large {
   max-height: calc(var(--listitem_doubleline_content_height) + var(--zd_size15)); /* 15px = listitem min-height - (top + bottom padding) - doubleLine content height */
 }
-.defaultHover, .primaryHover, .secondaryHover, .darkHover {
+.defaultHover, .primaryHover, .dangerHover, .secondaryHover, .darkHover {
   background-color: var(--listitem_highlight_bg_color);
 }
 .activewithBorder {
@@ -155,6 +155,13 @@
 {
   --listitem_bg_color: var(--zdt_listitem_highlight_bg);
 }
+.activedanger,
+.dangerHover,
+.dangerEffect:hover {
+  --listitem_bg_color: var(--zdt_listitem_danger_bg);
+  --listitem_highlight_bg_color: var(--zdt_listitem_danger_bg);
+  --listitem_text_color: var(--zdt_listitem_danger_text)
+}
 .primaryHover,
 .primaryEffect:hover
 /* .primaryEffect:focus */
@@ -177,7 +184,7 @@
   --listitem_bg_color: var(--zdt_listitem_dark_effect_bg);
   --listitem_highlight_bg_color: var(--zdt_listitem_dark_effect_bg);
 }
-.activedefault, .activeprimary, .activesecondary, .activedark {
+.activedefault, .activeprimary, .activedanger, .activesecondary, .activedark {
   background-color: var(--listitem_active_bg_color);
 }
 .activedefault,
@@ -186,6 +193,10 @@
 .activeprimary:hover {
   --listitem_active_bg_color: var(--zdt_listitem_primary_bg);
 }
+.activedanger,
+.activedanger:hover {
+  --listitem_active_bg_color: var(--zdt_listitem_danger_bg);
+}
 .activesecondary {
   --listitem_active_bg_color: var(--zdt_listitem_secondary_bg);
   --listitem_text_color: var(--zdt_listitem_secondary_text);

package/es/ListItem/ListItemWithCheckBox.js

@@ -52,6 +52,7 @@ export default class ListItemWithCheckBox extends React.Component {
       checked,
       autoHover,
       palette,
+      needBorder,
       dataId,
       dataSelectorId,
       title,
@@ -88,6 +89,7 @@ export default class ListItemWithCheckBox extends React.Component {
       isDisabled: isDisabled,
       active: active,
       autoHover: autoHover,
+      needBorder: needBorder,
       customClass: customListItem,
       dataId: `${dataId ? dataId : value}_ListItemWithCheckBox`,
       dataSelectorId: dataSelectorId,

package/es/ListItem/ListItemWithRadio.js

@@ -52,6 +52,7 @@ export default class ListItemWithRadio extends React.Component {
       checked,
       autoHover,
       palette,
+      needBorder,
       id,
       dataId,
       dataSelectorId,
@@ -89,6 +90,7 @@ export default class ListItemWithRadio extends React.Component {
       isDisabled: isDisabled,
       active: active,
       autoHover: autoHover,
+      needBorder: needBorder,
       customClass: customListItem,
       dataId: dataId,
       dataSelectorId: dataSelectorId,

package/es/ListItem/props/defaultProps.js

@@ -56,6 +56,7 @@ export const ListItemWithCheckBoxDefaultProps = {
   autoHover: false,
   checked: false,
   highlight: false,
+  needBorder: true,
   palette: 'default',
   size: 'medium',
   value: 'List',
@@ -91,6 +92,7 @@ export const ListItemWithRadioDefaultProps = {
   autoHover: false,
   checked: false,
   highlight: false,
+  needBorder: true,
   palette: 'default',
   size: 'medium',
   value: 'List',

package/es/ListItem/props/propTypes.js

@@ -17,7 +17,7 @@ export const ListContainer_Props = {
   onClick: PropTypes.func,
   onMouseEnter: PropTypes.func,
   onMouseOver: PropTypes.func,
-  palette: PropTypes.oneOf(['default', 'primary', 'secondary', 'dark']),
+  palette: PropTypes.oneOf(['default', 'primary', 'secondary', 'dark', 'danger']),
   size: PropTypes.oneOf(['small', 'medium', 'large']),
   target: PropTypes.oneOf(['blank', 'self']),
   title: PropTypes.string,
@@ -48,7 +48,7 @@ export const ListItem_Props = {
   needTick: PropTypes.bool,
   onClick: PropTypes.func,
   onMouseEnter: PropTypes.func,
-  palette: PropTypes.oneOf(['default', 'primary', 'secondary', 'dark']),
+  palette: PropTypes.oneOf(['default', 'primary', 'secondary', 'dark', 'danger']),
   size: PropTypes.oneOf(['small', 'medium', 'large']),
   target: PropTypes.oneOf(['blank', 'self']),
   title: PropTypes.string,
@@ -137,6 +137,7 @@ export const ListItemWithCheckBox_Props = {
   title: PropTypes.string,
   value: PropTypes.string,
   secondaryValue: PropTypes.string,
+  needBorder: PropTypes.bool,
   renderValueRightPlaceholderNode: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
   lhsAlignContent: PropTypes.oneOf(['start', 'center', 'end']),
   lhsJustifyContent: PropTypes.oneOf(['start', 'center', 'end']),
@@ -171,7 +172,7 @@ export const ListItemWithIcon_Props = {
   needTick: PropTypes.bool,
   onClick: PropTypes.func,
   onMouseEnter: PropTypes.func,
-  palette: PropTypes.string,
+  palette: PropTypes.oneOf(['default', 'primary', 'secondary', 'dark', 'danger']),
   size: PropTypes.string,
   title: PropTypes.string,
   value: PropTypes.string,
@@ -213,6 +214,7 @@ export const ListItemWithRadio_Props = {
   title: PropTypes.string,
   value: PropTypes.string,
   secondaryValue: PropTypes.string,
+  needBorder: PropTypes.bool,
   renderValueRightPlaceholderNode: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
   lhsAlignContent: PropTypes.oneOf(['start', 'center', 'end']),
   lhsJustifyContent: PropTypes.oneOf(['start', 'center', 'end']),

package/es/shared/ArrowIcon/ArrowIcon.module.css

@@ -13,7 +13,7 @@
   visibility: hidden;
 }
 
-.transparentContainer .rotated,
+.transparentContainer .active,
 .transparentContainer:hover .arrowIcon {
   opacity: 1;
   visibility: visible;
@@ -29,8 +29,7 @@
 
 .rotated,
 .active,
-.arrowContainer:hover .arrowIcon,
-.transparentContainer:hover .arrowIcon {
+.arrowContainer:hover .arrowIcon {
   --local-arrowIcon-color: var(--zdt_arrowicon_hover_icon);
 }
 

package/es/v1/DropBox/DropBoxElement/DropBoxElement.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import useDropboxPosCalc from "../../../DropBox/DropBoxElement/useDropboxPosCalc";
 import cssJSLogic from "../../../DropBox/DropBoxElement/css/cssJSLogic";
-import { positionMapping } from "../../../DropBox/DropBoxPositionMapping.js";
+import { positionMapping } from '@zohodesk/dotkit/es/react/components/Popup/utils/positioning';
 import { DropBoxElementDefaultProps } from "./props/defaultProps";
 import { DropBoxElementPropTypes } from "./props/propTypes";
 import { mergeStyle } from '@zohodesk/utils';

package/lib/AppContainer/AppContainer.module.css

@@ -10,7 +10,7 @@
 }
 .container, .container button, .container input, .container textarea ,.container select {
   /* font-family: var(--zd_regular); */
-  font-family: var(--zd-font-family), var(--zd_fallback_font, ZDLato);
+  font-family: var(--zd-font-family, ''), var(--zd_fallback_font, ZDLato);
 }
 .tooltip {
   height: 0 ;

package/lib/ListItem/ListItem.module.css

@@ -136,7 +136,7 @@
 .lhsBox_large {
   max-height: calc(var(--listitem_doubleline_content_height) + var(--zd_size15)); /* 15px = listitem min-height - (top + bottom padding) - doubleLine content height */
 }
-.defaultHover, .primaryHover, .secondaryHover, .darkHover {
+.defaultHover, .primaryHover, .dangerHover, .secondaryHover, .darkHover {
   background-color: var(--listitem_highlight_bg_color);
 }
 .activewithBorder {
@@ -155,6 +155,13 @@
 {
   --listitem_bg_color: var(--zdt_listitem_highlight_bg);
 }
+.activedanger,
+.dangerHover,
+.dangerEffect:hover {
+  --listitem_bg_color: var(--zdt_listitem_danger_bg);
+  --listitem_highlight_bg_color: var(--zdt_listitem_danger_bg);
+  --listitem_text_color: var(--zdt_listitem_danger_text)
+}
 .primaryHover,
 .primaryEffect:hover
 /* .primaryEffect:focus */
@@ -177,7 +184,7 @@
   --listitem_bg_color: var(--zdt_listitem_dark_effect_bg);
   --listitem_highlight_bg_color: var(--zdt_listitem_dark_effect_bg);
 }
-.activedefault, .activeprimary, .activesecondary, .activedark {
+.activedefault, .activeprimary, .activedanger, .activesecondary, .activedark {
   background-color: var(--listitem_active_bg_color);
 }
 .activedefault,
@@ -186,6 +193,10 @@
 .activeprimary:hover {
   --listitem_active_bg_color: var(--zdt_listitem_primary_bg);
 }
+.activedanger,
+.activedanger:hover {
+  --listitem_active_bg_color: var(--zdt_listitem_danger_bg);
+}
 .activesecondary {
   --listitem_active_bg_color: var(--zdt_listitem_secondary_bg);
   --listitem_text_color: var(--zdt_listitem_secondary_text);

package/lib/ListItem/ListItemWithCheckBox.js

@@ -110,6 +110,7 @@ var ListItemWithCheckBox = /*#__PURE__*/function (_React$Component) {
           checked = _this$props4.checked,
           autoHover = _this$props4.autoHover,
           palette = _this$props4.palette,
+          needBorder = _this$props4.needBorder,
           dataId = _this$props4.dataId,
           dataSelectorId = _this$props4.dataSelectorId,
           title = _this$props4.title,
@@ -148,6 +149,7 @@ var ListItemWithCheckBox = /*#__PURE__*/function (_React$Component) {
         isDisabled: isDisabled,
         active: active,
         autoHover: autoHover,
+        needBorder: needBorder,
         customClass: customListItem,
         dataId: "".concat(dataId ? dataId : value, "_ListItemWithCheckBox"),
         dataSelectorId: dataSelectorId,

package/lib/ListItem/ListItemWithRadio.js

@@ -110,6 +110,7 @@ var ListItemWithRadio = /*#__PURE__*/function (_React$Component) {
           checked = _this$props4.checked,
           autoHover = _this$props4.autoHover,
           palette = _this$props4.palette,
+          needBorder = _this$props4.needBorder,
           id = _this$props4.id,
           dataId = _this$props4.dataId,
           dataSelectorId = _this$props4.dataSelectorId,
@@ -149,6 +150,7 @@ var ListItemWithRadio = /*#__PURE__*/function (_React$Component) {
         isDisabled: isDisabled,
         active: active,
         autoHover: autoHover,
+        needBorder: needBorder,
         customClass: customListItem,
         dataId: dataId,
         dataSelectorId: dataSelectorId,

package/lib/ListItem/props/defaultProps.js

@@ -65,6 +65,7 @@ var ListItemWithCheckBoxDefaultProps = {
   autoHover: false,
   checked: false,
   highlight: false,
+  needBorder: true,
   palette: 'default',
   size: 'medium',
   value: 'List',
@@ -102,6 +103,7 @@ var ListItemWithRadioDefaultProps = {
   autoHover: false,
   checked: false,
   highlight: false,
+  needBorder: true,
   palette: 'default',
   size: 'medium',
   value: 'List',

package/lib/ListItem/props/propTypes.js

@@ -33,7 +33,7 @@ var ListContainer_Props = {
   onClick: _propTypes["default"].func,
   onMouseEnter: _propTypes["default"].func,
   onMouseOver: _propTypes["default"].func,
-  palette: _propTypes["default"].oneOf(['default', 'primary', 'secondary', 'dark']),
+  palette: _propTypes["default"].oneOf(['default', 'primary', 'secondary', 'dark', 'danger']),
   size: _propTypes["default"].oneOf(['small', 'medium', 'large']),
   target: _propTypes["default"].oneOf(['blank', 'self']),
   title: _propTypes["default"].string,
@@ -65,7 +65,7 @@ var ListItem_Props = {
   needTick: _propTypes["default"].bool,
   onClick: _propTypes["default"].func,
   onMouseEnter: _propTypes["default"].func,
-  palette: _propTypes["default"].oneOf(['default', 'primary', 'secondary', 'dark']),
+  palette: _propTypes["default"].oneOf(['default', 'primary', 'secondary', 'dark', 'danger']),
   size: _propTypes["default"].oneOf(['small', 'medium', 'large']),
   target: _propTypes["default"].oneOf(['blank', 'self']),
   title: _propTypes["default"].string,
@@ -127,6 +127,7 @@ var ListItemWithCheckBox_Props = {
   title: _propTypes["default"].string,
   value: _propTypes["default"].string,
   secondaryValue: _propTypes["default"].string,
+  needBorder: _propTypes["default"].bool,
   renderValueRightPlaceholderNode: _propTypes["default"].oneOfType([_propTypes["default"].node, _propTypes["default"].func]),
   lhsAlignContent: _propTypes["default"].oneOf(['start', 'center', 'end']),
   lhsJustifyContent: _propTypes["default"].oneOf(['start', 'center', 'end']),
@@ -162,7 +163,7 @@ var ListItemWithIcon_Props = {
   needTick: _propTypes["default"].bool,
   onClick: _propTypes["default"].func,
   onMouseEnter: _propTypes["default"].func,
-  palette: _propTypes["default"].string,
+  palette: _propTypes["default"].oneOf(['default', 'primary', 'secondary', 'dark', 'danger']),
   size: _propTypes["default"].string,
   title: _propTypes["default"].string,
   value: _propTypes["default"].string,
@@ -205,6 +206,7 @@ var ListItemWithRadio_Props = {
   title: _propTypes["default"].string,
   value: _propTypes["default"].string,
   secondaryValue: _propTypes["default"].string,
+  needBorder: _propTypes["default"].bool,
   renderValueRightPlaceholderNode: _propTypes["default"].oneOfType([_propTypes["default"].node, _propTypes["default"].func]),
   lhsAlignContent: _propTypes["default"].oneOf(['start', 'center', 'end']),
   lhsJustifyContent: _propTypes["default"].oneOf(['start', 'center', 'end']),

package/lib/shared/ArrowIcon/ArrowIcon.module.css

@@ -13,7 +13,7 @@
   visibility: hidden;
 }
 
-.transparentContainer .rotated,
+.transparentContainer .active,
 .transparentContainer:hover .arrowIcon {
   opacity: 1;
   visibility: visible;
@@ -29,8 +29,7 @@
 
 .rotated,
 .active,
-.arrowContainer:hover .arrowIcon,
-.transparentContainer:hover .arrowIcon {
+.arrowContainer:hover .arrowIcon {
   --local-arrowIcon-color: var(--zdt_arrowicon_hover_icon);
 }
 

package/lib/v1/DropBox/DropBoxElement/DropBoxElement.js

@@ -11,7 +11,7 @@ var _useDropboxPosCalc2 = _interopRequireDefault(require("../../../DropBox/DropB
 
 var _cssJSLogic2 = _interopRequireDefault(require("../../../DropBox/DropBoxElement/css/cssJSLogic"));
 
-var _DropBoxPositionMapping = require("../../../DropBox/DropBoxPositionMapping.js");
+var _positioning = require("@zohodesk/dotkit/es/react/components/Popup/utils/positioning");
 
 var _defaultProps = require("./props/defaultProps");
 
@@ -74,13 +74,13 @@ function DropBoxElement(props) {
       ariaMultiselectable = a11y.ariaMultiselectable,
       ariaLabelledby = a11y.ariaLabelledby;
   boxPosition = boxPosition && boxPosition != 'undefined' ? boxPosition : 'bottomCenter';
-  var boxDirection = _DropBoxPositionMapping.positionMapping[boxPosition].direction;
+  var boxDirection = _positioning.positionMapping[boxPosition].direction;
 
   if (isAbsolute) {
-    arrowPosition = arrowPosition ? arrowPosition : _DropBoxPositionMapping.positionMapping[boxPosition].arrowPosition;
-    boxPosition = _DropBoxPositionMapping.positionMapping[boxPosition].positionStyle;
+    arrowPosition = arrowPosition ? arrowPosition : _positioning.positionMapping[boxPosition].arrowPosition;
+    boxPosition = _positioning.positionMapping[boxPosition].positionStyle;
   } else {
-    arrowPosition = _DropBoxPositionMapping.positionMapping[boxPosition].arrowPosition;
+    arrowPosition = _positioning.positionMapping[boxPosition].arrowPosition;
   }
 
   var _useDropboxPosCalc = (0, _useDropboxPosCalc2["default"])(props),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/components",
-  "version": "1.5.5",
+  "version": "1.5.7",
   "main": "es/index.js",
   "module": "es/index.js",
   "private": false,
@@ -80,9 +80,9 @@
     "@zohodesk-private/react-prop-validator": "1.2.3",
     "@zohodesk/a11y": "2.3.8",
     "@zohodesk/docstool": "1.0.0-alpha-2",
-    "@zohodesk/dotkit": "1.0.5",
+    "@zohodesk/dotkit": "1.0.6",
     "@zohodesk/hooks": "2.0.6",
-    "@zohodesk/icons": "1.1.5",
+    "@zohodesk/icons": "1.1.6",
     "@zohodesk/layout": "3.1.0",
     "@zohodesk/svg": "1.2.6",
     "@zohodesk/utils": "1.3.16",
@@ -100,7 +100,7 @@
     "selectn": "1.1.2"
   },
   "peerDependencies": {
-    "@zohodesk/icons": "1.1.5",
+    "@zohodesk/icons": "1.1.6",
     "@zohodesk/variables": "1.2.0",
     "@zohodesk/svg": "1.2.6",
     "@zohodesk/virtualizer": "1.0.13",
@@ -110,7 +110,7 @@
     "@zohodesk/utils": "1.3.16",
     "@zohodesk/a11y": "2.3.8",
     "@zohodesk/layout": "3.1.0",
-    "@zohodesk/dotkit": "1.0.5",
+    "@zohodesk/dotkit": "1.0.6",
     "color": "4.2.3"
   }
 }