diff --git a/frontend/__snapshots__/lemon-ui-lemon-table--basic--dark.png b/frontend/__snapshots__/lemon-ui-lemon-table--basic--dark.png new file mode 100644 index 0000000000000..941fb99c9265f Binary files /dev/null and b/frontend/__snapshots__/lemon-ui-lemon-table--basic--dark.png differ diff --git a/frontend/__snapshots__/lemon-ui-lemon-table--basic--light.png b/frontend/__snapshots__/lemon-ui-lemon-table--basic--light.png new file mode 100644 index 0000000000000..fa828606a089c Binary files /dev/null and b/frontend/__snapshots__/lemon-ui-lemon-table--basic--light.png differ diff --git a/frontend/__snapshots__/lemon-ui-lemon-table--embedded--dark.png b/frontend/__snapshots__/lemon-ui-lemon-table--embedded--dark.png new file mode 100644 index 0000000000000..4fdf188763070 Binary files /dev/null and b/frontend/__snapshots__/lemon-ui-lemon-table--embedded--dark.png differ diff --git a/frontend/__snapshots__/lemon-ui-lemon-table--embedded--light.png b/frontend/__snapshots__/lemon-ui-lemon-table--embedded--light.png new file mode 100644 index 0000000000000..c34c0a85f1e8a Binary files /dev/null and b/frontend/__snapshots__/lemon-ui-lemon-table--embedded--light.png differ diff --git a/frontend/__snapshots__/lemon-ui-lemon-table--empty--dark.png b/frontend/__snapshots__/lemon-ui-lemon-table--empty--dark.png new file mode 100644 index 0000000000000..9e5822398ca5e Binary files /dev/null and b/frontend/__snapshots__/lemon-ui-lemon-table--empty--dark.png differ diff --git a/frontend/__snapshots__/lemon-ui-lemon-table--empty--light.png b/frontend/__snapshots__/lemon-ui-lemon-table--empty--light.png new file mode 100644 index 0000000000000..6d2f78bfb0b7e Binary files /dev/null and b/frontend/__snapshots__/lemon-ui-lemon-table--empty--light.png differ diff --git a/frontend/__snapshots__/lemon-ui-lemon-table--empty-loading--dark.png b/frontend/__snapshots__/lemon-ui-lemon-table--empty-loading--dark.png new file mode 100644 index 0000000000000..c1d461ee5536d Binary files /dev/null and b/frontend/__snapshots__/lemon-ui-lemon-table--empty-loading--dark.png differ diff --git a/frontend/__snapshots__/lemon-ui-lemon-table--empty-loading--light.png b/frontend/__snapshots__/lemon-ui-lemon-table--empty-loading--light.png new file mode 100644 index 0000000000000..377114b1389f8 Binary files /dev/null and b/frontend/__snapshots__/lemon-ui-lemon-table--empty-loading--light.png differ diff --git a/frontend/__snapshots__/lemon-ui-lemon-table--empty-loading-with-many-skeleton-rows--dark.png b/frontend/__snapshots__/lemon-ui-lemon-table--empty-loading-with-many-skeleton-rows--dark.png new file mode 100644 index 0000000000000..45043ad21e132 Binary files /dev/null and b/frontend/__snapshots__/lemon-ui-lemon-table--empty-loading-with-many-skeleton-rows--dark.png differ diff --git a/frontend/__snapshots__/lemon-ui-lemon-table--empty-loading-with-many-skeleton-rows--light.png b/frontend/__snapshots__/lemon-ui-lemon-table--empty-loading-with-many-skeleton-rows--light.png new file mode 100644 index 0000000000000..e08e5d13fab93 Binary files /dev/null and b/frontend/__snapshots__/lemon-ui-lemon-table--empty-loading-with-many-skeleton-rows--light.png differ diff --git a/frontend/__snapshots__/lemon-ui-lemon-table--grouped--dark.png b/frontend/__snapshots__/lemon-ui-lemon-table--grouped--dark.png new file mode 100644 index 0000000000000..6d32b0cce726b Binary files /dev/null and b/frontend/__snapshots__/lemon-ui-lemon-table--grouped--dark.png differ diff --git a/frontend/__snapshots__/lemon-ui-lemon-table--grouped--light.png b/frontend/__snapshots__/lemon-ui-lemon-table--grouped--light.png new file mode 100644 index 0000000000000..efa232717008a Binary files /dev/null and b/frontend/__snapshots__/lemon-ui-lemon-table--grouped--light.png differ diff --git a/frontend/__snapshots__/lemon-ui-lemon-table--loading--dark.png b/frontend/__snapshots__/lemon-ui-lemon-table--loading--dark.png new file mode 100644 index 0000000000000..361f36b8949b6 Binary files /dev/null and b/frontend/__snapshots__/lemon-ui-lemon-table--loading--dark.png differ diff --git a/frontend/__snapshots__/lemon-ui-lemon-table--loading--light.png b/frontend/__snapshots__/lemon-ui-lemon-table--loading--light.png new file mode 100644 index 0000000000000..57c44d9e380d7 Binary files /dev/null and b/frontend/__snapshots__/lemon-ui-lemon-table--loading--light.png differ diff --git a/frontend/__snapshots__/lemon-ui-lemon-table--paginated-automatically--dark.png b/frontend/__snapshots__/lemon-ui-lemon-table--paginated-automatically--dark.png new file mode 100644 index 0000000000000..ff86565f1872a Binary files /dev/null and b/frontend/__snapshots__/lemon-ui-lemon-table--paginated-automatically--dark.png differ diff --git a/frontend/__snapshots__/lemon-ui-lemon-table--paginated-automatically--light.png b/frontend/__snapshots__/lemon-ui-lemon-table--paginated-automatically--light.png new file mode 100644 index 0000000000000..4a344e2548a70 Binary files /dev/null and b/frontend/__snapshots__/lemon-ui-lemon-table--paginated-automatically--light.png differ diff --git a/frontend/__snapshots__/lemon-ui-lemon-table--small--dark.png b/frontend/__snapshots__/lemon-ui-lemon-table--small--dark.png new file mode 100644 index 0000000000000..941fb99c9265f Binary files /dev/null and b/frontend/__snapshots__/lemon-ui-lemon-table--small--dark.png differ diff --git a/frontend/__snapshots__/lemon-ui-lemon-table--small--light.png b/frontend/__snapshots__/lemon-ui-lemon-table--small--light.png new file mode 100644 index 0000000000000..fa828606a089c Binary files /dev/null and b/frontend/__snapshots__/lemon-ui-lemon-table--small--light.png differ diff --git a/frontend/__snapshots__/lemon-ui-lemon-table--stealth--dark.png b/frontend/__snapshots__/lemon-ui-lemon-table--stealth--dark.png new file mode 100644 index 0000000000000..acd2771c4eef6 Binary files /dev/null and b/frontend/__snapshots__/lemon-ui-lemon-table--stealth--dark.png differ diff --git a/frontend/__snapshots__/lemon-ui-lemon-table--stealth--light.png b/frontend/__snapshots__/lemon-ui-lemon-table--stealth--light.png new file mode 100644 index 0000000000000..f524c84a35771 Binary files /dev/null and b/frontend/__snapshots__/lemon-ui-lemon-table--stealth--light.png differ diff --git a/frontend/__snapshots__/lemon-ui-lemon-table--stealth.png b/frontend/__snapshots__/lemon-ui-lemon-table--stealth.png new file mode 100644 index 0000000000000..2ce93f13833b4 Binary files /dev/null and b/frontend/__snapshots__/lemon-ui-lemon-table--stealth.png differ diff --git a/frontend/__snapshots__/lemon-ui-lemon-table--with-color-coded-rows--dark.png b/frontend/__snapshots__/lemon-ui-lemon-table--with-color-coded-rows--dark.png new file mode 100644 index 0000000000000..efd0632c7289f Binary files /dev/null and b/frontend/__snapshots__/lemon-ui-lemon-table--with-color-coded-rows--dark.png differ diff --git a/frontend/__snapshots__/lemon-ui-lemon-table--with-color-coded-rows--light.png b/frontend/__snapshots__/lemon-ui-lemon-table--with-color-coded-rows--light.png new file mode 100644 index 0000000000000..8511f4215bd23 Binary files /dev/null and b/frontend/__snapshots__/lemon-ui-lemon-table--with-color-coded-rows--light.png differ diff --git a/frontend/__snapshots__/lemon-ui-lemon-table--with-expandable-rows--dark.png b/frontend/__snapshots__/lemon-ui-lemon-table--with-expandable-rows--dark.png new file mode 100644 index 0000000000000..a70a52d54ab77 Binary files /dev/null and b/frontend/__snapshots__/lemon-ui-lemon-table--with-expandable-rows--dark.png differ diff --git a/frontend/__snapshots__/lemon-ui-lemon-table--with-expandable-rows--light.png b/frontend/__snapshots__/lemon-ui-lemon-table--with-expandable-rows--light.png new file mode 100644 index 0000000000000..50f78cfd96312 Binary files /dev/null and b/frontend/__snapshots__/lemon-ui-lemon-table--with-expandable-rows--light.png differ diff --git a/frontend/__snapshots__/lemon-ui-lemon-table--with-footer--dark.png b/frontend/__snapshots__/lemon-ui-lemon-table--with-footer--dark.png new file mode 100644 index 0000000000000..18fd0ba45bd23 Binary files /dev/null and b/frontend/__snapshots__/lemon-ui-lemon-table--with-footer--dark.png differ diff --git a/frontend/__snapshots__/lemon-ui-lemon-table--with-footer--light.png b/frontend/__snapshots__/lemon-ui-lemon-table--with-footer--light.png new file mode 100644 index 0000000000000..95518842be939 Binary files /dev/null and b/frontend/__snapshots__/lemon-ui-lemon-table--with-footer--light.png differ diff --git a/frontend/__snapshots__/lemon-ui-lemon-table--with-highlighted-rows--dark.png b/frontend/__snapshots__/lemon-ui-lemon-table--with-highlighted-rows--dark.png new file mode 100644 index 0000000000000..c13df5ddaa33c Binary files /dev/null and b/frontend/__snapshots__/lemon-ui-lemon-table--with-highlighted-rows--dark.png differ diff --git a/frontend/__snapshots__/lemon-ui-lemon-table--with-highlighted-rows--light.png b/frontend/__snapshots__/lemon-ui-lemon-table--with-highlighted-rows--light.png new file mode 100644 index 0000000000000..efb36743215a7 Binary files /dev/null and b/frontend/__snapshots__/lemon-ui-lemon-table--with-highlighted-rows--light.png differ diff --git a/frontend/__snapshots__/lemon-ui-lemon-table--with-mandatory-sorting--dark.png b/frontend/__snapshots__/lemon-ui-lemon-table--with-mandatory-sorting--dark.png new file mode 100644 index 0000000000000..530811e79b3bc Binary files /dev/null and b/frontend/__snapshots__/lemon-ui-lemon-table--with-mandatory-sorting--dark.png differ diff --git a/frontend/__snapshots__/lemon-ui-lemon-table--with-mandatory-sorting--light.png b/frontend/__snapshots__/lemon-ui-lemon-table--with-mandatory-sorting--light.png new file mode 100644 index 0000000000000..03642fc2996a2 Binary files /dev/null and b/frontend/__snapshots__/lemon-ui-lemon-table--with-mandatory-sorting--light.png differ diff --git a/frontend/__snapshots__/lemon-ui-lemon-table--with-sticky-first-column--dark.png b/frontend/__snapshots__/lemon-ui-lemon-table--with-sticky-first-column--dark.png new file mode 100644 index 0000000000000..b29c5cd16cfaf Binary files /dev/null and b/frontend/__snapshots__/lemon-ui-lemon-table--with-sticky-first-column--dark.png differ diff --git a/frontend/__snapshots__/lemon-ui-lemon-table--with-sticky-first-column--light.png b/frontend/__snapshots__/lemon-ui-lemon-table--with-sticky-first-column--light.png new file mode 100644 index 0000000000000..423d703850caf Binary files /dev/null and b/frontend/__snapshots__/lemon-ui-lemon-table--with-sticky-first-column--light.png differ diff --git a/frontend/__snapshots__/lemon-ui-lemon-table--without-header--dark.png b/frontend/__snapshots__/lemon-ui-lemon-table--without-header--dark.png new file mode 100644 index 0000000000000..5afb2433aeac8 Binary files /dev/null and b/frontend/__snapshots__/lemon-ui-lemon-table--without-header--dark.png differ diff --git a/frontend/__snapshots__/lemon-ui-lemon-table--without-header--light.png b/frontend/__snapshots__/lemon-ui-lemon-table--without-header--light.png new file mode 100644 index 0000000000000..84fa79474db16 Binary files /dev/null and b/frontend/__snapshots__/lemon-ui-lemon-table--without-header--light.png differ diff --git a/frontend/__snapshots__/lemon-ui-lemon-table--without-uppercasing-in-header--dark.png b/frontend/__snapshots__/lemon-ui-lemon-table--without-uppercasing-in-header--dark.png new file mode 100644 index 0000000000000..03fe31262533a Binary files /dev/null and b/frontend/__snapshots__/lemon-ui-lemon-table--without-uppercasing-in-header--dark.png differ diff --git a/frontend/__snapshots__/lemon-ui-lemon-table--without-uppercasing-in-header--light.png b/frontend/__snapshots__/lemon-ui-lemon-table--without-uppercasing-in-header--light.png new file mode 100644 index 0000000000000..0ec74ad3b8ed9 Binary files /dev/null and b/frontend/__snapshots__/lemon-ui-lemon-table--without-uppercasing-in-header--light.png differ diff --git a/frontend/__snapshots__/lemon-ui-lemon-table--x-small--dark.png b/frontend/__snapshots__/lemon-ui-lemon-table--x-small--dark.png new file mode 100644 index 0000000000000..941fb99c9265f Binary files /dev/null and b/frontend/__snapshots__/lemon-ui-lemon-table--x-small--dark.png differ diff --git a/frontend/__snapshots__/lemon-ui-lemon-table--x-small--light.png b/frontend/__snapshots__/lemon-ui-lemon-table--x-small--light.png new file mode 100644 index 0000000000000..fa828606a089c Binary files /dev/null and b/frontend/__snapshots__/lemon-ui-lemon-table--x-small--light.png differ diff --git a/frontend/src/lib/lemon-ui/LemonTable/LemonTable.scss b/frontend/src/lib/lemon-ui/LemonTable/LemonTable.scss index 7afa277007db3..c575bd3f2c07a 100644 --- a/frontend/src/lib/lemon-ui/LemonTable/LemonTable.scss +++ b/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; + } + } + } } } diff --git a/frontend/src/lib/lemon-ui/LemonTable/LemonTable.stories.tsx b/frontend/src/lib/lemon-ui/LemonTable/LemonTable.stories.tsx index 751114946a32f..709cf11885b42 100644 --- a/frontend/src/lib/lemon-ui/LemonTable/LemonTable.stories.tsx +++ b/frontend/src/lib/lemon-ui/LemonTable/LemonTable.stories.tsx @@ -9,6 +9,11 @@ const meta: Meta = { 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 } diff --git a/frontend/src/lib/lemon-ui/LemonTable/LemonTable.tsx b/frontend/src/lib/lemon-ui/LemonTable/LemonTable.tsx index d39b9ba9e3896..398f3d8dd735b 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 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 @@ -82,7 +82,6 @@ export interface LemonTableProps> { 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>({ size, inset = false, embedded = false, - borderedRows = true, + stealth = false, loading, pagination, expandable, @@ -118,7 +117,6 @@ export function LemonTable>({ className, style, 'data-attr': dataAttr, - display = 'default', footer, firstColumnSticky, }: LemonTableProps): JSX.Element { @@ -222,8 +220,7 @@ export function LemonTable>({ 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 diff --git a/frontend/src/scenes/billing/BillingProduct.tsx b/frontend/src/scenes/billing/BillingProduct.tsx index 2fdda7beadd4a..35333fa65df2b 100644 --- a/frontend/src/scenes/billing/BillingProduct.tsx +++ b/frontend/src/scenes/billing/BillingProduct.tsx @@ -503,10 +503,10 @@ export const BillingProduct = ({ product }: { product: BillingProductV2Type }): {product.tiered && tableTierData ? ( <> @@ -526,9 +526,9 @@ export const BillingProduct = ({ product }: { product: BillingProductV2Type }): ) : (