Form: Add GlFormInvalidFeedback Component
Bootstrap v4 currently does not support contextual state styling (i.e. valid or invalid) of input groups. However, the inputs inside the input group do support contextual state.
So we end up having something like this:
|GlFormInputGroup||Other form input (for comparison)|
Problem: No feedback message shown
We use the general sibling selector
~ to display the invalid feedback message, like this:
However, this doesn't work for
GlFormInputGroup because the HTML structure is different. So the general sibling selector doesn't work here.
Let's ensure the feedback is displayed, so it looks like this:
Alternatively, we can just use the
b-form-invalid-feedback > https://bootstrap-vue.org/docs/components/form#comp-ref-b-form-invalid-feedback
It was suggested here > https://github.com/bootstrap-vue/bootstrap-vue/issues/1251#issuecomment-340065341
(So instead of doing some funky css magic, I think this is the best route to take. I've tested it locally and it works perfectly
1. We might also want to consider look into changing the default message if it's a
<select> field. As the user doesn't "fill", it "selects". So a more appropriate default message could be:
Please select an option.
A sibling component would be the
gl-form-valid-feedback, we might want to also consider creating a follow-up issue to ensure that's available in PJ
This issue was created as a follow-up to MR > gitlab!55838 (merged)