Skip to content

Commit df73398

Browse files
rvsiarvsia
committed
Update carbon dual list
1 parent f024369 commit df73398

File tree

4 files changed

+53
-48
lines changed

4 files changed

+53
-48
lines changed

‎packages/carbon-component-mapper/src/files/dual-list-select.d.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,6 @@ interface InternalDualListSelectProps {
5050
OptionsColumnProps?: ColumnDefaultProps;
5151
ButtonColumnProps?: ColumnDefaultProps;
5252
ValuesColumnProps?: ColumnDefaultProps;
53-
ButtonSetProps?: React.HTMLProps<HTMLDivElement>;
5453
AddButtonProps?: ButtonProps;
5554
AddAllButtonProps?: ButtonProps;
5655
RemoveButtonProps?: ButtonProps;

‎packages/carbon-component-mapper/src/files/dual-list-select.js‎

Lines changed: 30 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,6 @@ import {
1212
StructuredListRow,
1313
StructuredListCell,
1414
Button,
15-
ButtonSet,
1615
FormGroup,
1716
Search,
1817
TooltipIcon
@@ -73,7 +72,12 @@ List.propTypes = {
7372
const Toolbar = ({ sortTitle, onFilter, onSort, sortDirection, placeholder, ToolbarProps, SearchProps, SortProps }) => (
7473
<div {...ToolbarProps} className={clsx('ddorg__carbon-dual-list-toolbar', ToolbarProps.className)}>
7574
<Search onChange={(e) => onFilter(e.target.value)} labelText="" placeHolderText={placeholder} {...SearchProps} />
76-
<TooltipIcon onClick={onSort} tooltipText={sortTitle} {...SortProps}>
75+
<TooltipIcon
76+
onClick={onSort}
77+
tooltipText={sortTitle}
78+
{...SortProps}
79+
className={clsx('ddorg__carbon-dual-list-tooltipbutton', SortProps.className)}
80+
>
7781
{sortDirection ? <CaretSortDown32 /> : <CaretSortUp32 />}
7882
</TooltipIcon>
7983
</div>
@@ -131,7 +135,6 @@ const DualListSelectInner = ({
131135
OptionsColumnProps,
132136
ButtonColumnProps,
133137
ValuesColumnProps,
134-
ButtonSetProps,
135138
AddButtonProps,
136139
AddAllButtonProps,
137140
RemoveButtonProps,
@@ -172,20 +175,30 @@ const DualListSelectInner = ({
172175
/>
173176
</Column>
174177
<Column sm={4} md={8} lg={2} {...ButtonColumnProps} className={clsx('ddorg__carbon-dual-list-button-wrapper', ButtonColumnProps.className)}>
175-
<ButtonSet {...ButtonSetProps} className={clsx('ddorg__carbon-dual-list-button-set', ButtonSetProps.className)}>
176-
<Button renderIcon={ChevronRight32} onClick={handleMoveRight} disabled={isEmpty(state.selectedLeftValues)} {...AddButtonProps}>
177-
{moveRightTitle}
178-
</Button>
179-
<Button onClick={handleClearLeftValues} disabled={isEmpty(leftValues)} {...AddAllButtonProps}>
180-
{moveAllRightTitle}
181-
</Button>
182-
<Button renderIcon={ChevronLeft32} onClick={handleMoveLeft} disabled={isEmpty(state.selectedRightValues)} {...RemoveButtonProps}>
183-
{moveLeftTitle}
184-
</Button>
185-
<Button onClick={handleClearRightValues} disabled={isEmpty(rightValues)} {...RemoveAllButtonProps}>
186-
{moveAllLeftTitle}
187-
</Button>
188-
</ButtonSet>
178+
<Button
179+
id="move-right"
180+
renderIcon={ChevronRight32}
181+
onClick={handleMoveRight}
182+
disabled={isEmpty(state.selectedLeftValues)}
183+
{...AddButtonProps}
184+
>
185+
{moveRightTitle}
186+
</Button>
187+
<Button id="move-all-right" onClick={handleClearLeftValues} disabled={isEmpty(leftValues)} {...AddAllButtonProps}>
188+
{moveAllRightTitle}
189+
</Button>
190+
<Button id="move-all-left" onClick={handleClearRightValues} disabled={isEmpty(rightValues)} {...RemoveAllButtonProps}>
191+
{moveAllLeftTitle}
192+
</Button>
193+
<Button
194+
id="move-left"
195+
renderIcon={ChevronLeft32}
196+
onClick={handleMoveLeft}
197+
disabled={isEmpty(state.selectedRightValues)}
198+
{...RemoveButtonProps}
199+
>
200+
{moveLeftTitle}
201+
</Button>
189202
</Column>
190203
<Column sm={4} md={8} lg={5} {...ValuesColumnProps}>
191204
{React.createElement(RightTitleElement, RightTitleProps, rightTitle)}
@@ -252,7 +265,6 @@ DualListSelectInner.propTypes = {
252265
OptionsColumnProps: PropTypes.object,
253266
ButtonColumnProps: PropTypes.object,
254267
ValuesColumnProps: PropTypes.object,
255-
ButtonSetProps: PropTypes.object,
256268
AddButtonProps: PropTypes.object,
257269
AddAllButtonProps: PropTypes.object,
258270
RemoveButtonProps: PropTypes.object,
@@ -292,7 +304,6 @@ DualListSelectInner.defaultProps = {
292304
OptionsColumnProps: {},
293305
ButtonColumnProps: {},
294306
ValuesColumnProps: {},
295-
ButtonSetProps: {},
296307
AddButtonProps: {},
297308
AddAllButtonProps: {},
298309
RemoveButtonProps: {},

‎packages/carbon-component-mapper/src/files/dual-list-select.scss‎

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -10,22 +10,26 @@
1010
display: inline-table;
1111
}
1212

13+
1314
.ddorg__carbon-dual-list-button-wrapper {
15+
flex-direction: column;
1416
padding: 8px !important;
15-
}
17+
padding-top: 8px !important;
1618

17-
@media (min-width: 768px) {
18-
.ddorg__carbon-dual-list-button-set {
19-
flex-direction: column;
19+
button {
20+
width: 100%;
21+
max-width: 100%;
2022
}
21-
}
2223

23-
@media (max-width: 480px) {
24-
.ddorg__carbon-dual-list-button-set {
25-
flex-direction: column;
24+
button:not(:last-child) {
25+
margin-bottom: 8px;
2626
}
2727
}
2828

2929
.ddorg__carbon-dual-list-toolbar {
3030
display: flex;
3131
}
32+
33+
.ddorg__carbon-dual-list-tooltipbutton {
34+
background: #c2c1c1 !important;
35+
}

‎packages/carbon-component-mapper/src/tests/dual-list-select.test.js‎

Lines changed: 11 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import FormRenderer, { componentTypes } from '@data-driven-forms/react-form-rend
44
import { mount } from 'enzyme';
55

66
import { componentMapper, FormTemplate } from '../index';
7-
import { StructuredListWrapper, Search, StructuredListRow, ButtonSet, Button, TooltipIcon } from 'carbon-components-react';
7+
import { StructuredListWrapper, Search, StructuredListRow, Button, TooltipIcon } from 'carbon-components-react';
88

99
describe('DualListSelect', () => {
1010
let onSubmit;
@@ -58,7 +58,7 @@ describe('DualListSelect', () => {
5858

5959
expect(wrapper.find(StructuredListWrapper)).toHaveLength(2);
6060
expect(wrapper.find(Search)).toHaveLength(2);
61-
expect(wrapper.find(ButtonSet)).toHaveLength(1);
61+
expect(wrapper.find(Button)).toHaveLength(4);
6262
expect(wrapper.find(StructuredListRow)).toHaveLength(schema.fields[0].options.length + 1); // + empty placeholder
6363
});
6464

@@ -80,8 +80,7 @@ describe('DualListSelect', () => {
8080

8181
await act(async () => {
8282
wrapper
83-
.find(Button)
84-
.at(0)
83+
.find('button#move-right')
8584
.props()
8685
.onClick();
8786
});
@@ -121,8 +120,7 @@ describe('DualListSelect', () => {
121120

122121
await act(async () => {
123122
wrapper
124-
.find(Button)
125-
.at(0)
123+
.find('button#move-right')
126124
.props()
127125
.onClick();
128126
});
@@ -160,8 +158,7 @@ describe('DualListSelect', () => {
160158

161159
await act(async () => {
162160
wrapper
163-
.find(Button)
164-
.at(0)
161+
.find('button#move-right')
165162
.props()
166163
.onClick();
167164
});
@@ -212,8 +209,7 @@ describe('DualListSelect', () => {
212209

213210
await act(async () => {
214211
wrapper
215-
.find(Button)
216-
.at(0)
212+
.find('button#move-right')
217213
.props()
218214
.onClick();
219215
});
@@ -244,8 +240,7 @@ describe('DualListSelect', () => {
244240

245241
await act(async () => {
246242
wrapper
247-
.find(Button)
248-
.at(3)
243+
.find('button#move-all-left')
249244
.props()
250245
.onClick();
251246
});
@@ -261,8 +256,7 @@ describe('DualListSelect', () => {
261256
const wrapper = mount(<FormRenderer {...initialProps} />);
262257
await act(async () => {
263258
wrapper
264-
.find(Button)
265-
.at(1)
259+
.find('button#move-all-right')
266260
.props()
267261
.onClick();
268262
});
@@ -280,8 +274,7 @@ describe('DualListSelect', () => {
280274
);
281275
await act(async () => {
282276
wrapper
283-
.find(Button)
284-
.at(3)
277+
.find('button#move-all-left')
285278
.props()
286279
.onClick();
287280
});
@@ -531,8 +524,7 @@ describe('DualListSelect', () => {
531524
wrapper.update();
532525
await act(async () => {
533526
wrapper
534-
.find(Button)
535-
.at(1)
527+
.find('button#move-all-right')
536528
.props()
537529
.onClick();
538530
});
@@ -567,8 +559,7 @@ describe('DualListSelect', () => {
567559

568560
await act(async () => {
569561
wrapper
570-
.find(Button)
571-
.at(3)
562+
.find('button#move-all-left')
572563
.props()
573564
.onClick();
574565
});

0 commit comments

Comments
 (0)