adobe/spectrum-css

TextField ValidationIcon not showing properly due to "box-sizing: border-box"

tadeualencar opened this issue · 0 comments

tadeualencar commented

Description

TextField Validation State Icon not showing properly due to CSS 'box-sizing'. It's exactly the same problem happened to TreeView(fixed by #487) where Validation Icon is not showing properly due to CSS box-sizing: border-box where should be "content-box".

When you add following CSS problem is solved:

.spectrum-Textfield-validationIcon { box-sizing: content-box; }

Steps to reproduce

  1. Just add any TextField with ValidationState on any next.js app
  2. Observe cropped valid and invalid icons

Screenshots

Environment

  • Spectrum CSS version: 3.25.1
  • Browser(s) and OS(s): Chrome 111.0.5563.65 on Win 11

Additional context