Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support extra material ui options for fields #1647

Open
dekelb opened this issue Mar 12, 2020 · 8 comments
Open

Support extra material ui options for fields #1647

dekelb opened this issue Mar 12, 2020 · 8 comments
Labels
enhancement material-ui material-ui related theme issue

Comments

@dekelb
Copy link

dekelb commented Mar 12, 2020

Material-UI's form fields support more UI configurations, but those config settings are not exported to the user with the current widgets.
For example - if you look at the current implementation of the RangeWidget you can see the following:

<Slider
    {...sliderProps}
    disabled={disabled || readonly}
    onChange={_onChange}
    onBlur={_onBlur}
    onFocus={_onFocus}
/>

MateriaUI's Slider component support also properties, such as marks/scale/orientation/valueLabelDisplay and others.
This is just an example for the Slider widget, but other widgets will probably have other properties that we would like to support.

There are multiple ways to solve this, I think it's best to do this from the uiSchema (since it's not related to the schema itself).

My suggestion is to have ui:props in the uiSchema of the field, and pass these values to the field itself.

I'm happy to open a PR for this, in case it makes sense.

@dekelb dekelb changed the title Support extra material ui configurations Support extra material ui options for fields Mar 12, 2020
@cosmin-harangus
Copy link

We started using react-jsonschema-form with Material UI recently and we also noticed that extra properties supported by default in Material UI. Specifically in our case we needed the "className" property.

Also I could not find a working example of how to have the same setup as on https://cybertec-postgresql.github.io/rjsf-material-ui/ because in our case passing format: "email" to a string type would not render using the TextField from MUI.

@epicfaace epicfaace added the material-ui material-ui related theme issue label Mar 15, 2020
@dekelb
Copy link
Author

dekelb commented Mar 16, 2020

@epicfaace thanks for tagging this. what do you think about my suggestion on the solution?
I see that you are one of the main contributors to this repo. If you feel my suggestion could work I'm happy to open a PR for it.

If you think we should take a different approach here - let me know and I can think of some other options.

@juliankigwana
Copy link
Contributor

We started using react-jsonschema-form with Material UI recently and we also noticed that extra properties supported by default in Material UI. Specifically in our case we needed the "className" property.

Also I could not find a working example of how to have the same setup as on https://cybertec-postgresql.github.io/rjsf-material-ui/ because in our case passing format: "email" to a string type would not render using the TextField from MUI.

I found a way to do this by overriding the TextFieldWidget locally with one that passes in the type. However, as you say @dekelb , there are a number of config settings that are no being handled correctly and that solution only resolves that particular case.

@epicfaace
Copy link
Member

@dekelb thanks for noting this issue. I'm good with your suggestion, but just wondering about the semantics of it. I'm wondering whether to define custom options for each setting in ui:options (which is the approach we already take with widgets for the default theme) or allow people to add in arbitrary props with ui:props .

@zlove
Copy link
Contributor

zlove commented Mar 27, 2020

@epicfaace @dekelb I'd suggest that any solution also allows passing props to Template components. For instance, I'd like to pass props to an ArrayFieldTemplate to control, for example, the label width, or whether to use a vertical or horizontal layout a row of fields, etc.

This comment is related.

@jsduffy
Copy link

jsduffy commented Jul 27, 2021

This would be really helpful for our project as well

@newt10
Copy link
Collaborator

newt10 commented Sep 3, 2021

@dekelb , are there any updates/consensus on this?

@skkohli
Copy link

skkohli commented Jun 26, 2022

Any updates on this. Seems PR is done for a fix to issue but hasn't yet been merged.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement material-ui material-ui related theme issue
Projects
No open projects
Issues - @rjsf/material-ui
  
High priority
Development

No branches or pull requests

8 participants