how to add bootstrap classes to inputs and labels

[vladejs]

I am working on a bootstrap themed version of a site, so i want to specify classes to inputs like this:

<input className="button button-primary" />

Can I do thath from schema specification? Something like:

Person = new SimpleSchema
  submitButton:
    uniforms:
        classNames: "button button-primary"

The issue is, I want to use bootstrap 3 structure, but with different classes

[radekmie]

Most Bootstrap3 fields use inputClassName (examples in DateField and TextField). You can specify it in your schema:

const Person = new SimpleSchema({
  field: {
    uniforms: {
        inputClassName: 'class-a class-b'
    }
  }
});

But your field name is submitButton... You want to specify submitButton in schema?

[vladejs]

No I don't. I don't know if is possible either.
So there is no trivial solution to inject custom classes to submit buttons?

[radekmie]

I think that trivial is a little bit too general world, but here it is:

import {SubmitField} from 'uniforms-bootstrap3';

// Any React component
const customSubmitField = () =>
    <SubmitField className="class-a class-b" />
;

<AutoForm submitField={customSubmitField} ... />

(it was implemented due to issue #28)

[vladejs]

And Boom goes the dynamite... I think this package just got awesome. Your solution is great.
From now on I am thinking in totally replace my formsy-react forms with uniforms in production.

Thank you

[vladejs]

Well, let's hold the ovation for one sec... There's still one problem.
I just noticed your solution works with all inputs but submit ones. Your example sets the classes to the section element instead of the input itself:

<section class="button button-primary" data-reactid="11">
  <input type="submit" class="btn btn-primary" data-reactid="12">
</section>

Looking at the submitField component you can see its hard coded classes: btn btn-primary

[radekmie]

Unfortunately, it is. If you have a free minute, submit a PR for it. If not - just let me know and I'll fix it. I think, that inputClassName should be good, isn't it?

[vladejs]

inputClassName for the submit input looks perfect. Sorry, I can't git clone right now [poor internet connection :( ]

Please if you can comment when it's resolved I'll be grateful.

[radekmie]

I've also published 1.0.0-rc.19.

[vladejs]

npm ERR! No compatible version found: uniforms@1.0.0-rc.19

npm ERR! Valid install targets:
npm ERR! 1.0.0-rc.18, 1.0.0-rc.16, 1.0.0-rc.15, 1.0.0-rc.14, 1.0.0-rc.13, 1.0.0-rc.12, 1.0.0-rc.10, 1.0.0-rc.9, 1.0.0-rc.8, 1.0.0-rc.7, 1.0.0-rc.6, 1.0.0-rc.5, 1.0.0-rc.4, 1.0.0-rc.3, 1.0.0-rc.2, 1.0.0-rc.1

[radekmie]

Maybe some npm cache - it's already listed here.