feat(form): added field groups

[mcoker]

fixes #3557

[patternfly-build]

Preview: https://patternfly-pr-3654.surge.sh

A11y report: https://patternfly-pr-3654-coverage.surge.sh

CSS Size Report

Name	Current	Previous	Diff %
components/Form/form.css	16.6 kB	8.4 kB	49.28
patternfly-no-reset.css	948.8 kB	940.6 kB	0.86
patternfly.css	950.6 kB	942.5 kB	0.86
patternfly.min.css	843.8 kB	836.2 kB	0.89

[mcarrano]

Expandable groups look good @mcoker . For the non-expandable field groups I would still expect you to be able to create some hierarchy by indenting child groups even when you remove the expansion. Was that also your intent @lboehling ?

[christiemolloy]

could you use the new action group here ?

[mcoker]

You could, think we could leave it open to add an action group, just a list of actions (like I have here), an overflow menu, etc.

[christiemolloy]

why is the toggle split up from the header ? I would have expected them in the same group so that any styles apply to the whole group

[mcoker]

It's so that the toggle can have it's own layout in the grid so that we can have

toggle | header stuff
empty  | field group contents

[christiemolloy]

is this how you would expect these to overflow or should they truncate ?

[christiemolloy]

Should the Field Groups here have a border between them like the other field groups?

[mcoker]

Should the Field Groups here have a border between them like the other field groups?

Nope, these are non-repeatable field groups. The ones with a border defined between them are repeatable (.pf-m-repeatable)

[mcoker]

is this how you would expect these to overflow or should they truncate ?

@christiemolloy are you referring to the descriptions or actions, or both? I would expect the description to wrap like that. Maybe not the actions though... maybe that gets white-space: nowrap;?

[mattnolting]

Suggested change

	{{#> form-group form-group--id="-label1"}}
	{{#> form-group form-group--id="-form-group1-label1"}}

[mattnolting]

Suggested change

	{{#> form-group form-group--id="-label2"}}
	{{#> form-group form-group--id="-form-group1-label2"}}

[mattnolting]

Suggested change

	{{#> form-group form-group--id="-label1"}}
	{{#> form-group form-group--id="-form-group2-label1"}}

[mattnolting]

Suggested change

	{{#> form-group form-group--id="-label2"}}
	{{#> form-group form-group--id="-form-group3-label2"}}

[mattnolting]

Suggested change

	{{#> form-group form-group--id="-label1"}}
	{{#> form-group form-group--id="-form-group1-label1"}}

[mattnolting]

Suggested change

	{{#> form-group form-group--id="-label2"}}
	{{#> form-group form-group--id="-form-group2-label2"}}

[mattnolting]

Suggested change

	{{#> form-group form-group--id="-label1"}}
	{{#> form-group form-group--id="-form-group3-label1"}}

[mattnolting]

Suggested change

	{{#> form-group form-group--id="-label2"}}
	{{#> form-group form-group--id="-form-group4-label2"}}

[mattnolting]

I think you could set .pf-c-form__field-group-header-actions to nowrap, then stack the header on smaller viewports and split on larger viewports.

[lboehling]

For the non-expandable field groups I would still expect you to be able to create some hierarchy by indenting child groups even when you remove the expansion. Was that also your intent @lboehling ?

I agree with @mcarrano now that I'm looking at this again. Probably would want some indentation/cleaned up padding to make sure the non-expanded groups still have some hierarchy. I'm also wondering now if my initial logic for the divider lines is holding up when there is a combo of expandable/non-expandable groups and repeating/non-repeating groups. It might be helpful if we divide these examples into more distinct sections, and then possibly have a demo or two showing them all together?

on a smaller note... changing the button text from "Add parameter" to "Add group" might make the repeating field set example more clear.

@mcoker @mcarrano

[mcoker]

@lboehling sounds good, thanks for the review!

It might be helpful if we divide these examples into more distinct sections, and then possibly have a demo or two showing them all together?

Yeah, apologies for the example in this PR - that was really just to put all of the functionality out there for review and see how it all looks together. Before releasing, we'll clean up the examples so they're more consumable.

[christiemolloy]

LGTM once you update the actions wrapping

[mcoker]

@christiemolloy @mattnolting @mcarrano @lboehling @mceledonia updated with Lucia's latest design.

Main points are:

• Border under top-level group title/toggle, and between nested groups, spans the full width
• Always a border between nested groups (no longer based on being repeatable)
• Top-level non-expandable group contents is indented, but nested non-expandable groups are not

[mcoker]

@lboehling updated the spacing so that if a non-expandable nested group contains a non-expandable group, that whole group (the title and group contents) is indented. Here's a screenshot of a really complex example to show what it would look like

[lboehling]

Looks good @mcoker! Thank you!!

[mattnolting]

Beautiful 🤩 !!!

[mcarrano]

Looks great. Nailed it!

[christiemolloy]

This looks spectacular!!!! thanks for making all those changes

[redallen]

🎉 This PR is included in version 4.69.0 🎉

The release is available on:

• GitHub release
• npm package (@latest dist-tag)

Your semantic-release bot 📦🚀