[EuiText] Add kbd styles

[miukimiu]

Summary

Closes #5016.

This PR adds styles for kbd's within EuiText.

• This can be tested locally by replacing the file src-docs/src/views/text/text.js with the content from: https://gist.github.com/miukimiu/ed2274e98af630f46013fd767b4a9799.
• Or just use the playground in https://eui.elastic.co/pr_6049/#/display/text.

kbd within different EuiText sizes:

Code vs Figma

The implementation differs a little bit from Figma because of the way the font is rendered.

Checklist

• Checked in both light and dark modes
• Checked in mobile
• Checked in Chrome, Safari, Edge, and Firefox
• Props have proper autodocs and playground toggles
• Added documentation
• Checked Code Sandbox works for any docs examples
• Added or updated jest and cypress tests
• Checked for breaking changes and labeled appropriately
• Checked for accessibility including keyboard-only and screenreader modes
• Updated the Figma library counterpart
• A changelog entry exists and is marked appropriately

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_6049/

[chandlerprall]

I wonder if we do want to go the component route for this as it would allow controlling the presentation for combinations like Cmd + C

e.g. <EuiKbd keys=['Cmd', 'C']/>

If it isn't something we want to enforce, this adding styles for kbd within EuiText looks good

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_6049/

[miukimiu]

@chandlerprall and @constancecchen,

For this type of implementation a component <EuiKbd keys=['Cmd', 'C']/> would work well:

But for other usages, like documentation, just the HTML tag kbd would work better. I searched for crtl in our repos and I found some *.asciidoc files with it. Just an example:

After the script has run for about 15 seconds, enter CTRL + C to stop it

So I'm assuming that docs sites are the best candidates to use this component/element. @chandlerprall do we need this as a component to be used in docsmobile or is it ok to be a child in EuiText? How would the tag work in mdx?

Regarding the +, I know that @constancecchen is not a fan because of how screen readers read the text. As she mentioned:

People don't tend to say "Control plus alt plus delete", they say "control alt delete" all at once.

So I don't think we should enforce that in a component. But it is a very common practice to use the +:

• https://developer.mozilla.org/en-US/docs/Web/HTML/Element/kbd

Concluding. I'm ok with the kbd being only a child of EuiText and I can add a new EuiKeyboard component if it makes easier the usage in docsmobile.

Let me know your thoughts.

[cee-chen]

I wonder if we do want to go the component route for this

Haha I just argued against the component route in the spec doc 🙈 To be honest I think it's overkill, like making a component for the <b> tag called <EuiBold> 🤷

Like Elizabet said, I'm also not a huge fan of + between combo keys, I feel like the association is already implicit between two keys next to each other. For that reason I think it makes sense to let folks use <kbd> on a case-by-case basis rather than enforcing a delimiter. That's a relatively loosely held opinion though, I'm definitely willing to be swayed against it.

EDIT: From Michail's keyboard shortcuts research in elastic/kibana#90515, it looks like Google uses + between combos and GitHub doesn't, which I find interesting.

[chandlerprall]

Let's keep this simple then and stick with <kbd>+styles 👍

do we need this as a component to be used in docsmobile or is it ok to be a child in EuiText? How would the tag work in mdx?

The page body is wrapped in an EuiText so the styles should automatically apply. mdx will use the browser's element unless the app overwrites it. Everything should Just Work right out of the box 🥳

[cee-chen]

🎉

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_6049/