From 6b56db2b17149ae67ccd726282f9017aea9d027f Mon Sep 17 00:00:00 2001 From: Tobias Barsnes Date: Thu, 7 Nov 2024 15:12:27 +0100 Subject: [PATCH] feat(Table): new `Table.Foot` and style caption (#2744) resolves #2597 resolves #2598 --------- Co-authored-by: Eirik Backer --- .changeset/twenty-cheetahs-leave.md | 6 +++ packages/css/table.css | 15 +++++++- .../src/components/Table/Table.stories.tsx | 10 ++++- .../react/src/components/Table/Table.test.tsx | 16 +++++++- .../react/src/components/Table/TableFoot.tsx | 9 +++++ packages/react/src/components/Table/index.ts | 37 +++++++++++-------- 6 files changed, 73 insertions(+), 20 deletions(-) create mode 100644 .changeset/twenty-cheetahs-leave.md create mode 100644 packages/react/src/components/Table/TableFoot.tsx diff --git a/.changeset/twenty-cheetahs-leave.md b/.changeset/twenty-cheetahs-leave.md new file mode 100644 index 0000000000..ecaf8b0d0e --- /dev/null +++ b/.changeset/twenty-cheetahs-leave.md @@ -0,0 +1,6 @@ +--- +"@digdir/designsystemet-css": patch +"@digdir/designsystemet-react": patch +--- + +Table: Add `Table.Foot` and style caption diff --git a/packages/css/table.css b/packages/css/table.css index 89af4b4f13..ae3401b519 100644 --- a/packages/css/table.css +++ b/packages/css/table.css @@ -19,7 +19,7 @@ color: var(--dsc-table-color); width: 100%; - & > :is(tbody, thead) > tr > :is(th, td) { + & > :is(tbody, thead, tfoot) > tr > :is(th, td) { background: var(--dsc-table-background); border-bottom: var(--dsc-table-border); padding: var(--dsc-table-padding); @@ -38,6 +38,17 @@ border-bottom: var(--dsc-table-header-divider); } + & > tfoot > tr > :is(th, td) { + background: var(--dsc-table-background); + border-bottom: none; + border-top: var(--dsc-table-border); + } + + & caption { + @composes ds-heading from './heading.css'; + text-align: inherit; + } + /* Add rounded border to first and last row */ & > :is(thead, tbody):first-child > tr:first-child > :is(th, td) { &:first-child { @@ -50,7 +61,7 @@ } /* Add rounded border to last row */ - & > :is(thead, tbody):last-child > tr:last-child > :is(th, td) { + & > :is(thead, tbody, tfoot):last-child > tr:last-child > :is(th, td) { &:first-child { border-bottom-left-radius: var(--dsc-table-border-radius); } diff --git a/packages/react/src/components/Table/Table.stories.tsx b/packages/react/src/components/Table/Table.stories.tsx index 5680578880..3173038102 100644 --- a/packages/react/src/components/Table/Table.stories.tsx +++ b/packages/react/src/components/Table/Table.stories.tsx @@ -16,6 +16,7 @@ export default { export const Preview: Story = (args) => { return ( + Header 1 @@ -35,6 +36,13 @@ export const Preview: Story = (args) => { Cell 6 + + + Footer 1 + Footer 2 + Footer 3 + +
Table caption
); }; @@ -166,7 +174,7 @@ StickyHeader.args = { }; StickyHeader.parameters = { - customStyles: { height: '280px', overflow: 'auto' }, + customStyles: { height: '280px', overflow: 'auto', padding: 0 }, }; type CheckedItems = { diff --git a/packages/react/src/components/Table/Table.test.tsx b/packages/react/src/components/Table/Table.test.tsx index 35fcecf2b2..096c59e31d 100644 --- a/packages/react/src/components/Table/Table.test.tsx +++ b/packages/react/src/components/Table/Table.test.tsx @@ -3,7 +3,14 @@ import { render as renderRtl, screen } from '@testing-library/react'; import type { TableProps } from './Table'; import { Table } from './Table'; -import { TableBody, TableCell, TableHead, TableHeaderCell, TableRow } from '.'; +import { + TableBody, + TableCell, + TableFoot, + TableHead, + TableHeaderCell, + TableRow, +} from '.'; const children = ( <> @@ -26,6 +33,13 @@ const children = ( Cell 6 + + + Footer 1 + Footer 2 + Footer 3 + + ); diff --git a/packages/react/src/components/Table/TableFoot.tsx b/packages/react/src/components/Table/TableFoot.tsx new file mode 100644 index 0000000000..f0f9806113 --- /dev/null +++ b/packages/react/src/components/Table/TableFoot.tsx @@ -0,0 +1,9 @@ +import { type HTMLAttributes, forwardRef } from 'react'; + +export type TableFootProps = HTMLAttributes; + +export const TableFoot = forwardRef( + function TableFoot(rest, ref) { + return ; + }, +); diff --git a/packages/react/src/components/Table/index.ts b/packages/react/src/components/Table/index.ts index 6db516a52d..3b38ac44ce 100644 --- a/packages/react/src/components/Table/index.ts +++ b/packages/react/src/components/Table/index.ts @@ -4,6 +4,8 @@ import { TableBody } from './TableBody'; import type { TableBodyProps } from './TableBody'; import { TableCell } from './TableCell'; import type { TableCellProps } from './TableCell'; +import { TableFoot } from './TableFoot'; +import type { TableFootProps } from './TableFoot'; import { TableHead } from './TableHead'; import type { TableHeadProps } from './TableHead'; import { TableHeaderCell } from './TableHeaderCell'; @@ -11,21 +13,14 @@ import type { TableHeaderCellProps } from './TableHeaderCell'; import { TableRow } from './TableRow'; import type { TableRowProps } from './TableRow'; -type TableComponent = typeof TableRoot & { - Head: typeof TableHead; - Body: typeof TableBody; - Row: typeof TableRow; - Cell: typeof TableCell; - HeaderCell: typeof TableHeaderCell; -}; - -const Table = TableRoot as TableComponent; - -Table.Head = TableHead; -Table.Body = TableBody; -Table.Row = TableRow; -Table.Cell = TableCell; -Table.HeaderCell = TableHeaderCell; +const Table = Object.assign(TableRoot, { + Head: TableHead, + Body: TableBody, + Row: TableRow, + Cell: TableCell, + HeaderCell: TableHeaderCell, + Foot: TableFoot, +}); Table.displayName = 'Table'; Table.Head.displayName = 'Table.Head'; @@ -33,8 +28,17 @@ Table.Body.displayName = 'Table.Body'; Table.Row.displayName = 'Table.Row'; Table.Cell.displayName = 'Table.Cell'; Table.HeaderCell.displayName = 'Table.HeaderCell'; +Table.Foot.displayName = 'Table.Foot'; -export { Table, TableHead, TableBody, TableRow, TableCell, TableHeaderCell }; +export { + Table, + TableHead, + TableBody, + TableRow, + TableCell, + TableHeaderCell, + TableFoot, +}; export type { TableProps, TableHeadProps, @@ -42,4 +46,5 @@ export type { TableRowProps, TableCellProps, TableHeaderCellProps, + TableFootProps, };