Medium: Form Element Styling

[PhilBarrett]

Form elements seem to adopt styling from Material UI over the origial wireframes. In particular the thick bottom border and loss of padding for text within the form elements: In our original designs, there would padding within the text box of about 5px, however this appears to run flush to the left of the box.

The above look and feel is fine, however I think we should remove the thin border around the top, left and right of the text box, as this is not part of Material UI.

[BogdanScherban]

@simongamester

Simon, could you please clarify it.

Let's compare these two forms: 1) Form created by React-admin functionality: https://showcase-devra.ripple.foundation/#/allergies/create 2) Custom form: https://showcase-devra.ripple.foundation/#/toc/create

If I understand you correctly, we should create forms, more similar to second example.

It means, that we should use custom forms instead of React-admin forms.

Am I correct?

[simongamester]

@BogdanScherban No, I think we should stick with the first on. The one that adopts the react-admin forms, not custom.

Therefore, we just need to remove the borders at the top, left and right of the text box as I don't think these are part of material UI or react admin i.e. https://material-ui.com/components/text-fields/

[BogdanScherban]

OK! I ask to give me 2-3 h for this issue, because I should find a way how to customize RA-form.

[PhilBarrett]

Result - https://drive.google.com/file/d/19T_oaLSnvkdK4DU6OSzkhYfHUlECYrAn/view

[simongamester]

@BogdanScherban I think you've implemented custom form styles rather than react-admin styles, see - https://app.zenhub.com/workspaces/ripple-combined-project-space-5c8be494fd0adb6f09c83d6b/issues/rippleosi/ripple-showcase-stack-project/43#issuecomment-497649584

I'd assumed that adopting react-admin form styling would be much easier than using custom forms as it would only require css to turn off top, left and right borders. Please can we revert back to this?

[BogdanScherban]

@simongamester

Thanks, Simon,

It depends on form content.

Simple form with simple elements can be done by RA-form customizing. For example: https://github.com/PulseTile/PulseTile-RA/blob/showcase/src/core/plugins/Allergies/fragments/Inputs.js

If form includes complex custom elements, or if we can calculate/define some parameters separately (before request will be run) - in this case we should create custom form, like this one: https://github.com/PulseTile/PulseTile-RA/blob/showcase/src/version/plugins/Vitals/fragments/Form.js

[simongamester]

@BogdanScherban Could you advise on effort required for both options please?

I'm not really too concerned which one we go with, just as long as it's consistent and easy to maintain in the long term. I'd assumed that react-admin approach would be easier.

[BogdanScherban]

OK!

In first case (when we want to customize RA-form component), it is enough to do following:

<TextInput
    source="cause"
    label="Cause"
    fullWidth
    InputProps={{ disableUnderline: true, classes: { root: classes.customRoot, input: classes.customInput } }}
    InputLabelProps={{ shrink: true, className: classes.customFormLabel }}
 />

Besides this, we should describe classes customRoot, customInput and customFormLabel. And we can also use FormGroup, FormLabel and other Material-UI components. Example, how to customize RA-form is presented here: https://github.com/PulseTile/PulseTile-RA/blob/showcase/src/core/plugins/Allergies/fragments/Inputs.js

---

The second case is custom form creation. This solution can be realized with components LocalForm and Control of the 'react-router-form'. Besides this, we can use functions crudUpdate() and crudCreate() of React-admin. It gives possibility to use custom form with RA-dataprovider.

Example, how to create custom form is presented here: https://github.com/PulseTile/PulseTile-RA/blob/showcase/src/version/plugins/Vitals/fragments/Form.js

Second way is more complex. But it is necessary when we want:

• to add additional parameters to request;
• to calculate some parameters and add them to request.

[simongamester]

Thanks @BogdanScherban It sounds like the second approach (custom forms elements) is the way to go then as it give us more flexibility in the future. You've already styled up elements this way, so I think we can close this issue.

@PhilBarrett can you mark this as resolved please?