@zohodesk/dot 1.0.0-beta.199 → 1.0.0-beta.201

package/README.md

@@ -2,6 +2,15 @@
 
 In this Library we Provide Some Basic Components to Build Your Application
 
+# 1.0.0-beta.201
+
+ - deprecated theme file moved to another place
+ - ListLayout => keyboardActive ui border added 
+
+# 1.0.0-beta.200
+
+- ListLayout => isKeyboardActive prop and ui added
+
 # 1.0.0-beta.199
 
 - - AvatarThread component -> getCustomThread prop added

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

@@ -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);

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

@@ -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);

package/es/avatar/AvatarThread/AvatarThread.js

@@ -56,7 +56,7 @@ export default class AvatarThread extends React.Component {
       "data-title": iconTitle,
       "data-id": iconTitle === 'Remove Follower' && 'removeFollower',
       onClick: onIconClick
-    }, /*#__PURE__*/React.createElement("span", {
+    }, iconName && /*#__PURE__*/React.createElement("span", {
       className: style.icon
     }, /*#__PURE__*/React.createElement(Icon, {
       name: iconName,

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.js

@@ -25,7 +25,8 @@ export default class ListLayout extends Component {
       a11y,
       isHovered,
       onMouseEnter,
-      needPointer
+      needPointer,
+      isKeyboardActive
     } = this.props;
     let {
       role = 'listitem',
@@ -34,7 +35,7 @@ export default class ListLayout extends Component {
       ariaSetsize
     } = a11y;
     return /*#__PURE__*/React.createElement("div", {
-      className: `${style.container} ${containerClass} ${needHover ? style.listHover : ''} ${isActive ? style.active : ''} ${style[view]} ${onClick && needPointer ? style.cursorPointer : ''} ${isHovered ? style.hoveredStyle : ''} `,
+      className: `${style.container} ${containerClass} ${needHover ? style.listHover : ''} ${isActive ? style.active : ''} ${style[view]} ${onClick && needPointer ? style.cursorPointer : ''} ${isHovered ? style.hoveredStyle : ''} ${isKeyboardActive ? style.keyboardActive : ''} `,
       onClick: onClick,
       onMouseEnter: onMouseEnter,
       onMouseLeave: onMouseLeave,
@@ -73,7 +74,8 @@ ListLayout.propTypes = {
   }),
   onMouseEnter: PropTypes.func,
   view: PropTypes.oneOf(['classic', 'compact', 'superCompact']),
-  needPointer: PropTypes.bool
+  needPointer: PropTypes.bool,
+  isKeyboardActive: PropTypes.bool
 };
 ListLayout.defaultProps = {
   needHover: true,
@@ -83,7 +85,8 @@ ListLayout.defaultProps = {
   a11y: {},
   isHovered: false,
   onMouseEnter: () => {},
-  needPointer: true
+  needPointer: true,
+  isKeyboardActive: false
 };
 export class Column extends Component {
   constructor(props) {

package/es/list/ListLayout/ListLayout.module.css

@@ -5,16 +5,15 @@
   position: relative;
   composes: varClass;
 }
-.listHover:hover, .hoveredStyle {
-  background-color: var(--zdt_listLayout_hover_border);
+.listHover:hover, .hoveredStyle{
+  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
 }
-
 /* View */
 .classic .innerContainer {
   min-height: var(--zd_size70);
@@ -31,3 +30,31 @@
 .compact .innerContainer, .classic .innerContainer, .superCompact .innerContainer {
   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;
+}
+[dir=ltr] .active{
+  border-left-color: var(--zdt_listLayout_active_border);
+  border-top-left-radius: var(--zd_size5);
+  border-bottom-left-radius: var(--zd_size5);
+}
+[dir=rtl] .active{
+  border-right-color: var(--zdt_listLayout_active_border);
+  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);
+  border-top-left-radius: var(--zd_size5);
+  border-bottom-left-radius: var(--zd_size5);
+}
+[dir=rtl] .keyboardActive {
+  border-right-color: var(--zdt_listLayout_keyboard_active_border);
+  border-top-right-radius: var(--zd_size5);
+  border-bottom-right-radius: var(--zd_size5);
+}

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

@@ -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);

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

@@ -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);

package/lib/avatar/AvatarThread/AvatarThread.js

@@ -103,7 +103,7 @@ var AvatarThread = /*#__PURE__*/function (_React$Component) {
         "data-title": iconTitle,
         "data-id": iconTitle === 'Remove Follower' && 'removeFollower',
         onClick: onIconClick
-      }, /*#__PURE__*/_react["default"].createElement("span", {
+      }, iconName && /*#__PURE__*/_react["default"].createElement("span", {
         className: _AvatarThreadModule["default"].icon
       }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
         name: iconName,

package/lib/list/ListLayout/ListLayout.js

@@ -76,14 +76,15 @@ var ListLayout = /*#__PURE__*/function (_Component) {
           a11y = _this$props.a11y,
           isHovered = _this$props.isHovered,
           onMouseEnter = _this$props.onMouseEnter,
-          needPointer = _this$props.needPointer;
+          needPointer = _this$props.needPointer,
+          isKeyboardActive = _this$props.isKeyboardActive;
       var _a11y$role = a11y.role,
           role = _a11y$role === void 0 ? 'listitem' : _a11y$role,
           ariaLabel = a11y.ariaLabel,
           ariaPosinset = a11y.ariaPosinset,
           ariaSetsize = a11y.ariaSetsize;
       return /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(_ListLayoutModule["default"].container, " ").concat(containerClass, " ").concat(needHover ? _ListLayoutModule["default"].listHover : '', " ").concat(isActive ? _ListLayoutModule["default"].active : '', " ").concat(_ListLayoutModule["default"][view], " ").concat(onClick && needPointer ? _ListLayoutModule["default"].cursorPointer : '', " ").concat(isHovered ? _ListLayoutModule["default"].hoveredStyle : '', " "),
+        className: "".concat(_ListLayoutModule["default"].container, " ").concat(containerClass, " ").concat(needHover ? _ListLayoutModule["default"].listHover : '', " ").concat(isActive ? _ListLayoutModule["default"].active : '', " ").concat(_ListLayoutModule["default"][view], " ").concat(onClick && needPointer ? _ListLayoutModule["default"].cursorPointer : '', " ").concat(isHovered ? _ListLayoutModule["default"].hoveredStyle : '', " ").concat(isKeyboardActive ? _ListLayoutModule["default"].keyboardActive : '', " "),
         onClick: onClick,
         onMouseEnter: onMouseEnter,
         onMouseLeave: onMouseLeave,
@@ -125,7 +126,7 @@ ListLayout.propTypes = (_ListLayout$propTypes = {
     ariaSetsize: _propTypes["default"].number
   }),
   onMouseEnter: _propTypes["default"].func
-}, _defineProperty(_ListLayout$propTypes, "view", _propTypes["default"].oneOf(['classic', 'compact', 'superCompact'])), _defineProperty(_ListLayout$propTypes, "needPointer", _propTypes["default"].bool), _ListLayout$propTypes);
+}, _defineProperty(_ListLayout$propTypes, "view", _propTypes["default"].oneOf(['classic', 'compact', 'superCompact'])), _defineProperty(_ListLayout$propTypes, "needPointer", _propTypes["default"].bool), _defineProperty(_ListLayout$propTypes, "isKeyboardActive", _propTypes["default"].bool), _ListLayout$propTypes);
 ListLayout.defaultProps = {
   needHover: true,
   view: 'classic',
@@ -134,7 +135,8 @@ ListLayout.defaultProps = {
   a11y: {},
   isHovered: false,
   onMouseEnter: function onMouseEnter() {},
-  needPointer: true
+  needPointer: true,
+  isKeyboardActive: false
 };
 
 var Column = /*#__PURE__*/function (_Component2) {

package/lib/list/ListLayout/ListLayout.module.css

@@ -5,16 +5,15 @@
   position: relative;
   composes: varClass;
 }
-.listHover:hover, .hoveredStyle {
-  background-color: var(--zdt_listLayout_hover_border);
+.listHover:hover, .hoveredStyle{
+  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
 }
-
 /* View */
 .classic .innerContainer {
   min-height: var(--zd_size70);
@@ -31,3 +30,31 @@
 .compact .innerContainer, .classic .innerContainer, .superCompact .innerContainer {
   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;
+}
+[dir=ltr] .active{
+  border-left-color: var(--zdt_listLayout_active_border);
+  border-top-left-radius: var(--zd_size5);
+  border-bottom-left-radius: var(--zd_size5);
+}
+[dir=rtl] .active{
+  border-right-color: var(--zdt_listLayout_active_border);
+  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);
+  border-top-left-radius: var(--zd_size5);
+  border-bottom-left-radius: var(--zd_size5);
+}
+[dir=rtl] .keyboardActive {
+  border-right-color: var(--zdt_listLayout_keyboard_active_border);
+  border-top-right-radius: var(--zd_size5);
+  border-bottom-right-radius: var(--zd_size5);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/dot",
-  "version": "1.0.0-beta.199",
+  "version": "1.0.0-beta.201",
   "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-219",
     "@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-219",
     "@zohodesk/icons": "^1.0.0-beta.85",
     "@zohodesk/svg": "^1.0.0-beta.37"
   },

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

@@ -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);

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

@@ -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);

package/src/avatar/AvatarThread/AvatarThread.js

@@ -65,6 +65,7 @@ export default class AvatarThread extends React.Component {
             data-id={iconTitle === 'Remove Follower' && 'removeFollower'}
             onClick={onIconClick}
           >
+          {iconName &&
             <span className={style.icon}>
               <Icon
                 name={iconName}
@@ -76,6 +77,7 @@ export default class AvatarThread extends React.Component {
                 }
               />
             </span>
+            }
             {getCustomThread && getCustomThread()}
           </span>
         )}

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.js

@@ -23,7 +23,8 @@ export default class ListLayout extends Component {
       a11y,
       isHovered,
       onMouseEnter,
-      needPointer
+      needPointer,
+      isKeyboardActive
     } = this.props;
 
     let { role = 'listitem', ariaLabel, ariaPosinset, ariaSetsize } = a11y;
@@ -33,7 +34,7 @@ export default class ListLayout extends Component {
           needHover ? style.listHover : ''
         } ${isActive ? style.active : ''} ${style[view]} ${
           onClick && needPointer ? style.cursorPointer : ''
-        } ${isHovered ? style.hoveredStyle : ''} `}
+        } ${isHovered ? style.hoveredStyle : ''} ${isKeyboardActive ? style.keyboardActive : ''} `}
         onClick={onClick}
         onMouseEnter={onMouseEnter}
         onMouseLeave={onMouseLeave}
@@ -76,7 +77,8 @@ ListLayout.propTypes = {
   }),
   onMouseEnter: PropTypes.func,
   view: PropTypes.oneOf(['classic', 'compact', 'superCompact']),
-  needPointer: PropTypes.bool
+  needPointer: PropTypes.bool,
+  isKeyboardActive: PropTypes.bool
 };
 ListLayout.defaultProps = {
   needHover: true,
@@ -86,7 +88,8 @@ ListLayout.defaultProps = {
   a11y: {},
   isHovered: false,
   onMouseEnter: () => {},
-  needPointer: true
+  needPointer: true,
+  isKeyboardActive: false
 };
 export class Column extends Component {
   constructor(props) {

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

@@ -5,18 +5,16 @@
   position: relative;
   composes: varClass;
 }
-.listHover:hover,
-.hoveredStyle {
-  background-color: var(--zdt_listLayout_hover_border);
+.listHover:hover, .hoveredStyle{
+  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
 }
-
 /* View */
 .classic .innerContainer {
   padding: var(--zd_size13) 0;
@@ -35,3 +33,19 @@
 .superCompact .innerContainer {
   border-bottom: 1px dotted var(--listBorder);
 }
+.compact,
+.classic,
+.superCompact {
+  margin-left: var(--zd_size2);
+  border-left: var(--zd_size2) solid transparent;
+}
+.active{
+  border-left-color: var(--zdt_listLayout_active_border);
+  border-top-left-radius: var(--zd_size5);
+  border-bottom-left-radius: var(--zd_size5);
+}
+.keyboardActive {
+  border-left-color: var(--zdt_listLayout_keyboard_active_border);
+  border-top-left-radius: var(--zd_size5);
+  border-bottom-left-radius: var(--zd_size5);
+}