diff --git a/packages/braid-design-system/src/lib/components/Table/Table.docs.tsx b/packages/braid-design-system/src/lib/components/Table/Table.docs.tsx index 4d38514c12b..b379c324c2e 100644 --- a/packages/braid-design-system/src/lib/components/Table/Table.docs.tsx +++ b/packages/braid-design-system/src/lib/components/Table/Table.docs.tsx @@ -410,7 +410,7 @@ const docs: ComponentDocs = { }, }, { - label: 'Table footers', + label: 'Column footers', description: ( A TableFooter can be provided, containing a{' '} @@ -546,7 +546,7 @@ const docs: ComponentDocs = { column3: 'Viverra', }, ])} - +
@@ -648,7 +648,7 @@ const docs: ComponentDocs = { column3: 'Viverra', }, ])} -
+
@@ -936,7 +936,7 @@ const docs: ComponentDocs = { column3: 'Praesent', }, ])} -
+
diff --git a/packages/braid-design-system/src/lib/components/Table/Table.screenshots.tsx b/packages/braid-design-system/src/lib/components/Table/Table.screenshots.tsx new file mode 100644 index 00000000000..35dcdf4ea95 --- /dev/null +++ b/packages/braid-design-system/src/lib/components/Table/Table.screenshots.tsx @@ -0,0 +1,720 @@ +import React from 'react'; +import type { ComponentScreenshot } from 'site/types'; +import { + Badge, + Box, + ButtonIcon, + HiddenVisually, + IconEdit, + Stack, + Strong, + Table, + TableBody, + TableCell, + TableFooter, + TableHeadCell, + TableHeader, + TableRow, + Text, +} from '../'; + +const data = [ + { + column1: 'Sit', + column2: 'Amet', + column3: 'Consectetur', + time: '09:00-10:00', + longText: 'Id nisi consequat enim exercitation non fugiat ipsum ut ea.', + }, + { + column1: 'Adipiscing', + column2: 'Elit', + column3: 'Praesent', + time: '10:00-11:00', + longText: + 'Incididunt eu anim eu pariatur dolore dolore fugiat qui ipsum tempor ex laborum voluptate sint.', + }, + { + column1: 'Semper', + column2: 'Interdum', + column3: 'Viverra', + time: '11:00-12:00', + longText: + 'Culpa labore minim consectetur ut officia ea ea cupidatat excepteur ipsum.', + }, +]; + +export const screenshots: ComponentScreenshot = { + screenshotWidths: [320], + examples: [ + { + label: 'Basic (Header & Body)', + Example: () => ( +
+ + + + Lorem + + + Ipsum + + + Dolor + + + + + {data.map((row) => ( + + + {row.column1} + + + {row.column2} + + + {row.column3} + + + ))} + +
+ ), + }, + { + label: 'Body only', + Example: () => ( + + + {data.map((row) => ( + + + {row.column1} + + + {row.column2} + + + {row.column3} + + + ))} + +
+ ), + }, + { + label: 'All sections (Header, Body & Footer)', + Example: () => ( + + + + + Lorem + + + Ipsum + + + Dolor + + + + + {data.map((row) => ( + + + {row.column1} + + + {row.column2} + + + {row.column3} + + + ))} + + + + + Quis + + + Tempor + + + Voluptate + + + +
+ ), + }, + { + label: 'Row Headings', + Example: () => ( + + + {data.map((row) => ( + + + {row.column1} + + + {row.column2} + + + {row.column3} + + + ))} + +
+ ), + }, + { + label: 'Dual axis headings', + Example: () => ( + + + + + Time + + + Lorem + + + Ipsum + + + Dolor + + + + + {data.map((row) => ( + + + {row.time} + + + {row.column1} + + + {row.column2} + + + {row.column3} + + + ))} + +
+ ), + }, + { + label: 'Vertical Alignment (center)', + Example: () => ( + + + + + Lorem + + + Ipsum + + + Dolor + + + + + {data.map((row) => ( + + + + {row.column1} + {row.column1} + + + + {row.column2} + + + {row.column3} + + + ))} + +
+ ), + }, + { + label: 'Vertical Alignment (top)', + Example: () => ( + + + + + Lorem + + + Ipsum + + + Dolor + + + + + {data.map((row) => ( + + + + {row.column1} + {row.column1} + + + + {row.column2} + + + {row.column3} + + + ))} + +
+ ), + }, + { + label: 'Horizontal Alignment', + Example: () => ( + + + + + “left” + + + “center” + + + “right” + + + + + {data.map((row) => ( + + + {row.column1} + + + {row.column2} + + + {row.column3} + + + ))} + +
+ ), + }, + { + label: 'Wrapping', + Example: () => ( + + + + + Lorem + + + Ipsum + + + Dolor + + + + + + {data.map((row) => ( + + {row.longText} + + ))} + + {data.map((row) => ( + + + {row.column1} + + + {row.column2} + + + {row.column3} + + + ))} + +
+ ), + }, + { + label: 'Visibility', + Example: () => ( + + + Breakpoint:{' '} + + Mobile, Columns: 1, 3, 4 + + + Tablet, Columns: 1, 4 + + + Desktop, Columns: 1, 2 + + + Wide, Columns: 1, 2, 4 + + + + + + + 1 + + + 2 + + + 3 + + + 4 + + + + + {data.map((row) => ( + + + {row.column1} + + + {row.column2} + + + {row.column3} + + + {row.column3} + + + ))} + +
+ + ), + }, + { + label: 'Scroll container fade out', + Example: () => ( + + + + + + Lorem + + + Ipsum + + + Dolor + + + + + {data.map((row) => ( + + + {row.column1} + + + {row.column2} + + + {row.longText} + + + ))} + +
+ + ), + }, + { + label: 'Column soft widths', + Example: () => ( + + + + + Content + + + 30% + + + Auto + + + Auto + + + Content + + + + + {data.map((row) => ( + + + Badge + + + {row.column1} + + + {row.column2} + + + {row.column3} + + + } + label="Edit" + size="small" + variant="transparent" + id={`edit-${row.column1}`} + /> + + + ))} + +
+ ), + }, + { + label: 'Column maxWidth (without excess space)', + Example: () => ( + + + + + Content + + + maxWidth 200 + + + Auto + + + Auto + + + Content + + + + + {data.map((row) => ( + + + Badge + + + {row.longText} + + + {row.longText} + + + {row.longText} + + + } + label="Edit" + size="small" + variant="transparent" + id={`edit-${row.column1}`} + /> + + + ))} + +
+ ), + }, + { + label: + 'Column maxWidth (with excess space will allocated additional to max width)', + Example: () => ( + + + + + Content + + + MaxWidth 200 + + + Auto + + + Auto + + + Content + + + + + {data.map((row) => ( + + + Badge + + + {row.longText} + + + {row.column2} + + + {row.column3} + + + } + label="Edit" + size="small" + variant="transparent" + id={`edit-${row.column1}`} + /> + + + ))} + +
+ ), + }, + { + label: 'Column minWidth', + Example: () => ( + + + + + MinWidth 150 + + + Auto + + + Auto + + + Auto + + + Content + + + + + {data.map((row) => ( + + + Badge + + + {row.longText} + + + {row.column2} + + + {row.column3} + + + } + label="Edit" + size="small" + variant="transparent" + id={`edit-${row.column1}`} + /> + + + ))} + +
+ ), + }, + { + label: 'Column spanning', + Example: () => ( + + + {data.map((row) => ( + + + {row.column1} + + + {row.column2} + + + {row.column3} + + + ))} + + + + Culpa labore minim consectetur ut officia ea ea cupidatat + excepteur. Incididunt eu anim eu pariatur dolore dolore fugiat + qui ipsum tempor ex laborum voluptate sint. + + + + Tempor + + + +
+ ), + }, + ], +}; 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 1fec8709004..73b7a582933 100644 --- a/packages/braid-design-system/src/lib/components/Table/TableCell.tsx +++ b/packages/braid-design-system/src/lib/components/Table/TableCell.tsx @@ -37,6 +37,22 @@ interface BaseCellProps { header?: boolean; scope?: 'col' | 'row'; } + +const resolveSoftWidth = (width: CellProps['width']) => { + // Small as possible, receive least amount of available space + if (width === 'content') { + return '1%'; + } + // Yield to the CSS Table Layout algorithm to balance the column + // width based on longest cell content, distributing excess + // available space. + if (width === 'auto') { + return undefined; + } + + return width; +}; + const Cell = ({ header: isHeaderCell, children, @@ -65,7 +81,7 @@ const Cell = ({ const isFooterCell = tableFooterContext; - const softWidth = width === 'content' ? '1%' : width; + const softWidth = resolveSoftWidth(width); const hasMaxWidth = typeof maxWidth !== 'undefined'; return ( @@ -84,7 +100,7 @@ const Cell = ({ }} className={{ [styles.nowrap]: !wrap, - [styles.softWidth]: width && width !== 'auto', + [styles.softWidth]: softWidth, [styles.minWidth]: typeof minWidth !== 'undefined', [styles.maxWidth]: hasMaxWidth, [styles.alignYCenter]: tableContext.alignY === 'center', @@ -98,7 +114,7 @@ const Cell = ({ !hideOnWide && (hideOnDesktop || hideOnTablet || hideOnMobile), }} style={assignInlineVars({ - [styles.softWidthVar]: width !== 'auto' ? softWidth : undefined, + [styles.softWidthVar]: softWidth, [styles.minWidthVar]: typeof minWidth !== 'undefined' ? `${minWidth}px` : undefined, [styles.maxWidthVar]: