Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
tadeualencar opened this issue Mar 18, 2023 · 0 comments
Labels
bug Results from a bug in the CSS implementation

Comments

@tadeualencar
Copy link

tadeualencar commented Mar 18, 2023

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

@tadeualencar tadeualencar added the bug Results from a bug in the CSS implementation label Mar 18, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Results from a bug in the CSS implementation
Projects
None yet
Development

No branches or pull requests

1 participant