Use original FieldGroup component in Field array

[rvsia]

Fixes #1141

Description

Updates our field array to use the original PF4 design.

After

[DataDrivenFormsBot]

A new version (feat) will be released: v3.14.0 [DataDrivenFormsBot]

[codecov]

Codecov Report

Merging #1146 (2c0015f) into master (de36488) will decrease coverage by 0.01%.
The diff coverage is 100.00%.

@@            Coverage Diff             @@
##           master    #1146      +/-   ##
==========================================
- Coverage   94.91%   94.90%   -0.02%     
==========================================
  Files         208      208              
  Lines        3542     3531      -11     
  Branches     1224     1213      -11     
==========================================
- Hits         3362     3351      -11     
  Misses        180      180              

Impacted Files	Coverage Δ
...f4-component-mapper/src/field-array/field-array.js	100.00% <100.00%> (ø)

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 834aaac...2c0015f. Read the comment docs.

[Hyperkid123]

🎉 This PR is included in version 3.14.0 🎉

The release is available on

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

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

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

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

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

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

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

Data-Driven-Forms.org!

[steverhoades]

I detected one small issue with this PR. The Delete All button is new and does not respect the minItems definition. I'll see if I can pinpoint where that is failing.

Also, wow. What a great improvement!

[rvsia]

@steverhoades oh yeah! Great catch! 👀

I know where it is failing - I haven’t consider this option at all. 😂

But I am not sure what to do - I guess it would be better to hide the button when minItems are set, what do you think? 🤔

Otherwise, I’ll wix it tomorrow.

[steverhoades]

That was exactly what I was just looking at. Something like:

            <FormFieldGroupHeader
              titleText={{ text: label, id: props.name }}
              titleDescription={description}
              actions={
                <React.Fragment>
                 { minItems && minItems > 0 ? '' :
                    <Button
                      variant="link"
                      isDisabled={value.length === 0}
                      {...(value.length !== 0 && { onClick: () => removeBatch(value.map((_, index) => index)) })}
                    >
                      {combinedButtonLabels.removeAll}
                    </Button>
                  }
                  <Button
                    variant="secondary"
                    isDisabled={value.length >= maxItems}
                    {...(!(value.length >= maxItems) && { onClick: () => push(defaultItem) })}
                  >
                    {combinedButtonLabels.add}
                  </Button>
                </React.Fragment>
              }