#3491265: Split form components into `Drupal`-prefixed behavioral wrappers and presentational components
Refactored components
The existing components have been refactored into presentational components and behavioral wrappers:
| Original component | New presentational component(s) | New behavioral wrapper | Notes |
|---|---|---|---|
AccordionRoot ( Accordion.tsx) |
AccordionRoot ( Accordion.tsx) |
DrupalVerticalTabs |
|
AccordionDetails( Accordion.tsx) |
AccordionDetails( Accordion.tsx) |
DrupalDetails |
DrupalDetails is aware when it needs to render a <details> element inside vertical tabs, and it outputs AccordionDetails.(Solution by @bnjmnm in !392 (merged)) |
Details |
DrupalDetails |
DrupalDetails is aware when it needs to render a standalone <details> element, and it outputs Details.(Solution by @bnjmnm in !392 (merged)) |
|
ContainerTextFormat |
DrupalContainerTextFormat |
The UI code in this component is minimal or there for temporary demo purposes, so this is a simple rename. | |
Form |
Form |
DrupalForm |
Maintaining the form state context lives in DrupalForm. |
FormElement |
DrupalFormElement |
Could use more refactoring by creating two new presentational components: <FormElement> and FormElementDescription. The scope of this issue and MR is already significant, so saving that for a later issue. |
|
FormElementLabel |
FormElementLabel |
DrupalFormElementLabel.tsx |
Polished styling code for labels. |
Input |
Checkbox, Radio, TextField
|
DrupalInput |
|
Select |
Select |
DrupalSelect |
Updated styling to match design. |
TextArea |
TextArea |
DrupalTextArea |
|
Toggle |
Toggle |
DrupalToggle |
Brand new component matching designs, with updated end-to-end tests. |
UrlInput |
Deleted: DrupalInput and TextField already handles URL inputs. |
Attributes as props vs. class attributes
The new presentational components don't use the a2p() function (@/local_packages/utils.js) to keep their implementation simple. Turning attributes into prop-friendly data happens in the behavioral wrappers. The presentational components, however, do care about the class attribute, so the a2p() function was modified to skip that attribute by default.