Add kbd styling and/or component

[j-m]

I would like there to be styling for the kbd tag so I can indicate shortcuts like:
Alt + A

Looking at the Figma (code page) there is also a note that says this needs to be done

(also kinda briefly mentioned in #1573)

Currently the only styling is

code, pre, kbd, samp {
    font-family: "Roboto Mono", Consolas, Menlo, Courier, monospace;
}

The linked code

  kbd {
    padding: 0.2em;
    border: $euiBorderThin;
    border-bottom-color: shadeOrTint($euiColorLightShade, 10%, 10%);
    border-radius: $euiBorderRadius;
    box-shadow: inset 0 -1px 0 $euiColorLightShade;
  }

is not in EUI (or at least in the non-Amsterdam theme)

I thought I'd raise an issue as I couldn't find one.

It might be good if we could create a new component to limit what combinations we can use - I doubt it's good for people to use <kbd> for non-shortcuts e.g.

<EuiKeyboard 
  char: 'A' | 'B' | 'C' ...
  ctrl?: boolean
  shift?: boolean
  alt?: boolean 
  win?: boolean
  cmd?: boolean
/>

[miukimiu]

Thanks, @j-m for suggesting this component.

I think we could only style better the <kbd> tag and inherit the text size and color based on EuiText.

It might be good if we could create a new component to limit what combinations we can use - I doubt it's good for people to use <kbd> for non-shortcuts e.g.

IMO just the <kbd> tag would work. I don't see a reason to create a component and limit the combinations. I guess combinations are hard to predict so let's assume EUI consumers are going to use the tag for what is expected. 🙂

[github-actions]

👋 Hey there. This issue hasn't had any activity for 180 days. We'll automatically close it if that trend continues for another week. If you feel this issue is still valid and needs attention please let us know with a comment.

[miukimiu]

Just to follow up on this issue I created a component spec that can be found here.

I decided to create a component instead of just styling the <kbd> tag

I'll keep the discussion in #6049.