From db2f6da901509bfee64940367a85870c5f2ec94c Mon Sep 17 00:00:00 2001 From: Christian Burtchen Date: Tue, 9 Apr 2024 11:22:07 +0200 Subject: [PATCH 1/8] change initialsortedrow to initialsortedcolumn for the table props --- .../components/Table/Table.spec.tsx | 8 ++--- .../circuit-ui/components/Table/Table.tsx | 32 +++++++++---------- .../Table/components/TableHead/TableHead.tsx | 12 +++---- packages/circuit-ui/components/Table/utils.ts | 12 +++---- 4 files changed, 32 insertions(+), 32 deletions(-) diff --git a/packages/circuit-ui/components/Table/Table.spec.tsx b/packages/circuit-ui/components/Table/Table.spec.tsx index 2f8c3141bc..16b02269bd 100644 --- a/packages/circuit-ui/components/Table/Table.spec.tsx +++ b/packages/circuit-ui/components/Table/Table.spec.tsx @@ -113,13 +113,13 @@ describe('Table', () => { }); }); - it('should sort a column in ascending order when initial sort direction and initial sorted row is provided', () => { + it('should sort a column in ascending order when initial sort direction and initial sorted column is provided', () => { render( , ); @@ -151,13 +151,13 @@ describe('Table', () => { }); }); - it('should sort a column in descending order when initial sort direction and initial sorted row is provided', () => { + it('should sort a column in descending order when initial sort direction and initial sorted column is provided', () => { render(
, ); diff --git a/packages/circuit-ui/components/Table/Table.tsx b/packages/circuit-ui/components/Table/Table.tsx index 2b30334045..6a73a68da0 100644 --- a/packages/circuit-ui/components/Table/Table.tsx +++ b/packages/circuit-ui/components/Table/Table.tsx @@ -1,5 +1,5 @@ /** - * Copyright 2019, SumUp Ltd. + * Copyright 2024, SumUp Ltd. * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at @@ -68,9 +68,9 @@ export interface TableProps extends HTMLAttributes { */ initialSortDirection?: 'ascending' | 'descending'; /** - * Specifies the row index which `initialSortDirection` will be applied to + * Specifies the column index which `initialSortDirection` will be applied to */ - initialSortedRow?: number; + initialSortedColumn?: number; /** * Click handler for the row * The signature is (index) @@ -83,7 +83,7 @@ export interface TableProps extends HTMLAttributes { } type TableState = { - sortedRow?: number; + sortedColumn?: number; rows?: Row[]; sortHover?: number; sortDirection?: Direction; @@ -98,11 +98,11 @@ class Table extends Component { constructor(props: TableProps) { super(props); this.state = { - sortedRow: this.props.initialSortedRow, + sortedColumn: this.props.initialSortedColumn, rows: this.getInitialRows( this.props.rows, this.props.initialSortDirection, - this.props.initialSortedRow, + this.props.initialSortedColumn, ), sortHover: undefined, sortDirection: this.props.initialSortDirection, @@ -122,10 +122,10 @@ class Table extends Component { componentDidUpdate(prevProps: TableProps): void { if (this.props.rows !== prevProps.rows) { // Preserve existing sorting - if (this.state.sortedRow && this.state.sortDirection) { + if (this.state.sortedColumn && this.state.sortDirection) { const sortedRows = this.getSortedRows( this.state.sortDirection, - this.state.sortedRow, + this.state.sortedColumn, ); this.setState({ rows: sortedRows }); return; @@ -177,8 +177,8 @@ class Table extends Component { onSortLeave = (): void => this.setState({ sortHover: undefined }); onSortBy = (i: number): void => { - const { sortedRow, sortDirection } = this.state; - const isActive = i === sortedRow; + const { sortedColumn, sortDirection } = this.state; + const isActive = i === sortedColumn; const nextDirection = getSortDirection(isActive, sortDirection); const sortedRows = this.getSortedRows(nextDirection, i); @@ -188,10 +188,10 @@ class Table extends Component { getInitialRows = ( rows: Row[], initialSortDirection?: Direction | undefined, - initialSortedRow?: number | undefined, + initialSortedColumn?: number | undefined, ): Row[] => { - if (initialSortedRow && initialSortDirection) { - return this.getSortedRows(initialSortDirection, initialSortedRow); + if (initialSortedColumn && initialSortDirection) { + return this.getSortedRows(initialSortDirection, initialSortedColumn); } return rows; }; @@ -205,7 +205,7 @@ class Table extends Component { updateSort = (i: number, nextDirection: Direction, sortedRows: Row[]): void => this.setState({ - sortedRow: i, + sortedColumn: i, sortDirection: nextDirection, rows: sortedRows, }); @@ -231,7 +231,7 @@ class Table extends Component { const { sortDirection, sortHover, - sortedRow, + sortedColumn, scrollTop, tableBodyHeight, rows, @@ -267,7 +267,7 @@ class Table extends Component { condensed={condensed} scrollable={scrollable} sortDirection={sortDirection} - sortedRow={sortedRow} + sortedColumn={sortedColumn} onSortBy={this.onSortBy} onSortEnter={this.onSortEnter} onSortLeave={this.onSortLeave} diff --git a/packages/circuit-ui/components/Table/components/TableHead/TableHead.tsx b/packages/circuit-ui/components/Table/components/TableHead/TableHead.tsx index d322921ea4..8285151ff8 100644 --- a/packages/circuit-ui/components/Table/components/TableHead/TableHead.tsx +++ b/packages/circuit-ui/components/Table/components/TableHead/TableHead.tsx @@ -1,5 +1,5 @@ /** - * Copyright 2019, SumUp Ltd. + * Copyright 2024, SumUp Ltd. * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at @@ -63,9 +63,9 @@ type TableHeadProps = ScrollableOptions & { */ sortDirection?: Direction; /** - * The current sorted row index + * The current sorted column index */ - sortedRow?: number; + sortedColumn?: number; /** * sortEnter handler */ @@ -87,7 +87,7 @@ export function TableHead({ top, onSortBy, sortDirection, - sortedRow, + sortedColumn, onSortEnter, onSortLeave, }: TableHeadProps) { @@ -105,11 +105,11 @@ export function TableHead({ const cellProps = mapCellProps(header); const { sortable, sortLabel } = cellProps; const sortParams = getSortParams({ - rowIndex: i, + columnIndex: i, sortable, sortDirection, sortLabel, - sortedRow, + sortedColumn, }); return ( diff --git a/packages/circuit-ui/components/Table/utils.ts b/packages/circuit-ui/components/Table/utils.ts index bfcbadf687..7907565161 100644 --- a/packages/circuit-ui/components/Table/utils.ts +++ b/packages/circuit-ui/components/Table/utils.ts @@ -1,5 +1,5 @@ /** - * Copyright 2019, SumUp Ltd. + * Copyright 2024, SumUp Ltd. * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at @@ -118,22 +118,22 @@ export const descendingSort = }; export const getSortParams = ({ - rowIndex, + columnIndex, sortable, sortDirection, sortLabel, - sortedRow, + sortedColumn, }: { - rowIndex: number; + columnIndex: number; sortable?: boolean; sortDirection?: Direction; sortLabel?: string | (({ direction }: { direction?: Direction }) => string); - sortedRow?: number; + sortedColumn?: number; }): SortParams => { if (!sortable || !sortLabel) { return { sortable: false }; } - const isSorted = sortedRow === rowIndex; + const isSorted = sortedColumn === columnIndex; return { sortable: true, sortLabel: isFunction(sortLabel) From e0e5298d2541baa8906d3f8403d947f38dbbd961 Mon Sep 17 00:00:00 2001 From: Christian Burtchen Date: Tue, 9 Apr 2024 11:51:00 +0200 Subject: [PATCH 2/8] fix tests --- packages/circuit-ui/components/Table/utils.spec.ts | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/circuit-ui/components/Table/utils.spec.ts b/packages/circuit-ui/components/Table/utils.spec.ts index 4db65db317..0b3773342a 100644 --- a/packages/circuit-ui/components/Table/utils.spec.ts +++ b/packages/circuit-ui/components/Table/utils.spec.ts @@ -182,7 +182,7 @@ describe('Table utils', () => { describe('getSortParams', () => { it('should return sort params with a string sortLabel', () => { const actual = utils.getSortParams({ - rowIndex: 1, + columnIndex: 1, sortable: true, sortLabel: 'Sort', }); @@ -201,7 +201,7 @@ describe('Table utils', () => { return `Sort in ${order} order`; }; const actual = utils.getSortParams({ - rowIndex: 1, + columnIndex: 1, sortable: true, sortLabel, }); @@ -220,8 +220,8 @@ describe('Table utils', () => { return `Sort in ${order} order`; }; const actual = utils.getSortParams({ - rowIndex: 1, - sortedRow: 1, + columnIndex: 1, + sortedColumn: 1, sortable: true, sortDirection: 'descending', sortLabel, @@ -237,14 +237,14 @@ describe('Table utils', () => { }); it('should return sortable:false if sortable is falsy', () => { - const actual = utils.getSortParams({ rowIndex: 0 }); + const actual = utils.getSortParams({ columnIndex: 0 }); const expected = { sortable: false }; expect(actual).toEqual(expected); }); it('should return sortable:false if sortLabel is falsy', () => { - const actual = utils.getSortParams({ rowIndex: 0, sortable: true }); + const actual = utils.getSortParams({ columnIndex: 0, sortable: true }); const expected = { sortable: false }; expect(actual).toEqual(expected); From de8bd208e86198e607e52d6e0c3e5555a71a9bf7 Mon Sep 17 00:00:00 2001 From: Christian Burtchen Date: Thu, 11 Apr 2024 11:27:47 +0200 Subject: [PATCH 3/8] deprecate rather than remove initialSortedRow --- .../components/Table/Table.spec.tsx | 47 +++++++++++++++++++ .../circuit-ui/components/Table/Table.tsx | 27 +++++++---- 2 files changed, 66 insertions(+), 8 deletions(-) diff --git a/packages/circuit-ui/components/Table/Table.spec.tsx b/packages/circuit-ui/components/Table/Table.spec.tsx index 16b02269bd..473d192aa2 100644 --- a/packages/circuit-ui/components/Table/Table.spec.tsx +++ b/packages/circuit-ui/components/Table/Table.spec.tsx @@ -134,6 +134,30 @@ describe('Table', () => { }); }); + it('should sort a column in ascending order when initial sort direction and initial sorted row is provided and console.warn about it', () => { + const warnMock = vi.spyOn(console, 'warn'); + + render( +
, + ); + + const cellEls = screen.getAllByRole('cell'); + + const sortedRow = ['a', 'c', 'b']; + + rows.forEach((_row, index) => { + const cellIndex = rowLength * index; + expect(cellEls[cellIndex]).toHaveTextContent(sortedRow[index]); + }); + expect(warnMock).toHaveBeenCalled(); + }); + it('should sort a column in descending order', async () => { render(
); @@ -172,6 +196,29 @@ describe('Table', () => { }); }); + it('should sort a column in descending order when initial sort direction and initial sorted row is provided and warn about it', () => { + const warnMock = vi.spyOn(console, 'warn'); + render( +
, + ); + + const cellEls = screen.getAllByRole('cell'); + + const sortedRow = ['b', 'c', 'a']; + + rows.forEach((_row, index) => { + const cellIndex = rowLength * index; + expect(cellEls[cellIndex]).toHaveTextContent(sortedRow[index]); + }); + expect(warnMock).toHaveBeenCalled(); + }); + it('should call a custom sort callback', async () => { const onSortByMock = vi.fn(); const index = 0; diff --git a/packages/circuit-ui/components/Table/Table.tsx b/packages/circuit-ui/components/Table/Table.tsx index 6a73a68da0..64e409c069 100644 --- a/packages/circuit-ui/components/Table/Table.tsx +++ b/packages/circuit-ui/components/Table/Table.tsx @@ -67,6 +67,13 @@ export interface TableProps extends HTMLAttributes { * Specifies the initial sort order of the table */ initialSortDirection?: 'ascending' | 'descending'; + /** + * Specifies the wrongly-named column index which `initialSortDirection` will be applied to + */ + /** + * @deprecated + */ + initialSortedRow?: number; /** * Specifies the column index which `initialSortDirection` will be applied to */ @@ -97,12 +104,18 @@ type TableState = { class Table extends Component { constructor(props: TableProps) { super(props); + if (this.props.initialSortedRow) { + console.warn( + 'The prop initialSortedRow is deprecated and will be removed in a future version of circuit UI. Please use initialSortedColumn instead.', + ); + } this.state = { - sortedColumn: this.props.initialSortedColumn, + sortedColumn: + this.props.initialSortedColumn || this.props.initialSortedRow, rows: this.getInitialRows( this.props.rows, this.props.initialSortDirection, - this.props.initialSortedColumn, + this.props.initialSortedColumn || this.props.initialSortedRow, ), sortHover: undefined, sortDirection: this.props.initialSortDirection, @@ -189,12 +202,10 @@ class Table extends Component { rows: Row[], initialSortDirection?: Direction | undefined, initialSortedColumn?: number | undefined, - ): Row[] => { - if (initialSortedColumn && initialSortDirection) { - return this.getSortedRows(initialSortDirection, initialSortedColumn); - } - return rows; - }; + ): Row[] => + initialSortedColumn && initialSortDirection + ? this.getSortedRows(initialSortDirection, initialSortedColumn) + : rows; getSortedRows = (sortDirection: Direction, sortedRow: number): Row[] => { const { rows, onSortBy } = this.props; From 6994d87331befdce1a7cd49ed5fe8565d9f83a80 Mon Sep 17 00:00:00 2001 From: Christian Burtchen Date: Thu, 11 Apr 2024 13:04:24 +0200 Subject: [PATCH 4/8] use proper deprecate function --- .../components/Table/Table.spec.tsx | 23 ------------------- .../circuit-ui/components/Table/Table.tsx | 6 +++-- 2 files changed, 4 insertions(+), 25 deletions(-) diff --git a/packages/circuit-ui/components/Table/Table.spec.tsx b/packages/circuit-ui/components/Table/Table.spec.tsx index 473d192aa2..0b827e7b77 100644 --- a/packages/circuit-ui/components/Table/Table.spec.tsx +++ b/packages/circuit-ui/components/Table/Table.spec.tsx @@ -196,29 +196,6 @@ describe('Table', () => { }); }); - it('should sort a column in descending order when initial sort direction and initial sorted row is provided and warn about it', () => { - const warnMock = vi.spyOn(console, 'warn'); - render( -
, - ); - - const cellEls = screen.getAllByRole('cell'); - - const sortedRow = ['b', 'c', 'a']; - - rows.forEach((_row, index) => { - const cellIndex = rowLength * index; - expect(cellEls[cellIndex]).toHaveTextContent(sortedRow[index]); - }); - expect(warnMock).toHaveBeenCalled(); - }); - it('should call a custom sort callback', async () => { const onSortByMock = vi.fn(); const index = 0; diff --git a/packages/circuit-ui/components/Table/Table.tsx b/packages/circuit-ui/components/Table/Table.tsx index 64e409c069..b5e38b54b0 100644 --- a/packages/circuit-ui/components/Table/Table.tsx +++ b/packages/circuit-ui/components/Table/Table.tsx @@ -20,6 +20,7 @@ import { Component, createRef, HTMLAttributes, UIEvent } from 'react'; import { isNil } from '../../util/type-check.js'; import { throttle } from '../../util/helpers.js'; import { clsx } from '../../styles/clsx.js'; +import { deprecate } from '../../util/logger.js'; import TableHead from './components/TableHead/index.js'; import TableBody from './components/TableBody/index.js'; @@ -104,8 +105,9 @@ type TableState = { class Table extends Component { constructor(props: TableProps) { super(props); - if (this.props.initialSortedRow) { - console.warn( + if (process.env.NODE_ENV !== 'production' && this.props.initialSortedRow) { + deprecate( + 'Table', 'The prop initialSortedRow is deprecated and will be removed in a future version of circuit UI. Please use initialSortedColumn instead.', ); } From cf014e7c11a8af2c281b7a98c9d8ee28fabaacd9 Mon Sep 17 00:00:00 2001 From: Burtchen Date: Thu, 11 Apr 2024 13:08:14 +0200 Subject: [PATCH 5/8] Create slimy-carpets-tease.md changeset --- .changeset/slimy-carpets-tease.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/slimy-carpets-tease.md diff --git a/.changeset/slimy-carpets-tease.md b/.changeset/slimy-carpets-tease.md new file mode 100644 index 0000000000..564b174d3d --- /dev/null +++ b/.changeset/slimy-carpets-tease.md @@ -0,0 +1,5 @@ +--- +"@sumup/circuit-ui": patch +--- + +deprecate initialSortedRow in favour of initialSortedColumn for table props From b041fb7394622adab08e07f566015c72148778f2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Connor=20B=C3=A4r?= Date: Mon, 15 Apr 2024 11:00:52 +0200 Subject: [PATCH 6/8] Improve the changeset --- .changeset/slimy-carpets-tease.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/.changeset/slimy-carpets-tease.md b/.changeset/slimy-carpets-tease.md index 564b174d3d..33d943c868 100644 --- a/.changeset/slimy-carpets-tease.md +++ b/.changeset/slimy-carpets-tease.md @@ -1,5 +1,5 @@ --- -"@sumup/circuit-ui": patch +'@sumup/circuit-ui': minor --- -deprecate initialSortedRow in favour of initialSortedColumn for table props +Renamed the Table's `initialSortedRow` prop to `initialSortedColumn` to better express its purpose. The `initialSortedRow` is deprecated and will be removed in the next major release. From 2dd74b63bbb991bd22b738f6edd009fa9d4dd8bd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Connor=20B=C3=A4r?= Date: Mon, 15 Apr 2024 11:02:16 +0200 Subject: [PATCH 7/8] Revert copyright year --- packages/circuit-ui/components/Table/Table.tsx | 2 +- .../components/Table/components/TableHead/TableHead.tsx | 2 +- packages/circuit-ui/components/Table/utils.ts | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/circuit-ui/components/Table/Table.tsx b/packages/circuit-ui/components/Table/Table.tsx index b5e38b54b0..3b8dea5e19 100644 --- a/packages/circuit-ui/components/Table/Table.tsx +++ b/packages/circuit-ui/components/Table/Table.tsx @@ -1,5 +1,5 @@ /** - * Copyright 2024, SumUp Ltd. + * Copyright 2019, SumUp Ltd. * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at diff --git a/packages/circuit-ui/components/Table/components/TableHead/TableHead.tsx b/packages/circuit-ui/components/Table/components/TableHead/TableHead.tsx index 8285151ff8..9752bdca81 100644 --- a/packages/circuit-ui/components/Table/components/TableHead/TableHead.tsx +++ b/packages/circuit-ui/components/Table/components/TableHead/TableHead.tsx @@ -1,5 +1,5 @@ /** - * Copyright 2024, SumUp Ltd. + * Copyright 2019, SumUp Ltd. * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at diff --git a/packages/circuit-ui/components/Table/utils.ts b/packages/circuit-ui/components/Table/utils.ts index 7907565161..64b9e681a5 100644 --- a/packages/circuit-ui/components/Table/utils.ts +++ b/packages/circuit-ui/components/Table/utils.ts @@ -1,5 +1,5 @@ /** - * Copyright 2024, SumUp Ltd. + * Copyright 2019, SumUp Ltd. * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at From b303b17da21de526e55af57b1a88cdae6da1f074 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Connor=20B=C3=A4r?= Date: Mon, 15 Apr 2024 11:08:13 +0200 Subject: [PATCH 8/8] Improve deprecation notice --- packages/circuit-ui/components/Table/Table.tsx | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/packages/circuit-ui/components/Table/Table.tsx b/packages/circuit-ui/components/Table/Table.tsx index 3b8dea5e19..8b11a61725 100644 --- a/packages/circuit-ui/components/Table/Table.tsx +++ b/packages/circuit-ui/components/Table/Table.tsx @@ -68,11 +68,10 @@ export interface TableProps extends HTMLAttributes { * Specifies the initial sort order of the table */ initialSortDirection?: 'ascending' | 'descending'; - /** - * Specifies the wrongly-named column index which `initialSortDirection` will be applied to - */ /** * @deprecated + * + * Use the `initialSortedColumn` prop instead. */ initialSortedRow?: number; /** @@ -108,7 +107,7 @@ class Table extends Component { if (process.env.NODE_ENV !== 'production' && this.props.initialSortedRow) { deprecate( 'Table', - 'The prop initialSortedRow is deprecated and will be removed in a future version of circuit UI. Please use initialSortedColumn instead.', + 'The `initialSortedRow` prop has been deprecated. Use the `initialSortedColumn` prop instead.', ); } this.state = {