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' ? (