From d6e9e30b3c935f4331e3ce474adad1b8c09775dc Mon Sep 17 00:00:00 2001 From: Richard Dinh <1038306+flacoman91@users.noreply.github.com> Date: Tue, 7 Apr 2026 15:18:09 -0700 Subject: [PATCH 1/4] update docs, fix right align bug --- src/components/Table/table-utils.tsx | 4 +-- src/components/Table/table.stories.tsx | 50 ++++++++++++++++++++++++++ src/components/Table/table.test.tsx | 2 +- 3 files changed, 53 insertions(+), 3 deletions(-) diff --git a/src/components/Table/table-utils.tsx b/src/components/Table/table-utils.tsx index 5f919f4dfd..b9db28959c 100644 --- a/src/components/Table/table-utils.tsx +++ b/src/components/Table/table-utils.tsx @@ -15,7 +15,7 @@ export const buildColumnHeaders = ( if (typeof column === 'object') { content = column.header; - if (column.alignRight) cnames.push('o-table_cell--right-align'); + if (column.alignRight) cnames.push('o-table__cell--right-align'); if (column.width) cnames.push(`u-w${column.width}pct`); if (!column.headerWordWrap) cnames.push('white-space-nowrap'); } else { @@ -42,7 +42,7 @@ const getCellProperties = (column: TableColumn): object => { } const cellCnames = ['']; - if (column.alignRight) cellCnames.push('o-table_cell--right-align'); + if (column.alignRight) cellCnames.push('o-table__cell--right-align'); if (column.cellDisableWordWrap) cellCnames.push('white-space-nowrap'); if (!column.cellDisableWordWrap && column.cellWordBreak) cellCnames.push('word-break-break-all'); diff --git a/src/components/Table/table.stories.tsx b/src/components/Table/table.stories.tsx index 82041843da..49a4c33725 100644 --- a/src/components/Table/table.stories.tsx +++ b/src/components/Table/table.stories.tsx @@ -6,6 +6,17 @@ const meta: Meta = { title: 'Components (Verified)/Tables', tags: ['autodocs'], component: Table, + argTypes: { + columns: { + description: + 'Accepts strings or column config objects: { header, alignRight, width, cellWordBreak, cellDisableWordWrap, headerWordWrap }.', + table: { + type: { + summary: 'Array', + }, + }, + }, + }, }; export default meta; @@ -168,3 +179,42 @@ export const LongCharacterSets: Story = { isScrollableHorizontal: false, }, }; + +export const ColumnConfiguration: Story = { + name: 'Column configuration options', + parameters: { + docs: { + description: { + story: + 'Columns accept objects with: `header`, `alignRight`, `width` (percent as string), `cellWordBreak`, `cellDisableWordWrap`, `headerWordWrap`.\n\n`width` maps to CFPB width utility classes (u-w{n}pct). \n\nValid values: 100, 90, 80, 70, 60, 50, 40, 30, 20, 10, 75, 65, 25, 15, 66, 33.\n\nSee https://cfpb.github.io/design-system/development/helper-classes-and-mixins#width-utilities-helper-classes.', + }, + }, + }, + args: { + columns: [ + { header: 'Header (default)', width: '25' }, + { header: 'Align right', alignRight: true, width: '25' }, + { header: 'Word break', cellWordBreak: true, width: '25' }, + { + header: 'No wrap header', + headerWordWrap: false, + cellDisableWordWrap: true, + width: '25', + }, + ], + rows: [ + [ + 'Standard text', + '$12,345.67', + 'SUPERLONGIDENTIFIERSTRINGWITHOUTSPACES', + 'Long cell value should stay on one line', + ], + [ + 'Row 2', + '$0.99', + 'ANOTHERLONGIDENTIFIERSTRINGWITHOUTSPACES', + 'Another long cell value without wrapping', + ], + ], + }, +}; diff --git a/src/components/Table/table.test.tsx b/src/components/Table/table.test.tsx index a48a1b36ba..79f1537dbd 100644 --- a/src/components/Table/table.test.tsx +++ b/src/components/Table/table.test.tsx @@ -88,7 +88,7 @@ describe('', () => { ); const cell = screen.queryByText('Right Aligned'); - expect(cell?.classList.contains('o-table_cell--right-align')).toBe(true); + expect(cell?.classList.contains('o-table__cell--right-align')).toBe(true); expect(cell?.classList.contains('u-w40pct')).toBe(true); }); From 2d2192bb6b90845b47ad8388a3af29e952d7b2ab Mon Sep 17 00:00:00 2001 From: Richard Dinh <1038306+flacoman91@users.noreply.github.com> Date: Tue, 7 Apr 2026 15:22:36 -0700 Subject: [PATCH 2/4] outdated scrolling class --- src/components/Table/table.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Table/table.tsx b/src/components/Table/table.tsx index 39b6dcf878..79533b717b 100644 --- a/src/components/Table/table.tsx +++ b/src/components/Table/table.tsx @@ -127,7 +127,7 @@ export const Table = forwardRef< return (
{tableContent} From d232bb8bf65039c1d2136b5fd413084af26a90bb Mon Sep 17 00:00:00 2001 From: Richard Dinh <1038306+flacoman91@users.noreply.github.com> Date: Tue, 7 Apr 2026 15:44:44 -0700 Subject: [PATCH 3/4] convert bools to isThing notation --- src/components/Table/table-utils.tsx | 10 +++++----- src/components/Table/table.stories.tsx | 26 +++++++++++++++----------- src/components/Table/table.tsx | 8 ++++---- 3 files changed, 24 insertions(+), 20 deletions(-) diff --git a/src/components/Table/table-utils.tsx b/src/components/Table/table-utils.tsx index b9db28959c..759552d5d4 100644 --- a/src/components/Table/table-utils.tsx +++ b/src/components/Table/table-utils.tsx @@ -15,9 +15,9 @@ export const buildColumnHeaders = ( if (typeof column === 'object') { content = column.header; - if (column.alignRight) cnames.push('o-table__cell--right-align'); + if (column.isAlignRight) cnames.push('o-table__cell--right-align'); if (column.width) cnames.push(`u-w${column.width}pct`); - if (!column.headerWordWrap) cnames.push('white-space-nowrap'); + if (!column.isHeaderWordWrap) cnames.push('white-space-nowrap'); } else { content = column; } @@ -42,9 +42,9 @@ const getCellProperties = (column: TableColumn): object => { } const cellCnames = ['']; - if (column.alignRight) cellCnames.push('o-table__cell--right-align'); - if (column.cellDisableWordWrap) cellCnames.push('white-space-nowrap'); - if (!column.cellDisableWordWrap && column.cellWordBreak) + if (column.isAlignRight) cellCnames.push('o-table__cell--right-align'); + if (column.isCellDisableWordWrap) cellCnames.push('white-space-nowrap'); + if (!column.isCellDisableWordWrap && column.isCellWordBreak) cellCnames.push('word-break-break-all'); return { diff --git a/src/components/Table/table.stories.tsx b/src/components/Table/table.stories.tsx index 49a4c33725..66771e0a7f 100644 --- a/src/components/Table/table.stories.tsx +++ b/src/components/Table/table.stories.tsx @@ -9,7 +9,7 @@ const meta: Meta = { argTypes: { columns: { description: - 'Accepts strings or column config objects: { header, alignRight, width, cellWordBreak, cellDisableWordWrap, headerWordWrap }.', + 'Accepts strings or column config objects: { header, isAlignRight, width, isCellWordBreak, isCellDisableWordWrap, isHeaderWordWrap }.', table: { type: { summary: 'Array', @@ -114,7 +114,7 @@ export const RightAligned: Story = { columns: [ { header: 'Col 1' }, 'Col 2', - { header: 'Right-aligned column', alignRight: true }, + { header: 'Right-aligned column', isAlignRight: true }, ], rows: [ ['Row A', 'Cell A2', '$1.00'], @@ -170,10 +170,14 @@ export const LongCharacterSets: Story = { name: 'Long Character Sets ', args: { columns: [ - { header: 'Column 1', cellDisableWordWrap: true, headerWordWrap: false }, - { header: 'Column 2', cellWordBreak: true }, - { header: 'Column 3', cellWordBreak: true }, - { header: 'Column 4', cellWordBreak: true }, + { + header: 'Column 1', + isCellDisableWordWrap: true, + isHeaderWordWrap: false, + }, + { header: 'Column 2', isCellWordBreak: true }, + { header: 'Column 3', isCellWordBreak: true }, + { header: 'Column 4', isCellWordBreak: true }, ], rows: maxUidTestRows, isScrollableHorizontal: false, @@ -186,19 +190,19 @@ export const ColumnConfiguration: Story = { docs: { description: { story: - 'Columns accept objects with: `header`, `alignRight`, `width` (percent as string), `cellWordBreak`, `cellDisableWordWrap`, `headerWordWrap`.\n\n`width` maps to CFPB width utility classes (u-w{n}pct). \n\nValid values: 100, 90, 80, 70, 60, 50, 40, 30, 20, 10, 75, 65, 25, 15, 66, 33.\n\nSee https://cfpb.github.io/design-system/development/helper-classes-and-mixins#width-utilities-helper-classes.', + 'Columns accept objects with: `header`, `isAlignRight`, `width` (percent as string), `isCellWordBreak`, `isCellDisableWordWrap`, `isHeaderWordWrap`.\n\n`width` maps to CFPB width utility classes (u-w{n}pct). \n\nValid values: 100, 90, 80, 70, 60, 50, 40, 30, 20, 10, 75, 65, 25, 15, 66, 33.\n\nSee https://cfpb.github.io/design-system/development/helper-classes-and-mixins#width-utilities-helper-classes.', }, }, }, args: { columns: [ { header: 'Header (default)', width: '25' }, - { header: 'Align right', alignRight: true, width: '25' }, - { header: 'Word break', cellWordBreak: true, width: '25' }, + { header: 'Align right', isAlignRight: true, width: '25' }, + { header: 'Word break', isCellWordBreak: true, width: '25' }, { header: 'No wrap header', - headerWordWrap: false, - cellDisableWordWrap: true, + isHeaderWordWrap: false, + isCellDisableWordWrap: true, width: '25', }, ], diff --git a/src/components/Table/table.tsx b/src/components/Table/table.tsx index 79533b717b..df6634d678 100644 --- a/src/components/Table/table.tsx +++ b/src/components/Table/table.tsx @@ -23,11 +23,11 @@ const Caption = ({ export interface TableColumnConfiguration { header: string; // Column heading - alignRight?: boolean | undefined; // Align content to the right? + isAlignRight?: boolean | undefined; // Align content to the right? width?: WidthPercent; // Fixed percentage of table width for column to consume - cellWordBreak?: boolean; // Allows the td (cells) to break upon limit space - cellDisableWordWrap?: boolean; // Overrides 'cellWordBreak' and explicitly forces wrapping to be disabled in the td (cell) - headerWordWrap?: boolean; // Allows wrapping in the th (header), by default -- header fields are set to no-wrap + isCellWordBreak?: boolean; // Allows the td (cells) to break upon limit space + isCellDisableWordWrap?: boolean; // Overrides 'cellWordBreak' and explicitly forces wrapping to be disabled in the td (cell) + isHeaderWordWrap?: boolean; // Allows wrapping in the th (header), by default -- header fields are set to no-wrap } export type TableColumn = TableColumnConfiguration | string; From cde30f953e2c7acc1982fb996e6253382ad14fa3 Mon Sep 17 00:00:00 2001 From: Richard Dinh <1038306+flacoman91@users.noreply.github.com> Date: Tue, 7 Apr 2026 15:45:49 -0700 Subject: [PATCH 4/4] fixing a test --- src/components/Table/table.test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Table/table.test.tsx b/src/components/Table/table.test.tsx index 79f1537dbd..8bf8db1468 100644 --- a/src/components/Table/table.test.tsx +++ b/src/components/Table/table.test.tsx @@ -26,7 +26,7 @@ const columnsWithConfiguration = [ { header: 'Col 1', width: 30 }, 'Col 2', 'Col 3', - { header: 'Right Aligned', width: 40, alignRight: true }, + { header: 'Right Aligned', width: 40, isAlignRight: true }, ]; describe('
', () => {