finalize table styles

PostHog · Nov 23, 2023 · c475560 · c475560
1 parent bfc4b55
commit c475560
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 37 deletions.
diff --git a/frontend/src/lib/lemon-ui/LemonTable/LemonTable.scss b/frontend/src/lib/lemon-ui/LemonTable/LemonTable.scss
@@ -51,33 +51,31 @@
     &--embedded {
         border: none;
         border-radius: 0;
-        background: none;
     }
 
-    &--borderless {
-        border: none;
-        border-radius: 0;
+    &--stealth {
+        background: none;
 
-        .LemonTable__content > table > thead {
-            border-bottom: none;
-        }
+        .LemonTable__content > table {
+            > thead {
+                border-bottom: none;
+
+                .posthog-3000 & {
+                    background: none;
+                }
+            }
 
-        tr {
-            border: none !important;
+            > thead,
+            > tbody {
+                > tr {
+                    &:not(:first-child) {
+                        border-top: none;
+                    }
+                }
+            }
         }
     }
 
-    // &--stealth {
-    //     border: none;
-    //     border-radius: 0;
-    //     background: none;
-
-    //     .LemonTable__content > table > thead {
-    //         background: none;
-    //         border: none;
-    //     }
-    // }
-
     &.LemonTable--inset {
         --row-horizontal-padding: 0.5rem;
     }
@@ -130,16 +128,9 @@
         text-transform: uppercase;
 
         .posthog-3000 & {
-            background: none;
+            background: var(--bg-table);
         }
 
-        // .posthog-3000 & {
-
-        //     > thead {
-        //         background: var(--bg-light);
-        //     }
-        // }
-
         > tr {
             > th {
                 font-weight: 700;

diff --git a/frontend/src/lib/lemon-ui/LemonTable/LemonTable.stories.tsx b/frontend/src/lib/lemon-ui/LemonTable/LemonTable.stories.tsx
@@ -182,8 +182,8 @@ XSmall.args = { size: 'xs' }
 export const Embedded: Story = BasicTemplate.bind({})
 Embedded.args = { embedded: true }
 
-export const Borderless: Story = BasicTemplate.bind({})
-Borderless.args = { borderless: true }
+export const Stealth: Story = BasicTemplate.bind({})
+Stealth.args = { stealth: true }
 
 export const Loading: Story = BasicTemplate.bind({})
 Loading.args = { loading: true }

diff --git a/frontend/src/lib/lemon-ui/LemonTable/LemonTable.tsx b/frontend/src/lib/lemon-ui/LemonTable/LemonTable.tsx
@@ -52,8 +52,8 @@ export interface LemonTableProps<T extends Record<string, any>> {
     inset?: boolean
     /** An embedded table has no border around it and no background. This way it blends better into other components. */
     embedded?: boolean
-    /** Whether table borders should be shown. **/
-    borderless?: boolean
+    /** Whether a table background and inner borders should be shown. **/
+    stealth?: boolean
     loading?: boolean
     pagination?: PaginationAuto | PaginationManual
     expandable?: ExpandableConfig<T>
@@ -100,7 +100,7 @@ export function LemonTable<T extends Record<string, any>>({
     size,
     inset = false,
     embedded = false,
-    borderless = false,
+    stealth = false,
     loading,
     pagination,
     expandable,
@@ -220,8 +220,7 @@ export function LemonTable<T extends Record<string, any>>({
                 loading && 'LemonTable--loading',
                 embedded && 'LemonTable--embedded',
                 rowRibbonColor !== undefined && `LemonTable--with-ribbon`,
-                borderless && 'LemonTable--borderless',
-                // display === 'stealth' && 'LemonTable--stealth',
+                stealth && 'LemonTable--stealth',
                 isScrollableLeft && 'scrollable--left',
                 isScrollableRight && 'scrollable--right',
                 className

diff --git a/frontend/src/scenes/billing/BillingProduct.tsx b/frontend/src/scenes/billing/BillingProduct.tsx
@@ -503,7 +503,7 @@ export const BillingProduct = ({ product }: { product: BillingProductV2Type }):
                             {product.tiered && tableTierData ? (
                                 <>
                                     <LemonTable
-                                        borderless
+                                        stealth
                                         embedded
                                         size="xs"
                                         uppercaseHeader={false}
@@ -526,7 +526,7 @@ export const BillingProduct = ({ product }: { product: BillingProductV2Type }):
                                 </>
                             ) : (
                                 <LemonTable
-                                    borderless
+                                    stealth
                                     embedded
                                     size="xs"
                                     uppercaseHeader={false}