DOP-4996: Table initiates in dark/light mode (#1241)

Co-authored-by: Seung Park <[email protected]> Co-authored-by: Seung Park <[email protected]> Co-authored-by: Bianca <[email protected]> Co-authored-by: biancalaube <[email protected]>
mongodb · Sep 18, 2024 · 0c16c08 · 0c16c08
1 parent e61200b
commit 0c16c08
Show file tree

Hide file tree

Showing 2 changed files with 67 additions and 23 deletions.
diff --git a/src/components/ListTable.js b/src/components/ListTable.js
@@ -9,18 +9,6 @@ import { theme } from '../theme/docsTheme';
 import { AncestorComponentContextProvider, useAncestorComponentContext } from '../context/ancestor-components-context';
 import ComponentFactory from './ComponentFactory';
 
-// Need to define custom styles for custom components, such as stub cells
-const LIST_TABLE_THEME_STYLES = {
-  [Theme.Light]: {
-    stubCellBgColor: palette.gray.light3,
-    stubBorderColor: palette.gray.light2,
-  },
-  [Theme.Dark]: {
-    stubCellBgColor: palette.gray.dark4,
-    stubBorderColor: palette.gray.dark2,
-  },
-};
-
 const align = (key) => {
   switch (key) {
     case 'left':
@@ -41,13 +29,22 @@ const styleTable = ({ customAlign, customWidth }) => css`
 const theadStyle = css`
   // Allows its box shadow to appear above stub cell's background color
   position: relative;
+  color: var(--font-color-primary);
+  background-color: ${palette.white};
+  box-shadow: 0 ${theme.size.tiny} ${palette.gray.light2};
+
+  .dark-theme & {
+    background-color: ${palette.black};
+    box-shadow: 0 ${theme.size.tiny} ${palette.gray.dark2};
+  }
 `;
 
 const baseCellStyle = css`
   // Keep legacy padding; important to prevent first-child and last-child overwrites
   padding: 10px ${theme.size.small} !important;
   // Force top alignment rather than LeafyGreen default middle (PD-1217)
   vertical-align: top;
+  color: var(--font-color-primary);
 
   * {
     // Wrap in selector to ensure it cascades down to every element
@@ -90,10 +87,25 @@ const headerCellStyle = css`
   font-size: ${theme.fontSize.small};
 `;
 
-const stubCellStyle = ({ stubCellBgColor, stubBorderColor }) => css`
-  background-color: ${stubCellBgColor};
-  border-right: 3px solid ${stubBorderColor};
+const stubCellStyle = css`
+  background-color: ${palette.gray.light3};
+  border-right: 3px solid ${palette.gray.light2};
   font-weight: 600;
+
+  .dark-theme & {
+    background-color: ${palette.gray.dark4};
+    border-right: 3px solid ${palette.gray.dark2};
+  }
+`;
+
+const zebraStripingStyle = css`
+  &:nth-of-type(even) {
+    background-color: ${palette.gray.light3};
+
+    .dark-theme & {
+      background-color: ${palette.gray.dark4};
+    }
+  }
 `;
 
 const hasOneChild = (children) => children.length === 1 && children[0].type === 'paragraph';
@@ -147,8 +159,8 @@ const includesNestedTable = (rows) => {
   return rows.some((row) => checkNodeForTable(row));
 };
 
-const ListTableRow = ({ row = [], stubColumnCount, siteTheme, ...rest }) => (
-  <Row>
+const ListTableRow = ({ row = [], stubColumnCount, siteTheme, className, ...rest }) => (
+  <Row className={className}>
     {row.map((cell, colIndex) => {
       const skipPTag = hasOneChild(cell.children);
       const contents = cell.children.map((child, i) => (
@@ -159,11 +171,7 @@ const ListTableRow = ({ row = [], stubColumnCount, siteTheme, ...rest }) => (
       const role = isStub ? 'rowheader' : null;
 
       return (
-        <Cell
-          key={colIndex}
-          className={cx(baseCellStyle, bodyCellStyle, isStub && stubCellStyle(LIST_TABLE_THEME_STYLES[siteTheme]))}
-          role={role}
-        >
+        <Cell key={colIndex} className={cx(baseCellStyle, bodyCellStyle, isStub && stubCellStyle)} role={role}>
           {/* Wrap in div to ensure contents are structured properly */}
           <div>{contents}</div>
         </Cell>
@@ -205,6 +213,7 @@ const ListTable = ({ nodeData: { children, options }, ...rest }) => {
 
   const hasNestedTable = useMemo(() => includesNestedTable(bodyRows), [bodyRows]);
   const noTableNesting = !hasNestedTable && !ancestors?.table;
+  const shouldAlternateRowColor = noTableNesting && bodyRows.length > 4;
 
   return (
     <AncestorComponentContextProvider component={'table'}>
@@ -218,7 +227,7 @@ const ListTable = ({ nodeData: { children, options }, ...rest }) => {
             customWidth: options?.width,
           })
         )}
-        shouldAlternateRowColor={noTableNesting && bodyRows.length > 4}
+        shouldAlternateRowColor={shouldAlternateRowColor}
       >
         {widths && (
           <colgroup>
@@ -257,6 +266,7 @@ const ListTable = ({ nodeData: { children, options }, ...rest }) => {
               stubColumnCount={stubColumnCount}
               row={row.children?.[0]?.children}
               siteTheme={siteTheme}
+              className={shouldAlternateRowColor && zebraStripingStyle}
             />
           ))}
         </TableBody>

diff --git a/tests/unit/__snapshots__/ListTable.test.js.snap b/tests/unit/__snapshots__/ListTable.test.js.snap
@@ -22,13 +22,22 @@ exports[`when rendering a list table with fixed widths renders correctly 1`] = `
   background-color: #FFFFFF;
   box-shadow: 0 4px #E8EDEB;
   position: relative;
+  color: var(--font-color-primary);
+  background-color: #FFFFFF;
+  box-shadow: 0 4px #E8EDEB;
+}
+
+.dark-theme .emotion-2 {
+  background-color: #001E2B;
+  box-shadow: 0 4px #3D4F58;
 }
 
 .emotion-3 {
   padding: 0 8px;
   overflow: hidden;
   padding: 10px 8px!important;
   vertical-align: top;
+  color: var(--font-color-primary);
   overflow-wrap: anywhere;
   word-break: break-word;
 }
@@ -219,6 +228,14 @@ exports[`when rendering a list-table directive renders correctly 1`] = `
   background-color: #FFFFFF;
   box-shadow: 0 4px #E8EDEB;
   position: relative;
+  color: var(--font-color-primary);
+  background-color: #FFFFFF;
+  box-shadow: 0 4px #E8EDEB;
+}
+
+.dark-theme .emotion-2 {
+  background-color: #001E2B;
+  box-shadow: 0 4px #3D4F58;
 }
 
 .emotion-3 {
@@ -227,6 +244,7 @@ exports[`when rendering a list-table directive renders correctly 1`] = `
   padding-left: 32px;
   padding: 10px 8px!important;
   vertical-align: top;
+  color: var(--font-color-primary);
   line-height: 24px;
   font-weight: 600;
   font-size: 13px;
@@ -276,6 +294,7 @@ exports[`when rendering a list-table directive renders correctly 1`] = `
   overflow: hidden;
   padding: 10px 8px!important;
   vertical-align: top;
+  color: var(--font-color-primary);
   line-height: 24px;
   font-weight: 600;
   font-size: 13px;
@@ -303,11 +322,20 @@ exports[`when rendering a list-table directive renders correctly 1`] = `
   background-color: #F9FBFA;
 }
 
+.emotion-15:nth-of-type(even) {
+  background-color: #F9FBFA;
+}
+
+.dark-theme .emotion-15:nth-of-type(even) {
+  background-color: #112733;
+}
+
 .emotion-16 {
   padding: 0 8px;
   overflow: hidden;
   padding: 10px 8px!important;
   vertical-align: top;
+  color: var(--font-color-primary);
   overflow-wrap: anywhere;
   word-break: break-word;
   background-color: #F9FBFA;
@@ -352,6 +380,11 @@ exports[`when rendering a list-table directive renders correctly 1`] = `
   margin-bottom: 0;
 }
 
+.dark-theme .emotion-16 {
+  background-color: #112733;
+  border-right: 3px solid #3D4F58;
+}
+
 .emotion-17 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -377,6 +410,7 @@ exports[`when rendering a list-table directive renders correctly 1`] = `
   overflow: hidden;
   padding: 10px 8px!important;
   vertical-align: top;
+  color: var(--font-color-primary);
   overflow-wrap: anywhere;
   word-break: break-word;
 }