Form updates: Bug fixes, docs update, and validation overhaul #22395
Conversation
— Previously we weren't including the border-width on the computed height, leading to alignment issues. — New system utilizes three variables (not ideal, but straightforward) for computing these heights. One for the vertical border, one for the line-height/font-size/padding dance, and one to add those together. — Updates CSS across forms and custom forms to use new sizing. Special note here: form validation icon sizing uses the inner variables because background-image doesn't bleed into borders unless explicit background-clip.
— Sizing shorthand comes last — Add height var and put it to use
…gutters-sm examples
|
@mdo just to be clear that I'm reading this PR correctly: doest it meant that from now on styling will be based on internal state of native HTML controls? I'm wondering how this will work with JS frameworks that add their own notations of validation constraints and validity state (ex.: some frameworks will have a "pending" state where async validation is in progress). If we can't style inputs by simply adding appropriate classes and are forced to interact with native HTML controls validity it might be very difficult to use Bootstrap with frameworks that don't reflect validity state in native HTML controls. I guess the simple question is: will it be possible to style for valid / invalid state by simply adding appropriate CSS classes? I'm seeing that this PR removes |
|
Also, think about server side validation fails.. this pr wasn't well thought out IMO... Needs revisit |
|
@pkozlowski-opensource @Francismori7 I've pushed some changes:
Lemme know how that looks, please!
|
|
This does look good! Thumbs up from me |
1remto.75rem.$btn-focus-box-shadowvariable on form controls.border-radiusif global radius is disabled.$input-heightand it's sm/lg variants didn't account for top and bottomborder-width. This has been redone to utilize three total variables and onecalc()function because of mixed units. Closes Add border width to input height variables #22298, closes$input-heightand$input-height-*should include borders, no need to calculate select.form-control heights, and calculate form validation icon sizes #22484 which brought the issue to light, and fixes (v4) customize input height not working for IE 9 to 11 #22105.$custom-select-sm-*variables to put the-smat the end, matching our other variables.Additional commits addressed the following: