[v4]: style handling proposal

As we think about a move to v4 i’d like to simplify the way we handle theme variants, sizes and the like.

Right now we have a bunch of complexity around validating all these inputs. It’s a nicety but adds a bunch of complexity and confusion for folks who want to tweak stuff easily.

I propose that we take reactstrap’s approach here and have no specific propType validation for variants, styles, and styles, e.g

I also think that we should maybe take this time to rethink some of the names? maybe

• bsStyle -> variant
• bsClass -> variantPrefix (intentionally verbose, most ppl shouldn’t use it)
• bsSize -> size (this is maybe problematic b/c of the ns conflict with html input size

This should help remove our dependency on runtime propType usage as well.

[jquense]

Ok current thinking:

we maintain the general bsClass, bsStyle, bsSize breakdown (but rename them to bootstrapPrefix, variant, and size). We worry a bit less about uniformity across all components, I don’t think it’s a big deal that things likes block or vertical are technically also variants but different props. There seem to be less of them in general in v4, delegating instead to util classes, anyway.

It’s not the “cleanest” but its more inline with how other frameworks handle this stuff, like material-ui@1 and a much easy migration path than cramming them into one. Plus it’s easier to add in validation for folks that want that, and works better for typing i think.

[taion]

@aaronbeall

The goal right now is to let people do stuff like <Button bsStyle="custom"> and get the class .btn-custom, or do something like <Button bsClass="my-btn" bsSize="large"> and get .my-btn-large.

I agree that, when working with stock TWBS, it’d be nice to have type checks on the values, but it is a goal here to support custom extensions of TWBS in a nice way, and it’s nice to have an easy way to follow the prefixed class name convention.

It’s not “pretending”, it’s extending the framework.