From 23cd15687125619e9ac0f7de099d20cf81192bea Mon Sep 17 00:00:00 2001 From: Viktor Renkema Date: Wed, 11 Dec 2024 15:27:57 +0100 Subject: [PATCH 1/4] Refactor Table to use flex layouts --- .../gitbook/src/components/DocumentView/Table/RecordRow.tsx | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/gitbook/src/components/DocumentView/Table/RecordRow.tsx b/packages/gitbook/src/components/DocumentView/Table/RecordRow.tsx index 3658de32b0..f8a26d4b01 100644 --- a/packages/gitbook/src/components/DocumentView/Table/RecordRow.tsx +++ b/packages/gitbook/src/components/DocumentView/Table/RecordRow.tsx @@ -4,6 +4,11 @@ import React from 'react'; import { RecordColumnValue } from './RecordColumnValue'; import { TableRecordKV, TableViewProps } from './Table'; import styles from './table.module.css'; + +import { tcls } from '@/lib/tailwind'; + +import { RecordColumnValue } from './RecordColumnValue'; +import { TableRecordKV, TableViewProps } from './Table'; import { getColumnWidth } from './ViewGrid'; export function RecordRow( From a178d7600a775a80e2390f35554363946a4b131d Mon Sep 17 00:00:00 2001 From: Viktor Renkema Date: Wed, 11 Dec 2024 17:21:45 +0100 Subject: [PATCH 2/4] Use more classes in module.css --- .../gitbook/src/components/DocumentView/Table/RecordRow.tsx | 5 ----- 1 file changed, 5 deletions(-) diff --git a/packages/gitbook/src/components/DocumentView/Table/RecordRow.tsx b/packages/gitbook/src/components/DocumentView/Table/RecordRow.tsx index f8a26d4b01..3658de32b0 100644 --- a/packages/gitbook/src/components/DocumentView/Table/RecordRow.tsx +++ b/packages/gitbook/src/components/DocumentView/Table/RecordRow.tsx @@ -4,11 +4,6 @@ import React from 'react'; import { RecordColumnValue } from './RecordColumnValue'; import { TableRecordKV, TableViewProps } from './Table'; import styles from './table.module.css'; - -import { tcls } from '@/lib/tailwind'; - -import { RecordColumnValue } from './RecordColumnValue'; -import { TableRecordKV, TableViewProps } from './Table'; import { getColumnWidth } from './ViewGrid'; export function RecordRow( From ad30f20c446c6bfe503636c51153fe05ef0380c0 Mon Sep 17 00:00:00 2001 From: Viktor Renkema Date: Wed, 11 Dec 2024 21:42:37 +0100 Subject: [PATCH 3/4] Iterate on styles of Tables --- .../DocumentView/Table/ViewGrid.tsx | 11 +++++-- .../DocumentView/Table/table.module.css | 30 ++++++++++++++----- 2 files changed, 32 insertions(+), 9 deletions(-) diff --git a/packages/gitbook/src/components/DocumentView/Table/ViewGrid.tsx b/packages/gitbook/src/components/DocumentView/Table/ViewGrid.tsx index c301a5c6de..144848e724 100644 --- a/packages/gitbook/src/components/DocumentView/Table/ViewGrid.tsx +++ b/packages/gitbook/src/components/DocumentView/Table/ViewGrid.tsx @@ -34,8 +34,15 @@ export function ViewGrid(props: TableViewProps) {
{/* Header */} {withHeader && ( -
-
*+*]:border-l')}> +
+
{view.columns.map((column) => { const alignment = getColumnAlignment(block.data.definition[column]); return ( diff --git a/packages/gitbook/src/components/DocumentView/Table/table.module.css b/packages/gitbook/src/components/DocumentView/Table/table.module.css index 302b975f97..7963ebd5f0 100644 --- a/packages/gitbook/src/components/DocumentView/Table/table.module.css +++ b/packages/gitbook/src/components/DocumentView/Table/table.module.css @@ -23,21 +23,37 @@ } :global(.dark) .tableWrapper { - @apply border-light/2; + @apply border-tint-50; +} + +.columnHeader { + @apply text-sm font-medium py-3 px-4 text-tint-900; +} + +:global(.dark) .columnHeader { + @apply text-white; } .row { - @apply flex border-dark/3 dark:border-light/2; + @apply flex border-tint-700/2; } -.row > * + * { - @apply border-l; +:global(.dark) .row { + @apply border-tint-300/3; +} + +.rowGroup { + @apply flex flex-col border rounded-lg bg-tint-800/1 border-tint-700/2; +} + +:global(.dark) .rowGroup { + @apply bg-tint-300/2 border-tint-300/3; } .cell { - @apply flex-1 align-middle border-dark/2 py-2 px-3 text-sm lg:text-base dark:border-light/2; + @apply flex-1 align-middle border-dark/2 py-2 px-4 text-sm; } -.columnHeader { - @apply align-middle text-left text-base font-medium border-b dark:border-l-light/2 dark:border-b-light/4 py-2 px-3; +:global(.dark) .cell { + @apply border-light/2; } From eeeeecc9424d8d2031792c49057325898b94bd02 Mon Sep 17 00:00:00 2001 From: Viktor Renkema Date: Thu, 12 Dec 2024 14:12:35 +0100 Subject: [PATCH 4/4] Add more table tests --- packages/gitbook/e2e/pages.spec.ts | 84 ++++++++++++++++++++++++++++++ 1 file changed, 84 insertions(+) diff --git a/packages/gitbook/e2e/pages.spec.ts b/packages/gitbook/e2e/pages.spec.ts index 4ff7d786a8..b3d3df5fd5 100644 --- a/packages/gitbook/e2e/pages.spec.ts +++ b/packages/gitbook/e2e/pages.spec.ts @@ -1018,6 +1018,90 @@ const testCases: TestsCase[] = [ }, ], }, + { + name: 'Tables', + baseUrl: 'https://gitbook.gitbook.io/test-gitbook-open/', + tests: [ + { + name: 'Default table', + url: 'blocks/tables', + run: waitForCookiesDialog, + fullPage: true, + }, + { + name: 'Table with straight corners', + url: + 'blocks/tables' + + getCustomizationURL({ + styling: { + corners: CustomizationCorners.Straight, + }, + }), + run: waitForCookiesDialog, + fullPage: true, + }, + { + name: 'Table with primary color', + url: + 'blocks/tables' + + getCustomizationURL({ + styling: { + tint: { color: { light: '#346DDB', dark: '#346DDB' } }, + }, + }), + run: waitForCookiesDialog, + fullPage: true, + }, + // Test dark mode for each variant + ...allThemeModes.flatMap((theme) => [ + { + name: `Table in ${theme} mode`, + url: + 'blocks/tables' + + getCustomizationURL({ + themes: { + default: theme, + toggeable: false, + }, + }), + run: waitForCookiesDialog, + fullPage: true, + }, + { + name: `Table with straight corners in ${theme} mode`, + url: + 'blocks/tables' + + getCustomizationURL({ + styling: { + corners: CustomizationCorners.Straight, + }, + themes: { + default: theme, + toggeable: false, + }, + }), + run: waitForCookiesDialog, + fullPage: true, + }, + { + name: `Table with primary color in ${theme} mode`, + url: + 'blocks/tables' + + getCustomizationURL({ + styling: { + tint: { color: { light: '#346DDB', dark: '#346DDB' } }, + }, + themes: { + default: theme, + toggeable: false, + }, + }), + run: waitForCookiesDialog, + fullPage: true, + }, + ]), + ], + }, ]; for (const testCase of testCases) {