feat(react,styles): add SearchField and internal TextFieldWrapper components

[yhafez]

Closes #1190
Closes #1178

[aws-amplify-us-east-1]

This pull request is automatically being deployed by Amplify Hosting (learn more).

Access this pull request here: https://pr-1372.d15792l1n26ww3.amplifyapp.com

[scurker]

@yhafez this is looking really good! Most of the comments are just bringing things in alignment with the rest of Cauldron's conventions, but this has a great foundation, good work!

[shawnsharpDQ]

Could we remove the margin on the right next to the clear button?

The clear button needs to have a 24px hit area and I think it is measuring close to 14px

[scurker]

The clear button needs to have a 24px hit area and I think it is measuring close to 14px

The x to clear the field is coming from chrome ui and is not Cauldron. The mechanism for 24px also accounts for spacing, which means we need to account for the input field to be spaced appropriately, which it is not currently:

To be clear, a target can be under 24px and still pass minimum target size as long as there are no adjacent targets within that target. Since this is part of browser chrome that we can't customize the sizing, we need to be sure that the spacing passes instead.

[scurker]

Mostly nit picks and things to bring things up to alignment with other cauldron components.

Addressed

[scurker]

I'm looking into one last thing, the intermediate variables don't seem to be getting applied so I'm trying to dig into why that's not happening. But in the meantime, a few last cleanup things.

Addressed

[scurker]

🎉 Nice Work!