Form: Add GlFormInvalidFeedback Component
https://bootstrap-vue.org/docs/components/input-group#input-groups
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.
Proposal
Let's ensure the feedback is displayed, so it looks like this:
Solution
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
Follow-up
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
Note
This issue was created as a follow-up to MR > gitlab!55838 (merged)