feat: remove prop for align active border with container, use default true

Author: arunjaindev

src/Shared/Components/TabGroup/TabGroup.component.tsx

@@ -14,6 +14,7 @@
  * limitations under the License.
  */
 
+import { useMemo } from 'react'
 import { Link, NavLink, useRouteMatch } from 'react-router-dom'
 import { motion } from 'framer-motion'
 
@@ -26,19 +27,8 @@ import { getClassNameBySizeMap, tabGroupClassMap } from './TabGroup.utils'
 
 import './TabGroup.scss'
 
-const MotionLayoutUnderline = ({
-    layoutId,
-    alignActiveBorderWithContainer,
-}: {
-    layoutId: string
-    alignActiveBorderWithContainer: boolean
-}) => (
-    <motion.div
-        layout="position"
-        layoutId={layoutId}
-        className="underline bcb-5"
-        style={{ ...(alignActiveBorderWithContainer ? { bottom: -1 } : {}) }}
-    />
+const MotionLayoutUnderline = ({ layoutId }: { layoutId: string }) => (
+    <motion.div layout="position" layoutId={layoutId} className="underline bcb-5" />
 )
 
 const Tab = ({
@@ -49,7 +39,6 @@ const Tab = ({
     icon,
     size,
     badge = null,
-    alignActiveBorderWithContainer,
     hideTopPadding,
     showIndicator,
     showError,
@@ -59,16 +48,18 @@ const Tab = ({
     shouldWrapTooltip,
     tooltipProps,
     uniqueGroupId,
-}: TabProps &
-    Pick<TabGroupProps, 'size' | 'alignActiveBorderWithContainer' | 'hideTopPadding'> &
-    AdditionalTabProps) => {
+}: TabProps & Pick<TabGroupProps, 'size' | 'hideTopPadding'> & AdditionalTabProps) => {
     const { path } = useRouteMatch()
     const pathToMatch = tabType === 'navLink' || tabType === 'link' ? getPathnameToMatch(props.to, path) : ''
+
+    // using match to define if tab is active as useRouteMatch return an object if path is matched otherwise return null/undefined
     const match = useRouteMatch(pathToMatch)
 
+    const isTabActive = tabType === 'button' ? active : !!match
+
     const { tabClassName, iconClassName, badgeClassName } = getClassNameBySizeMap({
         hideTopPadding,
-        alignActiveBorderWithContainer,
+        isTabActive,
     })[size]
 
     const onClickHandler = (
@@ -142,19 +133,12 @@ const Tab = ({
         }
     }
 
-    const isTabActive = tabType === 'button' ? active : !!match
-
     const renderTabContainer = () => (
         <li
             className={`tab-group__tab lh-20 ${active ? 'cb-5 fw-6' : 'cn-9 fw-4'} ${tabType === 'block' ? 'tab-group__tab--block' : ''} ${disabled ? 'dc__disabled' : 'cursor'}`}
         >
             {getTabComponent()}
-            {isTabActive && (
-                <MotionLayoutUnderline
-                    layoutId={uniqueGroupId}
-                    alignActiveBorderWithContainer={alignActiveBorderWithContainer}
-                />
-            )}
+            {isTabActive && <MotionLayoutUnderline layoutId={uniqueGroupId} />}
         </li>
     )
 
@@ -169,11 +153,11 @@ export const TabGroup = ({
     tabs = [],
     size = ComponentSizeType.large,
     rightComponent,
-    alignActiveBorderWithContainer,
     hideTopPadding,
 }: TabGroupProps) => {
     // Unique layoutId for motion.div to handle multiple tab groups on same page
-    const uniqueGroupId = tabs.map((tab) => tab.label).join('-')
+    // Using tab labels so that id remains same on re mount as well
+    const uniqueGroupId = useMemo(() => tabs.map((tab) => tab.label).join('-'), [])
 
     return (
         <div className="flexbox dc__align-items-center dc__content-space">
@@ -183,7 +167,6 @@ export const TabGroup = ({
                         key={id}
                         id={id}
                         size={size}
-                        alignActiveBorderWithContainer={alignActiveBorderWithContainer}
                         hideTopPadding={hideTopPadding}
                         uniqueGroupId={uniqueGroupId}
                         {...resProps}

src/Shared/Components/TabGroup/TabGroup.helpers.tsx

@@ -71,15 +71,9 @@ export const getTabDescription = (description: TabProps['description']) =>
 const replaceTrailingSlash = (pathname: string) => pathname.replace(/\/+$/, '')
 
 export const getPathnameToMatch = (to: NavLinkProps['to'] | LinkProps['to'], currentPathname: string): string => {
-    // Handling both absolute and relative paths
-    if (typeof to === 'string') {
-        return to.startsWith('/') ? to : `${replaceTrailingSlash(currentPathname)}/${to}`
-    }
-    if (typeof to === 'function') {
-        return ''
-    }
-    if (to && typeof to === 'object' && 'pathname' in to) {
-        const pathname = to.pathname || ''
+    if (typeof to === 'string' || (to && typeof to === 'object' && 'pathname' in to)) {
+        const pathname = typeof to === 'string' ? to : to.pathname || ''
+        // handling absolute and relative paths
         return pathname.startsWith('/') ? pathname : `${replaceTrailingSlash(currentPathname)}/${pathname}`
     }
     return ''

src/Shared/Components/TabGroup/TabGroup.scss

@@ -39,6 +39,10 @@
             border-top-right-radius: 2px;
         }
 
+        &--active {
+            @include svg-styles(var(--B500));
+        }
+
         &:hover:not(.tab-group__tab--block):not(.dc__disabled) {
             color: var(--B500);
             @include svg-styles(var(--B500));

src/Shared/Components/TabGroup/TabGroup.types.ts

@@ -152,11 +152,6 @@ export interface TabGroupProps {
      * Optional component to be rendered on the right side of the tab list.
      */
     rightComponent?: React.ReactElement
-    /**
-     * Set to `true` to align the active tab's border with the bottom border of the parent container.
-     * @default false
-     */
-    alignActiveBorderWithContainer?: boolean
     /**
      * Determines if the top padding of the tab group should be hidden.
      * @default false

src/Shared/Components/TabGroup/TabGroup.utils.ts

@@ -21,8 +21,8 @@ import { TabGroupProps } from './TabGroup.types'
 
 export const getClassNameBySizeMap = ({
     hideTopPadding,
-    alignActiveBorderWithContainer,
-}: Pick<TabGroupProps, 'hideTopPadding' | 'alignActiveBorderWithContainer'>): Record<
+    isTabActive,
+}: Pick<TabGroupProps, 'hideTopPadding'> & { isTabActive: boolean }): Record<
     TabGroupProps['size'],
     {
         tabClassName: string
@@ -31,17 +31,17 @@ export const getClassNameBySizeMap = ({
     }
 > => ({
     [ComponentSizeType.medium]: {
-        tabClassName: `fs-12 ${!hideTopPadding ? 'pt-6' : ''} ${alignActiveBorderWithContainer ? 'pb-5' : 'pb-6'}`,
+        tabClassName: `fs-12 ${!hideTopPadding ? 'pt-6' : ''} ${isTabActive ? 'pb-3' : 'pb-5'}`,
         iconClassName: 'icon-dim-14',
         badgeClassName: 'fs-11 lh-18 tab-group__tab__badge--medium',
     },
     [ComponentSizeType.large]: {
-        tabClassName: `fs-13 ${!hideTopPadding ? 'pt-8' : ''} ${alignActiveBorderWithContainer ? 'pb-7' : 'pb-8'}`,
+        tabClassName: `fs-13 ${!hideTopPadding ? 'pt-8' : ''} ${isTabActive ? 'pb-5' : 'pb-7'}`,
         iconClassName: 'icon-dim-16',
         badgeClassName: 'fs-12 lh-20',
     },
     [ComponentSizeType.xl]: {
-        tabClassName: `min-w-200 fs-13 ${!hideTopPadding ? 'pt-10' : ''} ${alignActiveBorderWithContainer ? 'pb-9' : 'pb-10'}`,
+        tabClassName: `min-w-200 fs-13 ${!hideTopPadding ? 'pt-10' : ''} ${isTabActive ? 'pb-7' : 'pb-9'}`,
         iconClassName: 'icon-dim-16',
         badgeClassName: 'fs-12 lh-20',
     },