feat!: Add Action Group component, e.g. to wrap Dialog buttons in

[VincentSmedinga]

Describe the pull request

Thank you for contributing to the project!
Please use this template to help us handle your PR smoothly.

What

Introduces a Dialog.ActionGroup subcomponent.

Why

• Encapsulates the responsibility of laying out a row of buttons (gap, wrapping, stretching) to a Dialog.ActionGroup subcomponent. We may extend it to a generic <ActionGroup> component later to follow NL Design System.
• Allows placing the buttons within a local form element.
• I expected we could lose the footer entirely, but that would remove whitespace between the dialog content and the buttons. Having the Action Group in a tall form hides them from view until the user scrolls. Consequently, the recommended approach is placing the Action Group in the footer and linking the submit button to the form manually. People can still move the Action Group into a form, but then they must implement whitespace and overflow themselves. I’ve documented this.

How

• Created the subcomponent and moved styles from .ams-dialog-footer to .ams-dialog__action-group.
• Improved documentation: reordered stories, reworded the information on forms, and reused some aspects of them.

Checklist

Before submitting your pull request, please ensure you have done the following. Check each checkmark if you have done so or if it wasn't necessary:

• Add or update unit tests
• Add or update documentation
• Add or update stories
• Add or update exports in index.* files
• Start the PR title with a Conventional Commit prefix, as explained here.

Additional notes

• None

[dlnr]

You're renaming stuff to action group but you leave the footer prop, probably because you still need the footer to stick to the bottom, and you move the footers flex properties to the action group. Why is an action group not a reusable component in other forms like NLDS button group? I thought this was the plan. This way it also counts as an "unnecessary wrapper" if you ask me.

[alimpens]

Yeah, I agree with Niels, I don't think this is an improvement. Dialog.ActionGroup should render the footer imo (which would probably make it Dialog.Footer). If it doesn't, this doesn't really add anything to the old approach imo.

[VincentSmedinga]

Well, that’s a surprise – this is precisely what we discussed. Except that we may not have realised that we couldn’t give up the entire footer concept.

You're renaming stuff to action group but you leave the footer prop, probably because you still need the footer to stick to the bottom, and you move the footers flex properties to the action group. Why is an action group not a reusable component in other forms like NLDS button group? I thought this was the plan. This way it also counts as an "unnecessary wrapper" if you ask me.

Correct. This separates the ‘footer’ responsibilities (sticking at the bottom and having whitespace between the body and itself) from the ‘buttons layout’ responsibilities (whitespace between them, wrapping, stacking). This is component-driven design. And yes, that introduces one extra div, but with good reason. As I mentioned in the description, the next step can be to make this an independent component – we could even do that immediately, as far as I’m concerned.

Yeah, I agree with Niels, I don't think this is an improvement. Dialog.ActionGroup should render the footer imo (which would probably make it Dialog.Footer). If it doesn't, this doesn't really add anything to the old approach IMO.

It adds that people can use the Action Group either in the footer or the body, depending on their needs. And after generalizing the component, we can use it everywhere to lay out multiple buttons.

I think we should still go this route.

[dlnr]

I vote for a Button Group component like NLDS: https://nl-design-system.github.io/utrecht/storybook/?path=/docs/css_css-button-group--docs

Having a dialog footer and actiongroup is confusing, also because you can only use the actiongroup in the footer prop.

This would also benefit the form examples we are doing, and I've had the need for a component like this in Figma on more than one occasion.

[VincentSmedinga]

I vote for a Button Group component like NLDS

Hah, that’s precisely what this is! Except that Action Group is the new name for Button Group, and I suggested promoting it to an independent component later.

We discussed this offline and agreed that the approach in this PR is correct. We’re even making it a separate component directly.