@teambit/component.ui.version-dropdown 0.0.499 → 0.0.502

package/dist/lane-info/lane-info.js

@@ -4,15 +4,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.LaneInfo = void 0;
-const classnames_1 = __importDefault(require("classnames"));
 const react_1 = __importDefault(require("react"));
-const base_ui_routing_nav_link_1 = require("@teambit/base-ui.routing.nav-link");
+const design_ui_surfaces_menu_link_item_1 = require("@teambit/design.ui.surfaces.menu.link-item");
 const evangelist_elements_icon_1 = require("@teambit/evangelist.elements.icon");
 const lane_info_module_scss_1 = __importDefault(require("./lane-info.module.scss"));
 function LaneInfo({ id, url, currentLane }) {
     const isCurrent = (currentLane === null || currentLane === void 0 ? void 0 : currentLane.id) === id;
     return (react_1.default.createElement("div", { key: id },
-        react_1.default.createElement(base_ui_routing_nav_link_1.NavLink, { href: url, className: (0, classnames_1.default)(lane_info_module_scss_1.default.versionLine, lane_info_module_scss_1.default.versionRow, isCurrent && lane_info_module_scss_1.default.currentVersion) },
+        react_1.default.createElement(design_ui_surfaces_menu_link_item_1.MenuLinkItem, { isActive: () => isCurrent, href: url, className: lane_info_module_scss_1.default.versionRow },
             react_1.default.createElement("span", null,
                 react_1.default.createElement(evangelist_elements_icon_1.Icon, { className: lane_info_module_scss_1.default.laneIcon, of: "lane" }),
                 id))));

package/dist/lane-info/lane-info.js.map

@@ -1 +1 @@
-{"version":3,"file":"lane-info.js","sourceRoot":"","sources":["../../lane-info/lane-info.tsx"],"names":[],"mappings":";;;;;;AACA,4DAAoC;AACpC,kDAA0B;AAC1B,gFAA4D;AAC5D,gFAAyD;AACzD,oFAA6C;AAI7C,SAAgB,QAAQ,CAAC,EAAE,EAAE,EAAE,GAAG,EAAE,WAAW,EAAiB;IAC9D,MAAM,SAAS,GAAG,CAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,EAAE,MAAK,EAAE,CAAC;IAEzC,OAAO,CACL,uCAAK,GAAG,EAAE,EAAE;QACV,8BAAC,kCAAO,IACN,IAAI,EAAE,GAAG,EACT,SAAS,EAAE,IAAA,oBAAU,EAAC,+BAAM,CAAC,WAAW,EAAE,+BAAM,CAAC,UAAU,EAAE,SAAS,IAAI,+BAAM,CAAC,cAAc,CAAC;YAEhG;gBACE,8BAAC,+BAAI,IAAC,SAAS,EAAE,+BAAM,CAAC,QAAQ,EAAE,EAAE,EAAC,MAAM,GAAQ;gBAClD,EAAE,CACE,CACC,CACN,CACP,CAAC;AACJ,CAAC;AAhBD,4BAgBC"}
+{"version":3,"file":"lane-info.js","sourceRoot":"","sources":["../../lane-info/lane-info.tsx"],"names":[],"mappings":";;;;;;AACA,kDAA0B;AAC1B,kGAA0E;AAC1E,gFAAyD;AACzD,oFAA6C;AAI7C,SAAgB,QAAQ,CAAC,EAAE,EAAE,EAAE,GAAG,EAAE,WAAW,EAAiB;IAC9D,MAAM,SAAS,GAAG,CAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,EAAE,MAAK,EAAE,CAAC;IAEzC,OAAO,CACL,uCAAK,GAAG,EAAE,EAAE;QACV,8BAAC,gDAAY,IAAC,QAAQ,EAAE,GAAG,EAAE,CAAC,SAAS,EAAE,IAAI,EAAE,GAAG,EAAE,SAAS,EAAE,+BAAM,CAAC,UAAU;YAC9E;gBACE,8BAAC,+BAAI,IAAC,SAAS,EAAE,+BAAM,CAAC,QAAQ,EAAE,EAAE,EAAC,MAAM,GAAQ;gBAClD,EAAE,CACE,CACM,CACX,CACP,CAAC;AACJ,CAAC;AAbD,4BAaC"}

package/dist/lane-info/lane-info.module.scss

@@ -1,30 +1,27 @@
-.versionLine {
-  cursor: pointer;
+.versionRow {
   display: flex;
+  justify-content: space-between;
   align-items: center;
-  height: 36px;
+  height: 40px;
   padding: 0 24px;
-  text-decoration: none;
-  color: var(--bit-text-color-heavy);
-  &:hover {
-    background-color: var(--bit-bg-heavy, #f6f6f6);
-  }
-  &:last-child {
-    margin-bottom: 8px;
-  }
-  &.currentVersion {
-    background: var(--bit-accent-bg, #eceaff);
+
+  .versionTimestamp {
+    margin-right: 2px;
   }
-  .label {
-    background-color: white;
+  .versionUserAvatar {
     padding: 0px 8px;
   }
-}
-
-.versionRow {
-  display: flex;
-  justify-content: space-between;
   .laneIcon {
     padding: 0px 4px;
   }
+  .version {
+    width: 60%;
+    display: flex;
+    flex-direction: row;
+    align-content: space-between;
+    align-items: center;
+  }
+  .versionName {
+    padding: 0px 8px;
+  }
 }

package/dist/version-dropdown.js

@@ -35,7 +35,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.VersionDropdown = exports.LOCAL_VERSION = void 0;
 const evangelist_elements_icon_1 = require("@teambit/evangelist.elements.icon");
-const base_ui_routing_nav_link_1 = require("@teambit/base-ui.routing.nav-link");
+const design_ui_surfaces_menu_link_item_1 = require("@teambit/design.ui.surfaces.menu.link-item");
 const evangelist_surfaces_dropdown_1 = require("@teambit/evangelist.surfaces.dropdown");
 const design_ui_styles_ellipsis_1 = require("@teambit/design.ui.styles.ellipsis");
 const ui_foundation_ui_use_box_tab_1 = require("@teambit/ui-foundation.ui.use-box.tab");
@@ -93,9 +93,9 @@ function VersionMenu(_a) {
     return (react_1.default.createElement("div", Object.assign({}, rest),
         react_1.default.createElement("div", { className: version_dropdown_module_scss_1.default.top },
             react_1.default.createElement("div", { className: (0, classnames_1.default)(version_dropdown_module_scss_1.default.titleContainer, version_dropdown_module_scss_1.default.title) }, message),
-            localVersion && (react_1.default.createElement(base_ui_routing_nav_link_1.NavLink, { href: '?', className: (0, classnames_1.default)(version_dropdown_module_scss_1.default.versionLine, version_dropdown_module_scss_1.default.versionRow, currentVersion === exports.LOCAL_VERSION && version_dropdown_module_scss_1.default.currentVersion) },
+            localVersion && (react_1.default.createElement(design_ui_surfaces_menu_link_item_1.MenuLinkItem, { href: '?', isActive: () => currentVersion === exports.LOCAL_VERSION, className: (0, classnames_1.default)(version_dropdown_module_scss_1.default.versionRow, version_dropdown_module_scss_1.default.localVersion) },
                 react_1.default.createElement("div", { className: version_dropdown_module_scss_1.default.version },
-                    react_1.default.createElement(design_ui_avatar_1.UserAvatar, { size: 20, account: {}, className: version_dropdown_module_scss_1.default.versionUserAvatar }),
+                    react_1.default.createElement(design_ui_avatar_1.UserAvatar, { size: 24, account: {}, className: version_dropdown_module_scss_1.default.versionUserAvatar }),
                     react_1.default.createElement("span", { className: version_dropdown_module_scss_1.default.versionName }, exports.LOCAL_VERSION))))),
         react_1.default.createElement("div", { className: (0, classnames_1.default)(multipleTabs && version_dropdown_module_scss_1.default.tabs) }, multipleTabs &&
             tabs.map(({ name }, index) => {

package/dist/version-dropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"version-dropdown.js","sourceRoot":"","sources":["../version-dropdown.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"version-dropdown.js","sourceRoot":"","sources":["../version-dropdown.tsx"],"names":[],"mappings":"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"}

package/dist/version-dropdown.module.scss

@@ -28,28 +28,36 @@
 .versionContainer {
   max-height: 240px;
   overflow-y: scroll;
+  padding-bottom: 8px;
 }
 
-.versionLine {
-  cursor: pointer;
+.versionRow {
   display: flex;
+  justify-content: space-between;
   align-items: center;
-  height: 36px;
+  height: 40px;
   padding: 0 24px;
-  text-decoration: none;
-  color: var(--bit-text-color-heavy);
-  &:hover {
-    background-color: var(--bit-bg-heavy, #f6f6f6);
-  }
-  &:last-child {
-    margin-bottom: 2px;
+
+  &.localVersion {
     border-bottom: 1px solid var(--bit-border-color-lightest, #ededed);
   }
-  &.currentVersion {
-    background: var(--bit-accent-bg, #eceaff);
+  .versionTimestamp {
+    margin-right: 2px;
+  }
+  .versionUserAvatar {
+    padding: 0px 8px;
+  }
+  .laneIcon {
+    padding: 0px 4px;
   }
-  .label {
-    background-color: white;
+  .version {
+    width: 60%;
+    display: flex;
+    flex-direction: row;
+    align-content: space-between;
+    align-items: center;
+  }
+  .versionName {
     padding: 0px 8px;
   }
 }
@@ -105,29 +113,7 @@
     font-size: 12px;
   }
 }
-.versionRow {
-  display: flex;
-  justify-content: space-between;
 
-  .versionTimestamp {
-    margin-right: 2px;
-  }
-  .versionUserAvatar {
-    padding: 0px 8px;
-  }
-  .laneIcon {
-    padding: 0px 4px;
-  }
-  .version {
-    width: 60%;
-    display: flex;
-    flex-direction: row;
-    align-content: space-between;
-  }
-  .versionName {
-    padding: 0px 8px;
-  }
-}
 .loading {
   color: var(--bit-bg-heavy, #f6f6f6);
 }

package/dist/version-info/version-info.js

@@ -23,14 +23,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.VersionInfo = void 0;
-const base_ui_routing_nav_link_1 = require("@teambit/base-ui.routing.nav-link");
+const design_ui_surfaces_menu_link_item_1 = require("@teambit/design.ui.surfaces.menu.link-item");
 const design_ui_time_ago_1 = require("@teambit/design.ui.time-ago");
 const component_ui_version_label_1 = require("@teambit/component.ui.version-label");
 const react_1 = __importStar(require("react"));
-const classnames_1 = __importDefault(require("classnames"));
 const design_ui_avatar_1 = require("@teambit/design.ui.avatar");
 const design_ui_styles_ellipsis_1 = require("@teambit/design.ui.styles.ellipsis");
-const version_dropdown_1 = require("../version-dropdown");
 const version_info_module_scss_1 = __importDefault(require("./version-info.module.scss"));
 function VersionInfo({ version, currentVersion, latestVersion, date, username, email }) {
     const isCurrent = version === currentVersion;
@@ -49,9 +47,9 @@ function VersionInfo({ version, currentVersion, latestVersion, date, username, e
         }
     }, [isCurrent]);
     return (react_1.default.createElement("div", { ref: currentVersionRef },
-        react_1.default.createElement(base_ui_routing_nav_link_1.NavLink, { href: version === version_dropdown_1.LOCAL_VERSION ? '?' : `?version=${version}`, className: (0, classnames_1.default)(version_info_module_scss_1.default.versionLine, version_info_module_scss_1.default.versionRow, isCurrent && version_info_module_scss_1.default.currentVersion) },
+        react_1.default.createElement(design_ui_surfaces_menu_link_item_1.MenuLinkItem, { isActive: () => isCurrent, href: `?version=${version}`, className: version_info_module_scss_1.default.versionRow },
             react_1.default.createElement("div", { className: version_info_module_scss_1.default.version },
-                react_1.default.createElement(design_ui_avatar_1.UserAvatar, { size: 20, account: author, className: version_info_module_scss_1.default.versionUserAvatar, showTooltip: true }),
+                react_1.default.createElement(design_ui_avatar_1.UserAvatar, { size: 24, account: author, className: version_info_module_scss_1.default.versionUserAvatar, showTooltip: true }),
                 react_1.default.createElement(design_ui_styles_ellipsis_1.Ellipsis, { className: version_info_module_scss_1.default.versionName }, version),
                 version === latestVersion && react_1.default.createElement(component_ui_version_label_1.VersionLabel, { className: version_info_module_scss_1.default.label, status: "latest" })),
             react_1.default.createElement(design_ui_time_ago_1.TimeAgo, { className: version_info_module_scss_1.default.versionTimestamp, date: timestamp }))));

package/dist/version-info/version-info.js.map

@@ -1 +1 @@
-{"version":3,"file":"version-info.js","sourceRoot":"","sources":["../../version-info/version-info.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA,gFAA4D;AAC5D,oEAAsD;AACtD,oFAAmE;AACnE,+CAA0D;AAC1D,4DAAoC;AACpC,gEAAuD;AACvD,kFAA8D;AAE9D,0DAA8E;AAC9E,0FAAgD;AAOhD,SAAgB,WAAW,CAAC,EAAE,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAoB;IAC7G,MAAM,SAAS,GAAG,OAAO,KAAK,cAAc,CAAC;IAC7C,MAAM,MAAM,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE;QAC1B,OAAO;YACL,WAAW,EAAE,QAAQ;YACrB,KAAK;SACN,CAAC;IACJ,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,MAAM,SAAS,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,IAAI,IAAI,EAAE,CAAC,QAAQ,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IAC9G,MAAM,iBAAiB,GAAG,IAAA,cAAM,EAAiB,IAAI,CAAC,CAAC;IACvD,IAAA,iBAAS,EAAC,GAAG,EAAE;;QACb,IAAI,SAAS,EAAE;YACb,MAAA,iBAAiB,CAAC,OAAO,0CAAE,cAAc,EAAE,CAAC;SAC7C;IACH,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhB,OAAO,CACL,uCAAK,GAAG,EAAE,iBAAiB;QACzB,8BAAC,kCAAO,IACN,IAAI,EAAE,OAAO,KAAK,gCAAa,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,YAAY,OAAO,EAAE,EAC7D,SAAS,EAAE,IAAA,oBAAU,EAAC,kCAAM,CAAC,WAAW,EAAE,kCAAM,CAAC,UAAU,EAAE,SAAS,IAAI,kCAAM,CAAC,cAAc,CAAC;YAEhG,uCAAK,SAAS,EAAE,kCAAM,CAAC,OAAO;gBAC5B,8BAAC,6BAAU,IAAC,IAAI,EAAE,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,kCAAM,CAAC,iBAAiB,EAAE,WAAW,EAAE,IAAI,GAAI;gBACjG,8BAAC,oCAAQ,IAAC,SAAS,EAAE,kCAAM,CAAC,WAAW,IAAG,OAAO,CAAY;gBAC5D,OAAO,KAAK,aAAa,IAAI,8BAAC,yCAAY,IAAC,SAAS,EAAE,kCAAM,CAAC,KAAK,EAAE,MAAM,EAAC,QAAQ,GAAG,CACnF;YACN,8BAAC,4BAAO,IAAC,SAAS,EAAE,kCAAM,CAAC,gBAAgB,EAAE,IAAI,EAAE,SAAS,GAAI,CACxD,CACN,CACP,CAAC;AACJ,CAAC;AAhCD,kCAgCC"}
+{"version":3,"file":"version-info.js","sourceRoot":"","sources":["../../version-info/version-info.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA,kGAA0E;AAC1E,oEAAsD;AACtD,oFAAmE;AACnE,+CAA0D;AAC1D,gEAAuD;AACvD,kFAA8D;AAG9D,0FAAgD;AAOhD,SAAgB,WAAW,CAAC,EAAE,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAoB;IAC7G,MAAM,SAAS,GAAG,OAAO,KAAK,cAAc,CAAC;IAC7C,MAAM,MAAM,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE;QAC1B,OAAO;YACL,WAAW,EAAE,QAAQ;YACrB,KAAK;SACN,CAAC;IACJ,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,MAAM,SAAS,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,IAAI,IAAI,EAAE,CAAC,QAAQ,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IAC9G,MAAM,iBAAiB,GAAG,IAAA,cAAM,EAAiB,IAAI,CAAC,CAAC;IACvD,IAAA,iBAAS,EAAC,GAAG,EAAE;;QACb,IAAI,SAAS,EAAE;YACb,MAAA,iBAAiB,CAAC,OAAO,0CAAE,cAAc,EAAE,CAAC;SAC7C;IACH,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhB,OAAO,CACL,uCAAK,GAAG,EAAE,iBAAiB;QACzB,8BAAC,gDAAY,IAAC,QAAQ,EAAE,GAAG,EAAE,CAAC,SAAS,EAAE,IAAI,EAAE,YAAY,OAAO,EAAE,EAAE,SAAS,EAAE,kCAAM,CAAC,UAAU;YAChG,uCAAK,SAAS,EAAE,kCAAM,CAAC,OAAO;gBAC5B,8BAAC,6BAAU,IAAC,IAAI,EAAE,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,kCAAM,CAAC,iBAAiB,EAAE,WAAW,EAAE,IAAI,GAAI;gBACjG,8BAAC,oCAAQ,IAAC,SAAS,EAAE,kCAAM,CAAC,WAAW,IAAG,OAAO,CAAY;gBAC5D,OAAO,KAAK,aAAa,IAAI,8BAAC,yCAAY,IAAC,SAAS,EAAE,kCAAM,CAAC,KAAK,EAAE,MAAM,EAAC,QAAQ,GAAG,CACnF;YACN,8BAAC,4BAAO,IAAC,SAAS,EAAE,kCAAM,CAAC,gBAAgB,EAAE,IAAI,EAAE,SAAS,GAAI,CACnD,CACX,CACP,CAAC;AACJ,CAAC;AA7BD,kCA6BC"}

package/dist/version-info/version-info.module.scss

@@ -1,6 +1,9 @@
 .versionRow {
   display: flex;
   justify-content: space-between;
+  align-items: center;
+  height: 40px;
+  padding: 0 24px;
 
   .versionTimestamp {
     margin-right: 2px;
@@ -8,37 +11,17 @@
   .versionUserAvatar {
     padding: 0px 8px;
   }
+  .laneIcon {
+    padding: 0px 4px;
+  }
   .version {
     width: 60%;
     display: flex;
     flex-direction: row;
     align-content: space-between;
+    align-items: center;
   }
   .versionName {
     padding: 0px 8px;
-    align-self: center;
-    line-height: 14px;
-  }
-}
-.versionLine {
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  height: 36px;
-  padding: 0 24px;
-  text-decoration: none;
-  color: var(--bit-text-color-heavy);
-  &:hover {
-    background-color: var(--bit-bg-heavy, #f6f6f6);
-  }
-  &:last-child {
-    margin-bottom: 8px;
-  }
-  &.currentVersion {
-    background: var(--bit-accent-bg, #eceaff);
-  }
-  .label {
-    background-color: white;
-    padding: 0px 8px;
   }
 }

package/lane-info/lane-info.module.scss

@@ -1,30 +1,27 @@
-.versionLine {
-  cursor: pointer;
+.versionRow {
   display: flex;
+  justify-content: space-between;
   align-items: center;
-  height: 36px;
+  height: 40px;
   padding: 0 24px;
-  text-decoration: none;
-  color: var(--bit-text-color-heavy);
-  &:hover {
-    background-color: var(--bit-bg-heavy, #f6f6f6);
-  }
-  &:last-child {
-    margin-bottom: 8px;
-  }
-  &.currentVersion {
-    background: var(--bit-accent-bg, #eceaff);
+
+  .versionTimestamp {
+    margin-right: 2px;
   }
-  .label {
-    background-color: white;
+  .versionUserAvatar {
     padding: 0px 8px;
   }
-}
-
-.versionRow {
-  display: flex;
-  justify-content: space-between;
   .laneIcon {
     padding: 0px 4px;
   }
+  .version {
+    width: 60%;
+    display: flex;
+    flex-direction: row;
+    align-content: space-between;
+    align-items: center;
+  }
+  .versionName {
+    padding: 0px 8px;
+  }
 }

package/lane-info/lane-info.tsx

@@ -1,7 +1,6 @@
 import { LaneModel } from '@teambit/lanes.ui.lanes';
-import classNames from 'classnames';
 import React from 'react';
-import { NavLink } from '@teambit/base-ui.routing.nav-link';
+import { MenuLinkItem } from '@teambit/design.ui.surfaces.menu.link-item';
 import { Icon } from '@teambit/evangelist.elements.icon';
 import styles from './lane-info.module.scss';
 
@@ -12,15 +11,12 @@ export function LaneInfo({ id, url, currentLane }: LaneInfoProps) {
 
   return (
     <div key={id}>
-      <NavLink
-        href={url}
-        className={classNames(styles.versionLine, styles.versionRow, isCurrent && styles.currentVersion)}
-      >
+      <MenuLinkItem isActive={() => isCurrent} href={url} className={styles.versionRow}>
         <span>
           <Icon className={styles.laneIcon} of="lane"></Icon>
           {id}
         </span>
-      </NavLink>
+      </MenuLinkItem>
     </div>
   );
 }

package/package.json

@@ -1,23 +1,23 @@
 {
   "name": "@teambit/component.ui.version-dropdown",
-  "version": "0.0.499",
+  "version": "0.0.502",
   "homepage": "https://bit.dev/teambit/component/ui/version-dropdown",
   "main": "dist/index.js",
   "componentId": {
     "scope": "teambit.component",
     "name": "ui/version-dropdown",
-    "version": "0.0.499"
+    "version": "0.0.502"
   },
   "dependencies": {
     "classnames": "2.2.6",
     "core-js": "^3.0.0",
     "@teambit/base-ui.loaders.skeleton": "1.0.1",
-    "@teambit/base-ui.routing.nav-link": "1.0.0",
     "@teambit/evangelist.elements.icon": "1.0.2",
     "@teambit/evangelist.surfaces.dropdown": "1.0.2",
     "@teambit/design.ui.avatar": "0.0.494",
     "@teambit/design.ui.styles.ellipsis": "0.0.347",
-    "@teambit/lanes.ui.lanes": "0.0.14",
+    "@teambit/design.ui.surfaces.menu.link-item": "0.0.379",
+    "@teambit/lanes.ui.lanes": "0.0.17",
     "@teambit/legacy-component-log": "0.0.392",
     "@teambit/ui-foundation.ui.use-box.tab": "0.0.105",
     "@teambit/component.ui.version-label": "0.0.492",

package/{preview-1647314610121.js → preview-1647509820722.js}

@@ -1,2 +1,2 @@
-export const compositions = [require('/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.component_ui_version-dropdown@0.0.499/dist/version-dropdown.composition.js')]
-export const overview = [require('/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.component_ui_version-dropdown@0.0.499/dist/version-dropdown.docs.js')]
+export const compositions = [require('/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.component_ui_version-dropdown@0.0.502/dist/version-dropdown.composition.js')]
+export const overview = [require('/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.component_ui_version-dropdown@0.0.502/dist/version-dropdown.docs.js')]

package/version-dropdown.module.scss

@@ -28,28 +28,36 @@
 .versionContainer {
   max-height: 240px;
   overflow-y: scroll;
+  padding-bottom: 8px;
 }
 
-.versionLine {
-  cursor: pointer;
+.versionRow {
   display: flex;
+  justify-content: space-between;
   align-items: center;
-  height: 36px;
+  height: 40px;
   padding: 0 24px;
-  text-decoration: none;
-  color: var(--bit-text-color-heavy);
-  &:hover {
-    background-color: var(--bit-bg-heavy, #f6f6f6);
-  }
-  &:last-child {
-    margin-bottom: 2px;
+
+  &.localVersion {
     border-bottom: 1px solid var(--bit-border-color-lightest, #ededed);
   }
-  &.currentVersion {
-    background: var(--bit-accent-bg, #eceaff);
+  .versionTimestamp {
+    margin-right: 2px;
+  }
+  .versionUserAvatar {
+    padding: 0px 8px;
+  }
+  .laneIcon {
+    padding: 0px 4px;
   }
-  .label {
-    background-color: white;
+  .version {
+    width: 60%;
+    display: flex;
+    flex-direction: row;
+    align-content: space-between;
+    align-items: center;
+  }
+  .versionName {
     padding: 0px 8px;
   }
 }
@@ -105,29 +113,7 @@
     font-size: 12px;
   }
 }
-.versionRow {
-  display: flex;
-  justify-content: space-between;
 
-  .versionTimestamp {
-    margin-right: 2px;
-  }
-  .versionUserAvatar {
-    padding: 0px 8px;
-  }
-  .laneIcon {
-    padding: 0px 4px;
-  }
-  .version {
-    width: 60%;
-    display: flex;
-    flex-direction: row;
-    align-content: space-between;
-  }
-  .versionName {
-    padding: 0px 8px;
-  }
-}
 .loading {
   color: var(--bit-bg-heavy, #f6f6f6);
 }

package/version-dropdown.tsx

@@ -1,5 +1,5 @@
 import { Icon } from '@teambit/evangelist.elements.icon';
-import { NavLink } from '@teambit/base-ui.routing.nav-link';
+import { MenuLinkItem } from '@teambit/design.ui.surfaces.menu.link-item';
 import { Dropdown } from '@teambit/evangelist.surfaces.dropdown';
 
 import { Ellipsis } from '@teambit/design.ui.styles.ellipsis';
@@ -138,19 +138,16 @@ function VersionMenu({
       <div className={styles.top}>
         <div className={classNames(styles.titleContainer, styles.title)}>{message}</div>
         {localVersion && (
-          <NavLink
+          <MenuLinkItem
             href={'?'}
-            className={classNames(
-              styles.versionLine,
-              styles.versionRow,
-              currentVersion === LOCAL_VERSION && styles.currentVersion
-            )}
+            isActive={() => currentVersion === LOCAL_VERSION}
+            className={classNames(styles.versionRow, styles.localVersion)}
           >
             <div className={styles.version}>
-              <UserAvatar size={20} account={{}} className={styles.versionUserAvatar} />
+              <UserAvatar size={24} account={{}} className={styles.versionUserAvatar} />
               <span className={styles.versionName}>{LOCAL_VERSION}</span>
             </div>
-          </NavLink>
+          </MenuLinkItem>
         )}
       </div>
       <div className={classNames(multipleTabs && styles.tabs)}>

package/version-info/version-info.module.scss

@@ -1,6 +1,9 @@
 .versionRow {
   display: flex;
   justify-content: space-between;
+  align-items: center;
+  height: 40px;
+  padding: 0 24px;
 
   .versionTimestamp {
     margin-right: 2px;
@@ -8,37 +11,17 @@
   .versionUserAvatar {
     padding: 0px 8px;
   }
+  .laneIcon {
+    padding: 0px 4px;
+  }
   .version {
     width: 60%;
     display: flex;
     flex-direction: row;
     align-content: space-between;
+    align-items: center;
   }
   .versionName {
     padding: 0px 8px;
-    align-self: center;
-    line-height: 14px;
-  }
-}
-.versionLine {
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  height: 36px;
-  padding: 0 24px;
-  text-decoration: none;
-  color: var(--bit-text-color-heavy);
-  &:hover {
-    background-color: var(--bit-bg-heavy, #f6f6f6);
-  }
-  &:last-child {
-    margin-bottom: 8px;
-  }
-  &.currentVersion {
-    background: var(--bit-accent-bg, #eceaff);
-  }
-  .label {
-    background-color: white;
-    padding: 0px 8px;
   }
 }

package/version-info/version-info.tsx

@@ -1,12 +1,11 @@
-import { NavLink } from '@teambit/base-ui.routing.nav-link';
+import { MenuLinkItem } from '@teambit/design.ui.surfaces.menu.link-item';
 import { TimeAgo } from '@teambit/design.ui.time-ago';
 import { VersionLabel } from '@teambit/component.ui.version-label';
 import React, { useMemo, useRef, useEffect } from 'react';
-import classNames from 'classnames';
 import { UserAvatar } from '@teambit/design.ui.avatar';
 import { Ellipsis } from '@teambit/design.ui.styles.ellipsis';
 
-import { DropdownComponentVersion, LOCAL_VERSION } from '../version-dropdown';
+import { DropdownComponentVersion } from '../version-dropdown';
 import styles from './version-info.module.scss';
 
 export type VersionInfoProps = DropdownComponentVersion & {
@@ -33,17 +32,14 @@ export function VersionInfo({ version, currentVersion, latestVersion, date, user
 
   return (
     <div ref={currentVersionRef}>
-      <NavLink
-        href={version === LOCAL_VERSION ? '?' : `?version=${version}`}
-        className={classNames(styles.versionLine, styles.versionRow, isCurrent && styles.currentVersion)}
-      >
+      <MenuLinkItem isActive={() => isCurrent} href={`?version=${version}`} className={styles.versionRow}>
         <div className={styles.version}>
-          <UserAvatar size={20} account={author} className={styles.versionUserAvatar} showTooltip={true} />
+          <UserAvatar size={24} account={author} className={styles.versionUserAvatar} showTooltip={true} />
           <Ellipsis className={styles.versionName}>{version}</Ellipsis>
           {version === latestVersion && <VersionLabel className={styles.label} status="latest" />}
         </div>
         <TimeAgo className={styles.versionTimestamp} date={timestamp} />
-      </NavLink>
+      </MenuLinkItem>
     </div>
   );
 }