Introduce Carbon mapper

[rvsia]

Scope: Carbon

Description

Introduce Carbon mapper to DDF repo

https://react.carbondesignsystem.com/?path=/story/button--default

TODO:

• basic set of components feat(carbon): introduce carbon mapper #796
• field array @rvsia feat(carbon): add field array component #801
• duallist @rvsia feat(carbon): add dual list component #800
• wizard @rvsia feat(carbon): wizard component #803
• validateOnMount @rvsia fix(carbon): introduce validateOnMount #812
• explore comboBox instead of select (supports filtering, isClearable)
  • observation: ComboBox seems more like a better text input so I won't looking into it further.
• style form template according to docs (48px margin for title/button, gaps, etc.) @rvsia fix(carbon): fix spacing for form template #813
• timepicker does not work at all (timezones, format selector) @rvsia feat(carbon): add AM/PM, timezones into carbon timepicker #814
• create helperText wrapper for components not supporting it @rvsia Carbon helper text #815
• treeshaking feat(carbon): introduce carbon mapper #796
• documentation
  • mapper page feat(carbon): introduce carbon mapper #796
  • component examples feat(carbon): introduce carbon mapper #796
  • specific texts for components @rvsia Add texts for Cabon components #808

[rvsia]

Changelog of changes PF3 > Carbon WORK IN PROGRESS

No isRequired

Carbon recommends to mark only optional fields (see here, so there is no isRequired prop.)

Required field

🛑

{
   component: 'text-field',
   label: 'login',
   isRequired: true,
}

🆗

{
   component: 'text-field',
   label: 'login',
}

Optional field

🛑

{
   component: 'text-field',
   label: 'description',
}

🆗

{
   component: 'text-field',
   label: 'description (optional)',
}

The Carbon documentation also suggests to group optional fields to avoid repeatable (optional) text.

Select

No isClearable

Carbon select does not support isClearable option, instead of it use an option with null.

🛑

{
   component: 'select',
   label: 'select',
   isClearable: true,
   options: [
        {value: 'option 1', label: 'first option'},
        {value: 'option 2', label: 'second option'}
    ]
}

🆗

{
   component: 'select',
   label: 'select',
   options: [
         {label: 'none', value: null},
         {value: 'option 1', label: 'first option'},
         {value: 'option 2', label: 'second option'}
    ]
}

Single select cannot be isSearchable

No known workaround.

No async filtering options in multiselect

No known workaround.

Possible workaround: reimplement Carbon select as we did for PF4/PF3

[rvsia]

Slider bug addressed here carbon-design-system/carbon#6809

[rvsia]

Toggle (Switch) labelText issues addresed here carbon-design-system/carbon#6811

[Hyperkid123]

🎉 This issue has been resolved in version 2.9.0 🎉

The release is available on

• react-form-renderer (@latest dist-tag)

• pf3-component-mapper (@latest dist-tag)

• pf4-component-mapper (@latest dist-tag)

• mui-component-mapper (@latest dist-tag)

Demo can be found here!