New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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" /> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
done 👍
${props => | ||
props.monospace && | ||
css` | ||
font-family: ${get('fonts.mono')}; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yeah I feel the size issue too. Would appreciate help from @mperrotti on this design.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
✅ with some minor comments / questions
Co-authored-by: Rez <rezrah@github.com>
Describe your changes here.
Added a monospace prop to TextInput component
TextInput
now accepts a prop calledmonospace
which is boolean. When this prop is present, the textinput changesfont-family
tofonts.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.