Update docs

Author: rvsia

packages/pf4-component-mapper/src/form-fields/fieldArray/index.js

@@ -37,7 +37,7 @@ const ArrayItem = ({
             <Grid key={ `${field.label}-${index}` } className="ddf-final-form-array-grid">
               { widths.label > 0 &&
               <GridItem sm={ widths.label } key={ `${field.label}-${index}` }>
-                <label htmlFor={ field.name }>{ field.label }</label>
+                <label htmlFor={ field.name }>{ field.label }{ field.isRequired && <span className='pf-c-form__label-required'>*</span> }</label>
               </GridItem> }
               <GridItem sm={ widths.field }>
                 { formOptions.renderForm([ field ]) }
@@ -90,8 +90,8 @@ const DynamicArray = ({
     <FieldArrayProvider key={ rest.input.name } name={ rest.input.name } validate={ arrayValidator }>
       { ({ fields: { map, value = [], push, remove }}) => (
         <Fragment>
-          { label && <GridItem sm={ 12 }><h3>{ label }</h3></GridItem> }
-          { description && <GridItem sm={ 12 }><p>{ description }</p></GridItem> }
+          { label && <GridItem sm={ 12 }>{ label }</GridItem> }
+          { description && <GridItem sm={ 12 }>{ description }</GridItem> }
           { value.length <= 0 && <Bullseye>
             <GridItem sm={ 12 }>{ noItemsMessage }</GridItem>
           </Bullseye> }

packages/react-renderer-demo/src/docs-components/field-array.md

@@ -13,6 +13,40 @@ Each component receives as a prop `FieldArrayProvider`. You can wrap you compone
 
 <RawComponent source="field-array/form-fields-mapper" />
 
+### Naming
+
+FieldArray supports [final form notation](https://final-form.org/docs/final-form/field-names).
+
+Prefix is made by `name` of the `FIELD-ARRAY` component.
+
+Nested components can have custom names, then the values are saved as an array of objects:
+
+```jsx
+{
+    fieldArrayName: [
+        {
+            nestedName: 'VALUE 1'
+        },
+                {
+            nestedName: 'VALUE 2'
+        },
+        ...
+    ]
+}
+```
+
+You don't need to name the nested components, then the values are saved as an array of values:
+
+```jsx
+{
+    fieldArrayName: [
+        'VALUE 1',
+        'VALUE 2',
+        ...
+    ]
+}
+```
+
 ### Validators
 
 You can use user a few provided validators (you can also use your <NavLink to='/renderer/validators'>own</NavLink>.)
@@ -33,7 +67,7 @@ PF4 component mapper provides an experimental implementation of PF4 field arrays
 |label|`node`|Label of the array.|
 |description|`node`|Description of the array.|
 |fields|`array`|A group of fields, which are being added to the array.|
-|defaultItem|`any`|Default item which is inserted into a newly created fields group.|
+|defaultItem|`any`|Default item which is inserted into a newly created fields group. If you have nested names, don't forget you need to insert an object!|
 |minItems|`number`|Remove button is disabled, if the length of the array is equal or smaller.|
 |maxItems|`number`|Add button is disabled, if the length of the array is equal or bigger.|
 |noItemsMessage|`node`|A message which is shown, when there are no items in the array.|