Skip to content
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.

Sign up for GitHub

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

Jump to bottom

KeybindingHint component styling doesn’t match global <kbd> element styling #5125

Closed
dylanatsmith opened this issue Oct 15, 2024 · 2 comments
Closed

KeybindingHint component styling doesn’t match global <kbd> element styling #5125

dylanatsmith opened this issue Oct 15, 2024 · 2 comments
Labels
bug Something isn't working react

Comments

@dylanatsmith
Copy link
Contributor

Description

The <kbd> element has a lil shadow/border that looks keycappy, while the <kbd> element output by KeybindingHint just has a border.

Screen.Recording.2024-10-15.at.16.28.35.mov

Steps to reproduce

  1. Compare any <kbd> element with any rendered <KeybindingHint> element

Note: I’m flagged into the CSS modules staff ship

Version

Latest in dotcom

Browser

Firefox
@dylanatsmith dylanatsmith added the bug Something isn't working label Oct 15, 2024
@iansan5653
Copy link
Contributor

This was intentional when we originally built this for Projects; we wanted a more minimal and modern looking design that wouldn't be so distracting in menus and tooltips. The kbd element default styling feels targeted more for rendering in Markdown than as a keyboard shortcut hint.

@dylanatsmith
Copy link
Contributor Author

Cool, thanks for the context!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working react
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@iansan5653 @dylanatsmith