Sky-lookup does not have an error state

[blackbaud-rachelbeale]

Expected behavior

If the form control assigned to the sky-lookup component is in an error state, I should see a red boarder highlighting the field. I should also be able to assign the class sky-form-control without changing how the component is displayed drastically.

Actual behavior

If the form control assigned to the sky-lookup component is in an error state there is no red boarder - just the normal blue. If I assign the class sky-form-control, my lookup component now looks something like this:

Steps to reproduce

Add [Validators.required] to your formControl for the lookup component and add something then take it out. The formControl will have the correct invalid state but no highlighting.

Add class="sky-form-control" to your lookup component and watch wonky displays ensue

Plunker (see example SKY UX 2 plunker template at: https://plnkr.co/edit/sfPCGxbLdMnpyw2VtFVk?p=preview

Impact

I can't display errors to users in the way that the UX guidelines would like me to.

[Blackbaud-TrevorBurch]

Hey @blackbaud-rachelbeale - I have a PR out for this.

I believe that I understand your issue and wanted to double check something with you. The Lookup component already includes the sky-form-control class around the input. You adding it cause it to react to the class twice and led to the odd behavior. Did you need this class for anything specific or were you simply attempting to get the error state to work and everything conform to design specs?

After the fix is released you should simply be able to add the validator and see everything work. We simply were not styling correctly internally and thus were blocking the error state from showing up.

[blackbaud-rachelbeale]

Hey @Blackbaud-TrevorBurch, I was adding it simply to try and get to the error state as when I was inspecting the element I did not see sky-form-control being applied - but now that I think about it I'm not sure if I was looking at the input specifically or not. If you have the PR out that will update the internal styling to work with validator that should be all I need.