From b77b234e986b662c4b85baa168e5fb178a4dfce0 Mon Sep 17 00:00:00 2001 From: Michel Weststrate Date: Tue, 4 Jan 2022 04:00:31 -0800 Subject: [PATCH] fix table header column widths deviating from rows Summary: changelog: Improved column widths in data tables This diff fixes two issues: 1) dynamic width columns became invisible if there is too much else, and therefor it was hard to make them bigger or even notice them 2) column headers could be out of sync with the actually rendered rows, due to minor styling differences Reviewed By: cekkaewnumchai Differential Revision: D33364781 fbshipit-source-id: c3d47bb8db4af521859a5cbdf525d8ce39c71d00 --- .../flipper-plugin/src/ui/data-table/TableHead.tsx | 14 ++++++++++---- .../flipper-plugin/src/ui/data-table/TableRow.tsx | 2 +- .../src/ui/data-table/__tests__/DataTable.node.tsx | 10 +++++----- .../data-table/__tests__/DataTableRecords.node.tsx | 4 ++-- .../src/chrome/__tests__/flipper_messages.node.tsx | 14 +++++++------- 5 files changed, 25 insertions(+), 19 deletions(-) diff --git a/desktop/flipper-plugin/src/ui/data-table/TableHead.tsx b/desktop/flipper-plugin/src/ui/data-table/TableHead.tsx index 3904c69e0..27347a8b7 100644 --- a/desktop/flipper-plugin/src/ui/data-table/TableHead.tsx +++ b/desktop/flipper-plugin/src/ui/data-table/TableHead.tsx @@ -91,11 +91,14 @@ TableHeaderColumnInteractive.displayName = const TableHeadColumnContainer = styled.div<{ width: Width; }>((props) => ({ - // height: DEFAULT_ROW_HEIGHT, flexShrink: props.width === undefined ? 1 : 0, flexGrow: props.width === undefined ? 1 : 0, - width: props.width === undefined ? '100%' : props.width, - paddingLeft: 8, + overflow: 'hidden', + paddingLeft: theme.space.small, + whiteSpace: 'nowrap', + wordWrap: 'normal', + width: props.width, + minWidth: 25, [`:hover ${SortIconsContainer}`]: { visibility: 'visible', }, @@ -110,14 +113,17 @@ const TableHeadContainer = styled.div<{scrollbarSize: number}>( position: 'relative', display: 'flex', flexDirection: 'row', + borderLeft: `4px solid ${theme.backgroundWash}`, // space for selection, see TableRow borderBottom: `1px solid ${theme.dividerColor}`, backgroundColor: theme.backgroundWash, userSelect: 'none', whiteSpace: 'nowrap', - borderLeft: `4px solid ${theme.backgroundWash}`, // space for selection, see TableRow // hardcoded value to correct for the scrollbar in the main container. // ideally we should measure this instead. paddingRight: scrollbarSize, + overflow: 'hidden', + width: '100%', + flexShrink: 0, }), ); TableHeadContainer.displayName = 'TableHead:TableHeadContainer'; diff --git a/desktop/flipper-plugin/src/ui/data-table/TableRow.tsx b/desktop/flipper-plugin/src/ui/data-table/TableRow.tsx index 515abaf86..ab0de2e79 100644 --- a/desktop/flipper-plugin/src/ui/data-table/TableRow.tsx +++ b/desktop/flipper-plugin/src/ui/data-table/TableRow.tsx @@ -72,7 +72,6 @@ const TableBodyColumnContainer = styled.div<{ multiline?: boolean; justifyContent: 'left' | 'right' | 'center'; }>((props) => ({ - display: 'block', flexShrink: props.width === undefined ? 1 : 0, flexGrow: props.width === undefined ? 1 : 0, overflow: 'hidden', @@ -82,6 +81,7 @@ const TableBodyColumnContainer = styled.div<{ whiteSpace: props.multiline ? 'pre-wrap' : 'nowrap', wordWrap: props.multiline ? 'break-word' : 'normal', width: props.width, + minWidth: 25, textAlign: props.justifyContent, justifyContent: props.justifyContent, '&::selection': { diff --git a/desktop/flipper-plugin/src/ui/data-table/__tests__/DataTable.node.tsx b/desktop/flipper-plugin/src/ui/data-table/__tests__/DataTable.node.tsx index 237f921e9..eb9c5d98a 100644 --- a/desktop/flipper-plugin/src/ui/data-table/__tests__/DataTable.node.tsx +++ b/desktop/flipper-plugin/src/ui/data-table/__tests__/DataTable.node.tsx @@ -54,13 +54,13 @@ test('update and append', async () => { class="ant-dropdown-trigger css-1k3kr6b-TableBodyRowContainer e1luu51r1" >
test DataTable
true @@ -108,13 +108,13 @@ test('column visibility', async () => { class="ant-dropdown-trigger css-1k3kr6b-TableBodyRowContainer e1luu51r1" >
test DataTable
true @@ -135,7 +135,7 @@ test('column visibility', async () => { class="ant-dropdown-trigger css-1k3kr6b-TableBodyRowContainer e1luu51r1" >
test DataTable diff --git a/desktop/flipper-plugin/src/ui/data-table/__tests__/DataTableRecords.node.tsx b/desktop/flipper-plugin/src/ui/data-table/__tests__/DataTableRecords.node.tsx index d4f6033b2..0f31afd15 100644 --- a/desktop/flipper-plugin/src/ui/data-table/__tests__/DataTableRecords.node.tsx +++ b/desktop/flipper-plugin/src/ui/data-table/__tests__/DataTableRecords.node.tsx @@ -47,13 +47,13 @@ test('update and append', async () => { class="ant-dropdown-trigger css-1k3kr6b-TableBodyRowContainer e1luu51r1" >
test DataTable
true diff --git a/desktop/flipper-ui-core/src/chrome/__tests__/flipper_messages.node.tsx b/desktop/flipper-ui-core/src/chrome/__tests__/flipper_messages.node.tsx index b95fbde0f..60de95248 100644 --- a/desktop/flipper-ui-core/src/chrome/__tests__/flipper_messages.node.tsx +++ b/desktop/flipper-ui-core/src/chrome/__tests__/flipper_messages.node.tsx @@ -123,39 +123,39 @@ test('It can render rows', async () => { class="ant-dropdown-trigger css-1k3kr6b-TableBodyRowContainer e1luu51r1" >
00:00:00.000
Android Phone
FB4A
unique-string
toClient:send