Reorganise and cleanup the form elements

[sandhose]

While working on the readonly state on forms and the MFA component, I noticed that the form-related components are weirdly organised and don't always have the best implementation. Sorry for the "brain-dump" style list, I can open individual issues if needed.

• All forms components should be exported through a Form object, so that markup like this is possible:

  import { Form } from "@vector-im/compound-web";
  const Render = () => (
   <Form.Root>
     <Form.Field name="username">
       <Form.Label>Username</Form.Label>
       <Form.Control autocomplete="username" />
     </Form.Field>
     <Form.Field name="password">
       <Form.Label>Password</Form.Label>
       <Form.PasswordControl autocomplete="password" />
     </Form.Field>
     <Form.Submit>Login</Form.Submit>
   </Form.Root>
  );

  • The default <Form.Root> should have sensible default gap and flexbox. --cpd-space-5x looks like a good default candidate
  • The password control has multiple issues, including:
  • It doesn't stretch properly when in a flex container
  • It disables autocomplete and autocorrect by default, whilst it should be the responsibility of the parent component to do this
  • The StandaloneActionControl doesn't make sense?
  • The search component has weird (and probably inaccessible) markup. It uses a Label while it doesn't have a real one, and doesn't use the radix' control, meaning that it probably doesn't get the accessibility behaviors
  • The form root has default typography, which I think shouldn't be set there, but rather in the form components directly
  • The form inputs font size is 15px, which is just low enough to make iOS zoom on the input. We should really make it 16px. It is actually 0.9375rem whereas it should really be 1rem
  • ValidityState redefines a component which doesn't add anything, and really should just be a re-export from Radix
  • The Message component doesn't implement the "error message" styling. I think we should do distinct HelpMessage and ErrorMessage components
  • All the form components should be in the form folder
  • There is a mix of radix and non-radix controls:
  • Radio and Checkbox aren't using radix
  • MFAControl, ActionControl, PasswordControl are using radix
  • I think we should use radix for all of them or none of them (and use <Form.Control asChild><Password /></Form.Control> for example?)
  • We should have distinct stories for each form component, organised in a folder, with all the possible states (disabled, readonly, invalid, etc)

[dav-is]

I think we should use radix for all of them or none of them (and use </Form.Control> for example?)

I'm not sure if this has been discussed elsewhere, but I think we should use Radix for all of them. Ideally, we should use Radix for as much as possible.

[sandhose]

I think we should use radix for all of them or none of them (and use </Form.Control> for example?)

I'm not sure if this has been discussed elsewhere, but I think we should use Radix for all of them. Ideally, we should use Radix for as much as possible.

With the right ref forwarding, it's possible to provide both a bare input and a radix control. Check out what I did in the PR here: https://github.com/vector-im/compound-web/blob/7fc69ca21e3472dc938c7bc93be919c27209614e/src/components/Form/Controls/Text/Text.tsx#L34

It also makes it easier to do stories if we have an input component which is not controlled by radix

[dav-is]

It also makes it easier to do stories if we have an input component which is not controlled by radix

How so? What are the benefits to using an input without Radix? I thought we get a lot of accessibility built in using Radix