Skip to content

Commit

Permalink
fix(TDOPS-2619): Align column chooser style with Design System (#4898)
Browse files Browse the repository at this point in the history 
* fix(TDOPS-2619): Align column chooser style with Design System

* MR Review to retrieve snapshots

* changeset

* Update packages/components/src/List/Toolbar/ColumnChooserButton/ColumnChooser/ColumnChooserRow/RowCheckbox/RowCheckbox.component.js

Co-authored-by: Alexandre Amalric <[email protected]>

---------

Co-authored-by: Alexandre Amalric <[email protected]>
  • Loading branch information
@Gbacc @aamalric-talend
Gbacc and aamalric-talend authored Sep 22, 2023
1 parent 387afd9 commit b60f5b5
Show file tree
Hide file tree
Showing 10 changed files with 228 additions and 239 deletions.
5 changes: 5 additions & 0 deletions .changeset/hot-chefs-trade.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@talend/react-components': patch
---

TDOPS-2619 - Align column chooser style with Design System
2 changes: 1 addition & 1 deletion ...onents/src/List/Toolbar/ColumnChooserButton/ColumnChooser/ColumnChooser.component.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -99,6 +99,6 @@ describe('ColumnChooser', () => {
// When
render(<Component {...props} />);
// Then
expect(document.querySelectorAll('svg[name="talend-locked"]')).toHaveLength(2);
expect(document.querySelectorAll('use[xlink:href="#locker-closed:M"]')).toHaveLength(2);
});
});
30 changes: 2 additions & 28 deletions ...s/components/src/List/Toolbar/ColumnChooserButton/ColumnChooser/ColumnChooser.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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;
}
}
}
151 changes: 75 additions & 76 deletions ...on/ColumnChooser/ColumnChooserBody/__snapshots__/ColumnChooserBody.component.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,25 +15,24 @@ exports[`ColumnChooserBody should render the columns rows and the column select
<div
class="tc-column-chooser-row theme-tc-column-chooser-row tc-column-chooser-row-select-all theme-tc-column-chooser-row-select-all theme-tc-column-chooser-row-select-all theme-tc-column-chooser-row-select-all"
>
<div
class="checkbox tc-checkbox"
<span
class="theme-checkbox"
>
<input
aria-checked="true"
aria-describedby="body-context-id-body-hide all the columns"
checked=""
data-feature="column-chooser.select.all"
id="body-context-id-body-checkbox-Unselect-all"
type="checkbox"
/>
<label
data-feature="column-chooser.select.all.disable"
class="theme-label theme-label_inline"
for="body-context-id-body-checkbox-Unselect-all"
>
<input
aria-describedby="body-context-id-body-hide all the columns"
checked=""
data-checked="2"
id="body-context-id-body-checkbox-Unselect-all"
type="checkbox"
/>
<span>
Unselect all
</span>
Unselect all
</label>
</div>
</span>
<div
class="sr-only"
id="body-context-id-body-hide all the columns"
Expand All @@ -49,12 +48,14 @@ exports[`ColumnChooserBody should render the columns rows and the column select
>
<svg
aria-hidden="true"
class="tc-svg-icon tc-icon theme-svg tc-column-chooser-row-locked-icon theme-tc-column-chooser-row-locked-icon tc-icon-name-talend-locked"
focusable="false"
name="talend-locked"
pointer-events="none"
shape-rendering="geometricPrecision"
/>
style="width: 1.6rem; height: 1.6rem;"
>
<use
xlink:href="#locker-closed:M"
/>
</svg>
<span
class="tc-column-chooser-row-label theme-tc-column-chooser-row-label"
>
Expand All @@ -66,12 +67,14 @@ exports[`ColumnChooserBody should render the columns rows and the column select
>
<svg
aria-hidden="true"
class="tc-svg-icon tc-icon theme-svg tc-column-chooser-row-locked-icon theme-tc-column-chooser-row-locked-icon tc-icon-name-talend-locked"
focusable="false"
name="talend-locked"
pointer-events="none"
shape-rendering="geometricPrecision"
/>
style="width: 1.6rem; height: 1.6rem;"
>
<use
xlink:href="#locker-closed:M"
/>
</svg>
<span
class="tc-column-chooser-row-label theme-tc-column-chooser-row-label"
>
Expand All @@ -81,25 +84,24 @@ exports[`ColumnChooserBody should render the columns rows and the column select
<div
class="tc-column-chooser-row theme-tc-column-chooser-row"
>
<div
class="checkbox tc-checkbox"
<span
class="theme-checkbox"
>
<input
aria-checked="true"
aria-describedby="body-context-id-body-display the column col3"
checked=""
data-feature="column-chooser.select"
id="body-context-id-body-checkbox-col3"
type="checkbox"
/>
<label
data-feature="column-chooser.select.disable"
class="theme-label theme-label_inline"
for="body-context-id-body-checkbox-col3"
>
<input
aria-describedby="body-context-id-body-display the column col3"
checked=""
data-checked="2"
id="body-context-id-body-checkbox-col3"
type="checkbox"
/>
<span>
col3
</span>
col3
</label>
</div>
</span>
<div
class="sr-only"
id="body-context-id-body-display the column col3"
Expand All @@ -110,24 +112,23 @@ exports[`ColumnChooserBody should render the columns rows and the column select
<div
class="tc-column-chooser-row theme-tc-column-chooser-row"
>
<div
class="checkbox tc-checkbox"
<span
class="theme-checkbox"
>
<input
aria-checked="false"
aria-describedby="body-context-id-body-display the column col4"
data-feature="column-chooser.select"
id="body-context-id-body-checkbox-col4"
type="checkbox"
/>
<label
data-feature="column-chooser.select.enable"
class="theme-label theme-label_inline"
for="body-context-id-body-checkbox-col4"
>
<input
aria-describedby="body-context-id-body-display the column col4"
data-checked="0"
id="body-context-id-body-checkbox-col4"
type="checkbox"
/>
<span>
col4
</span>
col4
</label>
</div>
</span>
<div
class="sr-only"
id="body-context-id-body-display the column col4"
Expand All @@ -138,25 +139,24 @@ exports[`ColumnChooserBody should render the columns rows and the column select
<div
class="tc-column-chooser-row theme-tc-column-chooser-row"
>
<div
class="checkbox tc-checkbox"
<span
class="theme-checkbox"
>
<input
aria-checked="true"
aria-describedby="body-context-id-body-display the column col5"
checked=""
data-feature="column-chooser.select"
id="body-context-id-body-checkbox-col5"
type="checkbox"
/>
<label
data-feature="column-chooser.select.disable"
class="theme-label theme-label_inline"
for="body-context-id-body-checkbox-col5"
>
<input
aria-describedby="body-context-id-body-display the column col5"
checked=""
data-checked="2"
id="body-context-id-body-checkbox-col5"
type="checkbox"
/>
<span>
col5
</span>
col5
</label>
</div>
</span>
<div
class="sr-only"
id="body-context-id-body-display the column col5"
Expand All @@ -167,24 +167,23 @@ exports[`ColumnChooserBody should render the columns rows and the column select
<div
class="tc-column-chooser-row theme-tc-column-chooser-row"
>
<div
class="checkbox tc-checkbox"
<span
class="theme-checkbox"
>
<input
aria-checked="false"
aria-describedby="body-context-id-body-display the column col6"
data-feature="column-chooser.select"
id="body-context-id-body-checkbox-col6"
type="checkbox"
/>
<label
data-feature="column-chooser.select.enable"
class="theme-label theme-label_inline"
for="body-context-id-body-checkbox-col6"
>
<input
aria-describedby="body-context-id-body-display the column col6"
data-checked="0"
id="body-context-id-body-checkbox-col6"
type="checkbox"
/>
<span>
col6
</span>
col6
</label>
</div>
</span>
<div
class="sr-only"
id="body-context-id-body-display the column col6"
Expand Down
17 changes: 7 additions & 10 deletions ...r/ColumnChooserButton/ColumnChooser/ColumnChooserRow/RowCheckbox/RowCheckbox.component.js
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,7 @@
import { Fragment } from 'react';
import PropTypes from 'prop-types';
import Icon from '../../../../../../Icon';
import RowLabel from '../RowLabel';
import cssModule from '../../ColumnChooser.module.scss';
import { getTheme } from '../../../../../../theme';
import Checkbox from '../../../../../../Checkbox';

const theme = getTheme(cssModule);
import { Form, SizedIcon } from '@talend/design-system';

const RowCheckbox = ({
dataFeature,
Expand All @@ -19,24 +14,26 @@ const RowCheckbox = ({
intermediate = false,
}) => {
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 ? (
<Fragment>
<Icon name="talend-locked" className={theme('tc-column-chooser-row-locked-icon')} />
<SizedIcon name="locker-closed" size="M"/>
<RowLabel label={label} />
</Fragment>
) : (
<Fragment>
<Checkbox
<Form.Checkbox
checked={checked}
data-feature={dataFeature}
aria-describedby={describedby}
id={`${id}-checkbox-${label.replace(/\s+/g, '-')}`}
label={label}
onChange={onChangeCheckbox}
intermediate={intermediate}
indeterminate={intermediate}
/>
<div id={describedby} className="sr-only">
{description}
Expand Down
2 changes: 1 addition & 1 deletion ...umnChooserButton/ColumnChooser/ColumnChooserRow/RowCheckbox/RowCheckbox.component.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ describe('RowCheckBox', () => {
// When
render(<Component {...props} />);
// 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
Expand Down
25 changes: 12 additions & 13 deletions ...lumnChooser/ColumnChooserRow/RowCheckbox/__snapshots__/RowCheckbox.component.test.js.snap
View file
Original file line number Diff line number Diff line change
@@ -1,22 +1,21 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`RowCheckBox should render a checked checkbox input by default 1`] = `
<div
class="checkbox tc-checkbox"
<span
class="theme-checkbox"
>
<input
aria-checked="false"
aria-describedby="some-id-this is my checkbox"
data-feature="my-feature"
id="some-id-checkbox-column-label"
type="checkbox"
/>
<label
data-feature="my-feature.enable"
class="theme-label theme-label_inline"
for="some-id-checkbox-column-label"
>
<input
aria-describedby="some-id-this is my checkbox"
data-checked="0"
id="some-id-checkbox-column-label"
type="checkbox"
/>
<span>
column-label
</span>
column-label
</label>
</div>
</span>
`;
Loading

0 comments on commit b60f5b5

Please sign in to comment.