add css rule to keep header visible when maxHeight is set (#3166)

* add css rule to keep header visible when maxHeight is set

* add css rule to keep header visible when maxHeight is set

* undo change in requestAnimationFrame mock

Co-authored-by: Ian Grant <[email protected]>
Co-authored-by: Robert Snow <[email protected]>
Co-authored-by: Daniel Lu <[email protected]>

Author: 4 people

packages/@adobe/spectrum-css-temp/components/table/index.css

@@ -44,6 +44,7 @@ svg.spectrum-Table-sortedIcon {
   border-left-style: solid;
   border-right-width: 1px;
   border-right-style: solid;
+  flex: 0 0 auto;
 }
 .spectrum-Table-headCellContents {
   display: inline-block;

packages/@react-spectrum/table/chromatic/TableView.chromatic.tsx

@@ -198,6 +198,17 @@ export const NestedColumns = Template().bind({});
 NestedColumns.storyName = 'nested columns';
 NestedColumns.args = {columns: nestedColumns, items};
 
+export const MaxHeight = () => (
+  <TableView maxHeight="size-1200">
+    <TableHeader columns={columns}>
+      {(column: any) => <Column key={column.key}>{column.name}</Column>}
+    </TableHeader>
+    <TableBody items={items}>
+      {(item: any) => <Row key={item.foo}>{key => <Cell>{item[key]}</Cell>}</Row>}
+    </TableBody>
+  </TableView>
+  );
+
 export const Empty = EmptyTemplate().bind({});
 Empty.storyName = 'empty table';
 Empty.args = {};