fix(pf4): allow more customization

- introduces FormGroupProps
- validated can be overwritten by props
- some types and props bugs fixed

Author: rvsia

packages/pf4-component-mapper/src/common/form-group.js

@@ -4,14 +4,15 @@ import PropTypes from 'prop-types';
 
 import showError from './show-error';
 
-const FormGroup = ({ label, isRequired, helperText, meta, description, hideLabel, children, id }) => (
+const FormGroup = ({ label, isRequired, helperText, meta, description, hideLabel, children, id, FormGroupProps }) => (
   <Pf4FormGroup
     isRequired={isRequired}
     label={!hideLabel && label}
     fieldId={id}
     helperText={helperText}
     helperTextInvalid={meta.error}
     {...showError(meta)}
+    {...FormGroupProps}
   >
     {description && (
       <TextContent>
@@ -30,12 +31,8 @@ FormGroup.propTypes = {
   description: PropTypes.node,
   hideLabel: PropTypes.bool,
   id: PropTypes.string.isRequired,
-  children: PropTypes.oneOfType([PropTypes.element, PropTypes.arrayOf(PropTypes.element)]).isRequired
-};
-
-FormGroup.defaultProps = {
-  isRequired: false,
-  description: undefined
+  children: PropTypes.oneOfType([PropTypes.element, PropTypes.arrayOf(PropTypes.element)]).isRequired,
+  FormGroupProps: PropTypes.object
 };
 
 export default FormGroup;

packages/pf4-component-mapper/src/files/checkbox.d.ts

@@ -1,6 +1,7 @@
 import { UseFieldApiComponentConfig, AnyObject } from "@data-driven-forms/react-form-renderer";
-import { CheckboxProps as PfCheckboxProps, FormGroupProps } from '@patternfly/react-core';
+import { CheckboxProps as PfCheckboxProps } from '@patternfly/react-core';
 import { ReactNode } from "react";
+import FormGroupProps from "./form-group";
 
 interface CheckboxOptions extends AnyObject {
   label?: ReactNode;

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

@@ -7,9 +7,17 @@ import { Checkbox as Pf4Checkbox } from '@patternfly/react-core';
 import IsRequired from '../common/is-required';
 
 const SingleCheckbox = (props) => {
-  const { label, isRequired, helperText, meta, description, input, isReadOnly, isDisabled, id, ...rest } = useFieldApi(props);
+  const { label, isRequired, helperText, meta, description, input, isReadOnly, isDisabled, id, FormGroupProps, ...rest } = useFieldApi(props);
   return (
-    <FormGroup isRequired={isRequired} helperText={helperText} meta={meta} description={description} hideLabel id={id || input.name}>
+    <FormGroup
+      isRequired={isRequired}
+      helperText={helperText}
+      meta={meta}
+      description={description}
+      hideLabel
+      id={id || input.name}
+      FormGroupProps={FormGroupProps}
+    >
       <Pf4Checkbox
         isChecked={input.checked}
         {...input}
@@ -30,7 +38,8 @@ SingleCheckbox.propTypes = {
   helperText: PropTypes.node,
   description: PropTypes.node,
   isDisabled: PropTypes.bool,
-  id: PropTypes.string
+  id: PropTypes.string,
+  FormGroupProps: PropTypes.object
 };
 
 const Checkbox = ({ options, ...props }) => (options ? <MultipleChoiceList options={options} {...props} /> : <SingleCheckbox {...props} />);

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

@@ -6,7 +6,9 @@ import FormGroup from '../common/form-group';
 import showError from '../common/show-error';
 
 const DatePicker = (props) => {
-  const { label, isRequired, helperText, meta, description, hideLabel, input, isReadOnly, isDisabled, id, ...rest } = useFieldApi(props);
+  const { label, isRequired, helperText, meta, description, hideLabel, input, isReadOnly, isDisabled, id, FormGroupProps, ...rest } = useFieldApi(
+    props
+  );
   return (
     <FormGroup
       label={label}
@@ -16,8 +18,9 @@ const DatePicker = (props) => {
       description={description}
       hideLabel={hideLabel}
       id={id || input.name}
+      FormGroupProps={FormGroupProps}
     >
-      <TextInput {...input} {...rest} type="date" id={id || input.name} isReadOnly={isReadOnly} isDisabled={isDisabled} {...showError(meta)} />
+      <TextInput {...input} {...showError(meta)} {...rest} type="date" id={id || input.name} isReadOnly={isReadOnly} isDisabled={isDisabled} />
     </FormGroup>
   );
 };
@@ -30,7 +33,8 @@ DatePicker.propTypes = {
   description: PropTypes.node,
   hideLabel: PropTypes.bool,
   isDisabled: PropTypes.bool,
-  id: PropTypes.string
+  id: PropTypes.string,
+  FormGroupProps: PropTypes.object
 };
 
 export default DatePicker;

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

@@ -1,6 +1,6 @@
 import { UseFieldApiComponentConfig, AnyObject } from "@data-driven-forms/react-form-renderer";
 import { ReactNode } from "react";
-import { FormGroupProps } from "@patternfly/react-core";
+import FormGroupProps from "./form-group";
 
 export interface DualListSelectOption extends AnyObject {
   value?: any;

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

@@ -146,7 +146,8 @@ const DualList = ({
   filterValues,
   rightValues,
   handleValuesClick,
-  renderStatus
+  renderStatus,
+  FormGroupProps
 }) => (
   <FormGroup
     label={label}
@@ -156,6 +157,7 @@ const DualList = ({
     description={description}
     hideLabel={hideLabel}
     id={id || input.name}
+    FormGroupProps={FormGroupProps}
   >
     <Grid>
       <Grid>
@@ -314,7 +316,8 @@ DualList.propTypes = {
   filterValues: PropTypes.func,
   rightValues: PropTypes.array,
   handleValuesClick: PropTypes.func,
-  renderStatus: PropTypes.func
+  renderStatus: PropTypes.func,
+  FormGroupProps: PropTypes.object
 };
 
 DualList.defaultProps = {

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

@@ -1,4 +1,6 @@
 import { ReactNode } from "react";
+import { FormGroupProps as PfFormGroupProps } from '@patternfly/react-core';
+
 
 export default interface FormGroupProps {
   description?: ReactNode;
@@ -7,4 +9,5 @@ export default interface FormGroupProps {
   label?: ReactNode;
   isRequired?: boolean;
   helperText?: ReactNode;
+  FormGroupProps?: PfFormGroupProps;
 }

packages/pf4-component-mapper/src/files/radio.js

@@ -34,7 +34,7 @@ const Radio = ({ name, options, type, ...props }) => {
    * You cannot assign type radio to PF4 radio buttons input. It will break and will not set input value, only checked property
    * It has to be reqular input and we have change the radio value manully to the option value
    */
-  const { label, isRequired, helperText, meta, description, hideLabel, input, isReadOnly, isDisabled, id } = useFieldApi({
+  const { label, isRequired, helperText, meta, description, hideLabel, input, isReadOnly, isDisabled, id, FormGroupProps } = useFieldApi({
     name,
     ...props
   });
@@ -47,6 +47,7 @@ const Radio = ({ name, options, type, ...props }) => {
       description={description}
       hideLabel={hideLabel}
       id={id || input.name}
+      FormGroupProps={FormGroupProps}
     >
       {options.map((option) => (
         <RadioOption key={option.value} name={name} option={option} isReadOnly={isReadOnly} isDisabled={isDisabled} />
@@ -66,7 +67,8 @@ Radio.propTypes = {
   id: PropTypes.string,
   name: PropTypes.string.isRequired,
   options: PropTypes.arrayOf(PropTypes.shape({ label: PropTypes.node, value: PropTypes.any })).isRequired,
-  type: PropTypes.any
+  type: PropTypes.any,
+  FormGroupProps: PropTypes.object
 };
 
 export default Radio;

packages/pf4-component-mapper/src/files/select.js

@@ -5,7 +5,9 @@ import FormGroup from '../common/form-group';
 import DataDrivenSelect from '../common/select/select';
 
 const Select = (props) => {
-  const { label, isRequired, helperText, meta, description, hideLabel, input, isReadOnly, isDisabled, id, ...rest } = useFieldApi(props);
+  const { label, isRequired, helperText, meta, description, hideLabel, input, isReadOnly, isDisabled, id, FormGroupProps, ...rest } = useFieldApi(
+    props
+  );
   return (
     <FormGroup
       label={label}
@@ -15,6 +17,7 @@ const Select = (props) => {
       description={description}
       hideLabel={hideLabel}
       id={id || input.name}
+      FormGroupProps={FormGroupProps}
     >
       <DataDrivenSelect {...input} {...rest} isDisabled={isDisabled || isReadOnly} />
     </FormGroup>
@@ -29,7 +32,8 @@ Select.propTypes = {
   description: PropTypes.node,
   hideLabel: PropTypes.bool,
   isDisabled: PropTypes.bool,
-  id: PropTypes.string
+  id: PropTypes.string,
+  FormGroupProps: PropTypes.object
 };
 
 export default Select;

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

@@ -7,10 +7,18 @@ import { Badge, Grid, GridItem } from '@patternfly/react-core';
 import './slider.scss';
 
 const Slider = (props) => {
-  const { label, isRequired, helperText, meta, description, input, isReadOnly, isDisabled, id, ...rest } = useFieldApi(props);
+  const { label, isRequired, helperText, meta, description, input, isReadOnly, isDisabled, id, FormGroupProps, ...rest } = useFieldApi(props);
 
   return (
-    <FormGroup label={label} isRequired={isRequired} helperText={helperText} meta={meta} description={description} id={id || input.name}>
+    <FormGroup
+      label={label}
+      isRequired={isRequired}
+      helperText={helperText}
+      meta={meta}
+      description={description}
+      id={id || input.name}
+      FormGroupProps={FormGroupProps}
+    >
       <Grid gutter="md">
         <GridItem span={10}>
           <input
@@ -36,7 +44,8 @@ Slider.propTypes = {
   helperText: PropTypes.node,
   description: PropTypes.node,
   isDisabled: PropTypes.bool,
-  id: PropTypes.string
+  id: PropTypes.string,
+  FormGroupProps: PropTypes.object
 };
 
 export default Slider;