How can I add an adornment to a text field?

[halcwb]

I cannot figure out how to add an adornment to a textfield like:

                        Mui.textField [
                            textField.label "First Systolic Blood Pressure"
                            textField.InputProps [
                                inputAdornment.classes.positionEnd "kg"

                                prop.children [
                                        Mui.inputAdornment [ 
                                            inputAdornment.position.end'
                                            inputAdornment.variant.standard
                                        ]
                                ]
                                
                            ]
                        ]

So I want a text field looking like:

"Label"
"Input" kg

[cmeeren]

The usage is the same as MUI, which you can find this in the MUI docs:

<TextField
  label="With normal TextField"
  InputProps={{
    endAdornment: <InputAdornment position="end">Kg</InputAdornment>,
  }}
/>

This means in Feliz.MaterialUI it would look something like this:

Mui.textField [
  textField.label "Foo"
  textField.InputProps [
    input.endAdornment (
      Mui.inputAdornment [
        inputAdornment.position.end'
        inputAdornment.children "Kg"
      ]
    )
  ]
]

There are three errors in your code:

• textField.InputProps are props passed to the TextField's Input component (Input is used in the implementation of TextField, it is not seen in user code). Therefore, it must contain props from the input module.
• The classes prop is used to override styles. In your usage, you are saying that the input adornment element, when position is set to end, should have class set to kg.
• prop.children shouldn't be used for MUI components. children is defined as a prop-specific component for all components that support it (e.g. textField.children instead of prop.children).

[halcwb]

Great, thanks. The mapping from your lib to Material UI, for me, is still a bit challenging. But I think I am getting the gist of it.

[cmeeren]

Everything is hard when you don't know it and easy once you have learned it. Let me know if there are things I can add/change in the Feliz.MaterialUI docs to make it better!

[halcwb]

Thanks again, it's a real joy to use your library. This is the app I am currently working on: https://github.com/halcwb/PediatricRiskCalculator.git

Any comments on your side are welcome!

[cmeeren]

Thanks for the kind words! Happy you're liking it. Unfortunately I don't have the capacity to do general code reviews, but let me know if you have problems or specific questions.