Skip to content

Commit 11a67a2

Browse files
asirvadAbrahamVargheseasirvadAbrahamVarghese
committed
fix(carbon): migrate components to Carbon 11
1 parent 3dd7ccf commit 11a67a2

File tree

35 files changed

+193
-173
lines changed

35 files changed

+193
-173
lines changed

‎package.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -125,6 +125,9 @@
125125
"webpack-cli": "^4.9.1",
126126
"webpack-dev-server": "^4.7.3"
127127
},
128+
"resolutions": {
129+
"react-is": "^19.0.0"
130+
},
128131
"release": {
129132
"monorepo": "./packages",
130133
"branches": [

‎packages/carbon-component-mapper/demo/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<meta http-equiv="X-UA-Compatible" content="ie=edge">
7-
<link rel="stylesheet" href="https://unpkg.com/carbon-components/css/carbon-components.min.css">
7+
<link rel="stylesheet" href="https://unpkg.com/@carbon/styles/css/styles.min.css">
88
<title>Data driven forms</title>
99
</head>
1010
<body>

‎packages/carbon-component-mapper/demo/index.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import { wizardSchema } from './demo-schemas/wizard-schema';
77
import sandboxSchema from './demo-schemas/sandbox';
88
import demoSchema from '../../../shared/demoschema';
99

10-
import { Button } from 'carbon-components-react';
10+
import { Button } from '@carbon/react';
1111

1212
const fieldArrayState = {
1313
schema: arraySchemaDDF,

‎packages/carbon-component-mapper/src/checkbox/checkbox.d.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { UseFieldApiComponentConfig } from "@data-driven-forms/react-form-render
22
import { ReactNode } from "react";
33
import { FormGroupProps } from "../form-group";
44

5-
import { CheckboxProps as CarbonCheckboxProps } from 'carbon-components-react';
5+
import { CheckboxProps as CarbonCheckboxProps } from '@carbon/react';
66

77
export interface CheckboxOption extends CarbonCheckboxProps {
88
value?: any;

‎packages/carbon-component-mapper/src/checkbox/checkbox.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React from 'react';
22
import { useFieldApi } from '@data-driven-forms/react-form-renderer';
33
import MultipleChoiceListCommon from '@data-driven-forms/common/multiple-choice-list';
44

5-
import { Checkbox as CarbonCheckbox, FormGroup } from 'carbon-components-react';
5+
import { Checkbox as CarbonCheckbox, FormGroup } from '@carbon/react';
66

77
import WithDescription from '../with-description';
88
import prepareProps, { buildLabel } from '../prepare-props';
@@ -33,7 +33,7 @@ const SingleCheckbox = (props) => {
3333
};
3434

3535
const SingleCheckboxInCommon = ({ label, isDisabled, id, meta, option: { value, name, ...rest }, onChange, ...props }) => (
36-
<CarbonCheckbox id={id} labelText={label} disabled={isDisabled} {...props} {...rest} onChange={(_value, _name, event) => onChange(event)} />
36+
<CarbonCheckbox id={id} labelText={label} disabled={isDisabled} {...props} {...rest} onChange={(event, data) => onChange(event, data)} />
3737
);
3838

3939
const Checkbox = ({ options, ...props }) =>

‎packages/carbon-component-mapper/src/date-picker/date-picker.d.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { FormGroupProps } from "../form-group";
22
import { UseFieldApiComponentConfig } from "@data-driven-forms/react-form-renderer";
33

4-
import { DatePickerProps as CarbonDatePickerProps, DatePickerInputProps } from 'carbon-components-react';
4+
import { DatePickerProps as CarbonDatePickerProps, DatePickerInputProps } from '@carbon/react';
55

66
interface InternalDatePickerProps extends DatePickerInputProps {
77
datePickerType?: string;

‎packages/carbon-component-mapper/src/date-picker/date-picker.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from 'react';
22
import { useFieldApi } from '@data-driven-forms/react-form-renderer';
33

4-
import { DatePicker as CarbonDatePicker, DatePickerInput } from 'carbon-components-react';
4+
import { DatePicker as CarbonDatePicker, DatePickerInput } from '@carbon/react';
55

66
import prepareProps from '../prepare-props';
77
import HelperTextBlock from '../helper-text-block/helper-text-block';
@@ -23,8 +23,8 @@ const DatePicker = (props) => {
2323

2424
return (
2525
<div {...WrapperProps}>
26-
<CarbonDatePicker {...input} datePickerType={datePickerType} {...DatePickerProps}>
27-
<DatePickerInput id={input.name} invalid={Boolean(invalid)} invalidText={invalid ? invalid : ''} {...rest} />
26+
<CarbonDatePicker {...input} datePickerType={datePickerType} invalid={Boolean(invalid)} {...DatePickerProps}>
27+
<DatePickerInput id={input.name} invalidText={invalid || ''} {...rest} />
2828
</CarbonDatePicker>
2929
<HelperTextBlock helperText={!invalid && helperText} warnText={warnText} />
3030
</div>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import {
1010
StructuredListProps, StructuredListBodyProps,
1111
AllStructuredListRowProps,
1212
StructuredListCellProps
13-
} from 'carbon-components-react';
13+
} from '@carbon/react';
1414

1515
export interface DualListSelectValue extends AnyObject {
1616
value: any;

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

Lines changed: 95 additions & 89 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ import { createUseStyles } from 'react-jss';
55

66
import {
77
Grid,
8-
Row,
98
Column,
109
Button,
1110
FormGroup,
@@ -14,9 +13,8 @@ import {
1413
StructuredListRow,
1514
StructuredListBody,
1615
StructuredListCell,
17-
TooltipIcon,
18-
} from 'carbon-components-react';
19-
import { CheckmarkFilled16, ChevronRight32, ChevronLeft32, CaretSortDown32, CaretSortUp32 } from '@carbon/icons-react';
16+
} from '@carbon/react';
17+
import { CheckmarkFilled, ChevronRight, ChevronLeft, CaretSortDown, CaretSortUp } from '@carbon/react/icons';
2018

2119
import { buildLabel } from '../prepare-props';
2220

@@ -50,9 +48,13 @@ const useStyles = createUseStyles({
5048
},
5149
toolbar: {
5250
display: 'flex',
51+
'& .cds--tooltip-trigger__wrapper': {
52+
height: '100%',
53+
},
5354
},
5455
tooltipButton: {
5556
background: '#c2c1c1 !important',
57+
height: '100%',
5658
},
5759
});
5860

@@ -72,18 +74,16 @@ const List = ({ options, selectedValues, handleOptionsClick, noTitle, ListProps,
7274
return options.length > 0 ? (
7375
<StructuredListWrapper selection {...ListProps} className={clsx(dualList, ListProps.className)}>
7476
<StructuredListBody {...BodyProps} className={clsx(dualListBody, BodyProps.className)}>
75-
{options.map(({ value, label, ListRowProps, ListCellProps, GridProps, RowProps, LabelProps, CheckmarkProps }) => (
77+
{options.map(({ value, label, ListRowProps, ListCellProps, GridProps, LabelProps, CheckmarkProps }) => (
7678
<StructuredListRow key={value} {...ListRowProps} onClick={(e) => handleOptionsClick({ ...e, ctrlKey: true }, value)}>
7779
<StructuredListCell {...ListCellProps}>
78-
<Grid {...GridProps}>
79-
<Row narrow {...RowProps}>
80-
<Column sm={3} {...LabelProps}>
81-
{label}
82-
</Column>
83-
<Column sm={1} {...CheckmarkProps}>
84-
{selectedValues.includes(value) && <CheckmarkFilled16 />}
85-
</Column>
86-
</Row>
80+
<Grid condensed {...GridProps}>
81+
<Column sm={3} {...LabelProps}>
82+
{label}
83+
</Column>
84+
<Column sm={1} {...CheckmarkProps}>
85+
{selectedValues.includes(value) && <CheckmarkFilled size={16} />}
86+
</Column>
8787
</Grid>
8888
</StructuredListCell>
8989
</StructuredListRow>
@@ -101,9 +101,18 @@ const Toolbar = ({ sortTitle, onFilter, onSort, sortDirection, placeholder, Tool
101101
return (
102102
<div {...ToolbarProps} className={clsx(toolbar, ToolbarProps.className)}>
103103
<Search onChange={(e) => onFilter(e.target.value)} labelText="" placeholder={placeholder} {...SearchProps} />
104-
<TooltipIcon onClick={onSort} tooltipText={sortTitle} {...SortProps} className={clsx(tooltipButton, SortProps.className)}>
105-
{sortDirection ? <CaretSortDown32 /> : <CaretSortUp32 />}
106-
</TooltipIcon>
104+
<Button
105+
kind="ghost"
106+
size="sm"
107+
hasIconOnly
108+
onClick={onSort}
109+
iconDescription={sortTitle}
110+
renderIcon={(props) => (sortDirection ? <CaretSortDown size={32} {...props} /> : <CaretSortUp size={32} {...props} />)}
111+
tooltipAlignment="center"
112+
tooltipPosition="bottom"
113+
{...SortProps}
114+
className={clsx(tooltipButton, SortProps.className)}
115+
/>
107116
</div>
108117
);
109118
};
@@ -146,7 +155,6 @@ const DualListSelectInner = ({
146155
filterValueText = 'Remove your filter to see all selected',
147156
FormGroupProps = {},
148157
GridProps = {},
149-
RowProps = {},
150158
OptionsColumnProps = {},
151159
ButtonColumnProps = {},
152160
ValuesColumnProps = {},
@@ -169,77 +177,75 @@ const DualListSelectInner = ({
169177

170178
return (
171179
<FormGroup legendText={buildLabel(label || '', isRequired)} {...FormGroupProps}>
172-
<Grid {...GridProps}>
173-
<Row condensed {...RowProps}>
174-
<Column sm={4} md={8} lg={5} {...OptionsColumnProps}>
175-
{React.createElement(LeftTitleElement, LeftTitleProps, leftTitle)}
176-
<Toolbar
177-
onFilter={filterOptions}
178-
placeholder={filterOptionsTitle}
179-
sortDirection={state.sortLeftDesc}
180-
onSort={sortOptions}
181-
sortTitle={sortOptionsTitle}
182-
ToolbarProps={LeftToolbarProps}
183-
SearchProps={LeftSearchProps}
184-
SortProps={LeftSortProps}
185-
/>
186-
<List
187-
ListProps={LeftListProps}
188-
BodyProps={LeftBodyProps}
189-
options={leftValues}
190-
selectedValues={state.selectedLeftValues}
191-
handleOptionsClick={handleOptionsClick}
192-
noTitle={state.filterOptions ? filterOptionsText : noOptionsTitle}
193-
/>
194-
</Column>
195-
<Column sm={4} md={8} lg={2} {...ButtonColumnProps} className={clsx(buttonWrapper, ButtonColumnProps.className)}>
196-
<Button
197-
id="move-right"
198-
renderIcon={ChevronRight32}
199-
onClick={handleMoveRight}
200-
disabled={isEmpty(state.selectedLeftValues)}
201-
{...AddButtonProps}
202-
>
203-
{moveRightTitle}
204-
</Button>
205-
<Button id="move-all-right" onClick={handleClearLeftValues} disabled={isEmpty(leftValues)} {...AddAllButtonProps}>
206-
{moveAllRightTitle}
207-
</Button>
208-
<Button id="move-all-left" onClick={handleClearRightValues} disabled={isEmpty(rightValues)} {...RemoveAllButtonProps}>
209-
{moveAllLeftTitle}
210-
</Button>
211-
<Button
212-
id="move-left"
213-
renderIcon={ChevronLeft32}
214-
onClick={handleMoveLeft}
215-
disabled={isEmpty(state.selectedRightValues)}
216-
{...RemoveButtonProps}
217-
>
218-
{moveLeftTitle}
219-
</Button>
220-
</Column>
221-
<Column sm={4} md={8} lg={5} {...ValuesColumnProps}>
222-
{React.createElement(RightTitleElement, RightTitleProps, rightTitle)}
223-
<Toolbar
224-
onFilter={filterValues}
225-
placeholder={filterValuesTitle}
226-
sortDirection={state.sortRightDesc}
227-
onSort={sortValues}
228-
sortTitle={sortValuesTitle}
229-
ToolbarProps={RightToolbarProps}
230-
SearchProps={RightSearchProps}
231-
SortProps={RightSortProps}
232-
/>
233-
<List
234-
ListProps={RightListProps}
235-
BodyProps={RightBodyProps}
236-
options={rightValues}
237-
selectedValues={state.selectedRightValues}
238-
handleOptionsClick={handleValuesClick}
239-
noTitle={state.filterValue ? filterValueText : noValueTitle}
240-
/>
241-
</Column>
242-
</Row>
180+
<Grid condensed {...GridProps}>
181+
<Column sm={4} md={8} lg={5} {...OptionsColumnProps}>
182+
{React.createElement(LeftTitleElement, LeftTitleProps, leftTitle)}
183+
<Toolbar
184+
onFilter={filterOptions}
185+
placeholder={filterOptionsTitle}
186+
sortDirection={state.sortLeftDesc}
187+
onSort={sortOptions}
188+
sortTitle={sortOptionsTitle}
189+
ToolbarProps={LeftToolbarProps}
190+
SearchProps={LeftSearchProps}
191+
SortProps={LeftSortProps}
192+
/>
193+
<List
194+
ListProps={LeftListProps}
195+
BodyProps={LeftBodyProps}
196+
options={leftValues}
197+
selectedValues={state.selectedLeftValues}
198+
handleOptionsClick={handleOptionsClick}
199+
noTitle={state.filterOptions ? filterOptionsText : noOptionsTitle}
200+
/>
201+
</Column>
202+
<Column sm={4} md={8} lg={4} {...ButtonColumnProps} className={clsx(buttonWrapper, ButtonColumnProps.className)}>
203+
<Button
204+
id="move-right"
205+
renderIcon={(props) => <ChevronRight size={32} {...props} />}
206+
onClick={handleMoveRight}
207+
disabled={isEmpty(state.selectedLeftValues)}
208+
{...AddButtonProps}
209+
>
210+
{moveRightTitle}
211+
</Button>
212+
<Button id="move-all-right" onClick={handleClearLeftValues} disabled={isEmpty(leftValues)} {...AddAllButtonProps}>
213+
{moveAllRightTitle}
214+
</Button>
215+
<Button id="move-all-left" onClick={handleClearRightValues} disabled={isEmpty(rightValues)} {...RemoveAllButtonProps}>
216+
{moveAllLeftTitle}
217+
</Button>
218+
<Button
219+
id="move-left"
220+
renderIcon={(props) => <ChevronLeft size={32} {...props} />}
221+
onClick={handleMoveLeft}
222+
disabled={isEmpty(state.selectedRightValues)}
223+
{...RemoveButtonProps}
224+
>
225+
{moveLeftTitle}
226+
</Button>
227+
</Column>
228+
<Column sm={4} md={8} lg={5} {...ValuesColumnProps}>
229+
{React.createElement(RightTitleElement, RightTitleProps, rightTitle)}
230+
<Toolbar
231+
onFilter={filterValues}
232+
placeholder={filterValuesTitle}
233+
sortDirection={state.sortRightDesc}
234+
onSort={sortValues}
235+
sortTitle={sortValuesTitle}
236+
ToolbarProps={RightToolbarProps}
237+
SearchProps={RightSearchProps}
238+
SortProps={RightSortProps}
239+
/>
240+
<List
241+
ListProps={RightListProps}
242+
BodyProps={RightBodyProps}
243+
options={rightValues}
244+
selectedValues={state.selectedRightValues}
245+
handleOptionsClick={handleValuesClick}
246+
noTitle={state.filterValue ? filterValueText : noValueTitle}
247+
/>
248+
</Column>
243249
</Grid>
244250
</FormGroup>
245251
);

‎packages/carbon-component-mapper/src/field-array/field-array.d.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { FieldArrayField, UseFieldApiComponentConfig } from "@data-driven-forms/react-form-renderer";
22
import { ReactNode } from "react";
3-
import { ButtonProps, FormGroupProps as CarbonFormGroupProps } from "carbon-components-react";
3+
import { ButtonProps, FormGroupProps as CarbonFormGroupProps } from "@carbon/react";
44

55
import { FormGroupProps } from '../form-group';
66

0 commit comments

Comments
 (0)