chore(Toolbar): add different gap props to examples

[mfrances17]

What: Closes #10432

[patternfly-build]

Preview: https://patternfly-react-pr-11440.surge.sh

A11y report: https://patternfly-react-pr-11440-a11y.surge.sh

[wise-king-sullyman]

I would maybe rather see us have these examples a bit DRYer, but I could also see a good argument for keeping it as is, so not a blocker.

[mcoker]

LGTM! A couple of questions:

• I wonder if "Toolbar item spacers" would be better as "Toolbar spacers", especially since you have examples of using spacers on toolbar items now, too.
• I see variant="action-group" on most of the <ToolbarGroup />s, I'm curious if there is a reason to use that over no variant? I'd consider no variant the default for example/demo purposes, but there are buttons in the example, and action-group is probably best for buttons.
• I think the headings and hwhat-not could use some love. I wonder if this would be a good use case for subheadings? That would probably be a separate issue, but like the html docs for table. Maybe something like:

## Toolbar spacers
[...existing blurb]

### Toolbar group spacers
[gap]
[column gap]
[row gap]

### Toolbar item spacers
[gap]
[column gap]
[row gap]

[mfrances17]

@mcoker agreed on the title change, i changed it. i also removed the action groups because you're right, why overcomplicate the example.
@thatblindgeye @mcoker as for the layout, options are limited and i originally wanted to keep the examples consolidated into one single example file, but compromised and wound up separating them into two examples (toolbar group and toolbar item) to take advantage of the markdown headings. i also added them into their own heading at the bottom, much like was done with the toggle groups and filters examples. layout-wise, it works better imo.

[thatblindgeye]

I think this is looking great. Unless you'd want to do it as part of this PR, could you open a followup to add a prop for gap wrapping/nowrapping on these components + adding tests for the new class? I'd assume we'd want it setup similar to how the Flex layout component has the flexWrap prop, but will defer to @mcoker if there should be any difference within ToolbarGroup and ToolbarItem.

[mfrances17]

Filed #11489 as a follow-up to add a wrap prop to ToolbarGroup and ToolbarItem gap.

[mcoker]

L🎃TM! The headings look great now as they are IMO.

I'd assume we'd want it setup similar to how the Flex layout component has the flexWrap prop, but will defer to @mcoker if there should be any difference within ToolbarGroup and ToolbarItem.

@thatblindgeye technically speaking, regarding flex props and what a wrap modifier would do for the toolbar compared to the flex layout, I think they're identical so 👍👍 from me

[patternfly-build]

Your changes have been released in:

• @patternfly/[email protected]
• @patternfly/[email protected]
• @patternfly/[email protected]
• @patternfly/[email protected]
• [email protected]
• @patternfly/[email protected]
• @patternfly/[email protected]

Thanks for your contribution! 🎉