jens/flipper
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix table header column widths deviating from rows

Browse Source 
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
This commit is contained in:
Michel Weststrate
2022-01-04 04:00:31 -08:00
committed by Facebook GitHub Bot
parent b6c884f011
commit b77b234e98
5 changed files with 25 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
desktop/flipper-plugin/src/ui/data-table/TableHead.tsx
View File

@@ -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';

2
desktop/flipper-plugin/src/ui/data-table/TableRow.tsx
View File

@@ -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': {

10
desktop/flipper-plugin/src/ui/data-table/__tests__/DataTable.node.tsx
View File

@@ -54,13 +54,13 @@ test('update and append', async () => {
class="ant-dropdown-trigger css-1k3kr6b-TableBodyRowContainer e1luu51r1"
>
<div
class="css-9bipfg-TableBodyColumnContainer e1luu51r0"
class="css-1baxqcf-TableBodyColumnContainer e1luu51r0"
width="50%"
>
test DataTable
</div>
<div
class="css-9bipfg-TableBodyColumnContainer e1luu51r0"
class="css-1baxqcf-TableBodyColumnContainer e1luu51r0"
width="50%"
>
true
@@ -108,13 +108,13 @@ test('column visibility', async () => {
class="ant-dropdown-trigger css-1k3kr6b-TableBodyRowContainer e1luu51r1"
>
<div
class="css-9bipfg-TableBodyColumnContainer e1luu51r0"
class="css-1baxqcf-TableBodyColumnContainer e1luu51r0"
width="50%"
>
test DataTable
</div>
<div
class="css-9bipfg-TableBodyColumnContainer e1luu51r0"
class="css-1baxqcf-TableBodyColumnContainer e1luu51r0"
width="50%"
>
true
@@ -135,7 +135,7 @@ test('column visibility', async () => {
class="ant-dropdown-trigger css-1k3kr6b-TableBodyRowContainer e1luu51r1"
>
<div
class="css-9bipfg-TableBodyColumnContainer e1luu51r0"
class="css-1baxqcf-TableBodyColumnContainer e1luu51r0"
width="50%"
>
test DataTable

4
desktop/flipper-plugin/src/ui/data-table/__tests__/DataTableRecords.node.tsx
View File

@@ -47,13 +47,13 @@ test('update and append', async () => {
class="ant-dropdown-trigger css-1k3kr6b-TableBodyRowContainer e1luu51r1"
>
<div
class="css-9bipfg-TableBodyColumnContainer e1luu51r0"
class="css-1baxqcf-TableBodyColumnContainer e1luu51r0"
width="50%"
>
test DataTable
</div>
<div
class="css-9bipfg-TableBodyColumnContainer e1luu51r0"
class="css-1baxqcf-TableBodyColumnContainer e1luu51r0"
width="50%"
>
true

14
desktop/flipper-ui-core/src/chrome/__tests__/flipper_messages.node.tsx
View File

@@ -123,39 +123,39 @@ test('It can render rows', async () => {
class="ant-dropdown-trigger css-1k3kr6b-TableBodyRowContainer e1luu51r1"
>
<div
class="css-1vr131n-TableBodyColumnContainer e1luu51r0"
class="css-12luweq-TableBodyColumnContainer e1luu51r0"
width="14%"
>
00:00:00.000
</div>
<div
class="css-1vr131n-TableBodyColumnContainer e1luu51r0"
class="css-12luweq-TableBodyColumnContainer e1luu51r0"
width="14%"
>
Android Phone
</div>
<div
class="css-1vr131n-TableBodyColumnContainer e1luu51r0"
class="css-12luweq-TableBodyColumnContainer e1luu51r0"
width="14%"
>
FB4A
</div>
<div
class="css-1vr131n-TableBodyColumnContainer e1luu51r0"
class="css-12luweq-TableBodyColumnContainer e1luu51r0"
width="14%"
>
unique-string
</div>
<div
class="css-1vr131n-TableBodyColumnContainer e1luu51r0"
class="css-12luweq-TableBodyColumnContainer e1luu51r0"
width="14%"
/>
<div
class="css-1vr131n-TableBodyColumnContainer e1luu51r0"
class="css-12luweq-TableBodyColumnContainer e1luu51r0"
width="14%"
/>
<div
class="css-1vr131n-TableBodyColumnContainer e1luu51r0"
class="css-12luweq-TableBodyColumnContainer e1luu51r0"
width="14%"
>
toClient:send