feat(InputFields & Counter): use inputBorder token in border#1337
Conversation
|
Size stats
|
|
Accessibility report ℹ️ You can run this locally by executing |
|
Deploy preview for mistica-web ready! ✅ Preview Built with commit 891ac24. |
|
Screenshot tests report ✔️ All passing |
yceballost
changed the title
| }), | ||
| { | ||
| background: 'none', | ||
| outline: 0, |
There was a problem hiding this comment.
would be nice have screenshots for focus?
| lineHeight: styles.pinInputLineHeight, | ||
| fontSize: styles.pinInputLineHeight, | ||
| height: styles.pinInputLineHeight, | ||
| height: `calc(${styles.pinInputLineHeight} * 3 - 2px)`, |
There was a problem hiding this comment.
we use the same calc in css width
mistica-web/src/pin-field.css.ts
Line 29 in 4302740
And substract 2px to ensure the box measures have the same height and width
Without -2px
without -2px and different font size
| export const field = style([ | ||
| sprinkles({ | ||
| overflow: 'hidden', | ||
| border: 'regular', |
There was a problem hiding this comment.
instead of setting border to regular and overriding the borderColor, I'd just set the border. Alternatively, we could define a new border type for inputs in sprinkles
There was a problem hiding this comment.
I included a new type in sprinkles to manage input borders from one side
# [16.24.0](v16.23.0...v16.24.0) (2025-05-06) ### Features * **Accordion, List, Select:** Chevron normalization ([#1345](#1345)) ([c24ed06](c24ed06)) * **InputFields & Counter:** use inputBorder token in border ([#1337](#1337)) ([c8538a2](c8538a2)) * **TextLink:** add underline to textLink ([#1343](#1343)) ([b90ad61](b90ad61))
|
🎉 This PR is included in version 16.24.0 🎉 The release is available on: Your semantic-release bot 📦🚀 |
4 participants
Important
All OBs are communicated