@zohodesk/dot 1.9.17 → 1.9.19

package/lib/ChannelIcon/ChannelIcon.js

@@ -21,6 +21,8 @@ var _AvatarIcon = _interopRequireDefault(require("../avatar/AvatarIcon/AvatarIco
 
 var _ChannelIconMapping = require("../utils/ChannelIconMapping");
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _ChannelIconModule = _interopRequireDefault(require("./ChannelIcon.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -105,7 +107,7 @@ var ChannelIcon = /*#__PURE__*/function (_Component) {
       }
 
       return /*#__PURE__*/_react["default"].createElement("span", {
-        className: _ChannelIconModule["default"].container,
+        className: (0, _cssUtility.cn)(_ChannelIconModule["default"].container),
         "data-selector-id": dataSelectorId
       }, customizedChannelName ? /*#__PURE__*/_react["default"].createElement(_Avatar["default"], _extends({
         name: customizedChannelName,
@@ -141,7 +143,7 @@ var ChannelIcon = /*#__PURE__*/function (_Component) {
         title: iconTitle,
         dataId: dataId
       }, iconProps)), topicIcon ? /*#__PURE__*/_react["default"].createElement("span", {
-        className: "".concat(_ChannelIconModule["default"].thread, " ").concat(needTopicBorder ? _ChannelIconModule["default"].threadBorder : '', " ").concat(topicClass),
+        className: (0, _cssUtility.cn)("".concat(_ChannelIconModule["default"].thread, " ").concat(needTopicBorder ? _ChannelIconModule["default"].threadBorder : '', " ").concat(topicClass)),
         "data-title": topicIconTitle
       }, /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
         name: topicIcon,
@@ -157,8 +159,4 @@ var ChannelIcon = /*#__PURE__*/function (_Component) {
 
 exports["default"] = ChannelIcon;
 ChannelIcon.defaultProps = _defaultProps.defaultProps;
-ChannelIcon.propTypes = _propTypes.propTypes; // if (__DOCS__) {
-//   ChannelIcon.docs = {
-//     componentGroup: 'Atom'
-//   };
-// }
+ChannelIcon.propTypes = _propTypes.propTypes;

package/lib/ChannelIcon/ChannelIcon.module.css

@@ -6,15 +6,14 @@
 }
 
 .container {
-  position: relative;
   composes: dInflex from '~@zohodesk/components/es/common/common.module.css';
-  vertical-align: middle;
   composes: varClass;
+  composes: d-relative d-align-middle from global;
 }
 
 .thread {
   composes: dflex alignVertical alignHorizontal rounded from '~@zohodesk/components/es/common/common.module.css';
-  position: absolute;
+  composes: d-absolute from global;
   top: calc( var(--zd_size4) * -1 ) ;
   height: var(--zd_size15) ;
   width: var(--zd_size15) ;
@@ -35,7 +34,7 @@
 }
 
 .iconStyle {
-  position: relative;
+  composes: d-relative from global;
   color: var(--iconColor);
 }
 

package/lib/ChannelIcon/__tests__/__snapshots__/ChannelIcon.spec.js.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`ChannelIcon rendering the defult props 1`] = `
 <DocumentFragment>

package/lib/DotProvider/__tests__/__snapshots__/DotProvider.spec.js.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`DotProvider Snapshot Theme appearance: dark should render with themeAppearance = dark and themeColor = blue  1`] = `
 <DocumentFragment>

package/lib/Drawer/Drawer.module.css

@@ -5,10 +5,9 @@
 }
 
 .isOverlay {
+  composes: d-absolute d-pointer-events-none from global;
   top: 0 ;
   bottom: 0 ;
-  position: absolute;
-  pointer-events: none;
 }
 
 [dir=ltr] .isOverlay {
@@ -24,7 +23,7 @@
 }
 
 .drawerModal {
-  position: relative;
+  composes: d-relative from global;
 }
 
 .secondDrawer {
@@ -33,7 +32,7 @@
 }
 
 .secondMobDrawer {
-  position: absolute;
+  composes: d-absolute from global;
   top: 0 ;
   z-index: 1;
 }
@@ -47,7 +46,7 @@
 }
 
 .mobModal {
-  position: absolute;
+  composes: d-absolute from global;
   top: 0 ;
   bottom: 0 ;
 }
@@ -92,7 +91,7 @@
 
 .mbleSize,
 .default {
-  width: 100% ;
+  composes: d-w-full from global;
 }
 
 .header {

package/lib/Drawer/__tests__/__snapshots__/Content.spec.js.snap

@@ -1,9 +1,9 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Content Component Snapshots renders Content with paddingSize - large 1`] = `
 <DocumentFragment>
   <div
-    class="flexible basis_zero noShrink scroll_vertical largeContentPadding"
+    class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 d-overflow-y-auto d-overflow-x-hidden largeContentPadding"
     data-id="CardContent"
     data-scroll="true"
     data-selector-id="cardContent"
@@ -17,7 +17,7 @@ exports[`Content Component Snapshots renders Content with paddingSize - large 1`
 exports[`Content Component Snapshots renders Content with paddingSize - large and isVisible - false 1`] = `
 <DocumentFragment>
   <div
-    class="flexible basis_zero noShrink scroll_vertical largeContentPadding"
+    class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 d-overflow-y-auto d-overflow-x-hidden largeContentPadding"
     data-id="CardContent"
     data-scroll="true"
     data-selector-id="cardContent"
@@ -31,7 +31,7 @@ exports[`Content Component Snapshots renders Content with paddingSize - large an
 exports[`Content Component Snapshots renders Content with paddingSize - large and isVisible - true 1`] = `
 <DocumentFragment>
   <div
-    class="flexible basis_zero noShrink scroll_vertical largeContentPadding"
+    class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 d-overflow-y-auto d-overflow-x-hidden largeContentPadding"
     data-id="CardContent"
     data-scroll="true"
     data-selector-id="cardContent"
@@ -45,7 +45,7 @@ exports[`Content Component Snapshots renders Content with paddingSize - large an
 exports[`Content Component Snapshots renders Content with paddingSize - medium 1`] = `
 <DocumentFragment>
   <div
-    class="flexible basis_zero noShrink scroll_vertical mediumContentPadding"
+    class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 d-overflow-y-auto d-overflow-x-hidden mediumContentPadding"
     data-id="CardContent"
     data-scroll="true"
     data-selector-id="cardContent"
@@ -59,7 +59,7 @@ exports[`Content Component Snapshots renders Content with paddingSize - medium 1
 exports[`Content Component Snapshots renders Content with paddingSize - medium and isVisible - false 1`] = `
 <DocumentFragment>
   <div
-    class="flexible basis_zero noShrink scroll_vertical mediumContentPadding"
+    class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 d-overflow-y-auto d-overflow-x-hidden mediumContentPadding"
     data-id="CardContent"
     data-scroll="true"
     data-selector-id="cardContent"
@@ -73,7 +73,7 @@ exports[`Content Component Snapshots renders Content with paddingSize - medium a
 exports[`Content Component Snapshots renders Content with paddingSize - medium and isVisible - true 1`] = `
 <DocumentFragment>
   <div
-    class="flexible basis_zero noShrink scroll_vertical mediumContentPadding"
+    class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 d-overflow-y-auto d-overflow-x-hidden mediumContentPadding"
     data-id="CardContent"
     data-scroll="true"
     data-selector-id="cardContent"
@@ -87,7 +87,7 @@ exports[`Content Component Snapshots renders Content with paddingSize - medium a
 exports[`Content Component Snapshots renders Content with paddingSize - small 1`] = `
 <DocumentFragment>
   <div
-    class="flexible basis_zero noShrink scroll_vertical smallContentPadding"
+    class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 d-overflow-y-auto d-overflow-x-hidden smallContentPadding"
     data-id="CardContent"
     data-scroll="true"
     data-selector-id="cardContent"
@@ -101,7 +101,7 @@ exports[`Content Component Snapshots renders Content with paddingSize - small 1`
 exports[`Content Component Snapshots renders Content with paddingSize - small and isVisible - false 1`] = `
 <DocumentFragment>
   <div
-    class="flexible basis_zero noShrink scroll_vertical smallContentPadding"
+    class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 d-overflow-y-auto d-overflow-x-hidden smallContentPadding"
     data-id="CardContent"
     data-scroll="true"
     data-selector-id="cardContent"
@@ -115,7 +115,7 @@ exports[`Content Component Snapshots renders Content with paddingSize - small an
 exports[`Content Component Snapshots renders Content with paddingSize - small and isVisible - true 1`] = `
 <DocumentFragment>
   <div
-    class="flexible basis_zero noShrink scroll_vertical smallContentPadding"
+    class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 d-overflow-y-auto d-overflow-x-hidden smallContentPadding"
     data-id="CardContent"
     data-scroll="true"
     data-selector-id="cardContent"