New Component: KeyboardKey / KeyboardKeyGroup

[macandcheese]

Description

It would be nice to have a stylized way of displaying a key ("shift)", or combination of keys ("shift" + "enter" + "foo"), to replicate and expand on the <kbd> element while providing a consistent way to display and group multiple keys together, if desired with a label set on the group.

User Stories

Acceptance Criteria

A new component/s - KeyCode / KeyChar / + Group is added to support the consistent display of keys across the platform. It could have some built in icons for known keyboard strings, and also support a property for string.

To make it "do more than the native element" - there is built in iconography, display helpers, a group-level label, and potentially tooltips. Having a group that adds a consistent "+" would ensure consistency in implementation across the platform.

Relevant Info

Shopify: https://polaris.shopify.com/components/images-and-icons/keyboard-key

NordHealth (planned):

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

Helpful Details

Proposed API: KeyboardKeyGroup:

• title / label
• layout: inline / inline-space-between (?)

KeyboardKey:

• displayType: icon / text / both

• displayName: full / short (CNTRL / Control) - set on parent?

• character: accept valid characters only (?) to correctly map icon + consistent name (ie CNTRL / Control), internationalize?

• We could also explore how to have multiple "rows" of KeyboardKeyGroup, really it could be a three component set ...

cc @ashishgodbole

Priority impact

p4 - not time sensitive

Esri team

ArcGIS Online

[ashishgodbole]

Hi, a link to the design explorations, and potential new components (or existing component updates) can be found at this link: Figma link

[geospatialem]

Adding design for any considerations prior to proceeding.