Optional Form Button Positioning

[james-burkill]

Desired behaviour

I have an accessibility requirement to position buttons on a form in such a way that the save button appears on the right-hand side of the form, while the cancel button appears on the left. We would like more options for controlling where the buttons are positioned.

Current behaviour

Currently the Form component allows users to specify a saveButton, leftSideButtons and rightSideButtons and, although it is possible to set the alignment of buttons via the buttonAllignment attribute, the buttons are always displayed together.

Suggested Solution

Either a new set of attributes allowing us to set different alignments for each button group, or a new buttonAlignment option such as justifiedLeftAndRight, based on the typographic alignment with the same name. In the event of there being only leftSideButtons and a saveButton, this would place the leftSideButtons on the left and saveButton on the right. In the event of there being only a saveButton and rightSideButtons, it could put the save button on the left and rightSideButtons on the right, and in the event of all three being specified, it might put the save button in the center, the leftSideButtons on the left and rightSideButtons on the right. Ultimately, this request is only motiviated by the need for the first of the three options.

CodeSandbox or Storybook URL

SKPU-10765

Anything else we should know?

The request comes from SBC Payroll UKI.

Confidentiality

• [X] I confirm there is no confidential or commercially sensitive information included.

[edleeks87]

Notes for triage: all button props in Form accept node so it is already possible to customise the button layout (I used a flex box below), so focus should be on if this is what we advise or if we need to add the enhancement (how does it work with FormSummary etc)

[sianford]

@harpalsingh do you think this is something that should be added as an additional feature? Ed has demonstrated that the button positioning can be amended using a flex box, however he clarifies that then wouldn't render the Form Summary so that would need exporting along with the flex box method for swapping the button positions.

[Parsium]

Hey @harpalsingh, do you have any thoughts on Ed's suggestion?

[Parsium]

Hi @james-burkill 👋🏼 Would the solution Ed has described help you achieve the layout you'll like in the meantime? The Box component should allow you to pass CSS Flexbox properties as component props.

[Parsium]

Hi @james-burkill, have you had a chance to look at @edleeks87's proposed layout?