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 41c9743037a..ea089f2a885 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 @@ -47,7 +47,7 @@ export const table = style([ borderCollapse: 'separate', border: `${borderWidth} solid ${borderColor}`, fontVariantNumeric: 'tabular-nums', - wordBreak: 'break-word', // MAYBE?. + wordBreak: 'break-word', }, colorModeStyle({ lightMode: { @@ -106,32 +106,18 @@ export const nowrap = style({ whiteSpace: 'nowrap', }); -// export const contentWidth = style({ -// width: '1%', // is this necessary? -// // maxWidth: 'fit-content', -// // minWidth: 'fit-content', -// }); - -export const minWidthVar = createVar(); -export const maxWidthVar = createVar(); -export const fixedWidthVar = createVar(); -export const fixedWidth = style({ - // boxSizing: 'content-box', // MAYBE? for exact pixel values. - // overflowX: 'hidden', // MAYBE?. - width: fixedWidthVar, - // maxWidth: fixedWidthVar, +export const softWidthVar = createVar(); +export const softWidth = style({ + width: softWidthVar, }); +export const minWidthVar = createVar(); export const minWidth = style({ - // boxSizing: 'content-box', // MAYBE? for exact pixel values. - // overflowX: 'hidden', // MAYBE?. - // maxWidth: fixedWidthVar, minWidth: minWidthVar, }); + +export const maxWidthVar = createVar(); export const maxWidth = style({ - // boxSizing: 'content-box', // MAYBE? for exact pixel values. - // overflowX: 'hidden', // MAYBE?. - // maxWidth: fixedWidthVar, maxWidth: maxWidthVar, }); diff --git a/packages/braid-design-system/src/lib/components/Table/Table.tsx b/packages/braid-design-system/src/lib/components/Table/Table.tsx index 4b0c343b459..e125d54800b 100644 --- a/packages/braid-design-system/src/lib/components/Table/Table.tsx +++ b/packages/braid-design-system/src/lib/components/Table/Table.tsx @@ -66,7 +66,6 @@ export const Table = ({ } }, []); - // const table = ( ); - // {/* - // - // - // Swipe to see more - // - // - // */} - // return ( 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 8c65d72dd1e..316e96a37c3 100644 --- a/packages/braid-design-system/src/lib/components/Table/TableCell.tsx +++ b/packages/braid-design-system/src/lib/components/Table/TableCell.tsx @@ -8,7 +8,6 @@ import { type ResponsiveRangeProps, } from '../../utils/resolveResponsiveRangeProps'; import { - // TableCellIndexContext, TableContext, TableHeaderContext, TableRowContext, @@ -20,6 +19,7 @@ import buildDataAttributes, { import * as styles from './Table.css'; +type Percentage = `${number}%`; interface TableCellProps { header?: boolean; children: ReactNode; @@ -27,11 +27,10 @@ interface TableCellProps { hideAbove?: ResponsiveRangeProps['above']; align?: 'left' | 'right' | 'center'; wrap?: boolean; - nowrap?: boolean; - data?: DataAttributeMap; - width?: 'content' | 'auto' | string; // percentage only + width?: 'content' | 'auto' | Percentage; minWidth?: number; maxWidth?: number; + data?: DataAttributeMap; } export const TableCell = ({ header, @@ -39,8 +38,7 @@ export const TableCell = ({ hideAbove, hideBelow, align = 'left', - wrap, - nowrap = true, + wrap = false, width = 'auto', minWidth, maxWidth, @@ -56,7 +54,6 @@ export const TableCell = ({ const tableHeaderContext = useContext(TableHeaderContext); const tableRowContext = useContext(TableRowContext); const tableContext = useContext(TableContext); - // const tableCellIndexContext = useContext(TableCellIndexContext); assert( tableRowContext, @@ -68,11 +65,8 @@ export const TableCell = ({ const isHeaderCell = typeof header !== 'undefined' ? header : tableHeaderContext; - // const width = tableContext.columnWidths[tableCellIndexContext]; - // const preventWrapping = - // typeof nowrap !== 'undefined' - // ? nowrap - // : !isHeaderCell && (!width || width === 'auto'); + const softWidth = width === 'content' ? '1%' : width; + const hasMaxWidth = typeof maxWidth !== 'undefined'; return ( {align !== 'left' ? (