@zohodesk/components 1.2.20 → 1.2.21

package/README.md

@@ -32,6 +32,12 @@ In this Package, we Provide Some Basic Components to Build Web App
 - TextBoxIcon
 - Tooltip
 
+# 1.2.21
+
+- **v1/Tabs** - converted to functional component
+- **TextBox** - Tooltip Issue fixed
+- **Tooltip** -  Input Element Based Tooltip Fix Related Fix Added
+
 # 1.2.20
 
 - **Avatar, ListContainer, Suggestions, Select, Switch** - Accessibility issue fixes.

package/es/DateTime/DateTime.module.css

@@ -35,7 +35,7 @@
 .grid {
   width: var(--zd_size28) ;
   height: var(--zd_size28) ;
-  line-height: var(--zd_size18);
+  line-height: 1.3846;
   /* css:theme-validation:ignore */
   text-align: center;
   padding: var(--zd_size4) 0 ;
@@ -72,7 +72,7 @@
 
 .thMonYear {
   font-size: var(--zd_font_size13) ;
-  line-height: var(--zd_size24);
+  line-height: 1.8462;
   color: var(--zdt_datetime_datestr_text);
   composes: semibold;
   display: initial

package/es/DateTime/YearView.module.css

@@ -9,7 +9,7 @@
 .month {
   width: 30.333%;
   font-size: var(--zd_font_size12) ;
-  line-height: var(--zd_size26);
+  line-height: 2.1667;
   height: var(--zd_size26) ;
   color: var(--zdt_yearview_month_text);
   text-align: center;

package/es/Label/Label.module.css

@@ -4,8 +4,9 @@
   --label_text_color: var(--zdt_label_default_text);
   --label_font_family: var(--zd_regular);
   --label_cursor: default;
-  --label_line_height: 18px;
+  --label_line_height: 1.286;
 }
+/* css:lineheight-validation:ignore */
 .label {
   composes: varClass;
   vertical-align: middle;
@@ -18,15 +19,19 @@
 }
 .xsmall {
   --label_font_size: var(--zd_font_size12);
+  --label_line_height:1.5;
 }
 .small {
   --label_font_size: var(--zd_font_size13);
+  --label_line_height:1.385;
 }
 .medium {
   --label_font_size: var(--zd_font_size14);
+  --label_line_height:1.286;
 }
 .large {
   --label_font_size: var(--zd_font_size26);
+  --label_line_height:0.6923;
   composes: semibold from '../common/common.module.css';
 }
 .pointer {

package/es/ListItem/ListItem.module.css

@@ -77,7 +77,7 @@
   composes: dotted from '../common/common.module.css';
 }
 .value, .multiLineValue {
-  line-height: var(--zd_size20);
+  line-height: 1.5385;
 }
 .multiLineValue{
   word-break: break-word;

package/es/Ribbon/Ribbon.module.css

@@ -32,6 +32,7 @@
   --ribbon_tag_before_border_width: 1px 0 0 1px  ;
 }
 
+/* css:lineheight-validation:ignore */
 .basic {
   composes: varClass;
   position: relative;
@@ -215,7 +216,6 @@
   composes: dotted from '../common/common.module.css';
   display: block;
   --ribbon_text_color: var(--zdt_ribbon_white_text);
-  --ribbon_line_height: 20px;
   --ribbon_text_transform: uppercase;
 }
 
@@ -227,6 +227,22 @@
   --ribbon_padding: var(--zd_size4) var(--zd_size24) var(--zd_size4) var(--zd_size6);
 }
 
+.flag.small {
+  --ribbon_line_height: 2.2223;
+}
+
+.flag.medium {
+  --ribbon_line_height: 1.8182;
+}
+
+.flag.large {
+  --ribbon_line_height: 1.5385;
+}
+
+.flag.xlarge {
+  --ribbon_line_height: 1.4286;
+}
+
 .flag::after {
   position: absolute;
   /*  Variable:Ignore  */
@@ -262,10 +278,25 @@
   --ribbon_text_color: var(--zdt_ribbon_white_text);
   --ribbon_text_transform: uppercase;
   --ribbon_padding: var(--zd_size6) var(--zd_size10);
-  --ribbon_line_height: 20px;
   text-align: center;
 }
 
+.ribbon.small {
+  --ribbon_line_height: 2.2223;
+}
+
+.ribbon.medium {
+  --ribbon_line_height: 1.8182;
+}
+
+.ribbon.large {
+  --ribbon_line_height: 1.5385;
+}
+
+.ribbon.xlarge {
+  --ribbon_line_height: 1.4286;
+}
+
 .ribbon::after,
 .ribbon::before {
   position: absolute;
@@ -373,7 +404,6 @@
 .sticker {
   display: block;
   height: var(--zd_size18) ;
-  line-height: var(--zd_size11);
   --ribbon_text_color: var(--zdt_ribbon_white_text);
   --ribbon_text_transform: uppercase;
   text-align: center;
@@ -383,6 +413,22 @@
   padding: var(--zd_size3) var(--zd_size10) ;
 }
 
+.sticker.small {
+  line-height: 1.2223;
+}
+
+.sticker.medium {
+  line-height: 1;
+}
+
+.sticker.large {
+  line-height: 0.8462;
+}
+
+.sticker.xlarge {
+  line-height: 0.7858;
+}
+
 .after,
 .before {
   position: absolute;

package/es/Select/Select.js

@@ -800,8 +800,12 @@ export class SelectComponent extends Component {
       htmlId: htmlId,
       isFocus: isPopupReady,
       autoComplete: autoComplete,
+      isScrollPrevent: true,
       customProps: {
-        TextBoxProps: TextBoxProps
+        TextBoxProps: {
+          'data-title': title || selected,
+          ...TextBoxProps
+        }
       }
     }, /*#__PURE__*/React.createElement(Container, {
       alignBox: "row",
@@ -849,7 +853,11 @@ export class SelectComponent extends Component {
       htmlId: htmlId,
       autoComplete: autoComplete,
       isFocus: isPopupReady,
-      customProps: TextBoxProps
+      isScrollPrevent: true,
+      customProps: {
+        'data-title': title || selected,
+        ...TextBoxProps
+      }
     })), !isReadOnly && !isDisabled && isPopupOpen ? /*#__PURE__*/React.createElement(ResponsiveReceiver, {
       query: this.responsiveFunc,
       responsiveId: "Helmet"

package/es/Select/Select.module.css

@@ -1,65 +1,84 @@
 .input {
   cursor: pointer;
 }
+
 .small {
   max-height: var(--zd_size200) ;
 }
+
 .medium {
   max-height: var(--zd_size350) ;
 }
+
 .large {
   max-height: var(--zd_size400) ;
 }
+
 .emptyState {
   font-size: var(--zd_font_size14) ;
   color: var(--zdt_select_emptystate_text);
   composes: semibold from '../common/common.module.css';
 }
+
 .box_small .emptyState {
   padding: var(--zd_size12) var(--zd_size6) ;
 }
+
 .box_medium .emptyState {
   padding: var(--zd_size12) var(--zd_size15) ;
 }
+
 .hide {
   composes: vishidden from '../common/common.module.css';
 }
+
 .container {
   position: relative;
 }
+/* css:lineheight-validation:ignore */
 .arrowIcon {
   height: var(--zd_size8) ;
   line-height: var(--zd_size8);
 }
+
 .small.search {
   padding: 0 var(--zd_size5) ;
 }
+
 .medium.search {
   padding: var(--zd_size3) var(--zd_size20) 0 ;
 }
+
 .title {
   margin-bottom: var(--zd_size6) ;
 }
+
 .groupTitle {
   margin: var(--zd_size6) 0 ;
 }
+
 .listItemContainer {
   padding: var(--zd_size10) 0 ;
 }
+
 .responsivelistItemContainer {
   padding: var(--zd_size10) 0 0 ;
 }
+
 .readonly {
   --textboxicon_icon_cursor: not-allowed;
 }
+
 .transparentContainer .arrowIcon {
   opacity: 0;
   visibility: hidden;
 }
+
 .transparentContainer:hover .arrowIcon {
   opacity: 1;
   visibility: visible;
 }
+
 .disable {
   color: var(--zdt_select_disable_text);
 }
@@ -78,9 +97,11 @@
 [dir=rtl] .leftIcon {
   right: 0 ;
 }
+
 [dir=ltr] .iconSelect {
   padding-left: var(--zd_size30) ;
 }
+
 [dir=rtl] .iconSelect {
   padding-right: var(--zd_size30) ;
 }
@@ -88,22 +109,27 @@
 .dropBoxList {
   padding: var(--zd_size10) 0 ;
 }
-.responsivedropBoxList{
+
+.responsivedropBoxList {
   padding: var(--zd_size10) 0 0 0 ;
 }
+
 .rotate {
   transform: rotateX(180deg);
 }
+
 .iconOnHoverStyle .arrowIcon,
 .iconOnHoverReadonly .arrowIcon,
 .iconOnHoverReadonly:hover .arrowIcon {
   opacity: 0;
   visibility: hidden;
 }
+
 .iconOnHoverStyle:hover .arrowIcon {
   opacity: 1;
   visibility: visible;
 }
+
 .loader {
   padding: var(--zd_size10) ;
 }

package/es/Tab/Tab.module.css

@@ -32,7 +32,7 @@
 }
 .alpha {
   font-size: var(--zd_font_size11) ;
-  line-height: var(--zd_size33);
+  line-height: 3;
   padding: 0 var(--zd_size18) ;
 }
 .tabAlpha {
@@ -55,7 +55,7 @@
 }
 .beta {
   font-size: var(--zd_font_size14) ;
-  line-height: var(--zd_size60);
+  line-height: 4.2857;
   text-transform: capitalize;
   padding: 0 var(--zd_size4) ;
 }
@@ -78,7 +78,7 @@
 }
 .delta {
   font-size: var(--zd_font_size11) ;
-  line-height: var(--zd_size33);
+  line-height: 3;
   padding: 0 var(--zd_size4) ;
 }
 [dir=ltr] .delta {

package/es/TextBox/TextBox.js

@@ -14,6 +14,7 @@ export default class TextBox extends React.PureComponent {
     this.setFocus = this.setFocus.bind(this);
     this.handleFocus = this.handleFocus.bind(this);
     this.handleBlur = this.handleBlur.bind(this);
+    this.handlePreventTextBoxScroll = this.handlePreventTextBoxScroll.bind(this);
   }
 
   handleFocus() {
@@ -64,6 +65,10 @@ export default class TextBox extends React.PureComponent {
     onChange && !isReadOnly && onChange(value, e);
   }
 
+  handlePreventTextBoxScroll() {
+    this.inputEle.scrollLeft = 0;
+  }
+
   render() {
     let {
       type,
@@ -94,6 +99,7 @@ export default class TextBox extends React.PureComponent {
       a11y,
       customClass,
       isFocus,
+      isScrollPrevent,
       customProps,
       dataSelectorId
     } = this.props;
@@ -148,7 +154,7 @@ export default class TextBox extends React.PureComponent {
       "aria-activedescendant": ariaActivedescendant,
       "aria-readonly": ariaReadonly,
       "aria-multiselectable": ariaMultiselectable,
-      className: `${isReadOnly && needReadOnlyStyle ? style.readonly : ''} ${isClickable ? style.pointer : ''} ${classList} ${style[`borderColor_${borderColor}`]} ${customClass ? customClass : ''}`,
+      className: `${isReadOnly && needReadOnlyStyle ? style.readonly : ''} ${isClickable ? style.pointer : ''} ${classList} ${style[`borderColor_${borderColor}`]} ${isScrollPrevent ? style.inputDotted : ''} ${customClass ? customClass : ''}`,
       "data-id": `${dataId}`,
       "data-test-id": `${dataId}`,
       "data-selector-id": dataSelectorId,
@@ -165,6 +171,7 @@ export default class TextBox extends React.PureComponent {
       ref: this.inputRef,
       type: type,
       value: value,
+      onScroll: isScrollPrevent ? this.handlePreventTextBoxScroll : '',
       onKeyPress: onKeyPress,
       onMouseDown: onMouseDown
     }, options, customProps));

package/es/TextBox/TextBox.module.css

@@ -14,11 +14,12 @@
   --textbox_letter_spacing: 0.1px;
   --textbox_padding: 0;
   --textbox_cursor: auto;
-  --textbox_line_height: 35px;
+  --textbox_line_height: 2.5;
 
   /* textbox placeholder default variable */
   --textbox_placeholder_text_color: var(--zdt_textbox_placeholder_text);
 }
+
 .basic {
   composes: varClass;
   -webkit-appearance: none;
@@ -29,22 +30,27 @@
   border: var(--textbox_border_width);
   cursor: var(--textbox_cursor);
 }
+
 .basic::placeholder {
   /* css:theme-validation:ignore */
   color: var(--textbox_placeholder_text_color);
 }
+
 .basic::-webkit-placeholder {
   /* css:theme-validation:ignore */
   color: var(--textbox_placeholder_text_color);
 }
+
 .basic::-moz-placeholder {
   /* css:theme-validation:ignore */
   color: var(--textbox_placeholder_text_color);
 }
+
 .basic::-ms-placeholder {
   /* css:theme-validation:ignore */
   color: var(--textbox_placeholder_text_color);
 }
+/* css:lineheight-validation:ignore */
 .container {
   composes: basic;
   /* css:theme-validation:ignore */
@@ -65,110 +71,139 @@
   border-style: var(--textbox_border_style);
   border-color: var(--textbox_border_color);
 }
+
 .basic:disabled,
 .container:disabled,
 .container:disabled:hover {
   --textbox_cursor: not-allowed;
   --textbox_text_color: var(--zdt_textbox_disabled_text);
 }
+
 .container:disabled,
 .container:disabled:hover {
   --textbox_bg_color: none;
 }
+
 .container::placeholder {
   /* css:theme-validation:ignore */
   color: var(--textbox_placeholder_text_color);
 }
+
 .container::-webkit-placeholder {
   /* css:theme-validation:ignore */
   color: var(--textbox_placeholder_text_color);
 }
+
 .container::-moz-placeholder {
   /* css:theme-validation:ignore */
   color: var(--textbox_placeholder_text_color);
 }
+
 .container::-ms-placeholder {
   /* css:theme-validation:ignore */
   color: var(--textbox_placeholder_text_color);
 }
+
 .pointer {
   --textbox_cursor: pointer;
 }
+
 /* Need Border */
 .border, .effect:hover, .effect:focus {
   border-width: var(--textbox_border_width);
   border-style: var(--textbox_border_style);
 }
+
 .effect:hover,
 .effect:focus {
   /* css:theme-validation:ignore */
 }
+
 .effect:hover, .effect:focus {
   border-color: var(--textbox_border_color);
 }
+
 .border {
   --textbox_border_width: 0 0 1px 0;
 }
+
 .borderColor_transparent,
 .borderColor_default {
   /* css:theme-validation:ignore */
 }
+
 .borderColor_transparent, .borderColor_default {
   border-color: var(--textbox_border_color);
 }
+
 .borderColor_transparent {
   --textbox_border_color: var(--zdt_textbox_transparent_border);
 }
+
 .borderColor_default {
   --textbox_border_color: var(--zdt_textbox_default_border);
 }
+
 .effect:hover {
   --textbox_border_color: var(--zdt_textbox_effect_hover_border);
 }
-.effect:focus,.focus,.focus:hover {
+
+.effect:focus,
+.focus,
+.focus:hover {
   --textbox_border_color: var(--zdt_textbox_effect_focus_border);
 }
+
 /* Size */
 .xmedium,
 .medium {
   --textbox_font_size: var(--zd_font_size14);
 }
+
 .xmedium {
   --textbox_height: var(--zd_size28);
-  --textbox_line_height: 28px;
+  --textbox_line_height: 2;
 }
+
 .medium {
   --textbox_height: var(--zd_size35);
-  --textbox_line_height: 35px;
+  --textbox_line_height: 2.5;
 }
+
 .small {
   --textbox_font_size: var(--zd_font_size12);
   --textbox_height: var(--zd_size28);
-  --textbox_line_height: 28px;
+  --textbox_line_height: 2.3334;
 }
+
 .xsmall {
   --textbox_font_size: var(--zd_font_size13);
   --textbox_height: var(--zd_size25);
-  --textbox_line_height: 25px;
+  --textbox_line_height: 1.9231;
 }
+
 .default,
 .primary,
 .secondary,
 .light {
   font-family: var(--textbox_font_family);
 }
+
 .primary {
   --textbox_text_color: var(--zdt_textbox_default_text);
   --textbox_font_family: var(--zd_semibold);
   composes: ftsmooth from '../common/common.module.css';
 }
+
 .secondary {
   --textbox_text_color: var(--zdt_textbox_secondary_text);
   --textbox_font_family: var(--zd_light);
 }
+
 .light {
   --textbox_text_color: var(--zdt_textbox_light_text);
 }
+
 .readonly,
 .readonly:hover,
 .readonly:focus {
@@ -176,3 +211,7 @@
   --textbox_text_color: var(--zdt_textbox_default_text);
   --textbox_bg_color: none;
 }
+
+.inputDotted {
+  composes: dotted from '../common/common.module.css'
+}

package/es/TextBox/props/defaultProps.js

@@ -14,6 +14,7 @@ export const defaultProps = {
   borderColor: 'default',
   a11y: {},
   isFocus: false,
+  isScrollPrevent: false,
   customProps: {},
   dataSelectorId: 'textBox'
 };

package/es/TextBox/props/propTypes.js

@@ -49,6 +49,7 @@ export const propTypes = {
     ariaMultiselectable: PropTypes.bool
   }),
   isFocus: PropTypes.bool,
+  isScrollPrevent: PropTypes.bool,
   customProps: PropTypes.object,
   dataSelectorId: PropTypes.string,
   autoComplete: PropTypes.bool

package/es/TextBoxIcon/TextBoxIcon.js

@@ -101,6 +101,7 @@ export default class TextBoxIcon extends React.Component {
       iconOnHover,
       isFocus,
       onClearMouseDown,
+      isScrollPrevent,
       customProps
     } = this.props;
     const {
@@ -151,6 +152,7 @@ export default class TextBoxIcon extends React.Component {
       onKeyPress: onKeyPress,
       onMouseDown: onMouseDown,
       needBorder: false,
+      isScrollPrevent: isScrollPrevent,
       customClass: customTextBox,
       customProps: TextBoxProps
     }))), /*#__PURE__*/React.createElement(Box, {

package/es/TextBoxIcon/props/defaultProps.js

@@ -17,6 +17,7 @@ export const defaultProps = {
   customClass: {},
   iconOnHover: false,
   isFocus: false,
+  isScrollPrevent: false,
   customProps: {},
   dataSelectorId: 'textBoxIcon'
 };

package/es/TextBoxIcon/props/propTypes.js

@@ -45,6 +45,7 @@ export const propTypes = { ...TextBox_propTypes,
   iconOnHover: PropTypes.bool,
   isFocus: PropTypes.bool,
   onClearMouseDown: PropTypes.func,
+  isScrollPrevent: PropTypes.bool,
   customProps: PropTypes.shape({
     TextBoxProps: PropTypes.object
   })

package/es/Textarea/Textarea.module.css

@@ -5,7 +5,7 @@
   --textarea_cursor: auto;
   --textarea_text_color: var(--zdt_textarea_default_text);
   --textarea_font_size: var(--zd_font_size14);
-  --textarea_line_height: 22px;
+  --textarea_line_height: 1.5712;
   --textarea_padding: var(--zd_size2) 0;
   --textarea_height: var(--zd_size30);
 
@@ -61,6 +61,7 @@
 .resizeboth {
   composes: resizeboth from '../common/common.module.css';
 }
+/* css:lineheight-validation:ignore */
 .container {
   composes: basic;
   transition: border var(--zd_transition2) linear 0s,
@@ -104,13 +105,13 @@
   --textarea_font_size: var(--zd_font_size14);
   --textarea_padding: var(--zd_size4) 0 var(--zd_size2);
   --textarea_height: var(--zd_size28);
-  --textarea_line_height: 19px;
+  --textarea_line_height: 1.3572;
 }
 .xmedium {
   --textarea_font_size: var(--zd_font_size13);
   --textarea_padding: var(--zd_size4) 0 var(--zd_size2);
   --textarea_height: var(--zd_size25);
-  --textarea_line_height: 17px;
+  --textarea_line_height: 1.3077;
 }
 .small {
   --textarea_height: var(--zd_size30);

package/es/Tooltip/Tooltip.js

@@ -154,8 +154,10 @@ export default class Tooltip extends React.Component {
       if (title !== '' && title) {
         titleDiv.setAttribute('data-title', title);
         titleDiv.removeAttribute('title');
+        let isInputElementType = element.type === 'text';
+        let elementText = isInputElementType ? element.value : element.innerText;
 
-        if (element.nodeName !== 'I' && element.innerText && element.innerText.trim() !== '') {
+        if (element.nodeName !== 'I' && elementText && elementText.trim() !== '') {
           let isContentDotted = '';
 
           if (element.scrollWidth !== 0) {
@@ -173,7 +175,7 @@ export default class Tooltip extends React.Component {
             isContentDotted = offWidth < scrollWidth;
           }
 
-          let originText = element.innerText.replace(/\s/g, '').toLowerCase();
+          let originText = elementText.replace(/\s/g, '').toLowerCase();
           let tooltipText = title.replace(/\s/g, '').toLowerCase();
           let isDefaultTooltip = element.hasAttribute('data-istitle') || element.hasAttribute('istitle') ? element.getAttribute('data-istitle') || element.getAttribute('istitle') : 'false';
           isDefaultTooltip = isDefaultTooltip === 'true';