diff --git a/.changeset/hot-chefs-trade.md b/.changeset/hot-chefs-trade.md new file mode 100644 index 00000000000..630152aa910 --- /dev/null +++ b/.changeset/hot-chefs-trade.md @@ -0,0 +1,5 @@ +--- +'@talend/react-components': patch +--- + +TDOPS-2619 - Align column chooser style with Design System diff --git a/packages/components/src/List/Toolbar/ColumnChooserButton/ColumnChooser/ColumnChooser.component.test.js b/packages/components/src/List/Toolbar/ColumnChooserButton/ColumnChooser/ColumnChooser.component.test.js index feaa39fe458..e22cbe93514 100644 --- a/packages/components/src/List/Toolbar/ColumnChooserButton/ColumnChooser/ColumnChooser.component.test.js +++ b/packages/components/src/List/Toolbar/ColumnChooserButton/ColumnChooser/ColumnChooser.component.test.js @@ -99,6 +99,6 @@ describe('ColumnChooser', () => { // When render(); // Then - expect(document.querySelectorAll('svg[name="talend-locked"]')).toHaveLength(2); + expect(document.querySelectorAll('use[xlink:href="#locker-closed:M"]')).toHaveLength(2); }); }); diff --git a/packages/components/src/List/Toolbar/ColumnChooserButton/ColumnChooser/ColumnChooser.module.scss b/packages/components/src/List/Toolbar/ColumnChooserButton/ColumnChooser/ColumnChooser.module.scss index 21cc79f72ab..073d28f73fa 100644 --- a/packages/components/src/List/Toolbar/ColumnChooserButton/ColumnChooser/ColumnChooser.module.scss +++ b/packages/components/src/List/Toolbar/ColumnChooserButton/ColumnChooser/ColumnChooser.module.scss @@ -2,7 +2,6 @@ @use '~@talend/design-tokens/lib/tokens'; $tc-popover-border-width: 0.1rem !default; -$tc-icon-size: 1.2rem !default; $tc-height: 4rem; .tc-column-chooser { @@ -58,33 +57,8 @@ $tc-height: 4rem; background: tokens.$coral-color-neutral-background-medium; } - :global(.checkbox.tc-toggle) { - display: flex; - margin-bottom: 0; - } - - &-label, - :global(.checkbox.tc-toggle > label span) { - font-size: 1.4rem; - padding-left: $padding-normal; - } - - :global(.checkbox.tc-toggle > label) { - padding-left: $padding-normal; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - max-width: 21rem; - margin-bottom: 0; - } - - :global(.tc-checkbox) { - word-break: break-all; - } - - &-locked-icon { - height: $tc-icon-size; - width: $tc-icon-size; + &-label { + padding-left: tokens.$coral-spacing-xs; } } } diff --git a/packages/components/src/List/Toolbar/ColumnChooserButton/ColumnChooser/ColumnChooserBody/__snapshots__/ColumnChooserBody.component.test.js.snap b/packages/components/src/List/Toolbar/ColumnChooserButton/ColumnChooser/ColumnChooserBody/__snapshots__/ColumnChooserBody.component.test.js.snap index 4abe3e11176..03f3faf47de 100644 --- a/packages/components/src/List/Toolbar/ColumnChooserButton/ColumnChooser/ColumnChooserBody/__snapshots__/ColumnChooserBody.component.test.js.snap +++ b/packages/components/src/List/Toolbar/ColumnChooserButton/ColumnChooser/ColumnChooserBody/__snapshots__/ColumnChooserBody.component.test.js.snap @@ -15,25 +15,24 @@ exports[`ColumnChooserBody should render the columns rows and the column select
-
+ -
+
+ style="width: 1.6rem; height: 1.6rem;" + > + + @@ -66,12 +67,14 @@ exports[`ColumnChooserBody should render the columns rows and the column select > + style="width: 1.6rem; height: 1.6rem;" + > + + @@ -81,25 +84,24 @@ exports[`ColumnChooserBody should render the columns rows and the column select
-
+ -
+
-
+ -
+
-
+ -
+
-
+ -
+
{ const onChangeCheckbox = event => { - onChange(event.target.checked, label); + // Force to pass a checked state in case of intermediate checkbox + const checkedState = intermediate ? true : event.target.checked; + onChange(checkedState, label); }; const describedby = `${id}-${description}`; return locked ? ( - + ) : ( -
{description} diff --git a/packages/components/src/List/Toolbar/ColumnChooserButton/ColumnChooser/ColumnChooserRow/RowCheckbox/RowCheckbox.component.test.js b/packages/components/src/List/Toolbar/ColumnChooserButton/ColumnChooser/ColumnChooserRow/RowCheckbox/RowCheckbox.component.test.js index bf709b3726f..8e94e99dadf 100644 --- a/packages/components/src/List/Toolbar/ColumnChooserButton/ColumnChooser/ColumnChooserRow/RowCheckbox/RowCheckbox.component.test.js +++ b/packages/components/src/List/Toolbar/ColumnChooserButton/ColumnChooser/ColumnChooserRow/RowCheckbox/RowCheckbox.component.test.js @@ -35,7 +35,7 @@ describe('RowCheckBox', () => { // When render(); // Then - expect(document.querySelectorAll('svg[name="talend-locked"]')).toHaveLength(1); + expect(document.querySelectorAll('use[xlink:href="#locker-closed:M"]')).toHaveLength(1); }); it('should call the onClick when checkbox trigger change', () => { // Given diff --git a/packages/components/src/List/Toolbar/ColumnChooserButton/ColumnChooser/ColumnChooserRow/RowCheckbox/__snapshots__/RowCheckbox.component.test.js.snap b/packages/components/src/List/Toolbar/ColumnChooserButton/ColumnChooser/ColumnChooserRow/RowCheckbox/__snapshots__/RowCheckbox.component.test.js.snap index 05250f4c847..46b2ffc04d3 100644 --- a/packages/components/src/List/Toolbar/ColumnChooserButton/ColumnChooser/ColumnChooserRow/RowCheckbox/__snapshots__/RowCheckbox.component.test.js.snap +++ b/packages/components/src/List/Toolbar/ColumnChooserButton/ColumnChooser/ColumnChooserRow/RowCheckbox/__snapshots__/RowCheckbox.component.test.js.snap @@ -1,22 +1,21 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`RowCheckBox should render a checked checkbox input by default 1`] = ` -
+ -
+ `; diff --git a/packages/components/src/List/Toolbar/ColumnChooserButton/ColumnChooser/SelectAllColumnsCheckbox/SelectAllColumnsCheckbox.component.test.js b/packages/components/src/List/Toolbar/ColumnChooserButton/ColumnChooser/SelectAllColumnsCheckbox/SelectAllColumnsCheckbox.component.test.js index 0d5cae9cc0b..98802005666 100644 --- a/packages/components/src/List/Toolbar/ColumnChooserButton/ColumnChooser/SelectAllColumnsCheckbox/SelectAllColumnsCheckbox.component.test.js +++ b/packages/components/src/List/Toolbar/ColumnChooserButton/ColumnChooser/SelectAllColumnsCheckbox/SelectAllColumnsCheckbox.component.test.js @@ -3,6 +3,8 @@ import userEvent from '@testing-library/user-event'; import getDefaultT from '../../../../../translate'; import Component from './SelectAllColumnsCheckbox.component'; +jest.unmock('@talend/design-system'); + describe('SelectAllColumnsCheckbox', () => { it('should render by default', () => { // given @@ -16,7 +18,7 @@ describe('SelectAllColumnsCheckbox', () => { // then expect(container.firstChild).toMatchSnapshot(); }); - it('should call the onSelectAll when onChange is triggered on the column chooser table', () => { + it('should call the onSelectAll when onChange is triggered by a checked checkbox', () => { // Given const onChange = jest.fn(); const props = { @@ -33,4 +35,23 @@ describe('SelectAllColumnsCheckbox', () => { // Then expect(onChange).toHaveBeenNthCalledWith(1, false, 'Unselect all'); }); + + it('should call the onSelectAll when onChange is triggered by an indeterminate checkbox', () => { + // Given + const onChange = jest.fn(); + const props = { + id: 'select-all-id', + onChange, + value: undefined, + indeterminate: true, + t: getDefaultT(), + }; + + // When + render(); + userEvent.click(screen.getByRole('checkbox')); + + // Then + expect(onChange).toHaveBeenNthCalledWith(1, true, 'Select all'); + }); }); diff --git a/packages/components/src/List/Toolbar/ColumnChooserButton/ColumnChooser/SelectAllColumnsCheckbox/__snapshots__/SelectAllColumnsCheckbox.component.test.js.snap b/packages/components/src/List/Toolbar/ColumnChooserButton/ColumnChooser/SelectAllColumnsCheckbox/__snapshots__/SelectAllColumnsCheckbox.component.test.js.snap index c83b7fafa46..c58c78d151e 100644 --- a/packages/components/src/List/Toolbar/ColumnChooserButton/ColumnChooser/SelectAllColumnsCheckbox/__snapshots__/SelectAllColumnsCheckbox.component.test.js.snap +++ b/packages/components/src/List/Toolbar/ColumnChooserButton/ColumnChooser/SelectAllColumnsCheckbox/__snapshots__/SelectAllColumnsCheckbox.component.test.js.snap @@ -4,24 +4,24 @@ exports[`SelectAllColumnsCheckbox should render by default 1`] = `
-
+ -
+
-
+ -
+
-
+ -
+
-
+ -
+
-
+ -
+
-
+ -
+
-
+ -
+
-
+ -
+