fix: table layout

CHANGELOG.md

@@ -1,5 +1,10 @@
 # CHANGELOG
 
+## v0.42.1
+
+- fix the sticky head cell of the tables painting `background.default` instead of white; `muiThemeOptions` now overrides `MuiTableCell.stickyHeader` with `neutral[50]`
+- fix the `stickyFooter` pagination drawing a bottom border under the stuck cell
+
 ## v0.42.0
 
 - add `stickyFooter` prop to `<DataTable>` and `<TableInteractive>`, pinning the pagination to the bottom of the scroll container while the rows scroll under it; like `stickyHeader`, it needs `maxHeight` to scroll within and flips the table to `border-collapse: separate`, so the stuck footer paints its own white background and `gray[200]` shadow

package.json

@@ -1,6 +1,6 @@
 {
     "name": "flipper-ui",
-    "version": "0.42.0",
+    "version": "0.42.1",
     "author": "NG",
     "license": "MIT",
     "main": "dist/index.js",

src/core/data-display/table-interactive/table-interactive.spec.tsx

@@ -593,8 +593,8 @@ describe('STICKY_FOOTER', () => {
         expect(footer.backgroundColor).toBe('#FFFFFF')
     })
 
-    it('should draw the divider with a shadow, not a border', () => {
-        expect(footer).not.toHaveProperty('borderBottom')
+    it('should draw the divider with a shadow and drop the cell bottom border', () => {
+        expect(footer.borderBottom).toBe('none')
         expect(footer.boxShadow).toContain(`0 -1px 0 ${theme.colors.gray[200]}`)
     })
 })

src/core/data-display/table/styles.ts

@@ -46,6 +46,7 @@ export const STICKY_FOOTER = {
         zIndex: 2,
         bottom: 0,
         position: 'sticky',
+        borderBottom: 'none',
         backgroundColor: neutral[50],
         boxShadow: `0 -1px 0 ${gray[200]}, 0 -4px 12px ${alpha(gray[800], 0.04)}`
     }

src/theme/theme.spec.tsx

@@ -0,0 +1,29 @@
+import React from 'react'
+import MuiTable from '@mui/material/Table'
+import MuiTableCell from '@mui/material/TableCell'
+import MuiTableHead from '@mui/material/TableHead'
+import MuiTableRow from '@mui/material/TableRow'
+import { render } from '@testing-library/react'
+import { muiThemeOptions } from './theme'
+import ThemeProviderFlipper from './ThemeProvider'
+
+describe('muiThemeOptions', () => {
+    it('should paint the sticky head cell white instead of background.default', () => {
+        const { container } = render(
+            <ThemeProviderFlipper options={muiThemeOptions}>
+                <MuiTable stickyHeader>
+                    <MuiTableHead>
+                        <MuiTableRow>
+                            <MuiTableCell>Head</MuiTableCell>
+                        </MuiTableRow>
+                    </MuiTableHead>
+                </MuiTable>
+            </ThemeProviderFlipper>
+        )
+        const cell = container.querySelector('th') as HTMLElement
+
+        expect(getComputedStyle(cell).backgroundColor).toBe(
+            'rgb(255, 255, 255)'
+        )
+    })
+})

src/theme/theme.ts

@@ -27,6 +27,16 @@ export const muiThemeOptions = {
             defaultProps: {
                 variantMapping
             }
+        },
+        // a sticky head cell needs an opaque background or the rows scroll
+        // through it, and MUI paints it with background.default — the page
+        // colour set above, not the surface the table sits on
+        MuiTableCell: {
+            styleOverrides: {
+                stickyHeader: {
+                    backgroundColor: colors.neutral[50]
+                }
+            }
         }
     }
 }