search

axa-ch-webhub-cloud / pattern-library

AXA CH UI component library. Please share, comment, create issues and work with us!
https://axa-ch-webhub-cloud.github.io/plib-feature/develop
126 stars 18 forks source link

AXAInputText has double outline when focused while page is zoomed in #2090

Closed salle18 closed 3 years ago

salle18 commented 3 years ago

@axa-ch/input-text v4.5.9

This issue was also reproducible on v83 of Firefox without zoom

Screenshot 2021-02-01 at 11 54 52

Expected Behavior

Input text has solid outline regardless of zoom and browser.

Current Behavior

Input text shows double outline when focused on zoomed page.

Reproduction link

https://codesandbox.io/s/agitated-haibt-b1h2p?file=/src/App.js

Context (Environment)

Can be reproduced on our acc environment:

https://www.acc.axa.ch/de/test-pods/kmu20.html#/wizard/company-name

danyball commented 3 years ago

Also at Dropdown, Textarea, Datepicker. We will ask the designers.

danyball commented 3 years ago

@salle18 This is not a bug. The component is designed to have a hover-border effect. And to see a different to "selected" state there is another, 2px border. If you/your team do not like it please tell us exactly why and label this issue as a "feature request". Thank you!

danyball commented 3 years ago

@salle18 Sorry for confusing. I talked to the designers. hover state should be 1px, active state should be 2px. And you found the bug that just at firefox and 150% zooming there is are 2 thin borders instead of one 2px border?

danyball commented 3 years ago

@salle18 is it still a problem for you? if not, please close issue.

salle18 commented 3 years ago

Closing the issue as this is more of a niche feature request