Add monospace prop to textinput #1935
Conversation
🦋 Changeset detectedLatest commit: c5f327e The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
size-limit report 📦
|
docs/content/TextInput.mdx
Outdated
| ## Monospace text input | ||
|
|
||
| ```jsx live | ||
| <TextInput monospace aria-label="personal access token" name="pat" placeholder="github_pat_abcdefg123456789" /> |
There was a problem hiding this comment.
after checking out the deployment preview I realised my earlier suggestion wasn't quite right, my bad.
I think you should switch placeholder to value so it looks more like product version. Would be nice to get the CheckIcon in there too!
| <TextInput monospace aria-label="personal access token" name="pat" placeholder="github_pat_abcdefg123456789" /> | |
| <TextInput monospace leadingVisual={CheckIcon} aria-label="personal access token" name="pat" value="ghp_abcdefg123456789" /> |
| ${props => | ||
| props.monospace && | ||
| css` | ||
| font-family: ${get('fonts.mono')}; |
There was a problem hiding this comment.
do we need to tweak the size here too? the new type face looks a bit larger than usual inputs so may look odd adjacent to them. May just be the fixed-pitch of the the monospace font playing tricks on my eyes though. cc. @mperrotti
There was a problem hiding this comment.
Yeah I feel the size issue too. Would appreciate help from @mperrotti on this design.
There was a problem hiding this comment.
Took another detailed look and it may just be how monospace fonts look. Its the same size as the one on the developer settings > PAT generator page. I think I'll go ahead with what we have.
rezrah
left a comment
rezrah
left a comment
There was a problem hiding this comment.
✅ with some minor comments / questions
Describe your changes here.
Added a monospace prop to TextInput component
TextInputnow accepts a prop calledmonospacewhich is boolean. When this prop is present, the textinput changesfont-familytofonts.mono. All other functionality remains same.Closes https://github.com/github/primer/issues/757
Merge checklist
Take a look at the What we look for in reviews section of the contributing guidelines for more information on how we review PRs.