Support form-floating on input-group

[719media]

Making input-group work with form-floating.

Fixes #34513

[ffoodd]

Looks good to me, awesome work! Thanks!

I made a fork of your CodePen using the new 5.1 docs path to show the result.

The question now is whether we want to support this or not? What weird issues may pop out of this?

[719media]

@ffoodd
I went back and reviewed the PR since it was from a month back.
Only thing I saw was a better place for the z-index rule, so I moved it to a more appropriate place.

[ffoodd]

Indeed, nice move! I didn't catch this, thanks :)

[719media]

It would be awesome if this could be merged for 5.2
With the latest 5.1.2 release, there is a minor issue with how buttons now have align-self: center (see #34834). That can be rectified by adding something like align-self: stretch into the .input-group .btn rule in the changed file. I didn't make that change in this PR, because it's not entirely a "form-floating" thing.
Thanks

[ffoodd]

@719media We reverted the align-self thing on buttons since it introduced regressions in input groups.

[nkdas91]

There is still an issue with this if we add validation feedbacks .valid-feedback, .invalid-feedback.

https://codepen.io/nkdas91/pen/JjrbeBM

[719media]

@nkdas91 Yes, good catch. My personal opinion of bootstrap validation is that it is so incredibly brittle, I never use it. For me, this is another example of such.

However, if you change the <div class="form-floating"> to <fieldset class="form-floating">, and move the feedback outside, it actually will work with bootstrap validation.

https://codepen.io/nefiga/pen/KKXapZG

Fieldset is a valid tag that can be used with the valid/invalid selectors (see https://html.spec.whatwg.org/multipage/semantics-other.html#selector-invalid).

One issue that DOES crop up in your example that really isn't a problem with form-floating (or this PR), is that the border on the end is no longer rounded. This is because of an issue with rounded corners CSS in bootstrap, and the same issue can actually be seen in bootstrap validation examples if you modify the example to have multiple feedback DIVs, as I have done in the above pen

[ffoodd]

Back to this: this PR lacks documentation and examples, which would allow to mention edge cases.

Regarding validation feedback, using fieldset works but is far from ideal when it comes to accessibility (since it'd require a legend at least). I'd better recommend to move the feedback outside and associate it to the form input using id and aria-describedby.

Then you may use spacing utilities to align things as intended, and you'd benefit from the .has-validation class feature on input groups to get rounded corners back. BTW I recommend to only insert feedbacks when needed, instead of having several hidden divs that mess up with rounded corners in input groups.

I made a quick working CodePen demonstrating this. Could be made better by using querySelectorAll() and looping but no need for this POC.

If that sounds good to all of you, @719media would you mind trying to add some docs for this? I guess the form floating page at least need some updates, and maybe the validation page too?

[ffoodd]

At least needs docs :)

[719media]

@ffoodd OK I have added some basic docs for the floating labels page.

[AgentSmith0]

Would be nice if this PR could me merged. Thanks!

[719media]

@ffoodd any way we could get this merged for 5.2.0? Thanks

[AgentSmith0]

Any updates on this? What speaks against merging this?

[fhughes90]

Waiting on an update for this as well

[719media]

@mdo Any changes requested to get this merged? Or are there things that still just don't feel right here you can expound on?

[nkdas91]

Fixes #36636

Addressed

[mdo]

Rebased, squashed, and edited a couple things in #36759. Closing this PR for that one.