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

A 'raw' theme, without any styles applied #4492

Open
1 task done
joesaunderson opened this issue Feb 10, 2025 · 4 comments
Open
1 task done

A 'raw' theme, without any styles applied #4492

joesaunderson opened this issue Feb 10, 2025 · 4 comments

Comments

@joesaunderson
Copy link

Prerequisites

What theme are you using?

core

Is your feature request related to a problem? Please describe.

I would like to control the UI of the form, but currently using the "core" library assumes usage of Bootstrap.

Describe the solution you'd like

  1. A "raw" version of the form, with no classes/styles applied.
  2. A way to apply/override classes to specific elements, at a global level, for example:
{
    field: "my-field-class",
    input: "my-input-class",
}

Describe alternatives you've considered

What I am currently doing is copying all the code for the core library, and adding a class to style with CSS.

I don't like this approach as this also duplicates logic (and I'm not changing any of that, literally adding a class, so I can then override bootstrap) - I feel this leaves me vulnerable to breaking changes.

@joesaunderson joesaunderson added feature Is a feature request needs triage Initial label given, to be assigned correct labels and assigned labels Feb 10, 2025
@nickgros
Copy link
Contributor

If this is useful, I think this would be great to have in v6. We could move Bootstrap 3 to its own theme, and perhaps deprecate it depending on how useful it is to maintain.

@heath-freenome What do you think about this effort?

@joesaunderson Would you be interested in taking on this work? We're currently putting changes for v6 on the rjsf-v6 branch, but I think @heath-freenome wants to make some more templating changes that it might be worth waiting for before starting this.

@nickgros nickgros added awaiting response theme-request and removed needs triage Initial label given, to be assigned correct labels and assigned labels Feb 14, 2025
@joesaunderson
Copy link
Author

If this is useful, I think this would be great to have in v6. We could move Bootstrap 3 to its own theme, and perhaps deprecate it depending on how useful it is to maintain.

@heath-freenome What do you think about this effort?

@joesaunderson Would you be interested in taking on this work? We're currently putting changes for v6 on the rjsf-v6 branch, but I think @heath-freenome wants to make some more templating changes that it might be worth waiting for before starting this.

I can definitely help... just might need some pointers! I assume it's just making the core theme have no classes? And releasing that?

@joesaunderson
Copy link
Author

If this is useful, I think this would be great to have in v6. We could move Bootstrap 3 to its own theme, and perhaps deprecate it depending on how useful it is to maintain.

@heath-freenome What do you think about this effort?

@joesaunderson Would you be interested in taking on this work? We're currently putting changes for v6 on the rjsf-v6 branch, but I think @heath-freenome wants to make some more templating changes that it might be worth waiting for before starting this.

I can definitely help... just might need some pointers! I assume it's just making the core theme have no classes? And releasing that?

And any ideas for the 2) part welcome... where should these classes be passed? As props to the Form component maybe? Or new part of the UI schema?

@heath-freenome
Copy link
Member

@joesaunderson We still want to leave marker classes, but maybe prefix them with rjsf-. Since there really isn't much of a change besides classnames, perhaps you can make sure that all of the core components that have the bootstrap 3 classes in them accept and destructure out the classNames prop and add them to the fields. Then you can put thin wrappers over the core classes that pass in the appropriate bootstrap-3 class names, updating the fields, widgets and templates with overrides for them.

In some cases, you will have to implement generic templates in core and move the existing ones to bootstrap-3. In other cases, such as ArrayField, MultiSchemaField, SchemaField, which have multiple layers of classNames, some way of passing in the appropriate class names for each layer will have to be designed (maybe an object of classNames per layer) and then have them passed in thin wrappers around the core layer. And finally the GridTemplate will have to be made completely generic (maybe css flex based)?

I am willing to spend an hour or two with you next week to go over my thoughts with you in a discord live session.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants