@vectara/vectara-ui 15.9.4 → 15.9.6

package/lib/components/app/appSideNav/appSideNav.scss

@@ -89,7 +89,7 @@
 
 .vuiAppSideNav--l {
   .vuiAppSideNav__inner {
-    padding: 20px 12px 0;
+    padding: 4px 8px 0;
   }
 
   .vuiAppSideNavLink {

package/lib/components/tabs/TabNavigator.js

@@ -1,15 +1,17 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import { VuiPopover } from "../popover/Popover";
 import { VuiTab } from "./Tab";
 import { VuiTabs } from "./Tabs";
 import { useVuiContext } from "../context/Context";
+import { VuiIcon } from "../icon/Icon";
+import { BiDotsVertical } from "react-icons/bi";
 export const VuiTabsNavigator = ({ routes, popover }) => {
     var _a;
     const { getPath } = useVuiContext();
     const [isOpen, setIsOpen] = useState(false);
     const activeRoute = routes.find((route) => route.isActive || getPath().includes(route.href));
-    return (_jsx(VuiPopover, Object.assign({}, popover, { isOpen: isOpen, setIsOpen: () => setIsOpen(!isOpen), button: _jsx("div", Object.assign({ className: "vuiTabs vuiTabs--s vuiTabs--enclosed" }, { children: _jsx(VuiTab, Object.assign({ isActive: true }, { children: (_a = activeRoute === null || activeRoute === void 0 ? void 0 : activeRoute.title) !== null && _a !== void 0 ? _a : "No selection" })) })), padding: "none" }, { children: _jsx(VuiTabs, Object.assign({ size: "s", tabStyle: "enclosed", vertical: true }, { children: routes.map(({ href, title, render, testId, isActive }, index) => {
+    return (_jsx(VuiPopover, Object.assign({}, popover, { isOpen: isOpen, setIsOpen: () => setIsOpen(!isOpen), button: _jsx("button", Object.assign({ className: "vuiTabsNavigatorButton" }, { children: _jsxs("div", Object.assign({ className: "vuiTabsNavigatorButton__inner" }, { children: [_jsx(VuiIcon, Object.assign({ size: "xs" }, { children: _jsx(BiDotsVertical, {}) })), _jsx("div", { children: (_a = activeRoute === null || activeRoute === void 0 ? void 0 : activeRoute.title) !== null && _a !== void 0 ? _a : "No selection" })] })) })), padding: "none" }, { children: _jsx(VuiTabs, Object.assign({ size: "s", tabStyle: "enclosed", vertical: true }, { children: routes.map(({ href, title, render, testId, isActive }, index) => {
                 const tabLink = (_jsx(VuiTab, Object.assign({ href: href, isActive: isActive !== null && isActive !== void 0 ? isActive : getPath().includes(href), "data-testid": testId, onClick: () => setIsOpen(false) }, { children: title }), index));
                 if (render)
                     return render(tabLink);

package/lib/components/tabs/_index.scss

@@ -1,5 +1,6 @@
 @import "./open";
 @import "./enclosed";
+@import "./tabsNavigator";
 
 .vuiTabs {
   align-items: center;

package/lib/components/tabs/_tabsNavigator.scss

@@ -0,0 +1,29 @@
+.vuiTabsNavigatorButton {
+  font-size: $fontSizeStandard;
+  background-color: var(--vui-color-light-shade);
+  border-radius: $sizeXxs;
+  padding: 6px $sizeXs;
+
+  &:hover {
+    .vuiTabsNavigatorButton__inner {
+      box-shadow: $shadowLargeEnd;
+    }
+  }
+}
+
+.vuiTabsNavigatorButton__inner {
+  display: flex;
+  align-items: center;
+  gap: $sizeXs;
+  padding: $sizeXxs $sizeS;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex-grow: 0;
+  flex-shrink: 0;
+  text-decoration: none;
+  color: var(--vui-color-full-shade);
+  background-color: var(--vui-color-empty-shade);
+  box-shadow: $shadowSmallEnd;
+  border-radius: $sizeXxs;
+  transition: box-shadow $transitionSpeed;
+}

package/lib/styles/index.css

@@ -500,7 +500,7 @@ fieldset {
 }
 
 .vuiAppSideNav--l .vuiAppSideNav__inner {
-  padding: 20px 12px 0;
+  padding: 4px 8px 0;
 }
 .vuiAppSideNav--l .vuiAppSideNavLink {
   display: block;
@@ -5427,6 +5427,33 @@ h2.react-datepicker__current-month {
   box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
 }
 
+.vuiTabsNavigatorButton {
+  font-size: 14px;
+  background-color: var(--vui-color-light-shade);
+  border-radius: 4px;
+  padding: 6px 8px;
+}
+.vuiTabsNavigatorButton:hover .vuiTabsNavigatorButton__inner {
+  box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
+}
+
+.vuiTabsNavigatorButton__inner {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 4px 12px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex-grow: 0;
+  flex-shrink: 0;
+  text-decoration: none;
+  color: var(--vui-color-full-shade);
+  background-color: var(--vui-color-empty-shade);
+  box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
+  border-radius: 4px;
+  transition: box-shadow 0.2s;
+}
+
 .vuiTabs {
   align-items: center;
   justify-content: space-between;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vectara/vectara-ui",
-  "version": "15.9.4",
+  "version": "15.9.6",
   "homepage": "./",
   "description": "Vectara's design system, codified as a React and Sass component library",
   "author": "Vectara",

package/src/docs/pages/tabs/index.tsx

@@ -16,6 +16,11 @@ export const tabs = {
   name: "Tabs",
   path: "/tabs",
   examples: [
+    {
+      name: "Tabs Navigator",
+      component: <TabsNavigator />,
+      source: TabsNavigatorSource.default.toString()
+    },
     {
       name: "Small",
       component: <Small />,
@@ -40,11 +45,6 @@ export const tabs = {
       name: "Enclosed",
       component: <Enclosed />,
       source: EnclosedSource.default.toString()
-    },
-    {
-      name: "Tabs Navigator",
-      component: <TabsNavigator />,
-      source: TabsNavigatorSource.default.toString()
     }
   ]
 };