include <kbd> in running-text support
#2475
Conversation
packages/core/src/_typography.scss
Outdated
| box-shadow: $pt-elevation-shadow-2; | ||
| background: $white; | ||
| min-width: $kbd-key-size; | ||
| height: $kbd-key-size; |
There was a problem hiding this comment.
@giladgray <kbd>s should be
- same height as small buttons
- inline-flex
- make sure icons and text are vertically aligned
include `` in running-text supportPreview: documentation | landing | table |
update docsPreview: documentation | landing | table |
| @@ -281,6 +285,38 @@ Styleguide preformatted | |||
| @extend %code-block; | |||
| } | |||
|
|
|||
| %keyboard { | |||
There was a problem hiding this comment.
remind me why we do this again? I'd have taken this opportunity to kill this pattern
There was a problem hiding this comment.
bro i un-killed it for this opportunity! https://github.com/palantir/blueprint/pull/2366/files#diff-63be20ab91cfbb20b47f78f5a125aea1R165
this is a perfect use case for placeholders: one set of styles that we want tied to two selectors - .X and .pt-running-text x
fix kbd style/layoutPreview: documentation | landing | table |
|
@giladgray review your own PR 🙏 |
packages/core/src/_typography.scss
Outdated
| display: inline-block; | ||
| border-radius: $pt-border-radius - 1; | ||
| box-shadow: $pt-elevation-shadow-2; | ||
| $kbd-key-size: $pt-button-height-small; |
There was a problem hiding this comment.
delete this variable alias, re-use the existing one
packages/core/src/_typography.scss
Outdated
| $kbd-key-size: $pt-button-height-small; | ||
| display: inline-flex; | ||
| align-items: center; | ||
| justify-content: center; |
There was a problem hiding this comment.
not necessary - element is never wider than content
packages/core/src/_typography.scss
Outdated
| background: $white; | ||
| min-width: $kbd-key-size; | ||
| height: $kbd-key-size; | ||
| padding: ($pt-grid-size * 0.3) ($pt-grid-size / 2); |
There was a problem hiding this comment.
use 3px 6px ($pt-border-radius ($pt-border-radius * 2)) and remove modifier-key overrides below
packages/core/src/_typography.scss
Outdated
| color: $pt-text-color-muted; | ||
| font-family: inherit; | ||
| font-size: $pt-font-size-small; | ||
|
|
There was a problem hiding this comment.
needs vertical-align
|
@llorca please re-review and be sure to check hotkeys dialog ( |
refactor keyboard & hotkeys cssPreview: documentation | landing | table |
another element that should not require a CSS class