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

package/README.md

@@ -1,6 +1,24 @@
 # DOT Design Components
 
-In this Library we Provide Some Basic Components to Build Your Application
+In this Library, we Provide Some Basic Components to Build Your Application
+
+# 1.0.0-beta.204
+
+- blueDefaultTheme & blueDarkTheme class name added in Mode & Blue DotTheme files
+- GlobalNotification, DesktopNotification => customProps prop added
+
+# 1.0.0-beta.203
+
+- ListLayout => active, keyboarActive css priority fixed 
+
+# 1.0.0-beta.202
+
+- ListLayout => marginLeft fixed
+
+# 1.0.0-beta.201
+
+ - deprecated theme file moved to another place
+ - ListLayout => keyboardActive ui border added 
 
 # 1.0.0-beta.200
 
@@ -46,7 +64,7 @@ In this Library we Provide Some Basic Components to Build Your Application
 
 # 1.0.0-beta.189
 
-- - transition variable implemented in all css
+- - transition variable implemented in all CSS
 
 # 1.0.0-beta.188
 
@@ -111,7 +129,7 @@ In this Library we Provide Some Basic Components to Build Your Application
 # 1.0.0-beta.175
 
 - PropTypes Validattion Fixes
-- errorState DataId and Common Css Fixes
+- error state DataId and Common Css Fixes
 
 # 1.0.0-beta.174
 
@@ -163,7 +181,7 @@ In this Library we Provide Some Basic Components to Build Your Application
 
 # 1.0.0-beta.165
 
-- Palette Based Folder Structure Changed.
+- Palette-Based Folder Structure Changed.
 - data-theme changed to data-mode
 - data-palette changed to data-theme
 
@@ -371,7 +389,7 @@ In this Library we Provide Some Basic Components to Build Your Application
 
 # 1.0.0-beta.131
 
-- Added the character '#' in AlphaticList component.
+- Added the character '#' in the AlphabeticList component.
 
 # 1.0.0-beta.130
 
@@ -408,7 +426,7 @@ In this Library we Provide Some Basic Components to Build Your Application
 
 # 1.0.0-beta.123
 
-- Drawer => drawerModal portal removed, here after need to send inner portalname through innerPortalName prop.
+- Drawer => drawer model portal removed, hereafter need to send inner portal name through innerPortalName prop.
 
 # 1.0.0-beta.122
 
@@ -424,7 +442,7 @@ In this Library we Provide Some Basic Components to Build Your Application
 
 # 1.0.0-beta.119
 
-- Drawer RHS padding css fixes
+- Drawer RHS padding CSS fixes
 
 # 1.0.0-beta.118
 
@@ -470,7 +488,7 @@ In this Library we Provide Some Basic Components to Build Your Application
 
 # 1.0.0-beta.109
 
-- needAutoZindex prop added in freezelayer and Drawer
+- needAutoZindex prop added in freeze layer and Drawer
 - Provider Changes
 
 # 1.0.0-beta.108
@@ -479,7 +497,7 @@ In this Library we Provide Some Basic Components to Build Your Application
 
 # 1.0.0-beta.107
 
-- ToggleDropDown Temp Fix for Rerender Isssue
+- ToggleDropDown Temp Fix for Rerender Issue
 
 # 1.0.0-beta.106
 
@@ -552,7 +570,7 @@ In this Library we Provide Some Basic Components to Build Your Application
 # 1.0.0-beta.91
 
 - Upload Component Preview mode Fixed
-- dotcommon.module.css removed, audioimage removed
+- dotcommon.module.css removed, audio image removed
 
 # 1.0.0-beta.90
 
@@ -601,8 +619,8 @@ In this Library we Provide Some Basic Components to Build Your Application
 
 # 1.0.0-beta.79
 
--Upload => abort upload support added
--ExternalLink => Issue with URLs with Uppercase characters fixed
+- Upload => abort upload support added
+- ExternalLink => Issue with URLs with Uppercase characters fixed
 
 # 1.0.0-beta.78
 
@@ -638,7 +656,7 @@ In this Library we Provide Some Basic Components to Build Your Application
 # 1.0.0-beta.72
 
 - CommonEmptyState Props Changed
-- Svg Version Updated
+- SVG Version Updated
 
 # 1.0.0-beta.71
 
@@ -745,20 +763,20 @@ In this Library we Provide Some Basic Components to Build Your Application
 
 # 1.0.0-beta.51
 
-- Version update for svg package
+- Version update for SVG package
 
 # 1.0.0-beta.50
 
-- Version update for svg package
+- Version update for SVG package
 
 # 1.0.0-beta.49
 
-- Version update for svg package
+- Version update for SVG package
 
 # 1.0.0-beta.48
 
 - Component version update
-- customClass prop added for errorstate components
+- customClass prop added for error state components
 
 # 1.0.0-beta.47
 
@@ -862,16 +880,16 @@ In this Library we Provide Some Basic Components to Build Your Application
 
 # 1.0.0-beta.30
 
-- Upload Component Css Fix
+- Upload Component CSS Fix
 
 # 1.0.0-beta.29
 
 - Attachment, Upload Component Added
-- Dot Component Issue ans SecondaryPanel List Dotted Fixed
+- Dot Component Issue and SecondaryPanel List Dotted Fixed
 
 # 1.0.0-beta.28
 
-- Toast Messsage component functionality fix.
+- Toast Message component functionality fix.
 
 # 1.0.0-beta.27
 
@@ -882,7 +900,7 @@ In this Library we Provide Some Basic Components to Build Your Application
 
 # 1.0.0-beta.26
 
-- Changing 'falseObj' key to 'failure' in consistency with permission library.
+- Changing the 'falseObj' key to 'failure' inconsistency with permission library.
 
 # 1.0.0-beta.25
 
@@ -891,13 +909,13 @@ In this Library we Provide Some Basic Components to Build Your Application
 # 1.0.0-beta.24
 
 - TicketId Link Added
-- Avatar User Palatte Added
+- Avatar User Palette Added
 - IconButton Added
 
 # 1.0.0-beta.23
 
-- Adding tourId in FlipCard, AvatarFlip and GridIcons component.
-- Adding SvgMask support and tourId in FreezeLayer component.
+- Adding tourId in FlipCard, AvatarFlip, and GridIcons component.
+- Adding SvgMask support and tourId in the FreezeLayer component.
 
 # 1.0.0-beta.21
 
@@ -911,7 +929,7 @@ In this Library we Provide Some Basic Components to Build Your Application
 
 # 1.0.0-beta.19
 
-- Onclick option added for TableRow Component , Avatar Icon Data-Id Fixed and Container Changed, Avatar Based Components Css Provider Implemented
+- Onclick option added for TableRow Component, Avatar Icon Data-Id Fixed and Container Changed, Avatar Based Components Css Provider Implemented
 
 # 1.0.0-beta.17
 
@@ -930,12 +948,12 @@ In this Library we Provide Some Basic Components to Build Your Application
 - DeleteLookupHeader Removed
 - Lookup text Bold prop Included
 - Toggle Dropdown Children Fix
-- Svg Version Updated
+- SVG Version Updated
 - ErrorState Fix
 
 # 1.0.0-beta.13
 
-- Toggle Dropdown onscroll implemented,
+- Toggle Dropdown onScroll implemented,
 - Data Id Fixes
 - AlertLookup Setcion ClassName Support
 - Table Onclick Functions
@@ -947,13 +965,13 @@ In this Library we Provide Some Basic Components to Build Your Application
 # 1.0.0-beta.11
 
 - Svg Exported
-- Externla Link Fix, Data-Id Change
+- External Link Fix, Data-Id Change
 - Toggle Dropdown Fix
 
 # 1.0.0-beta.10
 
 - Externel Link XSS Fix
-- AlertLookup customeHeader Fix
+- AlertLookup custom-header Fix
 - ToastMessage DataId Added
 
 # 1.0.0-beta.9
@@ -978,11 +996,11 @@ In this Library we Provide Some Basic Components to Build Your Application
 
 # 1.0.0-beta.3
 
--Drawer , Toast Message, Loader , Toggle DropDown update
+-Drawer, Toast Message, Loader, Toggle DropDown update
 
 # 1.0.0-beta.2
 
-- List, Lookup, Layout, FreezeLayer , SVG Published
+- List, Lookup, Layout, FreezeLayer, SVG Published
 
 # 1.0.0-beta.1
 

package/es/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/es/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/es/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/es/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/es/docs/setupDocs.js

@@ -7,9 +7,7 @@ export { default as HelpDescription__default } from '../setup/helptips/Descripti
 export { default as HelpTitle } from '../setup/helptips/Title/Title';
 export { default as HelpTitle__default } from '../setup/helptips/Title/docs/Title__default.docs';
 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 HelpListGroup__default } from '../setup/helptips/ListGroup/docs/ListGroup__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/es/list/ListLayout/ListLayout.module.css

@@ -6,10 +6,10 @@
   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
@@ -31,30 +31,28 @@
   border-bottom: 1px dotted var(--listBorder);
 }
 [dir=ltr] .compact, [dir=ltr] .classic, [dir=ltr] .superCompact {
-  margin-left: var(--zd_size2);
+  border-left: var(--zd_size2) solid transparent;
 }
 [dir=rtl] .compact, [dir=rtl] .classic, [dir=rtl] .superCompact {
-  margin-right: var(--zd_size2);
+  border-right: var(--zd_size2) solid transparent;
 }
-.keyboardActive {
-  position: relative;
-}
-.keyboardActive::after {
-  content: '';
-  position: absolute;
-  z-index: 2;
-  height: 100%;
-  top:0;
-}
-[dir=ltr] .keyboardActive::after {
-  border-left: var(--zd_size2) solid var(--dot_border_slateGrey);
-  left: 0;
+[dir=ltr] .keyboardActive, [dir=ltr] .active{
   border-top-left-radius: var(--zd_size5);
   border-bottom-left-radius: var(--zd_size5);
 }
-[dir=rtl] .keyboardActive::after {
-  border-right: var(--zd_size2) solid var(--dot_border_slateGrey);
-  right: 0;
+[dir=rtl] .keyboardActive, [dir=rtl] .active{
   border-top-right-radius: var(--zd_size5);
   border-bottom-right-radius: var(--zd_size5);
+}
+[dir=ltr] .keyboardActive{
+  border-left-color: var(--zdt_listLayout_keyboard_active_border);
+}
+[dir=rtl] .keyboardActive{
+  border-right-color: var(--zdt_listLayout_keyboard_active_border);
+}
+[dir=ltr] .active{
+  border-left-color: var(--zdt_listLayout_active_border);
+}
+[dir=rtl] .active{
+  border-right-color: var(--zdt_listLayout_active_border);
 }

package/es/version2/GlobalNotification/GlobalNotification.js

@@ -50,7 +50,8 @@ export default class GlobalNotification extends React.Component {
       message,
       hideMessage,
       onClick,
-      i18nKeys = {}
+      i18nKeys = {},
+      customProps
     } = this.props;
     let {
       closeTitle = 'Close'
@@ -60,7 +61,8 @@ export default class GlobalNotification extends React.Component {
       message: message,
       hideMessage: hideMessage,
       onClick: onClick,
-      closeTitle: closeTitle
+      closeTitle: closeTitle,
+      customProps: customProps
     });
   }
 
@@ -72,7 +74,13 @@ 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 (false) {
@@ -96,12 +104,16 @@ export function GlobalNotificationUI(props) {
     type = '',
     message,
     onClick,
-    closeTitle = ''
+    closeTitle = '',
+    customProps = {}
   } = props;
-  return /*#__PURE__*/React.createElement("div", {
+  let {
+    ExtraProps = {}
+  } = customProps;
+  return /*#__PURE__*/React.createElement("div", _extends({
     className: `${style.message} ${type ? style[type] : ''}`,
     "data-id": `show_${type}_message`
-  }, /*#__PURE__*/React.createElement(Container, {
+  }, ExtraProps), /*#__PURE__*/React.createElement(Container, {
     className: `${style.container}`,
     alignBox: "row",
     isCover: false,

package/es/version2/notification/DesktopNotification/DesktopNotification.js

@@ -57,7 +57,8 @@ export function DesktopNotificationUI(props) {
     onClose,
     needClose,
     customClass = {},
-    i18nKeys = {}
+    i18nKeys = {},
+    customProps
   } = props;
   let {
     closeTitle = 'Close'
@@ -68,6 +69,9 @@ export function DesktopNotificationUI(props) {
   let {
     buttonPalette = 'dangerFilled'
   } = buttonPaletteObject[type] || {};
+  let {
+    ExtraProps = {}
+  } = customProps;
 
   function onClickSubmit(e) {
     onSubmit && onSubmit();
@@ -88,12 +92,12 @@ export function DesktopNotificationUI(props) {
     style: needAutoZindex && isAnimate ? {
       zIndex: `${Zindex}`
     } : {}
-  }, /*#__PURE__*/React.createElement(Container, {
+  }, /*#__PURE__*/React.createElement(Container, _extends({
     className: `${style.container} ${isAnimate ? animateClass : animateRemoveClass} ${style[`${size}`] ? style[`${size}`] : ''} ${isShrinkView ? style.globalNotify : ''} ${containerClass}`,
     isCover: false,
     dataId: dataId,
     isInline: uiVariantTwo
-  }, /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(DesktopNotificationHeader, {
+  }, ExtraProps), /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(DesktopNotificationHeader, {
     type: type,
     title: title,
     variant: titleVariant,
@@ -177,7 +181,10 @@ DesktopNotification.propTypes = {
   submitText: PropTypes.string,
   submitType: PropTypes.oneOf(['primary', 'danger', 'success']),
   titleVariant: PropTypes.oneOf(['primary', 'secondary']),
-  type: PropTypes.oneOf(['success', 'error', 'danger', 'warning', 'info', 'notification', 'alarm'])
+  type: PropTypes.oneOf(['success', 'error', 'danger', 'warning', 'info', 'notification', 'alarm']),
+  customProps: PropTypes.shape({
+    ExtraProps: PropTypes.object
+  })
 };
 DesktopNotification.defaultProps = {
   isMore: false,
@@ -190,7 +197,8 @@ DesktopNotification.defaultProps = {
   needIcon: true,
   titleVariant: 'primary',
   isShrinkView: false,
-  needClose: true
+  needClose: true,
+  customProps: {}
 };
 
 if (false) {

package/lib/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/lib/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/lib/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/lib/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/lib/list/ListLayout/ListLayout.module.css

@@ -6,10 +6,10 @@
   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
@@ -31,30 +31,28 @@
   border-bottom: 1px dotted var(--listBorder);
 }
 [dir=ltr] .compact, [dir=ltr] .classic, [dir=ltr] .superCompact {
-  margin-left: var(--zd_size2);
+  border-left: var(--zd_size2) solid transparent;
 }
 [dir=rtl] .compact, [dir=rtl] .classic, [dir=rtl] .superCompact {
-  margin-right: var(--zd_size2);
+  border-right: var(--zd_size2) solid transparent;
 }
-.keyboardActive {
-  position: relative;
-}
-.keyboardActive::after {
-  content: '';
-  position: absolute;
-  z-index: 2;
-  height: 100%;
-  top:0;
-}
-[dir=ltr] .keyboardActive::after {
-  border-left: var(--zd_size2) solid var(--dot_border_slateGrey);
-  left: 0;
+[dir=ltr] .keyboardActive, [dir=ltr] .active{
   border-top-left-radius: var(--zd_size5);
   border-bottom-left-radius: var(--zd_size5);
 }
-[dir=rtl] .keyboardActive::after {
-  border-right: var(--zd_size2) solid var(--dot_border_slateGrey);
-  right: 0;
+[dir=rtl] .keyboardActive, [dir=rtl] .active{
   border-top-right-radius: var(--zd_size5);
   border-bottom-right-radius: var(--zd_size5);
+}
+[dir=ltr] .keyboardActive{
+  border-left-color: var(--zdt_listLayout_keyboard_active_border);
+}
+[dir=rtl] .keyboardActive{
+  border-right-color: var(--zdt_listLayout_keyboard_active_border);
+}
+[dir=ltr] .active{
+  border-left-color: var(--zdt_listLayout_active_border);
+}
+[dir=rtl] .active{
+  border-right-color: var(--zdt_listLayout_active_border);
 }

package/lib/version2/GlobalNotification/GlobalNotification.js

@@ -102,7 +102,8 @@ var GlobalNotification = /*#__PURE__*/function (_React$Component) {
           hideMessage = _this$props3.hideMessage,
           onClick = _this$props3.onClick,
           _this$props3$i18nKeys = _this$props3.i18nKeys,
-          i18nKeys = _this$props3$i18nKeys === void 0 ? {} : _this$props3$i18nKeys;
+          i18nKeys = _this$props3$i18nKeys === void 0 ? {} : _this$props3$i18nKeys,
+          customProps = _this$props3.customProps;
       var _i18nKeys$closeTitle = i18nKeys.closeTitle,
           closeTitle = _i18nKeys$closeTitle === void 0 ? 'Close' : _i18nKeys$closeTitle;
       return /*#__PURE__*/_react["default"].createElement(GlobalNotificationUI, {
@@ -110,7 +111,8 @@ var GlobalNotification = /*#__PURE__*/function (_React$Component) {
         message: message,
         hideMessage: hideMessage,
         onClick: onClick,
-        closeTitle: closeTitle
+        closeTitle: closeTitle,
+        customProps: customProps
       });
     }
   }]);
@@ -126,7 +128,13 @@ GlobalNotification.propTypes = {
   onClick: _propTypes["default"].func,
   showMessage: _propTypes["default"].bool,
   type: _propTypes["default"].oneOf(['success', 'danger', 'info', 'warning', 'error']),
-  i18nKeys: _propTypes["default"].object
+  i18nKeys: _propTypes["default"].object,
+  customProps: _propTypes["default"].shape({
+    ExtraProps: _propTypes["default"].object
+  })
+};
+GlobalNotification.defaultProps = {
+  customProps: {}
 };
 
 if (false) {
@@ -149,11 +157,15 @@ function GlobalNotificationUI(props) {
       message = props.message,
       onClick = props.onClick,
       _props$closeTitle = props.closeTitle,
-      closeTitle = _props$closeTitle === void 0 ? '' : _props$closeTitle;
-  return /*#__PURE__*/_react["default"].createElement("div", {
+      closeTitle = _props$closeTitle === void 0 ? '' : _props$closeTitle,
+      _props$customProps = props.customProps,
+      customProps = _props$customProps === void 0 ? {} : _props$customProps;
+  var _customProps$ExtraPro = customProps.ExtraProps,
+      ExtraProps = _customProps$ExtraPro === void 0 ? {} : _customProps$ExtraPro;
+  return /*#__PURE__*/_react["default"].createElement("div", _extends({
     className: "".concat(_GlobalNotificationModule["default"].message, " ").concat(type ? _GlobalNotificationModule["default"][type] : ''),
     "data-id": "show_".concat(type, "_message")
-  }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+  }, ExtraProps), /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
     className: "".concat(_GlobalNotificationModule["default"].container),
     alignBox: "row",
     isCover: false,