feat(tables): add isSticky prop to Head component (#1482)

Francois-Esquire · jzempel · web-flow · commit 7616241506a8 · 2022-12-15T14:17:48.000-05:00
Co-authored-by: Jonathan Zempel &lt;jzempel@gmail.com&gt;
diff --git a/packages/tables/.size-snapshot.json b/packages/tables/.size-snapshot.json
@@ -1,21 +1,21 @@
 {
   "index.esm.js": {
-    "bundled": 24206,
-    "minified": 17389,
-    "gzipped": 4200,
+    "bundled": 24607,
+    "minified": 17705,
+    "gzipped": 4285,
     "treeshaked": {
       "rollup": {
-        "code": 13412,
+        "code": 13681,
         "import_statements": 384
       },
       "webpack": {
-        "code": 14947
+        "code": 15238
       }
     }
   },
   "index.cjs.js": {
-    "bundled": 27224,
-    "minified": 19966,
-    "gzipped": 4518
+    "bundled": 27645,
+    "minified": 20302,
+    "gzipped": 4604
   }
 }
diff --git a/packages/tables/demo/stories/TableStory.tsx b/packages/tables/demo/stories/TableStory.tsx
@@ -21,6 +21,7 @@ import {
   Row,
   SortableCell,
   ITableProps,
+  IHeadProps,
   ISortableCellProps,
   IRowProps
 } from '@zendeskgarden/react-tables';
@@ -36,6 +37,7 @@ interface IArgs extends ITableProps {
   isSortable: boolean;
   isSelected?: IRowProps['isSelected'];
   isStriped?: IRowProps['isStriped'];
+  isSticky?: IHeadProps['isSticky'];
   isTruncated?: boolean;
 }
 
@@ -49,6 +51,7 @@ export const TableStory: Story<IArgs> = ({
   isSortable,
   isSelected,
   isStriped,
+  isSticky,
   isTruncated,
   ...args
 }) => {
@@ -71,7 +74,7 @@ export const TableStory: Story<IArgs> = ({
   return (
     <Table {...args}>
       <Caption>{caption}</Caption>
-      <Head>
+      <Head isSticky={isSticky}>
         <HeaderRow>
           {hasSelection && (
             <HeaderCell isMinimum>
diff --git a/packages/tables/demo/table.stories.mdx b/packages/tables/demo/table.stories.mdx
@@ -48,6 +48,7 @@ import { TABLE_DATA as DATA } from './stories/data';
       isTruncated: { control: 'boolean', table: { category: 'Cell' } },
       caption: { name: 'children', table: { category: 'Caption' } },
       isBold: { control: 'boolean', table: { category: 'GroupRow' } },
+      isSticky: { control: 'boolean', table: { category: 'Head' } },
       isStriped: { control: 'boolean', table: { category: 'Row' } },
       isSelected: { control: 'boolean', table: { category: 'Row' } },
       data: { name: 'Row[]', table: { category: 'Story' } },
diff --git a/packages/tables/src/elements/Head.tsx b/packages/tables/src/elements/Head.tsx
@@ -5,14 +5,15 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 
-import React, { HTMLAttributes, forwardRef } from 'react';
+import React, { forwardRef } from 'react';
 import { StyledHead } from '../styled';
+import { IHeadProps } from '../types';
 
 /**
  * @extends HTMLAttributes<HTMLTableSectionElement>
  */
-export const Head = forwardRef<HTMLTableSectionElement, HTMLAttributes<HTMLTableSectionElement>>(
-  (props, ref) => <StyledHead ref={ref} {...props} />
-);
+export const Head = forwardRef<HTMLTableSectionElement, IHeadProps>((props, ref) => (
+  <StyledHead ref={ref} {...props} />
+));
 
 Head.displayName = 'Head';
diff --git a/packages/tables/src/index.ts b/packages/tables/src/index.ts
@@ -21,6 +21,7 @@ export type {
   ITableProps,
   IRowProps,
   ICellProps,
+  IHeadProps,
   IHeaderCellProps,
   ISortableCellProps
 } from './types';
diff --git a/packages/tables/src/styled/StyledHead.spec.tsx b/packages/tables/src/styled/StyledHead.spec.tsx
@@ -0,0 +1,39 @@
+/**
+ * Copyright Zendesk, Inc.
+ *
+ * Use of this source code is governed under the Apache License, Version 2.0
+ * found at http://www.apache.org/licenses/LICENSE-2.0.
+ */
+
+import React from 'react';
+import { render } from 'garden-test-utils';
+
+import { StyledHead } from './StyledHead';
+import { StyledHeaderRow } from './StyledHeaderRow';
+
+describe('StyledHead', () => {
+  it('renders the expected element', () => {
+    const { container } = render(
+      <table>
+        <StyledHead />
+      </table>
+    );
+
+    expect(container.firstChild!.childNodes[0].nodeName).toBe('THEAD');
+  });
+
+  it('renders sticky head styles', () => {
+    const { getByTestId } = render(
+      <table>
+        <StyledHead isSticky data-test-id="head">
+          <StyledHeaderRow data-test-id="header" />
+        </StyledHead>
+      </table>
+    );
+
+    expect(getByTestId('head')).toHaveStyleRule('position', 'sticky');
+    expect(getByTestId('head')).toHaveStyleRule('border-bottom-color', 'transparent', {
+      modifier: `& > ${StyledHeaderRow}:last-child`
+    });
+  });
+});
diff --git a/packages/tables/src/styled/StyledHead.ts b/packages/tables/src/styled/StyledHead.ts
@@ -5,15 +5,42 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 
-import styled from 'styled-components';
-import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import styled, { css, DefaultTheme, ThemeProps } from 'styled-components';
+import { retrieveComponentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming';
+import { StyledHeaderRow } from './StyledHeaderRow';
 
 const COMPONENT_ID = 'tables.head';
 
+interface IStyledHeadProps {
+  isSticky?: boolean;
+}
+
+/*
+ * 1. Prevent <Checkbox> or <OverflowButton> from leaking over the sticky header
+ * 2. Replace header row border with a box-shadow that maintains position
+ */
+const stickyStyles = (props: ThemeProps<DefaultTheme>) => {
+  const borderColor = getColor('neutralHue', 300, props.theme);
+
+  return css`
+    position: sticky;
+    top: 0;
+    z-index: 1; /* [1] */
+    box-shadow: inset 0 -${props.theme.borderWidths.sm} 0 ${borderColor}; /* [2] */
+    background-color: ${props.theme.colors.background};
+
+    & > ${StyledHeaderRow}:last-child {
+      border-bottom-color: transparent; /* [2] */
+    }
+  `;
+};
+
 export const StyledHead = styled.thead.attrs({
   'data-garden-id': COMPONENT_ID,
   'data-garden-version': PACKAGE_VERSION
-})`
+})<IStyledHeadProps>`
+  ${props => props.isSticky && stickyStyles(props)}
+
   ${props => retrieveComponentStyles(COMPONENT_ID, props)};
 `;
 
diff --git a/packages/tables/src/types/index.ts b/packages/tables/src/types/index.ts
@@ -24,6 +24,11 @@ export interface ITableProps extends TableHTMLAttributes<HTMLTableElement> {
   isReadOnly?: boolean;
 }
 
+export interface IHeadProps extends HTMLAttributes<HTMLTableSectionElement> {
+  /** Applies sticky header styling */
+  isSticky?: boolean;
+}
+
 export interface IRowProps extends HTMLAttributes<HTMLTableRowElement> {
   /** Applies striped styling */
   isStriped?: boolean;
