@zohodesk/components 1.5.2 → 1.5.4

package/README.md

@@ -2,6 +2,21 @@
 
 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.4
+
+- **Tag**
+  - Added support for rendering left & right custom children using `renderLeftChildren`,`renderRightChildren` prop.
+
+# 1.5.3
+
+- **CheckBox, Radio**
+  - `secondaryText` prop supported to render secondary value next to the control.
+  - `customSecondaryText` key supported under `customClass` prop to customize secondary text styling.
+
+- **Label**
+  - `renderRightPlaceholderNode` prop supported to render elements after the label text.
+  - `customProps` prop supported to pass additional props through `containerProps` & `rightPlaceholderNodeProps`.
+
 # 1.5.2
 
 - **TextBoxIcon**

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

@@ -95,6 +95,7 @@
 	--zdt_checkbox_danger_stroke_border: hsla(0, 100.00%, calc(70.98% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_checkbox_label_primary_text: var(--zdt_cta_primary_text);
 	--zdt_checkbox_label_danger_text: hsla(0, 100.00%, calc(70.98% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_checkbox_secondary_text: hsla(217, 7.76%, calc(54.51% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	
 	/* dropbox */
 	--zdt_dropbox_default_bg: hsla(217, 23.08%, calc(17.84% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
@@ -170,6 +171,7 @@
 	--zdt_radio_danger_fill: hsla(0, 100.00%, calc(70.98% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_radio_label_primary_text: var(--zdt_cta_primary_text);
 	--zdt_radio_label_danger_text: hsla(0, 100.00%, calc(70.98% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_radio_secondary_text: hsla(217, 7.76%, calc(54.51% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	
 	/* listitem */
 	--zdt_listitem_default_text: hsla(210, 7.41%, calc(89.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));

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

@@ -95,6 +95,7 @@
 	--zdt_checkbox_danger_stroke_border: hsla(0, 71.91%, calc(53.92% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_checkbox_label_primary_text: var(--zdt_cta_primary_text);
 	--zdt_checkbox_label_danger_text: hsla(0, 71.91%, calc(53.92% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_checkbox_secondary_text: hsla(218, 9.76%, calc(51.76% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	
 	/* dropbox */
 	--zdt_dropbox_default_bg: hsla(0, 0.00%, calc(100.00% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
@@ -170,6 +171,7 @@
 	--zdt_radio_danger_fill: hsla(0, 71.91%, calc(53.92% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_radio_label_primary_text: var(--zdt_cta_primary_text);
 	--zdt_radio_label_danger_text: hsla(0, 71.91%, calc(53.92% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_radio_secondary_text: hsla(218, 9.76%, calc(51.76% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	
 	/* listitem */
 	--zdt_listitem_default_text: hsla(0, 0.00%, calc(0.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));

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

@@ -95,6 +95,7 @@
 	--zdt_checkbox_danger_stroke_border: hsla(0, 100.00%, calc(70.98% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_checkbox_label_primary_text: var(--zdt_cta_primary_text);
 	--zdt_checkbox_label_danger_text: hsla(0, 100.00%, calc(70.98% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_checkbox_secondary_text: hsla(217, 7.76%, calc(54.51% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	
 	/* dropbox */
 	--zdt_dropbox_default_bg: hsla(0, 0.00%, calc(12.94% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
@@ -170,6 +171,7 @@
 	--zdt_radio_danger_fill: hsla(0, 100.00%, calc(70.98% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_radio_label_primary_text: var(--zdt_cta_primary_text);
 	--zdt_radio_label_danger_text: hsla(0, 100.00%, calc(70.98% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_radio_secondary_text: hsla(217, 7.76%, calc(54.51% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	
 	/* listitem */
 	--zdt_listitem_default_text: hsla(210, 7.41%, calc(89.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));

package/es/CheckBox/CheckBox.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { propTypes } from "./props/propTypes";
 import { defaultProps } from "./props/defaultProps";
 import Label from "../Label/Label";
+import Typography from "../Typography/Typography";
 import { Container, Box } from "../Layout";
 import CssProvider from "../Provider/CssProvider";
 import style from "./CheckBox.module.css";
@@ -53,17 +54,20 @@ export default class CheckBox extends React.Component {
       customClass,
       customProps,
       dataSelectorId,
-      renderRightPlaceholderNode
+      renderRightPlaceholderNode,
+      secondaryText
     } = this.props;
     let {
       CheckBoxProps = {},
-      LabelProps = {}
+      LabelProps = {},
+      secondaryTextProps = {}
     } = customProps;
     let {
       customCheckBox = '',
       customLabel = '',
       customCBoxSize = '',
-      customTickSize = ''
+      customTickSize = '',
+      customSecondaryText = ''
     } = customClass;
     let accessMode = isReadOnly ? style.readonly : disabled ? CssProvider('isDisabled') : style.pointer;
     let toolTip = disabled ? disabledTitle : title ? title : null;
@@ -95,7 +99,8 @@ export default class CheckBox extends React.Component {
       dataSelectorId: dataSelectorId || id,
       ...CheckBoxProps
     }, /*#__PURE__*/React.createElement(Box, {
-      className: `${style.boxContainer} ${style[size]} ${customCBoxSize} ${isFilled ? style.filled : ''} ${!isEditable ? `${style[`disabled`]}` : ''}`
+      className: `${style.boxContainer} ${secondaryText ? style.withSecondaryText : ''} ${style[size]} ${customCBoxSize} ${isFilled ? style.filled : ''} ${!isEditable ? `${style[`disabled`]}` : ''}`,
+      align: secondaryText ? "start" : undefined
     }, /*#__PURE__*/React.createElement("input", {
       type: "hidden",
       id: id,
@@ -143,10 +148,10 @@ export default class CheckBox extends React.Component {
       y1: "20",
       x2: "28.53",
       y2: "20"
-    }) : null))), text && /*#__PURE__*/React.createElement(Box, {
+    }) : null))), (text || secondaryText) && /*#__PURE__*/React.createElement(Box, {
       flexible: true,
-      className: style.text
-    }, /*#__PURE__*/React.createElement(Label, {
+      className: style.labelContainer
+    }, text && /*#__PURE__*/React.createElement(Label, {
       text: text,
       palette: disabled ? 'disable' : labelPalette,
       id: id,
@@ -155,11 +160,17 @@ export default class CheckBox extends React.Component {
       clipped: isClipped,
       variant: variant,
       customClass: `${active && !disabled ? `${style[`active${palette}Label`]}` : ''}
-                            ${checked && active ? `${style[`checked${palette}Label`]}` : ''} 
-                            ${accessMode} ${customLabel}`,
+                                ${checked && active ? `${style[`checked${palette}Label`]}` : ''} 
+                                ${accessMode} ${customLabel}`,
       title: toolTip ? toolTip : text,
       ...LabelProps
-    })), renderRightPlaceholderNode ? renderRightPlaceholderNode : null);
+    }), secondaryText ? /*#__PURE__*/React.createElement(Typography, {
+      $ui_size: "12",
+      $ui_lineHeight: "1.2",
+      ...secondaryTextProps,
+      $i18n_dataTitle: toolTip ? null : secondaryText,
+      $ui_className: `${style.secondaryText} ${customSecondaryText}`
+    }, secondaryText) : null), renderRightPlaceholderNode ? renderRightPlaceholderNode : null);
   }
 
 }

package/es/CheckBox/CheckBox.module.css

@@ -90,12 +90,6 @@
 [dir=rtl] .linePath {
   animation: lineAnimate var(--zd_transition3) ease forwards;
 }
-[dir=ltr] .text {
-  margin-left: var(--zd_size6) ;
-}
-[dir=rtl] .text {
-  margin-right: var(--zd_size6) ;
-}
 
  .checkedprimary,
 .checkeddanger {
@@ -141,6 +135,27 @@
 .disabled {
   opacity: 0.7
 }
+
+.withSecondaryText {
+  margin-top: var(--zd_size1) ;
+}
+
+.secondaryText {
+  color: var(--zdt_checkbox_secondary_text);
+}
+
+.labelContainer {
+  composes: dflex flexcolumn from '../common/common.module.css';
+  gap: var(--zd_size4) ;
+}
+
+[dir=ltr] .labelContainer {
+  margin-left: var(--zd_size6) ;
+}
+
+[dir=rtl] .labelContainer {
+  margin-right: var(--zd_size6) ;
+}
 @keyframes tickAnimate {
   0% {
     stroke-dashoffset: 40;

package/es/CheckBox/__tests__/CheckBox.spec.js

@@ -160,6 +160,15 @@ describe('CheckBox component', () => {
     }));
     expect(asFragment()).toMatchSnapshot();
   });
+  test('Should render secondaryText', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(CheckBox, {
+      text: "checkboxText",
+      secondaryText: "secondaryText"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
   test('Should be render activeStyle is minus', () => {
     const {
       asFragment