@zohodesk/components 1.0.0-temp-45 → 1.0.0-temp-46

package/es/ListItem/ListItem.js

@@ -10,7 +10,6 @@ import { Container, Box } from '../Layout';
 
 import Icon from '@zohodesk/icons/lib/Icon';
 import CssProvider from '../Provider/CssProvider';
-import { ResponsiveReceiver } from '../Responsive/CustomResponsive';
 /**** CSS ****/
 
 import style from './ListItem.module.css';
@@ -20,7 +19,6 @@ export default class ListItem extends React.Component {
     this.handleClick = this.handleClick.bind(this);
     this.getRef = this.getRef.bind(this);
     this.handleMouseEnter = this.handleMouseEnter.bind(this);
-    this.responsiveFunc = this.responsiveFunc.bind(this);
   }
 
   getRef(ele) {
@@ -53,16 +51,6 @@ export default class ListItem extends React.Component {
     onMouseEnter && onMouseEnter(id, value, index, e);
   }
 
-  responsiveFunc({
-    mediaQueryOR
-  }) {
-    return {
-      mobileToTab: mediaQueryOR([{
-        maxWidth: 700
-      }])
-    };
-  }
-
   render() {
     let {
       size,
@@ -114,18 +102,13 @@ export default class ListItem extends React.Component {
     }
 
     let dataIdString = dataId ? dataId : value ? String(value).replace("'", '_') : 'listItem';
-    return /*#__PURE__*/React.createElement(ResponsiveReceiver, {
-      query: this.responsiveFunc,
-      responsiveId: "Helmet"
-    }, ({
-      mobileToTab
-    }) => /*#__PURE__*/React.createElement(Container, _extends({
+    return /*#__PURE__*/React.createElement(Container, _extends({
       role: role,
       "aria-selected": ariaSelected,
       isCover: false,
       align: "vertical",
       alignBox: "row",
-      className: `${style.list} ${style[size]} ${mobileToTab && style.responsiveHeight} ${style[palette]} ${active ? style[`active${palette}`] : highlight && !isDisabled ? style[`${palette}Hover`] : ''} ${autoHover && !isDisabled ? style[`${palette}Effect`] : ''} ${needTick ? style[`${size}withTick`] : ''} ${isDisabled ? CssProvider('isDisable') : ''} ${needBorder ? active ? style.activewithBorder : style.withBorder : ''} ${customListItem}`,
+      className: `${style.list} ${style[size]} ${style[palette]} ${active ? style[`active${palette}`] : highlight && !isDisabled ? style[`${palette}Hover`] : ''} ${autoHover && !isDisabled ? style[`${palette}Effect`] : ''} ${needTick ? style[`${size}withTick`] : ''} ${isDisabled ? CssProvider('isDisable') : ''} ${needBorder ? active ? style.activewithBorder : style.withBorder : ''} ${customListItem}`,
       dataId: dataIdString,
       onClick: !isDisabled && this.handleClick,
       onMouseEnter: this.handleMouseEnter,
@@ -147,7 +130,7 @@ export default class ListItem extends React.Component {
     }, /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-ticknew",
       size: "8"
-    })) : null));
+    })) : null);
   }
 
 }

package/es/ListItem/ListItem.module.css

@@ -58,12 +58,6 @@
     /*rtl: var(--zd_size10) var(--zd_size25) var(--zd_size10) var(--zd_size3)*/;
   --listitem_height: var(--zd_size48);
 }
-.responsiveHeight {
-  --listitem_padding: var(--zd_size10) var(--zd_size3) var(--zd_size10)
-    var(--zd_size20)
-    /*rtl: var(--zd_size10) var(--zd_size25) var(--zd_size10) var(--zd_size3)*/;
-  --listitem_height: var(--zd_size45);
-}
 
 .value,
 .children {

package/es/ListItem/ListItemWithAvatar.js

@@ -10,7 +10,6 @@ import Avatar from '../Avatar/Avatar';
 import AvatarTeam from '../AvatarTeam/AvatarTeam';
 import Icon from '@zohodesk/icons/lib/Icon';
 import CssProvider from '../Provider/CssProvider';
-import { ResponsiveReceiver } from '../Responsive/CustomResponsive';
 /**** CSS ****/
 
 import style from './ListItem.module.css';
@@ -20,7 +19,6 @@ export default class ListItemWithAvatar extends React.PureComponent {
     this.handleClick = this.handleClick.bind(this);
     this.getRef = this.getRef.bind(this);
     this.handleMouseEnter = this.handleMouseEnter.bind(this);
-    this.responsiveFunc = this.responsiveFunc.bind(this);
   }
 
   getRef(ele) {
@@ -53,16 +51,6 @@ export default class ListItemWithAvatar extends React.PureComponent {
     onMouseEnter && onMouseEnter(id, value, index, e);
   }
 
-  responsiveFunc({
-    mediaQueryOR
-  }) {
-    return {
-      mobileToTab: mediaQueryOR([{
-        maxWidth: 700
-      }])
-    };
-  }
-
   render() {
     let {
       size,
@@ -112,18 +100,13 @@ export default class ListItemWithAvatar extends React.PureComponent {
     }
 
     let dataIdString = value ? value : dataId;
-    return /*#__PURE__*/React.createElement(ResponsiveReceiver, {
-      query: this.responsiveFunc,
-      responsiveId: "Helmet"
-    }, ({
-      mobileToTab
-    }) => /*#__PURE__*/React.createElement(Container, _extends({
+    return /*#__PURE__*/React.createElement(Container, _extends({
       role: role,
       "aria-selected": ariaSelected,
       isCover: false,
       align: "vertical",
       alignBox: "row",
-      className: `${style.list} ${style[size]} ${mobileToTab && style.responsiveHeight} ${style[palette]} ${active ? style[`active${palette}`] : highlight && !isDisabled ? style[`${palette}Hover`] : ''} ${autoHover && !isDisabled ? style[`${palette}Effect`] : ''} ${needTick ? style[`${size}withTick`] : ''} ${isDisabled ? CssProvider('isDisable') : ''} ${needBorder ? active ? style.activewithBorder : style.withBorder : ''} ${customListItem}`,
+      className: `${style.list} ${style[size]} ${style[palette]} ${active ? style[`active${palette}`] : highlight && !isDisabled ? style[`${palette}Hover`] : ''} ${autoHover && !isDisabled ? style[`${palette}Effect`] : ''} ${needTick ? style[`${size}withTick`] : ''} ${isDisabled ? CssProvider('isDisable') : ''} ${needBorder ? active ? style.activewithBorder : style.withBorder : ''} ${customListItem}`,
       onClick: !isDisabled && this.handleClick,
       onMouseEnter: this.handleMouseEnter,
       eleRef: this.getRef,
@@ -164,7 +147,7 @@ export default class ListItemWithAvatar extends React.PureComponent {
     }, /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-ticknew",
       size: "8"
-    })) : null));
+    })) : null);
   }
 
 }

package/es/ListItem/ListItemWithCheckBox.js

@@ -5,7 +5,6 @@ import PropTypes from 'prop-types';
 import CheckBox from '../CheckBox/CheckBox';
 import { Container, Box } from '../Layout';
 import CssProvider from '../Provider/CssProvider';
-import { ResponsiveReceiver } from '../Responsive/CustomResponsive';
 import style from './ListItem.module.css';
 export default class ListItemWithCheckBox extends React.Component {
   constructor(props) {
@@ -13,7 +12,6 @@ export default class ListItemWithCheckBox extends React.Component {
     this.onClick = this.onClick.bind(this);
     this.getRef = this.getRef.bind(this);
     this.onHover = this.onHover.bind(this);
-    this.responsiveFunc = this.responsiveFunc.bind(this);
   }
 
   getRef(ele) {
@@ -45,16 +43,6 @@ export default class ListItemWithCheckBox extends React.Component {
     onHover && onHover(id, value, index, e);
   }
 
-  responsiveFunc({
-    mediaQueryOR
-  }) {
-    return {
-      mobileToTab: mediaQueryOR([{
-        maxWidth: 700
-      }])
-    };
-  }
-
   render() {
     let {
       size,
@@ -90,18 +78,13 @@ export default class ListItemWithCheckBox extends React.Component {
       options.tabindex = '0';
     }
 
-    return /*#__PURE__*/React.createElement(ResponsiveReceiver, {
-      query: this.responsiveFunc,
-      responsiveId: "Helmet"
-    }, ({
-      mobileToTab
-    }) => /*#__PURE__*/React.createElement(Container, _extends({
+    return /*#__PURE__*/React.createElement(Container, _extends({
       role: role,
       "aria-selected": ariaSelected,
       isCover: false,
       align: "vertical",
       alignBox: "row",
-      className: `${style.list} ${style[size]} ${mobileToTab && style.responsiveHeight}  ${style[palette]} ${active ? style[`active${palette}`] : highlight && !isDisabled ? style[`${palette}Hover`] : ''} ${autoHover && !isDisabled ? style[`${palette}Effect`] : ''} 
+      className: `${style.list} ${style[size]} ${style[palette]} ${active ? style[`active${palette}`] : highlight && !isDisabled ? style[`${palette}Hover`] : ''} ${autoHover && !isDisabled ? style[`${palette}Effect`] : ''} 
         ${isDisabled ? CssProvider('isDisable') : ''} ${customListItem}`,
       dataId: `${dataId ? dataId : value}_ListItemWithCheckBox`,
       onClick: !isDisabled && this.onClick,
@@ -125,7 +108,7 @@ export default class ListItemWithCheckBox extends React.Component {
       shrink: true,
       "data-title": isDisabled ? null : title,
       className: style.value
-    }, value)));
+    }, value));
   }
 
 }

package/es/ListItem/ListItemWithIcon.js

@@ -8,7 +8,6 @@ import PropTypes from 'prop-types';
 import { Container, Box } from '../Layout';
 import Icon from '@zohodesk/icons/lib/Icon';
 import CssProvider from '../Provider/CssProvider';
-import { ResponsiveReceiver } from '../Responsive/CustomResponsive';
 /**** CSS ****/
 
 import style from './ListItem.module.css';
@@ -18,7 +17,6 @@ export default class ListItemWithIcon extends React.Component {
     this.handleClick = this.handleClick.bind(this);
     this.getRef = this.getRef.bind(this);
     this.handleMouseEnter = this.handleMouseEnter.bind(this);
-    this.responsiveFunc = this.responsiveFunc.bind(this);
   }
 
   getRef(ele) {
@@ -51,16 +49,6 @@ export default class ListItemWithIcon extends React.Component {
     onMouseEnter && onMouseEnter(id, value, index, e);
   }
 
-  responsiveFunc({
-    mediaQueryOR
-  }) {
-    return {
-      mobileToTab: mediaQueryOR([{
-        maxWidth: 700
-      }])
-    };
-  }
-
   render() {
     let {
       size,
@@ -101,18 +89,13 @@ export default class ListItemWithIcon extends React.Component {
     }
 
     let dataIdString = dataId ? `${dataId.replace("'", '_')}` : value.toLowerCase().replace("'", '_');
-    return /*#__PURE__*/React.createElement(ResponsiveReceiver, {
-      query: this.responsiveFunc,
-      responsiveId: "Helmet"
-    }, ({
-      mobileToTab
-    }) => /*#__PURE__*/React.createElement(Container, _extends({
+    return /*#__PURE__*/React.createElement(Container, _extends({
       role: role,
       "aria-selected": ariaSelected,
       isCover: false,
       align: "vertical",
       alignBox: "row",
-      className: `${style.list} ${style[size]} ${mobileToTab && style.responsiveHeight}  ${style[palette]} ${active ? style[`active${palette}`] : highlight && !isDisabled ? style[`${palette}Hover`] : ''} ${autoHover && !isDisabled ? style[`${palette}Effect`] : ''} ${needTick ? style[`${size}withTick`] : ''} ${isDisabled ? CssProvider('isDisable') : ''} ${needBorder ? active ? style.activewithBorder : style.withBorder : ''} ${customClass}`,
+      className: `${style.list} ${style[size]} ${style[palette]} ${active ? style[`active${palette}`] : highlight && !isDisabled ? style[`${palette}Hover`] : ''} ${autoHover && !isDisabled ? style[`${palette}Effect`] : ''} ${needTick ? style[`${size}withTick`] : ''} ${isDisabled ? CssProvider('isDisable') : ''} ${needBorder ? active ? style.activewithBorder : style.withBorder : ''} ${customClass}`,
       dataId: dataIdString,
       onClick: !isDisabled && this.handleClick,
       onMouseOver: this.handleMouseEnter,
@@ -142,7 +125,7 @@ export default class ListItemWithIcon extends React.Component {
     }, /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-ticknew",
       size: "8"
-    })) : null));
+    })) : null);
   }
 
 }

package/es/ListItem/ListItemWithRadio.js

@@ -6,14 +6,12 @@ import Radio from '../Radio/Radio';
 import { Container, Box } from '../Layout';
 import CssProvider from '../Provider/CssProvider';
 import style from './ListItem.module.css';
-import { ResponsiveReceiver } from '../Responsive/CustomResponsive';
 export default class ListItemWithRadio extends React.Component {
   constructor(props) {
     super(props);
     this.onClick = this.onClick.bind(this);
     this.getRef = this.getRef.bind(this);
     this.onHover = this.onHover.bind(this);
-    this.responsiveFunc = this.responsiveFunc.bind(this);
   }
 
   getRef(ele) {
@@ -45,16 +43,6 @@ export default class ListItemWithRadio extends React.Component {
     onHover && onHover(id, value, index, e);
   }
 
-  responsiveFunc({
-    mediaQueryOR
-  }) {
-    return {
-      mobileToTab: mediaQueryOR([{
-        maxWidth: 700
-      }])
-    };
-  }
-
   render() {
     let {
       size,
@@ -91,18 +79,13 @@ export default class ListItemWithRadio extends React.Component {
       options.tabindex = '0';
     }
 
-    return /*#__PURE__*/React.createElement(ResponsiveReceiver, {
-      query: this.responsiveFunc,
-      responsiveId: "Helmet"
-    }, ({
-      mobileToTab
-    }) => /*#__PURE__*/React.createElement(Container, _extends({
+    return /*#__PURE__*/React.createElement(Container, _extends({
       role: role,
       "aria-selected": ariaSelected,
       isCover: false,
       align: "vertical",
       alignBox: "row",
-      className: `${style.list} ${style[size]} ${mobileToTab && style.responsiveHeight} ${style[palette]} ${active ? style.active : highlight && !isDisabled ? style.hover : ''} ${autoHover && !isDisabled ? style.effect : ''}  ${isDisabled ? CssProvider('isDisable') : ''} `,
+      className: `${style.list} ${style[size]} ${style[palette]} ${active ? style.active : highlight && !isDisabled ? style.hover : ''} ${autoHover && !isDisabled ? style.effect : ''}  ${isDisabled ? CssProvider('isDisable') : ''} `,
       className: `${style.list} ${style[size]} ${style[palette]} ${active ? style[`active${palette}`] : highlight && !isDisabled ? style[`${palette}Hover`] : ''} ${autoHover && !isDisabled ? style[`${palette}Effect`] : ''} 
         ${isDisabled ? CssProvider('isDisable') : ''} ${customListItem}`,
       dataId: dataId,
@@ -128,7 +111,7 @@ export default class ListItemWithRadio extends React.Component {
       shrink: true,
       "data-title": disableTitle ? null : title,
       className: style.value
-    }, value)));
+    }, value));
   }
 
 }

package/es/Ribbon/Ribbon.module.css

@@ -265,7 +265,7 @@
   border-color: var(--zdt_ribbon_flag_white_border);
   height: var(--zd_size18);
   padding: var(--zd_size3) var(--zd_size10);
-  line-height: var(--zd_size11);
+  line-height: 0.6875;
   --ribbon_text_color: var(--zdt_ribbon_white_text);
   --ribbon_text_transform: uppercase;
 }

package/es/Select/Select.module.css

@@ -29,7 +29,7 @@
 }
 .arrowIcon {
   height: var(--zd_size8);
-  line-height: var(--zd_size8);
+  line-height: 0.5;
 }
 .small.search {
   padding: 0 var(--zd_size5);

package/es/Tab/Tab.module.css

@@ -34,7 +34,7 @@
 .alpha {
   padding: 0 var(--zd_size18);
   font-size: var(--zd_font_size11);
-  line-height: var(--zd_size33);
+  line-height: 3;
 }
 .tabAlpha {
   composes: alpha;
@@ -58,7 +58,7 @@
 .beta {
   padding: 0 var(--zd_size4);
   font-size: var(--zd_font_size14);
-  line-height: var(--zd_size60);
+  line-height: 4.28;
   margin-right: var(--zd_size40);
   text-transform: capitalize;
 }
@@ -76,7 +76,7 @@
 .delta {
   padding: 0 var(--zd_size4);
   font-size: var(--zd_font_size11);
-  line-height: var(--zd_size33);
+  line-height: 3;
   margin-right: var(--zd_size10);
 }
 .tabDelta {

package/es/TextBox/TextBox.module.css

@@ -13,7 +13,7 @@
   --textbox_letter_spacing: 0.1px;
   --textbox_padding: 0;
   --textbox_cursor: auto;
-  --textbox_line_height: var(--zd_size35);
+  --textbox_line_height: 2.5;
 
   /* textbox placeholder default variable */
   --textbox_placeholder_text_color: var(--zdt_textbox_placeholder_text);
@@ -118,21 +118,21 @@
 }
 .xmedium {
   --textbox_height: var(--zd_size28);
-  --textbox_line_height: var(--zd_size28);
+  --textbox_line_height: 2;
 }
 .medium {
   --textbox_height: var(--zd_size35);
-  --textbox_line_height: var(--zd_size35);
+  --textbox_line_height: 2.5;
 }
 .small {
   --textbox_font_size: var(--zd_font_size12);
   --textbox_height: var(--zd_size28);
-  --textbox_line_height: var(--zd_size28);
+  --textbox_line_height: 2.3;
 }
 .xsmall {
   --textbox_font_size: var(--zd_font_size13);
   --textbox_height: var(--zd_size25);
-  --textbox_line_height: var(--zd_size25);
+  --textbox_line_height: 1.92;
 }
 .default,
 .primary,

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: var(--zd_size22);
+  --textarea_line_height: 1.57;
   --textarea_padding: var(--zd_size2) 0;
   --textarea_height: var(--zd_size30);
 
@@ -99,13 +99,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: var(--zd_size19);
+  --textarea_line_height: 1.35;
 }
 .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: var(--zd_size17);
+  --textarea_line_height: 1.30;
 }
 .small {
   --textarea_height: var(--zd_size30);

package/es/Tooltip/Tooltip.module.css

@@ -17,7 +17,7 @@
   border-color: transparent;
   border-radius: var(--zd_size4);
   max-width: 420px;
-  line-height: var(--zd_size20);
+  line-height: 1.53;
   min-height: var(--zd_size24);
   white-space: normal;
   overflow: hidden;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/components",
-  "version": "1.0.0-temp-45",
+  "version": "1.0.0-temp-46",
   "main": "lib/index.js",
   "module": "es/index.js",
   "jsnext:main": "es/index.js",
@@ -34,7 +34,7 @@
   },
   "devDependencies": {
     "@zohodesk/docstool": "1.0.0-alpha-2",
-    "@zohodesk/variables": "1.0.0-beta.26",
+    "@zohodesk/variables": "1.0.0-beta.28",
     "@zohodesk/icons": "1.0.0-beta.85",
     "@zohodesk/virtualizer": "1.0.3",
     "velocity-react": "^1.4.1",
@@ -49,7 +49,7 @@
   },
   "peerDependencies": {
     "@zohodesk/icons": "^1.0.0-beta.85",
-    "@zohodesk/variables": "^1.0.0-beta.26",
+    "@zohodesk/variables": "^1.0.0-beta.28",
     "@zohodesk/svg": "^1.0.0-beta.37",
     "@zohodesk/virtualizer": "^1.0.3",
     "velocity-react": "^1.4.1",