Migration carbon v11 #1522
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -2,7 +2,7 @@ import React from 'react'; | |
| import { useFieldApi } from '@data-driven-forms/react-form-renderer'; | ||
| import MultipleChoiceListCommon from '@data-driven-forms/common/multiple-choice-list'; | ||
|
|
||
| import { Checkbox as CarbonCheckbox, FormGroup } from '@carbon/react'; | ||
|
|
||
| import WithDescription from '../with-description'; | ||
| import prepareProps, { buildLabel } from '../prepare-props'; | ||
|
|
@@ -33,7 +33,7 @@ const SingleCheckbox = (props) => { | |
| }; | ||
|
|
||
| const SingleCheckboxInCommon = ({ label, isDisabled, id, meta, option: { value, name, ...rest }, onChange, ...props }) => ( | ||
| <CarbonCheckbox id={id} labelText={label} disabled={isDisabled} {...props} {...rest} onChange={(event, data) => onChange(event, data)} /> | ||
|
Contributor
Author
There was a problem hiding this comment. In Carbon v11, the Checkbox onChange callback receives:
See: https://github.com/carbon-design-system/carbon/blob/main/docs/migration/v11.md#checkbox |
||
| ); | ||
|
|
||
| const Checkbox = ({ options, ...props }) => | ||
|
|
||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,7 +1,7 @@ | ||
| import React from 'react'; | ||
| import { useFieldApi } from '@data-driven-forms/react-form-renderer'; | ||
|
|
||
| import { DatePicker as CarbonDatePicker, DatePickerInput } from '@carbon/react'; | ||
|
|
||
| import prepareProps from '../prepare-props'; | ||
| import HelperTextBlock from '../helper-text-block/helper-text-block'; | ||
|
|
@@ -23,8 +23,8 @@ const DatePicker = (props) => { | |
|
|
||
| return ( | ||
| <div {...WrapperProps}> | ||
| <CarbonDatePicker {...input} datePickerType={datePickerType} invalid={Boolean(invalid)} {...DatePickerProps}> | ||
|
Contributor
Author
There was a problem hiding this comment.
|
||
| <DatePickerInput id={input.name} invalidText={invalid || ''} {...rest} /> | ||
| </CarbonDatePicker> | ||
| <HelperTextBlock helperText={!invalid && helperText} warnText={warnText} /> | ||
| </div> | ||
|
|
||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -5,7 +5,6 @@ import { createUseStyles } from 'react-jss'; | |
|
|
||
| import { | ||
| Grid, | ||
| Column, | ||
| Button, | ||
| FormGroup, | ||
|
|
@@ -14,9 +13,8 @@ import { | |
| StructuredListRow, | ||
| StructuredListBody, | ||
| StructuredListCell, | ||
| } from '@carbon/react'; | ||
| import { CheckmarkFilled, ChevronRight, ChevronLeft, CaretSortDown, CaretSortUp } from '@carbon/react/icons'; | ||
|
|
||
| import { buildLabel } from '../prepare-props'; | ||
|
|
||
|
|
@@ -50,9 +48,13 @@ const useStyles = createUseStyles({ | |
| }, | ||
| toolbar: { | ||
| display: 'flex', | ||
| '& .cds--tooltip-trigger__wrapper': { | ||
| height: '100%', | ||
| }, | ||
| }, | ||
| tooltipButton: { | ||
| background: '#c2c1c1 !important', | ||
| height: '100%', | ||
| }, | ||
| }); | ||
|
|
||
|
|
@@ -72,18 +74,16 @@ const List = ({ options, selectedValues, handleOptionsClick, noTitle, ListProps, | |
| return options.length > 0 ? ( | ||
| <StructuredListWrapper selection {...ListProps} className={clsx(dualList, ListProps.className)}> | ||
| <StructuredListBody {...BodyProps} className={clsx(dualListBody, BodyProps.className)}> | ||
| {options.map(({ value, label, ListRowProps, ListCellProps, GridProps, LabelProps, CheckmarkProps }) => ( | ||
| <StructuredListRow key={value} {...ListRowProps} onClick={(e) => handleOptionsClick({ ...e, ctrlKey: true }, value)}> | ||
| <StructuredListCell {...ListCellProps}> | ||
| <Grid condensed {...GridProps}> | ||
|
Contributor
Author
There was a problem hiding this comment. The Grid system has changed. The Row component no longer exists - it's been removed. In v11, we should use Grid and Column directly without Row. |
||
| <Column sm={3} {...LabelProps}> | ||
| {label} | ||
| </Column> | ||
| <Column sm={1} {...CheckmarkProps}> | ||
| {selectedValues.includes(value) && <CheckmarkFilled size={16} />} | ||
| </Column> | ||
| </Grid> | ||
| </StructuredListCell> | ||
| </StructuredListRow> | ||
|
|
@@ -101,9 +101,18 @@ const Toolbar = ({ sortTitle, onFilter, onSort, sortDirection, placeholder, Tool | |
| return ( | ||
| <div {...ToolbarProps} className={clsx(toolbar, ToolbarProps.className)}> | ||
| <Search onChange={(e) => onFilter(e.target.value)} labelText="" placeholder={placeholder} {...SearchProps} /> | ||
| <Button | ||
| kind="ghost" | ||
| size="sm" | ||
| hasIconOnly | ||
| onClick={onSort} | ||
| iconDescription={sortTitle} | ||
| renderIcon={(props) => (sortDirection ? <CaretSortDown size={32} {...props} /> : <CaretSortUp size={32} {...props} />)} | ||
| tooltipAlignment="center" | ||
| tooltipPosition="bottom" | ||
| {...SortProps} | ||
| className={clsx(tooltipButton, SortProps.className)} | ||
| /> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
@@ -146,7 +155,6 @@ const DualListSelectInner = ({ | |
| filterValueText = 'Remove your filter to see all selected', | ||
| FormGroupProps = {}, | ||
| GridProps = {}, | ||
| OptionsColumnProps = {}, | ||
| ButtonColumnProps = {}, | ||
| ValuesColumnProps = {}, | ||
|
|
@@ -169,77 +177,75 @@ const DualListSelectInner = ({ | |
|
|
||
| return ( | ||
| <FormGroup legendText={buildLabel(label || '', isRequired)} {...FormGroupProps}> | ||
| <Grid condensed {...GridProps}> | ||
| <Column sm={4} md={8} lg={5} {...OptionsColumnProps}> | ||
| {React.createElement(LeftTitleElement, LeftTitleProps, leftTitle)} | ||
| <Toolbar | ||
| onFilter={filterOptions} | ||
| placeholder={filterOptionsTitle} | ||
| sortDirection={state.sortLeftDesc} | ||
| onSort={sortOptions} | ||
| sortTitle={sortOptionsTitle} | ||
| ToolbarProps={LeftToolbarProps} | ||
| SearchProps={LeftSearchProps} | ||
| SortProps={LeftSortProps} | ||
| /> | ||
| <List | ||
| ListProps={LeftListProps} | ||
| BodyProps={LeftBodyProps} | ||
| options={leftValues} | ||
| selectedValues={state.selectedLeftValues} | ||
| handleOptionsClick={handleOptionsClick} | ||
| noTitle={state.filterOptions ? filterOptionsText : noOptionsTitle} | ||
| /> | ||
| </Column> | ||
| <Column sm={4} md={8} lg={4} {...ButtonColumnProps} className={clsx(buttonWrapper, ButtonColumnProps.className)}> | ||
| <Button | ||
| id="move-right" | ||
| renderIcon={(props) => <ChevronRight size={32} {...props} />} | ||
| onClick={handleMoveRight} | ||
| disabled={isEmpty(state.selectedLeftValues)} | ||
| {...AddButtonProps} | ||
| > | ||
| {moveRightTitle} | ||
| </Button> | ||
| <Button id="move-all-right" onClick={handleClearLeftValues} disabled={isEmpty(leftValues)} {...AddAllButtonProps}> | ||
| {moveAllRightTitle} | ||
| </Button> | ||
| <Button id="move-all-left" onClick={handleClearRightValues} disabled={isEmpty(rightValues)} {...RemoveAllButtonProps}> | ||
| {moveAllLeftTitle} | ||
| </Button> | ||
| <Button | ||
| id="move-left" | ||
| renderIcon={(props) => <ChevronLeft size={32} {...props} />} | ||
| onClick={handleMoveLeft} | ||
| disabled={isEmpty(state.selectedRightValues)} | ||
| {...RemoveButtonProps} | ||
| > | ||
| {moveLeftTitle} | ||
| </Button> | ||
| </Column> | ||
| <Column sm={4} md={8} lg={5} {...ValuesColumnProps}> | ||
| {React.createElement(RightTitleElement, RightTitleProps, rightTitle)} | ||
| <Toolbar | ||
| onFilter={filterValues} | ||
| placeholder={filterValuesTitle} | ||
| sortDirection={state.sortRightDesc} | ||
| onSort={sortValues} | ||
| sortTitle={sortValuesTitle} | ||
| ToolbarProps={RightToolbarProps} | ||
| SearchProps={RightSearchProps} | ||
| SortProps={RightSortProps} | ||
| /> | ||
| <List | ||
| ListProps={RightListProps} | ||
| BodyProps={RightBodyProps} | ||
| options={rightValues} | ||
| selectedValues={state.selectedRightValues} | ||
| handleOptionsClick={handleValuesClick} | ||
| noTitle={state.filterValue ? filterValueText : noValueTitle} | ||
| /> | ||
| </Column> | ||
| </Grid> | ||
| </FormGroup> | ||
| ); | ||
|
|
||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -5,8 +5,8 @@ import { createUseStyles } from 'react-jss'; | |
|
|
||
| import { useFieldApi, useFormApi, FieldArray as FieldArrayFF } from '@data-driven-forms/react-form-renderer'; | ||
|
|
||
| import { Button, FormGroup } from '@carbon/react'; | ||
| import { AddAlt, Subtract } from '@carbon/react/icons'; | ||
|
|
||
| import prepareProps from '../prepare-props'; | ||
|
|
||
|
|
@@ -45,7 +45,7 @@ const ArrayItem = memo( | |
| {formOptions.renderForm(editedFields, formOptions)} | ||
| <Button | ||
| disabled={buttonDisabled} | ||
| renderIcon={(props) => <Subtract size={32} {...props} />} | ||
| id={`remove-${name}`} | ||
| kind="danger" | ||
| onClick={remove} | ||
|
|
@@ -119,7 +119,7 @@ const FieldArray = (props) => { | |
| <div {...AddContainerProps} className={clsx(addContainer, AddContainerProps.className)}> | ||
| <Button | ||
| disabled={fieldArrayProps.fields.length >= maxItems} | ||
| renderIcon={(props) => <AddAlt size={32} {...props} />} | ||
|
Contributor
Author
There was a problem hiding this comment. For button's renderIcon, passing the props to the function component is needed for the proper styles to get applied to the icon(missing classes on the SVG element) |
||
| id={`add-${input.name}`} | ||
| onClick={() => fieldArrayProps.fields.push(defaultItem)} | ||
| {...AddButtonProps} | ||
|
|
||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
react-ishas moved from being a hard dependency to instead being a peer dependency. This change was done to facilitate React 19 support, so we will need this resolution for Tabs component to get rendered.see: carbon-design-system/carbon#19538