Help panel: <kbd> tag

Core Development Feature Requests
1

For the first time, I've wanted to use the <kbd> tag in the Editor's help panel. And for the first time, I've noticed that the tag is not formatted. In the following example the ⤡, Done and Cancel should all look like buttons (which is how that tag is usually formatted):

image

Here is an example format from the MDN page for that tag:

image

And here is the matching CSS:

kbd {
    font-family: monospace;
    background-color: #eee;
    border-radius: 3px;
    border: 1px solid #b4b4b4;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .2), 0 2px 0 0 rgba(255, 255, 255, .7) inset;
    color: #333;
    display: inline-block;
    font-size: .85em;
    font-weight: 700;
    line-height: 1;
    padding: 2px 4px;
    white-space: nowrap;
}

It would be really nice to have that option for the help panel and indeed for other panels such as the markdown ones.

Finally, here is an example from the help panel with the above style applied:

image

2

We do already have the css class help-key for this.

<span class="help-key">Enter</span>

image

And a quick test shows <kbd class="help-key"> also works.

So you could add that class to get the formatting you want today, and if someone does a PR to apply the same styles to kbd then you won't need the class in the future.

1 Like
3

Great, thanks Nick. I'll try to remember to do a PR when I get a chance as I think that it is probably easier to remember the tag than it is a custom class.

image