NavTabs overflow and z-index behaviour improved

lib/src/nav-tabs/NavTabs.stories.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import DxcNavTabs from "./NavTabs";
+import DxcContainer from "../container/Container";
 import Title from "../../.storybook/components/Title";
 import ExampleContainer from "../../.storybook/components/ExampleContainer";
 import { HalstackProvider } from "../HalstackContext";
@@ -16,10 +17,9 @@ const iconSVG = (
   </svg>
 );
 
+const favoriteIcon = "filled_Favorite";
 
-const favoriteIcon = 'filled_Favorite'
-
-const pinIcon = 'Location_On';
+const pinIcon = "Location_On";
 
 const opinionatedTheme = {
   navTabs: {
@@ -275,5 +275,20 @@ export const Chromatic = () => (
         </DxcNavTabs>
       </HalstackProvider>
     </ExampleContainer>
+    <ExampleContainer>
+      <Title title="NavTabs in a limited space container" theme="light" level={4} />
+      <DxcContainer width="500px">
+        <DxcNavTabs>
+          <DxcNavTabs.Tab href="#" active>
+            Tab 1
+          </DxcNavTabs.Tab>
+          <DxcNavTabs.Tab href="#" disabled>
+            Tab 2
+          </DxcNavTabs.Tab>
+          <DxcNavTabs.Tab href="#">Tab 3</DxcNavTabs.Tab>
+          <DxcNavTabs.Tab href="#">Tab 4</DxcNavTabs.Tab>
+        </DxcNavTabs>
+      </DxcContainer>
+    </ExampleContainer>
   </>
 );

lib/src/nav-tabs/NavTabs.tsx

@@ -1,4 +1,4 @@
-import React, { useState, ReactElement, useMemo } from "react";
+import React, { useState, ReactElement, useMemo, useRef, useEffect } from "react";
 import styled, { ThemeProvider } from "styled-components";
 import useTheme from "../useTheme";
 import NavTabsPropsType from "./types";
@@ -42,8 +42,15 @@ const getNextTabIndex = (array, initialIndex): number => {
 
 const DxcNavTabs = ({ iconPosition = "top", tabIndex = 0, children }: NavTabsPropsType): JSX.Element => {
   const [innerFocusIndex, setInnerFocusIndex] = useState(null);
+  const [underlineWidth, setUnderlineWidth] = useState(null);
+  const refNavTabList = useRef(null);
   const colorsTheme = useTheme();
 
+  useEffect(() => {
+    console.log(refNavTabList?.current?.scrollWidth);
+    setUnderlineWidth(refNavTabList?.current?.scrollWidth);
+  }, [children]);
+
   const contextValue = useMemo(
     () => ({
       iconPosition,
@@ -57,7 +64,7 @@ const DxcNavTabs = ({ iconPosition = "top", tabIndex = 0, children }: NavTabsPro
     const activeTab = React.Children.toArray(children).findIndex((child: ReactElement) =>
       getPropInChild(child, "active")
     );
-    
+
     switch (event.key) {
       case "Left":
       case "ArrowLeft":
@@ -74,28 +81,31 @@ const DxcNavTabs = ({ iconPosition = "top", tabIndex = 0, children }: NavTabsPro
 
   return (
     <ThemeProvider theme={colorsTheme.navTabs}>
-      <NavTabsContainer onKeyDown={handleOnKeyDown} role="tablist" aria-label="Navigation tabs">
+      <NavTabsContainer onKeyDown={handleOnKeyDown} ref={refNavTabList} role="tablist" aria-label="Navigation tabs">
         <NavTabsContext.Provider value={contextValue}>{children}</NavTabsContext.Provider>
-        <Underline />
+        <Underline underlineWidth={underlineWidth} />
       </NavTabsContainer>
     </ThemeProvider>
   );
 };
 
-const Underline = styled.div`
+const Underline = styled.div<{ underlineWidth: number }>`
   position: absolute;
   bottom: 0;
   left: 0;
-  width: 100%;
   height: 2px;
   background-color: ${(props) => props.theme.dividerColor};
+  z-index: -1;
+  width: ${(props) => props.underlineWidth}px;
 `;
 
 DxcNavTabs.Tab = DxcTab;
 
 const NavTabsContainer = styled.div`
   display: flex;
   position: relative;
+  overflow: auto;
+  z-index: 0;
 `;
 
 export default DxcNavTabs;

lib/src/nav-tabs/Tab.tsx

@@ -96,7 +96,6 @@ const TabContainer = styled.div<{ active: TabProps["active"] }>`
   align-items: stretch;
   border-bottom: 2px solid ${(props) => (props.active ? props.theme.selectedUnderlineColor : "transparent")};
   padding: 0.5rem;
-  z-index: 1;
 `;
 
 const Tab = styled.a<{
@@ -138,11 +137,19 @@ const Tab = styled.a<{
   `}
 `;
 
-const TabIconContainer = styled.div<{ iconPosition: NavTabsPropsType["iconPosition"], active: TabProps["active"], disabled: TabProps["disabled"] }>`
+const TabIconContainer = styled.div<{
+  iconPosition: NavTabsPropsType["iconPosition"];
+  active: TabProps["active"];
+  disabled: TabProps["disabled"];
+}>`
   display: flex;
   font-size: 24px;
-  color: ${(props) => 
-    props.active ? props.theme.selectedIconColor : props.disabled ?  props.theme.disabledIconColor :  props.theme.unselectedIconColor};
+  color: ${(props) =>
+    props.active
+      ? props.theme.selectedIconColor
+      : props.disabled
+      ? props.theme.disabledIconColor
+      : props.theme.unselectedIconColor};
   svg {
     height: 24px;
     width: 24px;