fix(carbon): allow to pass props to wrapper div

Author: rvsia

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

@@ -26,12 +26,12 @@ Wrapper.propTypes = {
 };
 
 const SingleCheckbox = (props) => {
-  const { input, meta, validateOnMount, helperText, ...rest } = useFieldApi(prepareProps({ ...props, type: 'checkbox' }));
+  const { input, meta, validateOnMount, helperText, WrapperProps, ...rest } = useFieldApi(prepareProps({ ...props, type: 'checkbox' }));
 
   const invalid = (meta.touched || validateOnMount) && meta.error;
 
   return (
-    <div>
+    <div {...WrapperProps}>
       <CarbonCheckbox {...input} id={input.name} {...rest} />
       <HelperTextBlock helperText={helperText} errorText={invalid} />
     </div>
@@ -45,7 +45,8 @@ SingleCheckboxInCommon.propTypes = {
   input: PropTypes.object,
   isDisabled: PropTypes.bool,
   name: PropTypes.string,
-  id: PropTypes.string
+  id: PropTypes.string,
+  WrapperProps: PropTypes.object
 };
 
 const Checkbox = ({ options, ...props }) =>

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

@@ -8,12 +8,12 @@ import prepareProps from '../common/prepare-props';
 import HelperTextBlock from '../common/helper-text-block';
 
 const DatePicker = (props) => {
-  const { input, datePickerType, meta, DatePickerProps, validateOnMount, helperText, ...rest } = useFieldApi(prepareProps(props));
+  const { input, datePickerType, meta, DatePickerProps, validateOnMount, helperText, WrapperProps, ...rest } = useFieldApi(prepareProps(props));
 
   const invalid = (meta.touched || validateOnMount) && meta.error;
 
   return (
-    <div>
+    <div {...WrapperProps}>
       <CarbonDatePicker {...input} datePickerType={datePickerType} {...DatePickerProps}>
         <DatePickerInput id={input.name} invalid={Boolean(invalid)} invalidText={invalid ? invalid : ''} {...rest} />
       </CarbonDatePicker>
@@ -25,7 +25,8 @@ const DatePicker = (props) => {
 DatePicker.propTypes = {
   isDisabled: PropTypes.bool,
   datePickerType: PropTypes.string,
-  DatePickerProps: PropTypes.object
+  DatePickerProps: PropTypes.object,
+  WrapperProps: PropTypes.object
 };
 
 DatePicker.defaultProps = {

packages/carbon-component-mapper/src/files/form-group.d.ts

@@ -9,6 +9,7 @@ export interface FormGroupInternalProps {
     labelText?: ReactNode;
     description?: ReactNode;
     validateOnMount?: boolean;
+    WrapperProps?: React.HTMLProps<HTMLDivElement>;
 }
 
 export type FormGroupProps = FormGroupInternalProps & UseFieldApiComponentConfig;

packages/carbon-component-mapper/src/files/slider.js

@@ -8,12 +8,12 @@ import prepareProps from '../common/prepare-props';
 import HelperTextBlock from '../common/helper-text-block';
 
 const Slider = (props) => {
-  const { input, meta, isRequired, validateOnMount, helperText, ...rest } = useFieldApi(prepareProps(props));
+  const { input, meta, isRequired, validateOnMount, helperText, WrapperProps, ...rest } = useFieldApi(prepareProps(props));
 
   const invalid = (meta.touched || validateOnMount) && meta.error;
 
   return (
-    <div>
+    <div {...WrapperProps}>
       <CarbonSlider
         {...input}
         value={Number(input.value) || 0}
@@ -35,7 +35,8 @@ Slider.propTypes = {
   isRequired: PropTypes.bool,
   label: PropTypes.node,
   labelText: PropTypes.node,
-  description: PropTypes.node
+  description: PropTypes.node,
+  WrapperProps: PropTypes.object
 };
 
 export default Slider;

packages/carbon-component-mapper/src/files/switch.js

@@ -8,12 +8,12 @@ import prepareProps from '../common/prepare-props';
 import HelperTextBlock from '../common/helper-text-block';
 
 const Switch = (props) => {
-  const { input, meta, onText, offText, validateOnMount, helperText, ...rest } = useFieldApi(prepareProps(props));
+  const { input, meta, onText, offText, validateOnMount, helperText, WrapperProps, ...rest } = useFieldApi(prepareProps(props));
 
   const invalid = (meta.touched || validateOnMount) && meta.error;
 
   return (
-    <div>
+    <div {...WrapperProps}>
       <Toggle {...input} key={input.name} id={input.name} labelA={offText} labelB={onText} {...rest} />
       <HelperTextBlock helperText={helperText} errorText={invalid} />
     </div>
@@ -25,7 +25,8 @@ Switch.propTypes = {
   isReadOnly: PropTypes.bool,
   label: PropTypes.node,
   labelText: PropTypes.node,
-  description: PropTypes.node
+  description: PropTypes.node,
+  WrapperProps: PropTypes.object
 };
 
 export default Switch;

packages/carbon-component-mapper/src/files/time-picker.js

@@ -8,7 +8,7 @@ import prepareProps from '../common/prepare-props';
 import HelperTextBlock from '../common/helper-text-block';
 
 const TimePicker = (props) => {
-  const { input, meta, twelveHoursFormat, timezones, validateOnMount, helperText, ...rest } = useFieldApi(prepareProps(props));
+  const { input, meta, twelveHoursFormat, timezones, validateOnMount, helperText, WrapperProps, ...rest } = useFieldApi(prepareProps(props));
 
   const [timezone, selectTimezone] = useState(timezones ? timezones[0]?.value : '');
   const [format, selectFormat] = useState('AM');
@@ -64,7 +64,7 @@ const TimePicker = (props) => {
   }, [timezone, format]);
 
   return (
-    <div>
+    <div {...WrapperProps}>
       <CarbonTimePicker
         {...input}
         value={finalValue}
@@ -112,7 +112,8 @@ TimePicker.propTypes = {
       label: PropTypes.node.isRequired,
       showAs: PropTypes.string.isRequired
     })
-  )
+  ),
+  WrapperProps: PropTypes.object
 };
 
 export default TimePicker;

packages/react-renderer-demo/src/pages/mappers/carbon-component-mapper.md

@@ -127,4 +127,16 @@ No known workaround.
 
 _Possible workaround: reimplement Carbon select as we did for PF4/PF3_
 
+## WrapperProps
+
+Components that do not support `helperText` natively are wrapped in a `div` element. To pass props to this div, please use `WrapperProps` prop.
+
+Wrapped components:
+
+- Single checkbox
+- DatePicker
+- Slider
+- Switch
+- TimePicker
+
 </DocPage>