HospitalRun / hospitalrun

Monorepo that holds all of HospitalRun's v2 projects.
https://hospitalrun.io
MIT License
922 stars 340 forks source link

Inconsistent API for input elements #218

Open MatthewDorner opened 4 years ago

MatthewDorner commented 4 years ago

πŸ› Bug Report

There are some form input components that have inconsistent props or missing capabilities. For instance, Checkbox has no way to set the initial value. I tried looking at the react-bootstrap docs and actually didn't see a way to set it there either, but there must be one. Because of this, Edit Patient doesn't populate the checkbox in GeneralInformation with its correct initial value. Checkbox also uses disabled instead of isEditable which is inconsistent with the other components.

Also, Typeahead doesn't have a way to disable the input. This caused the need to conditionally render either Typeahead or TextInputWithLabelFormGroup in the AppointmentDetailsForm component, which should be able to be done with a single component.

Neither Typeahead nor Checkbox currently use wrapper components in the frontend in the way TextInputWithLabelFormGroup and others do, though I'm not sure if they are needed.

Expected behavior

The various input elements should have a consistent API, at least to disable the input and populate the initial value.

jackcmeyer commented 4 years ago

@MatthewDorner This is a good find. I see a few issues that can come out of this so they can be put in their respective repos.

At first glance there should be an issue for the following:

jackcmeyer commented 4 years ago

The reason that some fields have wrapper components is to simplify (and not duplicate) the logic for creating a form group (which allows labels to be connected to fields).

However, maybe these components are "primitive" enough (similar to just a plain textbox) that they should be moved to the components repo.

I know there is https://github.com/HospitalRun/components/issues/66 which is to add validation styling, which requires form groups, I believe, which could break the wrapper components.

MatthewDorner commented 4 years ago

The wrapper components are relevant because in components repo, everything uses disabled, while everything in the frontend uses isEditable. So by adding isEditable to those unwrapped components it makes them inconsistent with the other elements in components repo etc. We should probably just make it the same across repos.

fox1t commented 4 years ago

Really a good call! +1 to this