Floating labels

[laurenceks]

What issue does this pull request resolve?

Floating labels were added in Bootstrap 5, but are not supported in react-bootstrap-typeahead yet (part of issue #622)

What changes did you make?

1. Wrap <Input/> componenets in a div which if inputProps.useFloatingLabels === true will add the form-floating class
2. Immediately following <Input/> component a <label> element will render if inputProps.useFloatingLabels === true
3. inputProps.useFloatingLabels and inputProps.floatingLabelText are deleted before being passed on to the <Input/> component to avoid React warnings
4. Multi inputs padding is 0 when inputProps.useFloatingLabels === true to keep alignment as expected with floating label
5. Multi inputs have special rbt-multi-input-floating-label class apllied when inputProps.useFloatingLabels === true to help adjust token styling
6. Tokens have align-self: center and margin adjustments to keep styling as expected only when inputProps.useFloatingLabels === true
7. Added floating label section to examples page

To enable a floating label inputProps must contain the following:

• id (unique to the input itself)
• useFloatingLabels: true
• floatingLabelText - Bootstrap requires a placeholder which will fallback to this if not set

Is there anything that requires more attention while reviewing?

• [ ] Vertical alignment on the multi tokens and non-focussed label is a tiny bit off, not sure where the exact cause is and didn't want to mess with styling too much
• [ ] 6 tests failed but I don't understand the output; I've attached it as a txt file, would really appreciate your guidance here as I don't want to break anything
• [ ] Needs linting - I haven't used it before and I think mine isn't set to match your settings, as it reports 9814 problems in every file

[cfeltch537]

Is there an ETA on Floating Label support?

[ericgio]

@cfeltch537 please see #622 for updates regarding BS5 support. Also, as noted in that issue, you can use renderInput to customize your input, including adding floating labels.