Comments (7)
is this adding both the function of switching the type back and forth or is it also moving the icon to be part of the input?
from components.
We might need to think about our long-term strategy with this, type="number"
works well with this convention as we're mocking the behaviour to improve accessibility/usability. type="password"
brings a few more assumptions and may not be a one solution fits all scenario.
I can definitely see the benefit of moving that logic out of PasswordField
but maybe we need to create a PasswordInput
component rather than hooking into type="password"
.
from components.
is this adding both the function of switching the type back and forth or is it also moving the icon to be part of the input?
I was thinking both
We might need to think about our long-term strategy with this, type="number" works well with this convention as we're mocking the behaviour to improve accessibility/usability. type="password" brings a few more assumptions and may not be a one solution fits all scenario.
Interesting — do you have any specific cases in mind where we'd want type='password'
without this functionality?
from components.
is this adding both the function of switching the type back and forth or is it also moving the icon to be part of the input?
I was thinking both
It might be a bit stretched but adding more buttons and icons to the existing than we have makes it an even more composite component. It is not bad but it pushes the input away from what we thought our primitives would be. not the end of the world to be honest.
I would think Tom's suggestion for a PasswordInput sounds like a good compromise
from components.
Interesting — do you have any specific cases in mind where we'd want
type='password'
without this functionality?
That's an assumption I'd rather not make, type="number"
fixes things, there should be no number field that doesn't conform to this new behaviour,type="password"
is additive and there may be scenarios where we just need a standard password input.
from components.
You two have convinced me :D
So the approach I will take is:
- Create a
PasswordInput
with the eye icon and toggling behaviour - Update
PasswordField
to usePasswordInput
- (Later, in the main app) Update
CreatePasswordField
to usePasswordInput
from components.
@hollg Noice 👌
from components.
Related Issues (20)
- [Table]: Body font colour is too light HOT 1
- tab: disabled state cursor pointer
- Button: Loading state gets rendered in snapshots even when not visible HOT 1
- Feature request: tabs HOT 4
- Feature request: Search Input HOT 2
- Feature request: Button HOT 1
- Jest Dev Dependency: yarn install throws - The engine "node" is incompatible with this module HOT 3
- [FieldWrapper]: Styled versions incorrectly applying CSS HOT 2
- Feature request: Add scrollbar config to stitches config HOT 2
- Feature request: Better scrolling for Tabs in mobile view HOT 2
- Feature request: HOC for Tooltips HOT 2
- Feature request: Icon
- `Tabs.TriggerList`: scrolling to the end/begin of a list does not hide the arrow HOT 2
- Feature request: ActionIcon
- Feature request: AlertDialog HOT 1
- Feature request: Avatar HOT 2
- [Select]: Component doesn't accommodate a controlled usage HOT 1
- Can't override gridTemplateColumns in Grid component HOT 1
- Replace `polished` with `color2k`
- Feature request: Badge
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from components.