style(3000): Tune 3000 sizing (#18754)

* Fix unwanted breadcrumbs margin * Reduce navbar spacing * Remove breadcrumbs action button sizing hack * Round button sizing to full pixels * Round table sizing to full pixels * Fix homepage cards being scrollable and tune insight icon colors * Tune negative margin * Update UI snapshots for `chromium` (1) * Update UI snapshots for `chromium` (2) * Update frontend/src/lib/lemon-ui/LemonTable/LemonTable.scss Co-authored-by: David Newell <[email protected]> * Update frontend/src/lib/components/CompactList/CompactList.tsx Co-authored-by: David Newell <[email protected]> * Update UI snapshots for `chromium` (2) * Update UI snapshots for `chromium` (2) * Update UI snapshots for `chromium` (2) * Make breadcrumbs buttons small * Refactor `> span` to `.LemonButton__chrome` * Make navbar spacing tighter * Rework project homepage list items * Update UI snapshots for `chromium` (1) * Update UI snapshots for `chromium` (2) * Update UI snapshots for `chromium` (1) * Update UI snapshots for `chromium` (2) * Fix search icon * Update UI snapshots for `chromium` (1) --------- Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: David Newell <[email protected]>
PostHog · Nov 22, 2023 · add52c3 · add52c3
1 parent e94bca5
commit add52c3
Show file tree

Hide file tree

Showing 23 changed files with 199 additions and 199 deletions.
diff --git a/frontend/__snapshots__/components-compact-list--compact-list.png b/frontend/__snapshots__/components-compact-list--compact-list.png
diff --git a/frontend/__snapshots__/posthog-3000-navigation--navigation-3000.png b/frontend/__snapshots__/posthog-3000-navigation--navigation-3000.png
diff --git a/frontend/__snapshots__/posthog-3000-navigation--navigation-base.png b/frontend/__snapshots__/posthog-3000-navigation--navigation-base.png
diff --git a/...end/__snapshots__/scenes-app-feature-flags--edit-multi-variate-feature-flag.png b/...end/__snapshots__/scenes-app-feature-flags--edit-multi-variate-feature-flag.png
diff --git a/frontend/__snapshots__/scenes-app-project-homepage--project-homepage.png b/frontend/__snapshots__/scenes-app-project-homepage--project-homepage.png
diff --git a/frontend/__snapshots__/scenes-app-saved-insights--list-view.png b/frontend/__snapshots__/scenes-app-saved-insights--list-view.png
diff --git a/frontend/src/layout/navigation-3000/Navigation.scss b/frontend/src/layout/navigation-3000/Navigation.scss
@@ -57,14 +57,9 @@
         z-index: var(--z-main-nav);
 
         .LemonButton {
-            min-height: 2.25rem !important; // Reduce minimum height
-
-            > span {
+            .LemonButton__chrome {
                 padding: 0.25rem !important;
-            }
-
-            .LemonButton__content {
-                font-size: 0.813rem;
+                font-size: 0.8125rem;
             }
         }
 
@@ -77,7 +72,7 @@
         }
 
         li + li {
-            margin-top: 0.25rem;
+            margin-top: -1px;
         }
     }
 }

diff --git a/frontend/src/layout/navigation-3000/components/Breadcrumbs.scss b/frontend/src/layout/navigation-3000/components/Breadcrumbs.scss
@@ -37,7 +37,7 @@
 
 .Breadcrumbs3000__crumbs {
     height: 1rem;
-    margin-top: 0.25rem;
+    margin-top: calc(0.25rem * (1 - var(--breadcrumbs-compaction-rate)));
     display: flex;
     align-items: center;
     overflow: visible;

diff --git a/frontend/src/layout/navigation-3000/components/Navbar.tsx b/frontend/src/layout/navigation-3000/components/Navbar.tsx
@@ -3,7 +3,6 @@ import { LemonBadge } from '@posthog/lemon-ui'
 import { useActions, useValues } from 'kea'
 import { commandBarLogic } from 'lib/components/CommandBar/commandBarLogic'
 import { Resizer } from 'lib/components/Resizer/Resizer'
-import { useFeatureFlag } from 'lib/hooks/useFeatureFlag'
 import { Popover } from 'lib/lemon-ui/Popover'
 import { ProfilePicture } from 'lib/lemon-ui/ProfilePicture'
 import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
@@ -14,7 +13,6 @@ import { userLogic } from 'scenes/userLogic'
 
 import { navigationLogic } from '~/layout/navigation/navigationLogic'
 import { SitePopoverOverlay } from '~/layout/navigation/TopBar/SitePopover'
-import { KeyboardShortcut } from '~/layout/navigation-3000/components/KeyboardShortcut'
 
 import { navigation3000Logic } from '../navigationLogic'
 import { themeLogic } from '../themeLogic'
@@ -47,7 +45,6 @@ export function Navbar(): JSX.Element {
     const { toggleSearchBar } = useActions(commandBarLogic)
 
     const containerRef = useRef<HTMLDivElement | null>(null)
-    const isUsingNewNav = useFeatureFlag('POSTHOG_3000_NAV')
 
     return (
         <nav className="Navbar3000" ref={containerRef}>
@@ -89,15 +86,7 @@ export function Navbar(): JSX.Element {
                             icon={<IconSearch />}
                             title="Search"
                             onClick={toggleSearchBar}
-                            sideIcon={
-                                !isUsingNewNav ? (
-                                    <span className="text-xs">
-                                        <KeyboardShortcut shift k />
-                                    </span>
-                                ) : (
-                                    <></>
-                                )
-                            }
+                            keyboardShortcut={{ command: true, k: true }}
                         />
                         <NavbarButton
                             icon={<ThemeIcon />}

diff --git a/frontend/src/layout/navigation-3000/components/NavbarButton.tsx b/frontend/src/layout/navigation-3000/components/NavbarButton.tsx
@@ -10,106 +10,119 @@ import { sceneLogic } from 'scenes/sceneLogic'
 import { SidebarChangeNoticeContent, useSidebarChangeNotices } from '~/layout/navigation/SideBar/SidebarChangeNotice'
 
 import { navigation3000Logic } from '../navigationLogic'
+import { KeyboardShortcut, KeyboardShortcutProps } from './KeyboardShortcut'
 
 export interface NavbarButtonProps {
     identifier: string
     icon: ReactElement
-    sideIcon?: ReactElement
     title?: string
     shortTitle?: string
     tag?: 'alpha' | 'beta'
     onClick?: () => void
     to?: string
     persistentTooltip?: boolean
     active?: boolean
+    keyboardShortcut?: KeyboardShortcutProps
 }
 
 export const NavbarButton: FunctionComponent<NavbarButtonProps> = React.forwardRef<
     HTMLButtonElement,
     NavbarButtonProps
->(({ identifier, shortTitle, title, tag, onClick, persistentTooltip, ...buttonProps }, ref): JSX.Element => {
-    const { aliasedActiveScene } = useValues(sceneLogic)
-    const { isNavCollapsed } = useValues(navigation3000Logic)
-    const isUsingNewNav = useFeatureFlag('POSTHOG_3000_NAV')
+>(
+    (
+        { identifier, shortTitle, title, tag, onClick, persistentTooltip, keyboardShortcut, ...buttonProps },
+        ref
+    ): JSX.Element => {
+        const { aliasedActiveScene } = useValues(sceneLogic)
+        const { isNavCollapsed } = useValues(navigation3000Logic)
+        const isUsingNewNav = useFeatureFlag('POSTHOG_3000_NAV')
 
-    const [hasBeenClicked, setHasBeenClicked] = useState(false)
+        const [hasBeenClicked, setHasBeenClicked] = useState(false)
 
-    const here = aliasedActiveScene === identifier
-    const isNavCollapsedActually = isNavCollapsed || isUsingNewNav
+        const here = aliasedActiveScene === identifier
+        const isNavCollapsedActually = isNavCollapsed || isUsingNewNav
 
-    if (!isUsingNewNav) {
-        buttonProps.active = here
-    }
+        if (!isUsingNewNav) {
+            buttonProps.active = here
+        }
 
-    let content: JSX.Element | string | undefined
-    if (!isNavCollapsedActually) {
-        content = shortTitle || title
-        if (tag) {
-            if (tag === 'alpha') {
-                content = (
-                    <>
-                        <span className="grow">{content}</span>
-                        <LemonTag type="completion" size="small" className="ml-2">
-                            ALPHA
-                        </LemonTag>
-                    </>
-                )
-            } else if (tag === 'beta') {
-                content = (
-                    <>
-                        <span className="grow">{content}</span>
-                        <LemonTag type="warning" size="small" className="ml-2">
-                            BETA
-                        </LemonTag>
-                    </>
-                )
+        let content: JSX.Element | string | undefined
+        if (!isNavCollapsedActually) {
+            content = shortTitle || title
+            if (tag) {
+                if (tag === 'alpha') {
+                    content = (
+                        <>
+                            <span className="grow">{content}</span>
+                            <LemonTag type="completion" size="small" className="ml-2">
+                                ALPHA
+                            </LemonTag>
+                        </>
+                    )
+                } else if (tag === 'beta') {
+                    content = (
+                        <>
+                            <span className="grow">{content}</span>
+                            <LemonTag type="warning" size="small" className="ml-2">
+                                BETA
+                            </LemonTag>
+                        </>
+                    )
+                }
             }
         }
-    }
 
-    const buttonContent = (
-        <LemonButton
-            ref={ref}
-            data-attr={`menu-item-${identifier.toString().toLowerCase()}`}
-            onMouseEnter={() => setHasBeenClicked(false)}
-            onClick={() => {
-                setHasBeenClicked(true)
-                onClick?.()
-            }}
-            className={clsx('NavbarButton', isUsingNewNav && here && 'NavbarButton--here')}
-            fullWidth
-            type="secondary"
-            stealth={true}
-            {...buttonProps}
-        >
-            {content}
-        </LemonButton>
-    )
+        const buttonContent = (
+            <LemonButton
+                ref={ref}
+                data-attr={`menu-item-${identifier.toString().toLowerCase()}`}
+                onMouseEnter={() => setHasBeenClicked(false)}
+                onClick={() => {
+                    setHasBeenClicked(true)
+                    onClick?.()
+                }}
+                className={clsx('NavbarButton', isUsingNewNav && here && 'NavbarButton--here')}
+                fullWidth
+                type="secondary"
+                stealth={true}
+                sideIcon={
+                    !isNavCollapsedActually && keyboardShortcut ? (
+                        <span className="text-xs">
+                            <KeyboardShortcut {...keyboardShortcut} />
+                        </span>
+                    ) : null
+                }
+                {...buttonProps}
+            >
+                {content}
+            </LemonButton>
+        )
 
-    const [notices, onAcknowledged] = useSidebarChangeNotices({ identifier })
+        const [notices, onAcknowledged] = useSidebarChangeNotices({ identifier })
 
-    return (
-        <li className="w-full">
-            {notices.length ? (
-                <Tooltip
-                    title={<SidebarChangeNoticeContent notices={notices} onAcknowledged={onAcknowledged} />}
-                    placement={notices[0].placement ?? 'right'}
-                    delayMs={0}
-                    visible={true}
-                >
-                    {buttonContent}
-                </Tooltip>
-            ) : (
-                <Tooltip
-                    title={isNavCollapsedActually ? (here ? `${title} (you are here)` : title) : null}
-                    placement="right"
-                    delayMs={0}
-                    visible={!persistentTooltip && hasBeenClicked ? false : undefined} // Force-hide tooltip after button click
-                >
-                    {buttonContent}
-                </Tooltip>
-            )}
-        </li>
-    )
-})
+        return (
+            <li className="w-full">
+                {notices.length ? (
+                    <Tooltip
+                        title={<SidebarChangeNoticeContent notices={notices} onAcknowledged={onAcknowledged} />}
+                        placement={notices[0].placement ?? 'right'}
+                        delayMs={0}
+                        visible={true}
+                    >
+                        {buttonContent}
+                    </Tooltip>
+                ) : (
+                    <Tooltip
+                        title={isNavCollapsedActually ? (here ? `${title} (you are here)` : title) : null}
+                        placement="right"
+                        delayMs={0}
+                        visible={!persistentTooltip && hasBeenClicked ? false : undefined} // Force-hide tooltip after button click
+                    >
+                        {buttonContent}
+                    </Tooltip>
+                )}
+            </li>
+        )
+    }
+)
 NavbarButton.displayName = 'NavbarButton'
diff --git a/frontend/src/lib/components/CompactList/CompactList.scss b/frontend/src/lib/components/CompactList/CompactList.scss
@@ -1,7 +1,7 @@
 .compact-list {
     border-radius: var(--radius);
     border: 1px solid var(--border);
-    height: calc(19.5rem + 1px);
+    height: calc(19.25rem);
     background: var(--bg-light);
     box-sizing: content-box;
     display: flex;
@@ -22,23 +22,13 @@
         }
     }
 
-    .spacer-container {
-        padding: 0 1rem;
-    }
-
     .scrollable-list {
         flex: 1;
-        overflow: auto auto;
-        padding: 0 0.5rem 0.5rem;
+        overflow: auto;
+        padding: 0 0.5rem;
     }
 
     .LemonButton {
         font-family: var(--font-sans) !important;
     }
-
-    .secondary-text {
-        .posthog-3000 & {
-            color: var(--text-secondary);
-        }
-    }
 }
diff --git a/frontend/src/lib/components/CompactList/CompactList.tsx b/frontend/src/lib/components/CompactList/CompactList.tsx
@@ -29,7 +29,7 @@ export function CompactList({
                 <h3>{title}</h3>
                 {viewAllURL && <LemonButton to={viewAllURL}>View all</LemonButton>}
             </div>
-            <div className="spacer-container">
+            <div className="mx-2">
                 <LemonDivider />
             </div>
             <div className="scrollable-list">

diff --git a/frontend/src/lib/components/PageHeader.tsx b/frontend/src/lib/components/PageHeader.tsx
@@ -1,9 +1,8 @@
 import clsx from 'clsx'
 import { useValues } from 'kea'
-import { FEATURE_FLAGS } from 'lib/constants'
 import { useFeatureFlag } from 'lib/hooks/useFeatureFlag'
+import { Within3000PageHeaderContext } from 'lib/lemon-ui/LemonButton/LemonButton'
 import { LemonDivider } from 'lib/lemon-ui/LemonDivider'
-import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
 import { createPortal } from 'react-dom'
 import { DraggableToNotebook, DraggableToNotebookProps } from 'scenes/notebooks/AddToNotebook/DraggableToNotebook'
 
@@ -32,13 +31,9 @@ export function PageHeader({
 }: PageHeaderProps): JSX.Element | null {
     const is3000 = useFeatureFlag('POSTHOG_3000')
     const { actionsContainer } = useValues(breadcrumbsLogic)
-    const { featureFlags } = useValues(featureFlagLogic)
-
-    const has3000 = featureFlags[FEATURE_FLAGS.POSTHOG_3000]
 
     return (
         <>
-            {}
             {(!is3000 || description) && (
                 <div className="page-title-row flex justify-between" style={style}>
                     <div className="min-w-0">
@@ -55,10 +50,18 @@ export function PageHeader({
                     {!is3000 && <div className="page-buttons">{buttons}</div>}
                 </div>
             )}
-            {is3000 && buttons && actionsContainer && createPortal(buttons, actionsContainer)}
+            {is3000 &&
+                buttons &&
+                actionsContainer &&
+                createPortal(
+                    <Within3000PageHeaderContext.Provider value={is3000}>
+                        {buttons}
+                    </Within3000PageHeaderContext.Provider>,
+                    actionsContainer
+                )}
 
             {caption && <div className={clsx('page-caption', tabbedPage && 'tabbed')}>{caption}</div>}
-            {delimited && <LemonDivider className={has3000 ? 'hidden' : 'my-4'} />}
+            {delimited && <LemonDivider className={is3000 ? 'hidden' : 'my-4'} />}
         </>
     )
 }

diff --git a/frontend/src/lib/lemon-ui/LemonButton/LemonButton.scss b/frontend/src/lib/lemon-ui/LemonButton/LemonButton.scss
@@ -102,8 +102,7 @@
         }
     }
 
-    &.LemonButton--small,
-    .Breadcrumbs3000 & {
+    &.LemonButton--small {
         gap: 0.25rem;
 
         > span {