[terra-search-field] Added invalid red box for invalid search field

[udaymattam]

Summary

What was changed:
added invalid red box for invalid search field

Why it was changed:

Testing

This change was tested using:

• WDIO
• Jest
• Visual testing (please attach a screenshot or recording)
• Other (please describe below)
• No tests are needed

Reviews

In addition to engineering reviews, this PR needs:

• UX review
• Accessibility review
• Functional review

Additional Details

This PR resolves:
closed : #3973
UXPLATFORM-XXXX

---

Thank you for contributing to Terra.
@cerner/terra

[supreethmr]

Why do we need error outline on clear button. are these styles provided UX team ?

[supreethmr]

PR description is too vague added invalid red box for invalid search field Why do we need red box for invalid search field ?

Looking at the Jira 3973, Ask was to highlight the search field with red outline when user enters invalid value. In this case PR should only have changes on doc-site and not on source code. Since search field provides a callback prop onInvalidSearch consuming applications should do error handling ( like displaying messages or changing color Or adding aria-invalid attribute for input) when onInvalidSearch is invoked.

example should update to pass required style changes to search field whenever they need. ( custom class names can be passed down through inputAttributes for search-field).

[supreethmr]

Why are we updating screenshots in this PR ..? As we can see PR has only doc example changes

[udaymattam]

closing this PR changes will track under #3986 PR