inputs missing focused state
shimaasq opened this issue · comments
Bug description
Input fields are designed to have 1px border on hover and 2px border when focused. in the styleguide currently they only have hover state. I would like it to be updated with a focused state. if borders change the size of the element, shadows are also possible solution.
the benefit of having hover and focused states is that they give the impression that the experience is fluid and buyer is in control of it, which create trust in the system. I understand that hover states are desktop centric but we still have big % of users on desktop that we want to serve good exp to.
Link to design
Reproduction
Environment
https://square.github.io/maker/styleguide/pin-input/#/InputAddressed by
not urgent
Can you contribute a fix?
- I’m interested in opening a pull request for this issue.
Hmmm, I investigated this a bit and I think I've narrowed it down to this line as part of this release
Focus states were implemented using :focus-within which worked for all supported browsers at the time, up until Maker v4.1.0 when >0.5% was added to our supported browsers list which added browsers like UC Browser and Opera Mini which do not support :focus-within which basically silently broke focus states for all browsers because postcss refused to process :focus-within anymore since it wasn't part of all our supported browsers anymore.
I think we can fix this by adding not UCAndroid 12.12 and not OperaMini all to our browserslist.
input focus states are back: https://square.github.io/maker/styleguide/8.0.0/#/Input