From 42f5a80126b9409396f2fa05c33f1ce58a55ec0f Mon Sep 17 00:00:00 2001
From: David Newell <d.newell1@outlook.com>
Date: Tue, 5 Dec 2023 14:12:37 +0000
Subject: [PATCH] chore: migrate tabs from custom to lemon (#19041)

---
 .../src/lib/lemon-ui/LemonTabs/LemonTabs.scss | 146 ++++++++++--------
 .../src/lib/lemon-ui/LemonTabs/LemonTabs.tsx  |  11 +-
 frontend/src/scenes/web-analytics/WebTabs.tsx |  48 +-----
 3 files changed, 99 insertions(+), 106 deletions(-)

diff --git a/frontend/src/lib/lemon-ui/LemonTabs/LemonTabs.scss b/frontend/src/lib/lemon-ui/LemonTabs/LemonTabs.scss
index 371bb05d23964..3696f6b12c088 100644
--- a/frontend/src/lib/lemon-ui/LemonTabs/LemonTabs.scss
+++ b/frontend/src/lib/lemon-ui/LemonTabs/LemonTabs.scss
@@ -1,4 +1,8 @@
 .LemonTabs {
+    --lemon-tabs-margin-bottom: 1rem;
+    --lemon-tabs-margin-right: 2rem;
+    --lemon-tabs-content-padding: 0.75rem 0;
+
     position: relative;
     display: flex;
     flex-direction: column;
@@ -8,83 +12,95 @@
     .Navigation3000__scene > :first-child > &:first-child {
         margin-top: -0.75rem;
     }
-}
 
-.LemonTabs__bar {
-    position: relative;
-    display: flex;
-    flex-direction: row;
-    flex-shrink: 0;
-    align-items: stretch;
-    margin-bottom: 1rem;
-    overflow-x: auto;
-    list-style: none;
-
-    &::before {
-        position: absolute;
-        bottom: 0;
-        left: 0;
-        width: 100%;
-        height: 1px;
-
-        // The bottom border
-        content: '';
-        background: var(--border);
+    &.LemonTabs--inline {
+        --lemon-tabs-margin-bottom: 0;
+        --lemon-tabs-margin-right: 1rem;
+        --lemon-tabs-content-padding: 0.25rem 0rem;
+    }
+
+    &.LemonTabs--borderless {
+        .LemonTabs__bar::before {
+            content: none;
+        }
     }
 
-    &::after {
-        position: absolute;
-        bottom: 0;
-        left: 0;
-        width: var(--lemon-tabs-slider-width);
-        height: 0.125rem;
+    .LemonTabs__bar {
+        position: relative;
+        display: flex;
+        flex-direction: row;
+        flex-shrink: 0;
+        align-items: stretch;
+        margin-bottom: var(--lemon-tabs-margin-bottom);
+        overflow-x: auto;
+        list-style: none;
 
-        // The active tab slider
-        content: '';
-        background: var(--link);
-        transform: translateX(var(--lemon-tabs-slider-offset));
+        &::before {
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            width: 100%;
+            height: 1px;
 
-        .LemonTabs--transitioning & {
-            transition: width 200ms ease, transform 200ms ease;
+            // The bottom border
+            content: '';
+            background: var(--border);
         }
-    }
-}
 
-.LemonTabs__tab {
-    .LemonTabs--transitioning & {
-        transition: color 200ms ease;
-    }
+        &::after {
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            width: var(--lemon-tabs-slider-width);
+            height: 0.125rem;
 
-    &:not(:last-child) {
-        margin-right: 2rem;
-    }
+            // The active tab slider
+            content: '';
+            background: var(--link);
+            transform: translateX(var(--lemon-tabs-slider-offset));
 
-    &:hover {
-        color: var(--link);
-    }
+            .LemonTabs--transitioning & {
+                transition: width 200ms ease, transform 200ms ease;
+            }
+        }
 
-    &:active {
-        color: var(--primary-3000-active);
-    }
+        .LemonTabs__tab {
+            .LemonTabs--transitioning & {
+                transition: color 200ms ease;
+            }
 
-    &.LemonTabs__tab--active {
-        color: var(--link);
-        text-shadow: 0 0 0.25px currentColor; // Simulate increased weight without affecting width
-    }
+            &:not(:last-child) {
+                margin-right: var(--lemon-tabs-margin-right);
+            }
 
-    a {
-        color: inherit;
+            &:hover {
+                color: var(--link);
+            }
 
-        // Make tab labels that are links the same colors as regular tab labels
-        text-decoration: none;
-        transition: none;
-    }
-}
+            &:active {
+                color: var(--primary-3000-active);
+            }
 
-.LemonTabs__tab-content {
-    display: flex;
-    align-items: center;
-    padding: 0.75rem 0;
-    white-space: nowrap;
-    cursor: pointer;
+            &.LemonTabs__tab--active {
+                color: var(--link);
+                text-shadow: 0 0 0.25px currentColor; // Simulate increased weight without affecting width
+            }
+
+            a {
+                color: inherit;
+
+                // Make tab labels that are links the same colors as regular tab labels
+                text-decoration: none;
+                transition: none;
+            }
+
+            .LemonTabs__tab-content {
+                display: flex;
+                align-items: center;
+                padding: var(--lemon-tabs-content-padding);
+                white-space: nowrap;
+                cursor: pointer;
+            }
+        }
+    }
 }
diff --git a/frontend/src/lib/lemon-ui/LemonTabs/LemonTabs.tsx b/frontend/src/lib/lemon-ui/LemonTabs/LemonTabs.tsx
index d94f9732623cd..44820a6523698 100644
--- a/frontend/src/lib/lemon-ui/LemonTabs/LemonTabs.tsx
+++ b/frontend/src/lib/lemon-ui/LemonTabs/LemonTabs.tsx
@@ -29,6 +29,8 @@ export interface LemonTabsProps<T extends string | number> {
     onChange?: (key: T) => void
     /** List of tabs. Falsy entries are ignored - they're there to make conditional tabs convenient. */
     tabs: (LemonTab<T> | null | false)[]
+    inline?: boolean
+    borderless?: boolean
     'data-attr'?: string
 }
 
@@ -53,6 +55,8 @@ export function LemonTabs<T extends string | number>({
     activeKey,
     onChange,
     tabs,
+    inline = false,
+    borderless = false,
     'data-attr': dataAttr,
 }: LemonTabsProps<T>): JSX.Element {
     const { containerRef, selectionRef, sliderWidth, sliderOffset, transitioning } = useSliderPositioning<
@@ -66,7 +70,12 @@ export function LemonTabs<T extends string | number>({
 
     return (
         <div
-            className={clsx('LemonTabs', transitioning && 'LemonTabs--transitioning')}
+            className={clsx(
+                'LemonTabs',
+                transitioning && 'LemonTabs--transitioning',
+                inline && 'LemonTabs--inline',
+                borderless && 'LemonTabs--borderless'
+            )}
             // eslint-disable-next-line react/forbid-dom-props
             style={
                 {
diff --git a/frontend/src/scenes/web-analytics/WebTabs.tsx b/frontend/src/scenes/web-analytics/WebTabs.tsx
index 64cf389373d20..6059b827d35dc 100644
--- a/frontend/src/scenes/web-analytics/WebTabs.tsx
+++ b/frontend/src/scenes/web-analytics/WebTabs.tsx
@@ -1,8 +1,7 @@
+import { LemonTabs } from '@posthog/lemon-ui'
 import clsx from 'clsx'
-import { useSliderPositioning } from 'lib/lemon-ui/hooks'
 import React from 'react'
 
-const TRANSITION_MS = 200
 export const WebTabs = ({
     className,
     activeTabId,
@@ -15,49 +14,18 @@ export const WebTabs = ({
     setActiveTabId: (id: string) => void
 }): JSX.Element => {
     const activeTab = tabs.find((t) => t.id === activeTabId)
-    const { containerRef, selectionRef, sliderWidth, sliderOffset, transitioning } = useSliderPositioning<
-        HTMLUListElement,
-        HTMLLIElement
-    >(activeTabId, TRANSITION_MS)
 
     return (
         <div className={clsx(className, 'flex flex-col')}>
             <div className="flex flex-row items-center self-stretch mb-3">
                 {<h2 className="flex-1 m-0">{activeTab?.title}</h2>}
-                <div className="flex flex-col items-stretch relative">
-                    {tabs.length > 1 && (
-                        // TODO switch to a select if more than 3
-                        <ul className="flex flex-row items-center space-x-2" ref={containerRef}>
-                            {tabs.map(({ id, linkText }) => (
-                                <li key={id} ref={id === activeTabId ? selectionRef : undefined}>
-                                    <button
-                                        className={clsx(
-                                            'bg-transparent border-none cursor-pointer',
-                                            id === activeTabId ? 'text-bold text-link' : 'text-current hover:text-link'
-                                        )}
-                                        onClick={() => setActiveTabId(id)}
-                                    >
-                                        {linkText}
-                                    </button>
-                                </li>
-                            ))}
-                        </ul>
-                    )}
-                    <div className="w-full relative">
-                        <div
-                            className="h-px bg-link absolute"
-                            // eslint-disable-next-line react/forbid-dom-props
-                            style={{
-                                width: sliderWidth,
-                                left: 0,
-                                transform: `translateX(${sliderOffset}px)`,
-                                transition: transitioning
-                                    ? `width ${TRANSITION_MS}ms ease, transform ${TRANSITION_MS}ms ease`
-                                    : undefined,
-                            }}
-                        />
-                    </div>
-                </div>
+                <LemonTabs
+                    inline
+                    borderless
+                    activeKey={activeTabId}
+                    onChange={setActiveTabId}
+                    tabs={tabs.map(({ id, linkText }) => ({ key: id, label: linkText }))}
+                />
             </div>
             <div className="flex-1 flex flex-col">{activeTab?.content}</div>
         </div>