diff --git a/frontend/src/lib/lemon-ui/LemonTable/LemonTable.scss b/frontend/src/lib/lemon-ui/LemonTable/LemonTable.scss index dc7ef2cdea255..50dc7192a453f 100644 --- 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 index 0e5eaafa45a9d..b0c604b5e2cf7 100644 --- 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 index ab0e6de6d47d4..89e4befbb9d02 100644 --- 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> { 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 @@ -100,7 +100,7 @@ export function LemonTable>({ size, inset = false, embedded = false, - borderless = false, + stealth = false, loading, pagination, expandable, @@ -220,8 +220,7 @@ export function LemonTable>({ 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 index 1370f30c21e2d..35333fa65df2b 100644 --- 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 ? ( <> ) : (