fix: Fix up table opacities (#18955)

PostHog · Nov 29, 2023 · 9d0d787 · 9d0d787
1 parent a696b3f
commit 9d0d787
Show file tree

Hide file tree

Showing 94 changed files with 41 additions and 20 deletions.
diff --git a/frontend/__snapshots__/components-command-bar--search--dark.png b/frontend/__snapshots__/components-command-bar--search--dark.png
diff --git a/frontend/__snapshots__/insights-insightstable--aggregation.png b/frontend/__snapshots__/insights-insightstable--aggregation.png
diff --git a/frontend/__snapshots__/insights-insightstable--can-edit-series-name.png b/frontend/__snapshots__/insights-insightstable--can-edit-series-name.png
diff --git a/frontend/__snapshots__/insights-insightstable--default.png b/frontend/__snapshots__/insights-insightstable--default.png
diff --git a/frontend/__snapshots__/insights-insightstable--hourly.png b/frontend/__snapshots__/insights-insightstable--hourly.png
diff --git a/frontend/__snapshots__/insights-insightstable--is-legend.png b/frontend/__snapshots__/insights-insightstable--is-legend.png
diff --git a/frontend/__snapshots__/lemon-ui-colors--all-pre-thousand-color-options.png b/frontend/__snapshots__/lemon-ui-colors--all-pre-thousand-color-options.png
diff --git a/frontend/__snapshots__/lemon-ui-colors--all-three-thousand-color-options.png b/frontend/__snapshots__/lemon-ui-colors--all-three-thousand-color-options.png
diff --git a/frontend/__snapshots__/lemon-ui-icons--shelf-a.png b/frontend/__snapshots__/lemon-ui-icons--shelf-a.png
diff --git a/frontend/__snapshots__/lemon-ui-icons--shelf-b.png b/frontend/__snapshots__/lemon-ui-icons--shelf-b.png
diff --git a/frontend/__snapshots__/lemon-ui-icons--shelf-c.png b/frontend/__snapshots__/lemon-ui-icons--shelf-c.png
diff --git a/frontend/__snapshots__/lemon-ui-icons--shelf-d.png b/frontend/__snapshots__/lemon-ui-icons--shelf-d.png
diff --git a/frontend/__snapshots__/lemon-ui-icons--shelf-e.png b/frontend/__snapshots__/lemon-ui-icons--shelf-e.png
diff --git a/frontend/__snapshots__/lemon-ui-icons--shelf-f.png b/frontend/__snapshots__/lemon-ui-icons--shelf-f.png
diff --git a/frontend/__snapshots__/lemon-ui-icons--shelf-g.png b/frontend/__snapshots__/lemon-ui-icons--shelf-g.png
diff --git a/frontend/__snapshots__/lemon-ui-icons--shelf-h.png b/frontend/__snapshots__/lemon-ui-icons--shelf-h.png
diff --git a/frontend/__snapshots__/lemon-ui-icons--shelf-i.png b/frontend/__snapshots__/lemon-ui-icons--shelf-i.png
diff --git a/frontend/__snapshots__/lemon-ui-icons--shelf-j.png b/frontend/__snapshots__/lemon-ui-icons--shelf-j.png
diff --git a/frontend/__snapshots__/lemon-ui-icons--shelf-k.png b/frontend/__snapshots__/lemon-ui-icons--shelf-k.png
diff --git a/frontend/__snapshots__/lemon-ui-icons--shelf-l.png b/frontend/__snapshots__/lemon-ui-icons--shelf-l.png
diff --git a/frontend/__snapshots__/lemon-ui-icons--shelf-m.png b/frontend/__snapshots__/lemon-ui-icons--shelf-m.png
diff --git a/frontend/__snapshots__/lemon-ui-icons--shelf-n.png b/frontend/__snapshots__/lemon-ui-icons--shelf-n.png
diff --git a/frontend/__snapshots__/lemon-ui-icons--shelf-o.png b/frontend/__snapshots__/lemon-ui-icons--shelf-o.png
diff --git a/frontend/__snapshots__/lemon-ui-icons--shelf-other.png b/frontend/__snapshots__/lemon-ui-icons--shelf-other.png
diff --git a/frontend/__snapshots__/lemon-ui-icons--shelf-p.png b/frontend/__snapshots__/lemon-ui-icons--shelf-p.png
diff --git a/frontend/__snapshots__/lemon-ui-icons--shelf-q.png b/frontend/__snapshots__/lemon-ui-icons--shelf-q.png
diff --git a/frontend/__snapshots__/lemon-ui-icons--shelf-r.png b/frontend/__snapshots__/lemon-ui-icons--shelf-r.png
diff --git a/frontend/__snapshots__/lemon-ui-icons--shelf-s.png b/frontend/__snapshots__/lemon-ui-icons--shelf-s.png
diff --git a/frontend/__snapshots__/lemon-ui-icons--shelf-t.png b/frontend/__snapshots__/lemon-ui-icons--shelf-t.png
diff --git a/frontend/__snapshots__/lemon-ui-icons--shelf-u.png b/frontend/__snapshots__/lemon-ui-icons--shelf-u.png
diff --git a/frontend/__snapshots__/lemon-ui-icons--shelf-v.png b/frontend/__snapshots__/lemon-ui-icons--shelf-v.png
diff --git a/frontend/__snapshots__/lemon-ui-icons--shelf-w.png b/frontend/__snapshots__/lemon-ui-icons--shelf-w.png
diff --git a/frontend/__snapshots__/lemon-ui-icons--shelf-x.png b/frontend/__snapshots__/lemon-ui-icons--shelf-x.png
diff --git a/frontend/__snapshots__/lemon-ui-icons--shelf-y.png b/frontend/__snapshots__/lemon-ui-icons--shelf-y.png
diff --git a/frontend/__snapshots__/lemon-ui-icons--shelf-z.png b/frontend/__snapshots__/lemon-ui-icons--shelf-z.png
diff --git a/frontend/__snapshots__/lemon-ui-lemon-table--basic.png b/frontend/__snapshots__/lemon-ui-lemon-table--basic.png
diff --git a/frontend/__snapshots__/lemon-ui-lemon-table--borderless-rows.png b/frontend/__snapshots__/lemon-ui-lemon-table--borderless-rows.png
diff --git a/...d/__snapshots__/lemon-ui-lemon-table--empty-loading-with-many-skeleton-rows.png b/...d/__snapshots__/lemon-ui-lemon-table--empty-loading-with-many-skeleton-rows.png
diff --git a/frontend/__snapshots__/lemon-ui-lemon-table--empty-loading.png b/frontend/__snapshots__/lemon-ui-lemon-table--empty-loading.png
diff --git a/frontend/__snapshots__/lemon-ui-lemon-table--empty.png b/frontend/__snapshots__/lemon-ui-lemon-table--empty.png
diff --git a/frontend/__snapshots__/lemon-ui-lemon-table--grouped.png b/frontend/__snapshots__/lemon-ui-lemon-table--grouped.png
diff --git a/frontend/__snapshots__/lemon-ui-lemon-table--loading.png b/frontend/__snapshots__/lemon-ui-lemon-table--loading.png
diff --git a/frontend/__snapshots__/lemon-ui-lemon-table--paginated-automatically.png b/frontend/__snapshots__/lemon-ui-lemon-table--paginated-automatically.png
diff --git a/frontend/__snapshots__/lemon-ui-lemon-table--small.png b/frontend/__snapshots__/lemon-ui-lemon-table--small.png
diff --git a/frontend/__snapshots__/lemon-ui-lemon-table--with-color-coded-rows.png b/frontend/__snapshots__/lemon-ui-lemon-table--with-color-coded-rows.png
diff --git a/frontend/__snapshots__/lemon-ui-lemon-table--with-expandable-rows.png b/frontend/__snapshots__/lemon-ui-lemon-table--with-expandable-rows.png
diff --git a/frontend/__snapshots__/lemon-ui-lemon-table--with-footer.png b/frontend/__snapshots__/lemon-ui-lemon-table--with-footer.png
diff --git a/frontend/__snapshots__/lemon-ui-lemon-table--with-highlighted-rows.png b/frontend/__snapshots__/lemon-ui-lemon-table--with-highlighted-rows.png
diff --git a/frontend/__snapshots__/lemon-ui-lemon-table--with-mandatory-sorting.png b/frontend/__snapshots__/lemon-ui-lemon-table--with-mandatory-sorting.png
diff --git a/frontend/__snapshots__/lemon-ui-lemon-table--with-sticky-first-column.png b/frontend/__snapshots__/lemon-ui-lemon-table--with-sticky-first-column.png
diff --git a/frontend/__snapshots__/lemon-ui-lemon-table--without-uppercasing-in-header.png b/frontend/__snapshots__/lemon-ui-lemon-table--without-uppercasing-in-header.png
diff --git a/frontend/__snapshots__/lemon-ui-lemon-table--x-small.png b/frontend/__snapshots__/lemon-ui-lemon-table--x-small.png
diff --git a/frontend/__snapshots__/scenes-app-annotations--annotations.png b/frontend/__snapshots__/scenes-app-annotations--annotations.png
diff --git a/frontend/__snapshots__/scenes-app-apps--installed.png b/frontend/__snapshots__/scenes-app-apps--installed.png
diff --git a/frontend/__snapshots__/scenes-app-apps-app-metrics--app-metrics.png b/frontend/__snapshots__/scenes-app-apps-app-metrics--app-metrics.png
diff --git a/frontend/__snapshots__/scenes-app-dashboards--list.png b/frontend/__snapshots__/scenes-app-dashboards--list.png
diff --git a/frontend/__snapshots__/scenes-app-events--event-explorer.png b/frontend/__snapshots__/scenes-app-events--event-explorer.png
diff --git a/frontend/__snapshots__/scenes-app-experiments--complete-funnel-experiment.png b/frontend/__snapshots__/scenes-app-experiments--complete-funnel-experiment.png
diff --git a/frontend/__snapshots__/scenes-app-experiments--experiments-list.png b/frontend/__snapshots__/scenes-app-experiments--experiments-list.png
diff --git a/frontend/__snapshots__/scenes-app-insights--funnel-top-to-bottom--webkit.png b/frontend/__snapshots__/scenes-app-insights--funnel-top-to-bottom--webkit.png
diff --git a/...d/__snapshots__/scenes-app-insights--funnel-top-to-bottom-breakdown--webkit.png b/...d/__snapshots__/scenes-app-insights--funnel-top-to-bottom-breakdown--webkit.png
diff --git a/frontend/__snapshots__/scenes-app-insights--funnel-top-to-bottom-breakdown.png b/frontend/__snapshots__/scenes-app-insights--funnel-top-to-bottom-breakdown.png
diff --git a/frontend/__snapshots__/scenes-app-insights--trends-area-breakdown-edit--webkit.png b/frontend/__snapshots__/scenes-app-insights--trends-area-breakdown-edit--webkit.png
diff --git a/frontend/__snapshots__/scenes-app-insights--trends-area-breakdown-edit.png b/frontend/__snapshots__/scenes-app-insights--trends-area-breakdown-edit.png
diff --git a/frontend/__snapshots__/scenes-app-insights--trends-area-edit--webkit.png b/frontend/__snapshots__/scenes-app-insights--trends-area-edit--webkit.png
diff --git a/frontend/__snapshots__/scenes-app-insights--trends-area-edit.png b/frontend/__snapshots__/scenes-app-insights--trends-area-edit.png
diff --git a/frontend/__snapshots__/scenes-app-insights--trends-bar-breakdown-edit--webkit.png b/frontend/__snapshots__/scenes-app-insights--trends-bar-breakdown-edit--webkit.png
diff --git a/frontend/__snapshots__/scenes-app-insights--trends-bar-edit--webkit.png b/frontend/__snapshots__/scenes-app-insights--trends-bar-edit--webkit.png
diff --git a/frontend/__snapshots__/scenes-app-insights--trends-bar-edit.png b/frontend/__snapshots__/scenes-app-insights--trends-bar-edit.png
diff --git a/frontend/__snapshots__/scenes-app-insights--trends-line-breakdown-edit--webkit.png b/frontend/__snapshots__/scenes-app-insights--trends-line-breakdown-edit--webkit.png
diff --git a/frontend/__snapshots__/scenes-app-insights--trends-line-edit--webkit.png b/frontend/__snapshots__/scenes-app-insights--trends-line-edit--webkit.png
diff --git a/frontend/__snapshots__/scenes-app-insights--trends-line-edit.png b/frontend/__snapshots__/scenes-app-insights--trends-line-edit.png
diff --git a/frontend/__snapshots__/scenes-app-insights--trends-line-multi-edit--webkit.png b/frontend/__snapshots__/scenes-app-insights--trends-line-multi-edit--webkit.png
diff --git a/frontend/__snapshots__/scenes-app-insights--trends-line-multi-edit.png b/frontend/__snapshots__/scenes-app-insights--trends-line-multi-edit.png
diff --git a/frontend/__snapshots__/scenes-app-insights--trends-number-edit--webkit.png b/frontend/__snapshots__/scenes-app-insights--trends-number-edit--webkit.png
diff --git a/frontend/__snapshots__/scenes-app-insights--trends-number-edit.png b/frontend/__snapshots__/scenes-app-insights--trends-number-edit.png
diff --git a/frontend/__snapshots__/scenes-app-insights--trends-pie-breakdown-edit--webkit.png b/frontend/__snapshots__/scenes-app-insights--trends-pie-breakdown-edit--webkit.png
diff --git a/frontend/__snapshots__/scenes-app-insights--trends-pie-edit--webkit.png b/frontend/__snapshots__/scenes-app-insights--trends-pie-edit--webkit.png
diff --git a/frontend/__snapshots__/scenes-app-insights--trends-pie-edit.png b/frontend/__snapshots__/scenes-app-insights--trends-pie-edit.png
diff --git a/...tend/__snapshots__/scenes-app-insights--trends-table-breakdown-edit--webkit.png b/...tend/__snapshots__/scenes-app-insights--trends-table-breakdown-edit--webkit.png
diff --git a/frontend/__snapshots__/scenes-app-insights--trends-table-breakdown-edit.png b/frontend/__snapshots__/scenes-app-insights--trends-table-breakdown-edit.png
diff --git a/frontend/__snapshots__/scenes-app-insights--trends-table-edit--webkit.png b/frontend/__snapshots__/scenes-app-insights--trends-table-edit--webkit.png
diff --git a/frontend/__snapshots__/scenes-app-insights--trends-table-edit.png b/frontend/__snapshots__/scenes-app-insights--trends-table-edit.png
diff --git a/frontend/__snapshots__/scenes-app-insights--trends-world-map-edit--webkit.png b/frontend/__snapshots__/scenes-app-insights--trends-world-map-edit--webkit.png
diff --git a/frontend/__snapshots__/scenes-app-notebooks--notebooks-list.png b/frontend/__snapshots__/scenes-app-notebooks--notebooks-list.png
diff --git a/frontend/__snapshots__/scenes-app-persons-groups--cohorts.png b/frontend/__snapshots__/scenes-app-persons-groups--cohorts.png
diff --git a/frontend/__snapshots__/scenes-app-persons-groups--persons.png b/frontend/__snapshots__/scenes-app-persons-groups--persons.png
diff --git a/frontend/__snapshots__/scenes-app-pipeline--pipeline-app-logs.png b/frontend/__snapshots__/scenes-app-pipeline--pipeline-app-logs.png
diff --git a/frontend/__snapshots__/scenes-app-recordings--recordings-play-lists.png b/frontend/__snapshots__/scenes-app-recordings--recordings-play-lists.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/__snapshots__/scenes-app-sidepanels--side-panel-settings.png b/frontend/__snapshots__/scenes-app-sidepanels--side-panel-settings.png
diff --git a/frontend/__snapshots__/scenes-other-settings--settings-project.png b/frontend/__snapshots__/scenes-other-settings--settings-project.png
diff --git a/frontend/src/lib/lemon-ui/LemonTable/LemonTable.scss b/frontend/src/lib/lemon-ui/LemonTable/LemonTable.scss
@@ -1,15 +1,22 @@
 .LemonTable {
     --row-base-height: 3rem;
     --row-horizontal-padding: 1rem;
+    --lemon-table-background-color: var(--bg-table);
 
     position: relative;
     flex: 1;
     width: 100%;
     overflow: hidden;
-    background: var(--bg-table);
+    background: var(--lemon-table-background-color);
     border: 1px solid var(--border);
     border-radius: var(--radius);
 
+    .WebAnalyticsDashboard &,
+    .Insight & {
+        // Special override for scenes where the table is primarily next to insights
+        --lemon-table-background-color: var(--bg-light);
+    }
+
     .posthog-3000 & {
         --row-base-height: auto;
 
@@ -119,17 +126,20 @@
         text-transform: uppercase;
         letter-spacing: 0.03125rem;
         background: var(--mid);
-        border-bottom: 1px solid var(--border);
 
         .posthog-3000 & {
-            background: none;
+            background: var(--lemon-table-background-color);
         }
 
         > tr {
             > th {
                 font-weight: 700;
                 text-align: left;
 
+                // box shadow as a border supports sticky headers
+                // Also it needs to be on the th - any higher and safari will not render the shadow
+                box-shadow: inset 0 -1px var(--border);
+
                 .posthog-3000 & {
                     padding-top: 0.5rem;
                     padding-bottom: 0.5rem;
@@ -150,6 +160,10 @@
 
     > tbody {
         > tr {
+            &:not(:first-child) {
+                border-top: 1px solid var(--border);
+            }
+
             &.LemonTable__expansion {
                 position: relative;
                 background: var(--side);
@@ -191,10 +205,6 @@
         > tr {
             height: var(--row-base-height);
 
-            &:not(:first-child) {
-                border-top: 1px solid var(--border);
-            }
-
             > th,
             > td {
                 padding-right: var(--row-horizontal-padding);
@@ -244,7 +254,7 @@
     width: 100%;
     height: 100%;
     pointer-events: none;
-    background: var(--bg-light);
+    background: var(--lemon-table-background-color);
     opacity: 0;
     transition: opacity 200ms ease;
 
@@ -258,19 +268,25 @@
     cursor: default;
 
     .posthog-3000 & {
-        opacity: 0.4;
+        .LemonTable__header-content {
+            color: var(--text-secondary);
+        }
     }
 
     &.LemonTable__header--actionable {
         cursor: pointer;
 
         .posthog-3000 & {
             &:hover {
-                opacity: 0.7;
+                .LemonTable__header-content {
+                    color: var(--default);
+                }
             }
 
             &:active {
-                opacity: 0.9;
+                .LemonTable__header-content {
+                    color: var(--default);
+                }
             }
         }
     }
@@ -294,6 +310,19 @@
     border-top: 1px solid var(--border);
 }
 
+// NOTE: this is outside of the storybook check for 3000 selective styling
+.LemonTable__cell--sticky::before {
+    background: var(--lemon-table-background-color);
+}
+
+.LemonTable__header--sticky::before {
+    background: var(--mid);
+
+    .posthog-3000 & {
+        background: var(--lemon-table-background-color);
+    }
+}
+
 // Stickiness is disabled in snapshots due to flakiness
 body:not(.storybook-test-runner) {
     .LemonTable__header--sticky,
@@ -307,29 +336,21 @@ body:not(.storybook-test-runner) {
         &::before {
             position: absolute;
             top: 0;
+            bottom: 1px; // Leave room for box shadow border
             left: 0;
             z-index: -1; // Place below cell content
             width: 100%;
-            height: 100%;
             clip-path: inset(0 -16px 0 0);
             content: '';
             box-shadow: -16px 0 16px 16px transparent;
             transition: box-shadow 200ms ease;
         }
     }
 
-    .LemonTable__cell--sticky::before {
-        background: var(--bg-light);
-    }
-
     tr.LemonTable__row--status-highlighted .LemonTable__cell--sticky::before {
         background: #e8ecff; // TRICKY: This is a one-off opaque form of --primary-bg-hover, keep in sync with source
     }
 
-    .LemonTable__header--sticky::before {
-        background: var(--mid);
-    }
-
     .scrollable--left {
         .LemonTable__cell--sticky::before,
         .LemonTable__header--sticky::before {

diff --git a/...-snapshots/Navigation-App-Page-With-Side-Bar-Hidden-Mobile-1-chromium-linux.png b/...-snapshots/Navigation-App-Page-With-Side-Bar-Hidden-Mobile-1-chromium-linux.png