Use consistent styling to display shortcuts in GitLab

Everyone can contribute. Help move this issue forward while earning points, leveling up and collecting rewards.

• Close this issue

Problem

Currently, we use three different styles for shortcuts in markdown, in GitLab Docs and GitLab UI.

Docs	Markdown	UI

As we're adding more shortcuts to GitLab menus (for example in this issue), we need to make sure the styling for shortcuts in GitLab is consistent so the user makes a connection between those elements when reading GitLab Docs, reading markdown documents, and navigating the UI.

WIP Proposal

Displaying the keyboard shortcuts as keycaps makes it easier to distinguish between the shortcuts and other UI copy, and that style is familiar to our users from markdown and many other application that are using similar styling for their shortcuts.

Keyboard shortcuts in Figma	Keyboard shortcuts in VSCode

We could use the existing <kbd> element for styling the shortcuts as keycaps, however the styling may be adjusted to make sure it works well within the UI and doesn't make menus too crammed or confusing.

Here's the initial discussion around this issue.

From @ClemMakesApps

Industry convention is to use <kbd> HTML element when referencing keys

From @psimyn

I'm sure there'll be some kind of horrible style breakage I have't considered, but at first glance moving the kbd styles outside of the .md block should make <kbd> styles the same everywhere throughout the app

The current kbd styling makes the menu look too busy	More subtle version with fill and no borders

Additional details

These are the <kbd> styles we're currently using for markdown.