Error icon is incorrectly spaced in nimble-text-field

[mollykreis]

🐛 Bug Report

In the nimble-text-field, the error "!" icon should be 8px from the edge of the component. However, it is currently 8px from the border, which makes it 9px from the edge of the component.

We should evaluate whether this is the case with other components as well.

💻 Repro or Code Sample

🤔 Expected Behavior

The error icon in components should be 8px from the edge of the component, not 8px from the border of the component.

😯 Current Behavior

The error icon is 8px from the border of the component.

💁 Possible Solution

🔦 Context

🌍 Your Environment

• OS & Device: [e.g. MacOS, iOS, Windows, Linux] on [iPhone 7, PC]
• Browser [e.g. Microsoft Edge, Google Chrome, Apple Safari, Mozilla FireFox]
• Version [e.g. 1.8.0]

[mollykreis]

When this is fixed, we should remove the workaround added in this azdo PR to make the checkbox error icon align with the textfield error icon. Specifically, an extra 1px of padding was added to the right of the checkbox's error icon.