From 0c16c080f63082bdf9159028100cbd561d8db81c Mon Sep 17 00:00:00 2001 From: mmeigs Date: Wed, 18 Sep 2024 13:55:25 -0400 Subject: [PATCH] DOP-4996: Table initiates in dark/light mode (#1241) Co-authored-by: Seung Park Co-authored-by: Seung Park Co-authored-by: Bianca <76073842+biancalaube@users.noreply.github.com> Co-authored-by: biancalaube --- src/components/ListTable.js | 56 +++++++++++-------- .../unit/__snapshots__/ListTable.test.js.snap | 34 +++++++++++ 2 files changed, 67 insertions(+), 23 deletions(-) diff --git a/src/components/ListTable.js b/src/components/ListTable.js index b6001a960..75109f624 100644 --- 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,6 +29,14 @@ 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` @@ -48,6 +44,7 @@ const baseCellStyle = css` 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 }) => ( - +const ListTableRow = ({ row = [], stubColumnCount, siteTheme, className, ...rest }) => ( + {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 ( - + {/* Wrap in div to ensure contents are structured properly */}
{contents}
 @@ -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 ( @@ -218,7 +227,7 @@ const ListTable = ({ nodeData: { children, options }, ...rest }) => { customWidth: options?.width, }) )} - shouldAlternateRowColor={noTableNesting && bodyRows.length > 4} + shouldAlternateRowColor={shouldAlternateRowColor} > {widths && ( @@ -257,6 +266,7 @@ const ListTable = ({ nodeData: { children, options }, ...rest }) => { stubColumnCount={stubColumnCount} row={row.children?.[0]?.children} siteTheme={siteTheme} + className={shouldAlternateRowColor && zebraStripingStyle} /> ))} diff --git a/tests/unit/__snapshots__/ListTable.test.js.snap b/tests/unit/__snapshots__/ListTable.test.js.snap index 4aab877c2..b4a02eee6 100644 --- a/tests/unit/__snapshots__/ListTable.test.js.snap +++ b/tests/unit/__snapshots__/ListTable.test.js.snap @@ -22,6 +22,14 @@ 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 { @@ -29,6 +37,7 @@ exports[`when rendering a list table with fixed widths renders correctly 1`] = ` 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; }