diff --git a/packages/braid-design-system/src/lib/components/Table/Table.css.ts b/packages/braid-design-system/src/lib/components/Table/Table.css.ts index efb7d69e4c4..ef35a851eb8 100644 --- a/packages/braid-design-system/src/lib/components/Table/Table.css.ts +++ b/packages/braid-design-system/src/lib/components/Table/Table.css.ts @@ -97,6 +97,11 @@ globalStyle(`${table} > tbody > tr:last-of-type > *`, { borderBottom: 0, }); +// export const borderTopFooter = style({}); +// globalStyle(`${table} > tfoot > *:first-of-type > *${borderTopFooter}`, { +// borderTop: `${vars.borderWidth.standard} solid ${borderColor}`, +// }); + export const showOnTablet = style( responsiveStyle({ tablet: { display: 'table-cell' } }), ); diff --git a/packages/braid-design-system/src/lib/components/Table/TableCell.tsx b/packages/braid-design-system/src/lib/components/Table/TableCell.tsx index 316e96a37c3..e4409e6d19b 100644 --- a/packages/braid-design-system/src/lib/components/Table/TableCell.tsx +++ b/packages/braid-design-system/src/lib/components/Table/TableCell.tsx @@ -9,6 +9,7 @@ import { } from '../../utils/resolveResponsiveRangeProps'; import { TableContext, + TableFooterContext, TableHeaderContext, TableRowContext, } from './TableContext'; @@ -52,6 +53,7 @@ export const TableCell = ({ }); const tableHeaderContext = useContext(TableHeaderContext); + const tableFooterContext = useContext(TableFooterContext); const tableRowContext = useContext(TableRowContext); const tableContext = useContext(TableContext); @@ -64,6 +66,7 @@ export const TableCell = ({ const isHeaderCell = typeof header !== 'undefined' ? header : tableHeaderContext; + const isFooterCell = tableFooterContext; const softWidth = width === 'content' ? '1%' : width; const hasMaxWidth = typeof maxWidth !== 'undefined'; @@ -97,6 +100,7 @@ export const TableCell = ({ [styles.maxWidth]: hasMaxWidth, [styles.alignYCenter]: tableContext.alignY === 'center', [styles.borderBottom]: true, + // [styles.borderTopFooter]: isFooterCell, [styles.showOnTablet]: !hideOnTablet && hideOnMobile, [styles.showOnDesktop]: !hideOnDesktop && (hideOnTablet || hideOnMobile), @@ -114,7 +118,7 @@ export const TableCell = ({ > {align !== 'left' ? ( diff --git a/packages/braid-design-system/src/lib/components/Table/TableContext.tsx b/packages/braid-design-system/src/lib/components/Table/TableContext.tsx index e6976e336d7..09b2724bf3f 100644 --- a/packages/braid-design-system/src/lib/components/Table/TableContext.tsx +++ b/packages/braid-design-system/src/lib/components/Table/TableContext.tsx @@ -10,4 +10,5 @@ export const TableContext = createContext< >(false); export const TableHeaderContext = createContext(false); export const TableBodyContext = createContext(false); +export const TableFooterContext = createContext(false); export const TableRowContext = createContext(false); diff --git a/packages/braid-design-system/src/lib/components/Table/TableFooter.tsx b/packages/braid-design-system/src/lib/components/Table/TableFooter.tsx new file mode 100644 index 00000000000..0553035aa7e --- /dev/null +++ b/packages/braid-design-system/src/lib/components/Table/TableFooter.tsx @@ -0,0 +1,37 @@ +import assert from 'assert'; +import { useContext, type ReactNode } from 'react'; +// import { TableRow } from './TableRow'; +import { TableContext, TableFooterContext } from './TableContext'; +import buildDataAttributes, { + type DataAttributeMap, +} from '../private/buildDataAttributes'; + +// import * as styles from './Table.css'; + +interface TableHeaderProps { + children: ReactNode; + data?: DataAttributeMap; +} + +export const TableFooter = ({ + children, + data, + ...restProps +}: TableHeaderProps) => { + const tableContext = useContext(TableContext); + + assert(tableContext, 'TableFooter must be used within a Table component'); + + return ( + + + {children} + + + ); +}; diff --git a/packages/braid-design-system/src/lib/components/Table/TableRow.tsx b/packages/braid-design-system/src/lib/components/Table/TableRow.tsx index 22fa14445a0..0c46ec890f5 100644 --- a/packages/braid-design-system/src/lib/components/Table/TableRow.tsx +++ b/packages/braid-design-system/src/lib/components/Table/TableRow.tsx @@ -5,6 +5,7 @@ import { TableHeaderContext, TableContext, TableBodyContext, + TableFooterContext, } from './TableContext'; import buildDataAttributes, { type DataAttributeMap, @@ -19,6 +20,7 @@ export const TableRow = ({ children, data, ...restProps }: TableRowProps) => { const tableContext = useContext(TableContext); const tableHeaderContext = useContext(TableHeaderContext); const tableBodyContext = useContext(TableBodyContext); + const tableFooterContext = useContext(TableFooterContext); const tableRowContext = useContext(TableRowContext); assert(tableContext, 'TableRow must be used within a Table component'); @@ -31,7 +33,7 @@ export const TableRow = ({ children, data, ...restProps }: TableRowProps) => { ); assert( - tableBodyContext || tableHeaderContext, + tableBodyContext || tableHeaderContext || tableFooterContext, 'TableRow must be used within a TableBody component', ); diff --git a/packages/braid-design-system/src/lib/components/index.ts b/packages/braid-design-system/src/lib/components/index.ts index 3af2e462c73..550b99d9915 100644 --- a/packages/braid-design-system/src/lib/components/index.ts +++ b/packages/braid-design-system/src/lib/components/index.ts @@ -72,6 +72,7 @@ export { Strong } from './Strong/Strong'; export { Table } from './Table/Table'; export { TableBody } from './Table/TableBody'; export { TableCell } from './Table/TableCell'; +export { TableFooter } from './Table/TableFooter'; export { TableHeader } from './Table/TableHeader'; export { TableRow } from './Table/TableRow'; export { Tab } from './Tabs/Tab'; diff --git a/site/src/undocumentedExports.json b/site/src/undocumentedExports.json index 16f3c5e0a7c..93b2e2c5d36 100644 --- a/site/src/undocumentedExports.json +++ b/site/src/undocumentedExports.json @@ -14,6 +14,7 @@ "Step", "TableBody", "TableCell", + "TableFooter", "TableHeader", "TableRow", "Tab",