@zohodesk/dot 1.9.17 → 1.9.19

package/es/ChannelIcon/ChannelIcon.js

@@ -7,6 +7,7 @@ import { Icon } from '@zohodesk/icons';
 import Avatar from '@zohodesk/components/es/Avatar/Avatar';
 import AvatarIcon from "../avatar/AvatarIcon/AvatarIcon";
 import { getChannelMappingObj } from "../utils/ChannelIconMapping";
+import { cn } from "@dot-system/css-utility";
 import style from "./ChannelIcon.module.css";
 export default class ChannelIcon extends Component {
   constructor(props) {
@@ -54,7 +55,7 @@ export default class ChannelIcon extends Component {
     }
 
     return /*#__PURE__*/React.createElement("span", {
-      className: style.container,
+      className: cn(style.container),
       "data-selector-id": dataSelectorId
     }, customizedChannelName ? /*#__PURE__*/React.createElement(Avatar, _extends({
       name: customizedChannelName,
@@ -90,7 +91,7 @@ export default class ChannelIcon extends Component {
       title: iconTitle,
       dataId: dataId
     }, iconProps)), topicIcon ? /*#__PURE__*/React.createElement("span", {
-      className: `${style.thread} ${needTopicBorder ? style.threadBorder : ''} ${topicClass}`,
+      className: cn(`${style.thread} ${needTopicBorder ? style.threadBorder : ''} ${topicClass}`),
       "data-title": topicIconTitle
     }, /*#__PURE__*/React.createElement(Icon, {
       name: topicIcon,
@@ -102,8 +103,4 @@ export default class ChannelIcon extends Component {
 
 }
 ChannelIcon.defaultProps = defaultProps;
-ChannelIcon.propTypes = propTypes; // if (__DOCS__) {
-//   ChannelIcon.docs = {
-//     componentGroup: 'Atom'
-//   };
-// }
+ChannelIcon.propTypes = propTypes;

package/es/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/es/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/es/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/es/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/es/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"