WIP - white line

pinterest · Mar 11, 2021 · b109e9d · b109e9d
1 parent 32b7866
commit b109e9d
Show file tree

Hide file tree

Showing 8 changed files with 93 additions and 26 deletions.
diff --git a/docs/src/Table.doc.js b/docs/src/Table.doc.js
@@ -264,8 +264,8 @@ card(
     id="stickyColumn"
     name="Example: Sticky Column"
     defaultCode={`
-<Box width={"75%"} overflow="auto">
-<Table maxHeight={200} stickyColumn={1}>
+<Box width={"50%"} overflow="auto">
+<Table maxHeight={200} stickyColumns={1}>
   <Table.Header>
     <Table.Row>
       <Table.HeaderCell>
@@ -357,8 +357,8 @@ card(
     id="stickyColumn2"
     name="Example: Sticky 2nd or 3rd Column"
     defaultCode={`
-<Box width={"60%"} overflow="auto">
-<Table maxHeight={200} stickyColumn={3}>
+<Box width={"75%"} overflow="auto">
+<Table maxHeight={200} stickyColumns={3} borderStyle="none">
   <Table.Header>
     <Table.Row>
       <Table.HeaderCell>

diff --git a/packages/gestalt/src/Table.css b/packages/gestalt/src/Table.css
@@ -2,6 +2,7 @@
   border-collapse: separate;
   border-spacing: 0;
   width: 100%;
+  isolation: isolate;
 }
 
 .th {
@@ -13,24 +14,64 @@
 .td {
   composes: paddingY3 from "./boxWhitespace.css";
   composes: paddingX3 from "./boxWhitespace.css";
+  position: relative;
+}
+
+td div{
+  z-index: 1;
+  position: relative;
 }
 
 .sticky tr th {
   background-color: var(--g-colorGray0);
   position: sticky;
   top: 0;
-  z-index: 2;
+  z-index: 6;
 }
 
 .columnSticky {
-  background-color: yellow;
+  background-color: var(--g-colorGray0);
   position:sticky;
   left: 0;
-  z-index: 1;
+  z-index: 3;
 }
 
-.sticky th.columnSticky {
+.columnSticky div {
+  z-index: 4;
+  isolation: isolate;
+}
+
+.columnStickyShadow div {
   z-index: 3;
+  position: relative;
+}
+
+
+.columnStickyShadow::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  box-shadow: 8px 0px 8px -8px var(--g-colorGray150);
+}
+
+
+.columnStickyShadow + td::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 4;
+  background-color: transparent;
+  box-shadow: inset 8px -8px white;
+}
+
+.sticky th.columnSticky {
+  z-index: 7;
 }
 
 .thead tr:last-child th {

diff --git a/packages/gestalt/src/Table.js b/packages/gestalt/src/Table.js
@@ -16,11 +16,11 @@ type Props = {|
   children: Node,
   borderStyle?: 'sm' | 'none',
   maxHeight?: number | string,
-  stickyColumn?: number,
+  stickyColumns?: number,
 |};
 
 export default function Table(props: Props): Node {
-  const { borderStyle, children, maxHeight, stickyColumn = -1 } = props;
+  const { borderStyle, children, maxHeight, stickyColumns } = props;
 
   return (
     <Box
@@ -29,7 +29,7 @@ export default function Table(props: Props): Node {
       maxHeight={maxHeight}
     >
       <table className={styles.table}>
-        <TableContext.Provider value={{ stickyColumn }}>{children}</TableContext.Provider>
+        <TableContext.Provider value={{ stickyColumns }}>{children}</TableContext.Provider>
       </table>
     </Box>
   );

diff --git a/packages/gestalt/src/TableCell.js b/packages/gestalt/src/TableCell.js
@@ -8,12 +8,24 @@ type Props = {|
   colSpan?: number,
   rowSpan?: number,
   shouldBeSticky?: boolean,
+  shouldHaveShadow?: boolean,
   previousTotalWidth?: number,
 |};
 
 export default function TableCell(props: Props): Node {
-  const { children, colSpan, rowSpan, shouldBeSticky, previousTotalWidth } = props;
-  const cs = cx(styles.td, shouldBeSticky && styles.columnSticky);
+  const {
+    children,
+    colSpan,
+    rowSpan,
+    shouldBeSticky,
+    previousTotalWidth,
+    shouldHaveShadow,
+  } = props;
+  const cs = cx(
+    styles.td,
+    shouldBeSticky && styles.columnSticky,
+    shouldHaveShadow && styles.columnStickyShadow,
+  );
   return (
     <td
       className={cs}

diff --git a/packages/gestalt/src/TableContextProvider.js b/packages/gestalt/src/TableContextProvider.js
@@ -2,11 +2,11 @@
 import { createContext, type Context } from 'react';
 
 type TableContextType = {|
-  stickyColumn?: number,
+  stickyColumns?: number,
 |};
 
 const initialState = {
-  stickyColumn: -1,
+  stickyColumns: undefined,
 };
 
 const TableContext: Context<TableContextType> = createContext<TableContextType>(initialState);

diff --git a/packages/gestalt/src/TableHeaderCell.js b/packages/gestalt/src/TableHeaderCell.js
@@ -5,16 +5,29 @@ import styles from './Table.css';
 
 type Props = {|
   children: Node,
-  shouldBeSticky?: Boolean,
+  shouldBeSticky?: boolean,
+  shouldHaveShadow?: boolean,
   colSpan?: number,
   rowSpan?: number,
   scope?: 'col' | 'colgroup' | 'row' | 'rowgroup',
   previousTotalWidth?: number,
 |};
 
 export default function TableHeaderCell(props: Props): Node {
-  const { children, colSpan, scope, rowSpan, shouldBeSticky, previousTotalWidth } = props;
-  const cs = cx(styles.th, shouldBeSticky && styles.columnSticky);
+  const {
+    children,
+    colSpan,
+    scope,
+    rowSpan,
+    shouldBeSticky,
+    previousTotalWidth,
+    shouldHaveShadow,
+  } = props;
+  const cs = cx(
+    styles.th,
+    shouldBeSticky && styles.columnSticky,
+    shouldHaveShadow && styles.columnStickyShadow,
+  );
 
   return (
     <th

diff --git a/packages/gestalt/src/TableRow.js b/packages/gestalt/src/TableRow.js
@@ -7,34 +7,35 @@ type Props = {|
 |};
 
 export default function TableRow(props: Props): Node {
-  const { stickyColumn = -1 } = useContext(TableContext);
+  const { stickyColumns } = useContext(TableContext);
   const rowRef = React.useRef();
   const [columnWidths, setColumnWidths] = useState([]);
 
   useEffect(() => {
-    if (rowRef && rowRef.current && stickyColumn > 0) {
+    if (rowRef && rowRef.current && stickyColumns) {
       const colWidths = [];
       const tableRowChildrenArray = [...rowRef.current.children];
       tableRowChildrenArray.forEach((child) => {
         colWidths.push(child.clientWidth);
       });
       setColumnWidths(colWidths);
     }
-  }, [rowRef, stickyColumn]);
+  }, [rowRef, stickyColumns]);
 
   const renderCellsWithIndex = () => {
     const cells = [];
     const tableRowChildrenArray = Children.toArray(props.children);
 
     tableRowChildrenArray.forEach((child, index) => {
-      const shouldBeSticky = stickyColumn >= 0 && index < stickyColumn;
+      const shouldBeSticky = stickyColumns >= 0 && index < stickyColumns;
+      const shouldHaveShadow = stickyColumns - 1 === index;
       const previousWidths = columnWidths.slice(0, index);
       const previousTotalWidth =
         previousWidths.length > 0 ? previousWidths.reduce((a, b) => a + b) : 0;
-      cells.push(cloneElement(child, { shouldBeSticky, previousTotalWidth }));
+      cells.push(cloneElement(child, { shouldBeSticky, previousTotalWidth, shouldHaveShadow }));
     });
     return cells;
   };
 
-  return <tr ref={rowRef}>{stickyColumn > 0 ? renderCellsWithIndex() : props.children}</tr>;
+  return <tr ref={rowRef}>{stickyColumns > 0 ? renderCellsWithIndex() : props.children}</tr>;
 }
diff --git a/packages/gestalt/src/TableRowExpandable.js b/packages/gestalt/src/TableRowExpandable.js
@@ -36,7 +36,7 @@ export default function TableRowExpandable(props: Props): Node {
   const [expanded, setExpanded] = useState(false);
   const hoverStyle = props.hoverStyle || 'gray';
   const cs = hoverStyle === 'gray' ? cx(styles.hoverShadeGray) : null;
-  const { stickyColumn = -1 } = useContext(TableContext);
+  const { stickyColumns } = useContext(TableContext);
 
   const handleButtonClick = ({ event }) => {
     setExpanded(!expanded);
@@ -48,7 +48,7 @@ export default function TableRowExpandable(props: Props): Node {
   return (
     <Fragment>
       <tr className={cs}>
-        <TableCell shouldBeSticky={stickyColumn > 0} previousTotalWidth={0}>
+        <TableCell shouldBeSticky={stickyColumns > 0} previousTotalWidth={0}>
           <IconButton
             accessibilityExpanded={expanded}
             accessibilityControls={id}