@zohodesk/dot 1.0.0-beta.200 → 1.0.0-beta.204

package/lib/version2/notification/DesktopNotification/DesktopNotification.js

@@ -85,7 +85,8 @@ function DesktopNotificationUI(props) {
       _props$customClass = props.customClass,
       customClass = _props$customClass === void 0 ? {} : _props$customClass,
       _props$i18nKeys = props.i18nKeys,
-      i18nKeys = _props$i18nKeys === void 0 ? {} : _props$i18nKeys;
+      i18nKeys = _props$i18nKeys === void 0 ? {} : _props$i18nKeys,
+      customProps = props.customProps;
   var _i18nKeys$closeTitle = i18nKeys.closeTitle,
       closeTitle = _i18nKeys$closeTitle === void 0 ? 'Close' : _i18nKeys$closeTitle;
   var containerClass = customClass.containerClass;
@@ -94,6 +95,9 @@ function DesktopNotificationUI(props) {
       _ref$buttonPalette = _ref.buttonPalette,
       buttonPalette = _ref$buttonPalette === void 0 ? 'dangerFilled' : _ref$buttonPalette;
 
+  var _customProps$ExtraPro = customProps.ExtraProps,
+      ExtraProps = _customProps$ExtraPro === void 0 ? {} : _customProps$ExtraPro;
+
   function onClickSubmit(e) {
     onSubmit && onSubmit();
   }
@@ -113,12 +117,12 @@ function DesktopNotificationUI(props) {
     style: needAutoZindex && isAnimate ? {
       zIndex: "".concat(Zindex)
     } : {}
-  }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+  }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, _extends({
     className: "".concat(_DesktopNotificationModule["default"].container, " ").concat(isAnimate ? animateClass : animateRemoveClass, " ").concat(_DesktopNotificationModule["default"]["".concat(size)] ? _DesktopNotificationModule["default"]["".concat(size)] : '', " ").concat(isShrinkView ? _DesktopNotificationModule["default"].globalNotify : '', " ").concat(containerClass),
     isCover: false,
     dataId: dataId,
     isInline: uiVariantTwo
-  }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, null, /*#__PURE__*/_react["default"].createElement(_DesktopNotificationHeader["default"], {
+  }, ExtraProps), /*#__PURE__*/_react["default"].createElement(_Layout.Box, null, /*#__PURE__*/_react["default"].createElement(_DesktopNotificationHeader["default"], {
     type: type,
     title: title,
     variant: titleVariant,
@@ -204,7 +208,10 @@ DesktopNotification.propTypes = {
   submitText: _propTypes["default"].string,
   submitType: _propTypes["default"].oneOf(['primary', 'danger', 'success']),
   titleVariant: _propTypes["default"].oneOf(['primary', 'secondary']),
-  type: _propTypes["default"].oneOf(['success', 'error', 'danger', 'warning', 'info', 'notification', 'alarm'])
+  type: _propTypes["default"].oneOf(['success', 'error', 'danger', 'warning', 'info', 'notification', 'alarm']),
+  customProps: _propTypes["default"].shape({
+    ExtraProps: _propTypes["default"].object
+  })
 };
 DesktopNotification.defaultProps = {
   isMore: false,
@@ -217,7 +224,8 @@ DesktopNotification.defaultProps = {
   needIcon: true,
   titleVariant: 'primary',
   isShrinkView: false,
-  needClose: true
+  needClose: true,
+  customProps: {}
 };
 
 if (false) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/dot",
-  "version": "1.0.0-beta.200",
+  "version": "1.0.0-beta.204",
   "main": "lib/index",
   "module": "es/index.js",
   "jsnext:main": "es/index.js",
@@ -32,7 +32,7 @@
     "velocity-react": "^1.4.3",
     "@zohodesk/variables": "1.0.0-beta.25",
     "@zohodesk/i18n": "^1.0.0-beta.7",
-    "@zohodesk/components": "1.0.0-alpha-216",
+    "@zohodesk/components": "1.0.0-alpha-221",
     "@zohodesk/icons": "1.0.0-beta.85",
     "@zohodesk/svg": "1.0.0-beta.37",
     "@zohodesk/virtualizer": "1.0.3",
@@ -42,7 +42,7 @@
     "velocity-react": "^1.4.3",
     "@zohodesk/variables": "^1.0.0-beta.25",
     "@zohodesk/i18n": "^1.0.0-beta.7",
-    "@zohodesk/components": "1.0.0-alpha-216",
+    "@zohodesk/components": "1.0.0-alpha-221",
     "@zohodesk/icons": "^1.0.0-beta.85",
     "@zohodesk/svg": "^1.0.0-beta.37"
   },

package/src/Appearance/dark/mode/dotDarkMode.module.css

@@ -1,4 +1,4 @@
-[data-mode='dark'] {
+[data-mode='dark'], :global(.blueDarkTheme) [data-desk-theme="blue"] {
   /* action button */
   --zdt_actionButton_primaryFilled_bg: var(--zdt_cta_primary_bg);
   --zdt_actionButton_primaryFilled_hover_bg: var(--zdt_cta_primary_hover_bg);
@@ -230,8 +230,10 @@
 
   /* list layout */
   --zdt_listLayout_border: var(--zdt_cta_grey_15_border);
-  --zdt_listLayout_hover_border: var(--dot_listItemHover);
-  --zdt_listLayout_active_border: var(--dot_listItemActive);
+  --zdt_listLayout_hover_bg: var(--dot_listItemHover);
+  --zdt_listLayout_active_bg: var(--dot_listItemActive);
+  --zdt_listLayout_active_border: var(--zdt_cta_primary_border);
+  --zdt_listLayout_keyboard_active_border:#828994;
 
   /* list stencils */
   --zdt_liststencils_innercontainer_border: var(--zdt_cta_grey_15_border);
@@ -455,6 +457,7 @@
   --zdt_commonalert_close_hover_bg: #583a45;
   --zdt_commonalert_success_hover_bg: #2c4e42;
   --zdt_commonalert_info_hover_bg: var(--zdt_cta_primary_light_bg);
+  --zdt_commonalert_plaininfo_hover_bg: #262f3d;
   --zdt_commonalert_danger_hover_bg: #583a45;
   --zdt_commonalert_error_hover_bg: #583a45;
   --zdt_commonalert_warning_hover_bg: #583c2c;

package/src/Appearance/dark/themes/blue/blueDarkDotTheme.module.css

@@ -1,4 +1,4 @@
-[data-mode='dark'][data-theme='blue'] {
+[data-mode='dark'][data-theme='blue'], :global(.blueDarkTheme) [data-desk-theme="blue"] {
     /* freezelayer */
     --zdt_freezelayer_darklight_bg: rgba(27, 33, 43, 0.9);
 

package/src/Appearance/default/mode/dotDefaultMode.module.css

@@ -1,4 +1,4 @@
-[data-mode='default'] {
+[data-mode='default'], :global(.blueDefaultTheme) [data-desk-theme="blue"] {
   /* action button */
   --zdt_actionButton_primaryFilled_bg: var(--zdt_cta_primary_bg);
   --zdt_actionButton_primaryFilled_hover_bg: var(--zdt_cta_primary_hover_bg);
@@ -230,8 +230,10 @@
 
   /* list layout */
   --zdt_listLayout_border: var(--zdt_cta_grey_15_border);
-  --zdt_listLayout_hover_border: var(--dot_listItemHover);
-  --zdt_listLayout_active_border: var(--dot_listItemActive);
+  --zdt_listLayout_hover_bg: var(--dot_listItemHover);
+  --zdt_listLayout_active_bg: var(--dot_listItemActive);
+  --zdt_listLayout_active_border: var(--zdt_cta_primary_border);
+  --zdt_listLayout_keyboard_active_border:var(--dot_border_slateGrey);
 
   /* list stencils */
   --zdt_liststencils_innercontainer_border: var(--zdt_cta_grey_15_border);
@@ -455,6 +457,7 @@
   --zdt_commonalert_close_hover_bg: var(--dot_bg_paleRed);
   --zdt_commonalert_success_hover_bg: #e9f7ef;
   --zdt_commonalert_info_hover_bg: var(--zdt_cta_primary_light_bg);
+  --zdt_commonalert_plaininfo_hover_bg: var(--dot_bg_lavender);
   --zdt_commonalert_danger_hover_bg: var(--dot_bg_paleRed);
   --zdt_commonalert_error_hover_bg: var(--dot_bg_paleRed);
   --zdt_commonalert_warning_hover_bg: #fff1e6;

package/src/Appearance/default/themes/blue/blueDefaultDotTheme.module.css

@@ -1,4 +1,4 @@
-[data-mode='default'][data-theme='blue'] {
+[data-mode='default'][data-theme='blue'], :global(.blueDefaultTheme) [data-desk-theme="blue"] {
     /* freezelayer */
     --zdt_freezelayer_darklight_bg: rgba(44, 51, 77, 0.94);
 

package/src/docs/setupDocs.js

@@ -9,8 +9,6 @@ export { default as HelpTitle__default } from '../setup/helptips/Title/docs/Titl
 export { default as HelpListGroup } from '../setup/helptips/ListGroup/ListGroup';
 export { default as HelpListGroup__default } from '../setup/helptips/ListGroup/docs/ListGroup__default.docs';
 
-// export { default as SelectDropdown } from '../setup/header/SelectDropdown/SelectDropdown';
-// export { default as SelectDropdown__default } from '../setup/header/SelectDropdown/docs/SelectDropdown__default.docs';
 export { default as SetupHeaderViews } from '../setup/header/Views/Views';
 export { default as SetupHeaderViews__default } from '../setup/header/Views/docs/Views__default.docs';
 export { default as SetupHeaderSearch } from '../setup/header/Search/Search';

package/src/list/ListLayout/ListLayout.module.css

@@ -6,11 +6,11 @@
   composes: varClass;
 }
 .listHover:hover, .hoveredStyle{
-  background-color: var(--zdt_listLayout_hover_border);
+  background-color: var(--zdt_listLayout_hover_bg);
 }
 .active,
 .active:hover {
-  background-color: var(--zdt_listLayout_active_border);
+  background-color: var(--zdt_listLayout_active_bg);
 }
 .cursorPointer{
   cursor: pointer
@@ -36,19 +36,15 @@
 .compact,
 .classic,
 .superCompact {
-  margin-left: var(--zd_size2);
+  border-left: var(--zd_size2) solid transparent;
 }
-.keyboardActive {
-  position: relative;
-}
-.keyboardActive::after {
-  content: '';
-  position: absolute;
-  z-index: 2;
-  height: 100%;
-  border-left: var(--zd_size2) solid var(--dot_border_slateGrey);
-  left: 0;
-  top:0;
+.keyboardActive, .active{
   border-top-left-radius: var(--zd_size5);
   border-bottom-left-radius: var(--zd_size5);
+}
+.keyboardActive{
+  border-left-color: var(--zdt_listLayout_keyboard_active_border);
+}
+.active{
+  border-left-color: var(--zdt_listLayout_active_border);
 }

package/src/version2/GlobalNotification/GlobalNotification.js

@@ -36,7 +36,7 @@ export default class GlobalNotification extends React.Component {
   }
 
   render() {
-    let { type, message, hideMessage, onClick,i18nKeys={} } = this.props;
+    let { type, message, hideMessage, onClick, i18nKeys={}, customProps } = this.props;
     let { closeTitle = 'Close' } = i18nKeys;
     return (
       <GlobalNotificationUI
@@ -45,6 +45,7 @@ export default class GlobalNotification extends React.Component {
         hideMessage={hideMessage}
         onClick={onClick}
         closeTitle={closeTitle}
+        customProps={customProps}
       />
     );
   }
@@ -56,8 +57,14 @@ GlobalNotification.propTypes = {
   onClick: PropTypes.func,
   showMessage: PropTypes.bool,
   type: PropTypes.oneOf(['success', 'danger', 'info', 'warning', 'error']),
-  i18nKeys: PropTypes.object
+  i18nKeys: PropTypes.object,
+  customProps:PropTypes.shape({
+    ExtraProps: PropTypes.object
+  })
 };
+GlobalNotification.defaultProps = {
+  customProps: {}
+}
 if (__DOCS__) {
   GlobalNotification.docs = {
     componentGroup: 'GlobalNotification',
@@ -71,9 +78,10 @@ export function GlobalNotificationUI(props) {
     hideMessage && hideMessage(e);
     onClose && onClose(e);
   }
-  let { type = '', message, onClick, closeTitle='' } = props;
+  let { type = '', message, onClick, closeTitle='', customProps={} } = props;
+  let { ExtraProps={} } = customProps;
   return (
-    <div className={`${style.message} ${type ? style[type] : ''}`} data-id={`show_${type}_message`}>
+    <div className={`${style.message} ${type ? style[type] : ''}`} data-id={`show_${type}_message`} {...ExtraProps} >
       <Container
         className={`${style.container}`}
         alignBox='row'

package/src/version2/notification/DesktopNotification/DesktopNotification.js

@@ -58,11 +58,13 @@ export function DesktopNotificationUI(props) {
     onClose,
     needClose,
     customClass = {},
-    i18nKeys = {}
+    i18nKeys = {},
+    customProps
   } = props;
   let { closeTitle = 'Close' } = i18nKeys;
   let { containerClass } = customClass;
   let { buttonPalette = 'dangerFilled' } = buttonPaletteObject[type] || {};
+  let { ExtraProps={} } = customProps;
 
   function onClickSubmit(e) {
     onSubmit && onSubmit();
@@ -94,6 +96,7 @@ export function DesktopNotificationUI(props) {
         isCover={false}
         dataId={dataId}
         isInline={uiVariantTwo}
+        {...ExtraProps}
       >
         <Box>
           <DesktopNotificationHeader
@@ -227,7 +230,10 @@ DesktopNotification.propTypes = {
     'info',
     'notification',
     'alarm'
-  ])
+  ]),
+  customProps:PropTypes.shape({
+    ExtraProps: PropTypes.object
+  })
 };
 DesktopNotification.defaultProps = {
   isMore: false,
@@ -240,7 +246,8 @@ DesktopNotification.defaultProps = {
   needIcon: true,
   titleVariant: 'primary',
   isShrinkView: false,
-  needClose: true
+  needClose: true,
+  customProps: {}
 };
 
 if (__DOCS__) {