feat: add animation in tab group tabs

Author: arunjaindev

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

@@ -14,17 +14,33 @@
  * limitations under the License.
  */
 
-import { Link, NavLink } from 'react-router-dom'
+import { Link, NavLink, useRouteMatch } from 'react-router-dom'
+import { motion } from 'framer-motion'
 
 import { Tooltip } from '@Common/Tooltip'
 import { ComponentSizeType } from '@Shared/constants'
 
-import { getTabBadge, getTabDescription, getTabIcon, getTabIndicator } from './TabGroup.helpers'
+import { getPathnameToMatch, getTabBadge, getTabDescription, getTabIcon, getTabIndicator } from './TabGroup.helpers'
 import { TabGroupProps, TabProps } from './TabGroup.types'
 import { getClassNameBySizeMap, tabGroupClassMap } from './TabGroup.utils'
 
 import './TabGroup.scss'
 
+const MotionLayoutUnderline = ({
+    layoutId,
+    alignActiveBorderWithContainer,
+}: {
+    layoutId: string
+    alignActiveBorderWithContainer: boolean
+}) => (
+    <motion.div
+        layout="position"
+        layoutId={layoutId}
+        className="bcb-5"
+        style={{ height: 2, ...(alignActiveBorderWithContainer ? { bottom: -1 } : {}) }}
+    />
+)
+
 const Tab = ({
     label,
     props,
@@ -42,7 +58,13 @@ const Tab = ({
     description,
     shouldWrapTooltip,
     tooltipProps,
-}: TabProps & Pick<TabGroupProps, 'size' | 'alignActiveBorderWithContainer' | 'hideTopPadding'>) => {
+    uniqueGroupId,
+}: TabProps &
+    Pick<TabGroupProps, 'size' | 'alignActiveBorderWithContainer' | 'hideTopPadding'> & { uniqueGroupId: string }) => {
+    const { path } = useRouteMatch()
+    const pathToMatch = tabType === 'navLink' || tabType === 'link' ? getPathnameToMatch(props.to, path) : ''
+    const match = useRouteMatch(pathToMatch)
+
     const { tabClassName, iconClassName, badgeClassName } = getClassNameBySizeMap({
         hideTopPadding,
         alignActiveBorderWithContainer,
@@ -119,11 +141,19 @@ const Tab = ({
         }
     }
 
+    const isTabActive = tabType === 'button' ? active : !!match
+
     const renderTabContainer = () => (
         <li
-            className={`tab-group__tab lh-20 ${active ? 'tab-group__tab--active cb-5 fw-6' : 'cn-9 fw-4'} ${alignActiveBorderWithContainer ? 'tab-group__tab--align-active-border' : ''} ${tabType === 'block' ? 'tab-group__tab--block' : ''} ${disabled ? 'dc__disabled' : 'cursor'}`}
+            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}
+                />
+            )}
         </li>
     )
 
@@ -140,20 +170,26 @@ export const TabGroup = ({
     rightComponent,
     alignActiveBorderWithContainer,
     hideTopPadding,
-}: TabGroupProps) => (
-    <div className="flexbox dc__align-items-center dc__content-space">
-        <ul role="tablist" className={`tab-group flexbox dc__align-items-center p-0 m-0 ${tabGroupClassMap[size]}`}>
-            {tabs.map(({ id, ...resProps }) => (
-                <Tab
-                    key={id}
-                    id={id}
-                    size={size}
-                    alignActiveBorderWithContainer={alignActiveBorderWithContainer}
-                    hideTopPadding={hideTopPadding}
-                    {...resProps}
-                />
-            ))}
-        </ul>
-        {rightComponent || null}
-    </div>
-)
+}: TabGroupProps) => {
+    // Unique layoutId for motion.div to handle multiple tab groups on same page
+    const uniqueGroupId = tabs.map((tab) => tab.label).join('-')
+
+    return (
+        <div className="flexbox dc__align-items-center dc__content-space">
+            <ul role="tablist" className={`tab-group flexbox dc__align-items-center p-0 m-0 ${tabGroupClassMap[size]}`}>
+                {tabs.map(({ id, ...resProps }) => (
+                    <Tab
+                        key={id}
+                        id={id}
+                        size={size}
+                        alignActiveBorderWithContainer={alignActiveBorderWithContainer}
+                        hideTopPadding={hideTopPadding}
+                        uniqueGroupId={uniqueGroupId}
+                        {...resProps}
+                    />
+                ))}
+            </ul>
+            {rightComponent || null}
+        </div>
+    )
+}

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

@@ -14,6 +14,8 @@
  * limitations under the License.
  */
 
+import { LinkProps, NavLinkProps } from 'react-router-dom'
+
 import { ReactComponent as ICErrorExclamation } from '@Icons/ic-error-exclamation.svg'
 import { ReactComponent as ICWarning } from '@Icons/ic-warning.svg'
 
@@ -65,3 +67,20 @@ export const getTabDescription = (description: TabProps['description']) =>
                 : description}
         </ul>
     )
+
+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 || ''
+        return pathname.startsWith('/') ? pathname : `${replaceTrailingSlash(currentPathname)}/${pathname}`
+    }
+    return ''
+}

src/Shared/Components/TabGroup/TabGroup.scss

@@ -45,10 +45,6 @@
             border-top-right-radius: 2px;
         }
 
-        &--align-active-border::after {
-            bottom: -1px;
-        }
-
         &:hover:not(.tab-group__tab--block):not(.dc__disabled) {
             color: var(--B500);
             @include svg-styles(var(--B500));
@@ -58,14 +54,6 @@
             }
         }
 
-        &--active {
-            @include svg-styles(var(--B500));
-
-            &::after {
-                background-color: var(--B500);
-            }
-        }
-
         &__badge {
             border-radius: 10px;
             min-width: 20px;
@@ -104,11 +92,5 @@
                 color: var(--B500);
             }
         }
-
-        &:has(.active) {
-            &::after {
-                background-color: var(--B500);
-            }
-        }
     }
 }