chore: cleanup LemonTable API

frontend/src/lib/lemon-ui/LemonTable/LemonTable.scss

@@ -60,20 +60,26 @@
         border-radius: 0;
     }
 
-    &--borderless-rows {
-        tr {
-            border: none !important;
-        }
-    }
-
     &--stealth {
         background: none;
-        border: none;
-        border-radius: 0;
 
-        .LemonTable__content > table > thead {
-            background: none;
-            border: none;
+        .LemonTable__content > table {
+            > thead {
+                border-bottom: none;
+
+                .posthog-3000 & {
+                    background: none;
+                }
+            }
+
+            > thead,
+            > tbody {
+                > tr {
+                    &:not(:first-child) {
+                        border-top: none;
+                    }
+                }
+            }
         }
     }
 

frontend/src/lib/lemon-ui/LemonTable/LemonTable.stories.tsx

@@ -9,6 +9,11 @@ const meta: Meta<typeof LemonTable> = {
     title: 'Lemon UI/Lemon Table',
     component: LemonTable,
     tags: ['autodocs'],
+    parameters: {
+        testOptions: {
+            include3000: true,
+        },
+    },
 }
 export default meta
 
@@ -182,8 +187,8 @@ XSmall.args = { size: 'xs' }
 export const Embedded: Story = BasicTemplate.bind({})
 Embedded.args = { embedded: true }
 
-export const BorderlessRows: Story = BasicTemplate.bind({})
-BorderlessRows.args = { borderedRows: false }
+export const Stealth: Story = BasicTemplate.bind({})
+Stealth.args = { stealth: true }
 
 export const Loading: Story = BasicTemplate.bind({})
 Loading.args = { loading: true }

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 inner table borders should be shown. **/
-    borderedRows?: boolean
+    /** Whether to hide the table background and inner borders. **/
+    stealth?: boolean
     loading?: boolean
     pagination?: PaginationAuto | PaginationManual
     expandable?: ExpandableConfig<T>
@@ -82,7 +82,6 @@ export interface LemonTableProps<T extends Record<string, any>> {
     className?: string
     style?: React.CSSProperties
     'data-attr'?: string
-    display?: 'stealth' | 'default'
     /** Footer to be shown below the table. */
     footer?: React.ReactNode
     /** Whether the first column should always remain visible when scrolling horizontally. */
@@ -101,7 +100,7 @@ export function LemonTable<T extends Record<string, any>>({
     size,
     inset = false,
     embedded = false,
-    borderedRows = true,
+    stealth = false,
     loading,
     pagination,
     expandable,
@@ -118,7 +117,6 @@ export function LemonTable<T extends Record<string, any>>({
     className,
     style,
     'data-attr': dataAttr,
-    display = 'default',
     footer,
     firstColumnSticky,
 }: LemonTableProps<T>): JSX.Element {
@@ -222,8 +220,7 @@ export function LemonTable<T extends Record<string, any>>({
                 loading && 'LemonTable--loading',
                 embedded && 'LemonTable--embedded',
                 rowRibbonColor !== undefined && `LemonTable--with-ribbon`,
-                !borderedRows && 'LemonTable--borderless-rows',
-                display === 'stealth' && 'LemonTable--stealth',
+                stealth && 'LemonTable--stealth',
                 isScrollableLeft && 'scrollable--left',
                 isScrollableRight && 'scrollable--right',
                 className

frontend/src/scenes/billing/BillingProduct.tsx

@@ -503,10 +503,10 @@ export const BillingProduct = ({ product }: { product: BillingProductV2Type }):
                             {product.tiered && tableTierData ? (
                                 <>
                                     <LemonTable
-                                        borderedRows={false}
+                                        stealth
+                                        embedded
                                         size="xs"
                                         uppercaseHeader={false}
-                                        display="stealth"
                                         columns={tableColumns}
                                         dataSource={tableTierData}
                                     />
@@ -526,9 +526,9 @@ export const BillingProduct = ({ product }: { product: BillingProductV2Type }):
                                 </>
                             ) : (
                                 <LemonTable
-                                    borderedRows={false}
+                                    stealth
+                                    embedded
                                     size="xs"
-                                    display="stealth"
                                     uppercaseHeader={false}
                                     columns={[
                                         { title: '', dataIndex: 'name' },