[EPIC] Refactoring of all form elements

[AlexSkrypnyk]

Our current implementation of form elements was rushed in the earlier versions.
As a result, we currently do not have a good way to centrally manage the consistent look and feel of every form element in the design system. This makes it impossible to continue any further development of these components.

This issue is an EPIC to capture the overall approach and list all required tasks to implement this change.

Note

A lot of work has been done in December 2022, but was unfinished. We still want to use that work for the re-factor as it had a large amount of improvements and overall solution direction. It is available on this branch. Every issue has a reference to the relevant files in this branch explicitly called out.

Important

Once this work is released, integration implementations (e.g., Drupal theme) would need to update their code to support this.

The approach

On the high-level, we want that every form element's look and behaviours would be managed centrally using a molecule-level component.

We are introducing a Molecule component called Field and decommissioning Form element. This component would have all required props to render any of the inner elements:

• Label (Label atom)
• Description (Field description atom)
• Control (Textfield atom, Textarea atom, Select atom etc.)
• Message (Field message atom)

We also need to implement additional control (atom) components:

• Radio group
• Checkbox group

In addition, we want to namespace all of the form controls into Form control group in Storybook so it is easier to manage. And we want to centralise Storybook's control helpers, so that it is easier to build controls demo data.

The process

The changes will be applied via multiple PRs against a dedicated branch feature/refactor-form-elements. This branch will be protected from deletion and will be periodically updated from main. Once the branch has all required changes, it will be merged into main and released by following a standard release process.

A list of implementation items is provided below and will be checked-off once the items are merged into the branch. Requirements for each item are provided within every issue.

QA will take place per PR, followed by an overall branch test before it can be merged to main.

Implementation items

1. Create centralised Storybook helpers #124
2. Label, Field description, Field message - Update to use centralised helpers #125
   Any order
3. Checkbox - Update to design 1.7 #67
4. Checkbox group - Create #126
5. Radio - Update to design 1.7 #80
6. Radio group - Create #61
7. Select, Textfield, Textarea - Update to use centralised helpers #127
   Blocked by the above
8. Field - Create #58
9. Field Group, Group filter, Pagination, List - Update to use Field #59
10. Select does not look as per designs #150

Indirectly affected

The below items should NOT be worked on and should be re-evaluated once all of the above implementation items are implemented.

• A11Y: Radio buttons are not grouped programmatically #56

[AlexSkrypnyk]

All items in this epic are now complete. Closing.