@zohodesk/dot 1.0.0-temp-187.17 → 1.0.0-temp-222

package/README.md

@@ -2,6 +2,10 @@
 
 In this Library, we Provide Some Basic Components to Build Your Application
 
+# 1.7.27
+- **RadioField**
+  - Supports the `secondaryText`, `renderRightPlaceholderNode` & `customProps` via the `option` prop.
+
 # 1.7.26
 
 - `list/SecondaryText/PhoneNumber.js`

package/es/form/fields/Fields.module.css

@@ -71,11 +71,16 @@
 }
 .radioBox {
   max-width: 100% ;
-  height: var(--zd_size36) ;
   transition: border var(--zd_transition3);
-  padding: 0 var(--zd_size10) ;
   border: 1px solid var(--zdt_radiofield_box_border);
-  border-radius: 6px
+  border-radius: 6px;
+}
+.radioBox.primaryTextOnly {
+  height: var(--zd_size36) ;
+  padding: 0 var(--zd_size10) ;
+}
+.radioBox.withSecondaryText {
+  padding: var(--zd_size18) var(--zd_size16) ;
 }
 .hoverableRadioBox:hover, .radioBoxActive {
   border-color: var(--zdt_radiofield_box_active_border)
@@ -221,10 +226,7 @@ position: relative;
 [dir=rtl] .rightPlaceholder{
   left:var(--zd_size15) 
 }
+   
 .phoneField{
   composes: ltr-zone  from '~@zohodesk/components/es/common/common.module.css';
-}
-
-.lineClampPickListItem{
-  --line-clamp: var(--picklist-field-line-clamp,3);
 }

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

@@ -1,5 +1,6 @@
 /**** Libraries ****/
 import React, { PureComponent } from 'react';
+import { compileClassNames } from '@zohodesk/utils';
 import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
 /**** Components ****/
@@ -128,14 +129,31 @@ export default class RadioField extends PureComponent {
         value,
         disabled = false,
         tooltip,
-        infoTooltip
+        infoTooltip,
+        secondaryText,
+        renderRightPlaceholderNode,
+        customProps
       } = option;
       let isDisabledState = disabled || isDisabled;
       let isChecked = selectedValue == value;
+      const rightPlaceholderNode = !!infoTooltip ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Icon, {
+        name: "ZD-GN-info",
+        size: "16",
+        title: infoTooltip,
+        iconClass: style.infoIcon,
+        ...InfoIconProps
+      }), renderRightPlaceholderNode) : renderRightPlaceholderNode;
+      const radioBoxClasses = isBoxStyle ? compileClassNames({
+        [style.radioBox]: true,
+        [style.withSecondaryText]: !!secondaryText,
+        [style.primaryTextOnly]: !secondaryText,
+        [style.hoverableRadioBox]: !isDisabledState,
+        [style.radioBoxActive]: isChecked
+      }) : '';
       return /*#__PURE__*/React.createElement("span", {
         key: index,
         className: `${!isBoxStyle ? style.radio : ''} ${style.radioWrap}`
-      }, /*#__PURE__*/React.createElement(Radio, {
+      }, /*#__PURE__*/React.createElement(Radio, { ...customProps,
         id: index,
         value: value,
         name: id,
@@ -153,22 +171,23 @@ export default class RadioField extends PureComponent {
         dataId: dataId,
         isReadOnly: isReadOnly,
         variant: variant,
+        secondaryText: secondaryText,
         ...RadioProps,
         a11y: {
           tabIndex: !!selectedValue ? isChecked ? '0' : '-1' : index === 0 ? '0' : '-1',
           ...RadioProps.a11y
         },
         customClass: {
-          customRadioWrap: isBoxStyle ? `${style.radioBox} ${!isDisabledState ? style.hoverableRadioBox : ''} ${isChecked ? style.radioBoxActive : ''}` : '',
+          customRadioWrap: radioBoxClasses,
           ...RadioProps.customClass
+        },
+        customProps: {
+          LabelProps: { ...(RadioProps.customProps ? RadioProps.customProps.LabelProps : undefined),
+            renderRightPlaceholderNode: rightPlaceholderNode
+          },
+          ...RadioProps.customProps
         }
-      }, !!infoTooltip ? /*#__PURE__*/React.createElement(Icon, {
-        name: "ZD-GN-info",
-        size: "16",
-        title: infoTooltip,
-        iconClass: style.infoIcon,
-        ...InfoIconProps
-      }) : null));
+      }));
     })), validationMessage && /*#__PURE__*/React.createElement(ValidationMessage, {
       text: validationMessage,
       palette: validationPalette,

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

@@ -17,6 +17,22 @@ const options = [{
   text: 'Kolkata',
   value: '4'
 }];
+let optionsWithsecondaryText = [{
+  text: 'Chennai',
+  value: '1',
+  secondaryText: 'Tamil Nadu Capital'
+}, {
+  text: 'Mumbai',
+  value: '2',
+  secondaryText: 'Maharashtra Capital',
+  tooltip: 'Disabled Option',
+  disabled: true
+}, {
+  text: 'Delhi',
+  value: '3',
+  secondaryText: 'Capital of India',
+  infoTooltip: 'Capital of India'
+}];
 describe('RadioField', () => {
   test('rendering the defult props', () => {
     const {
@@ -43,4 +59,21 @@ describe('RadioField', () => {
     }));
     expect(asFragment()).toMatchSnapshot();
   });
+  test('rendering with secondaryTextOptions', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(RadioField, {
+      options: optionsWithsecondaryText
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering with secondaryTextOptions & isBoxStyle', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(RadioField, {
+      options: optionsWithsecondaryText,
+      isBoxStyle: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
 });