Add variant to KeyboardKey component

[rcd00]

WHY are these changes introduced?

Part of the Online store editor Keyboard Shortcut enhancement - Figma

Update styling of the default KeyboardKey component and adds optional size prop.

Screenshots

Before:

Change

Default:

Small:

WHAT is this pull request doing?

Update KeyboardKey component to add an optional property variant, which can take small as a value. A KeyboardKey component with this variant will be used in tooltips to display the keyboard shortcut of an action.

How to 🎩

🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines

Copy-paste this code in playground/Playground.tsx:

import React from 'react';
import {Page} from '../src';

export function Playground() {
  return (
    <Page title="Playground">
      {/* Add the code you want to test in here */}
    </Page>
  );
}

🎩 checklist

• Tested on mobile
• Tested on multiple browsers
• Tested for accessibility
• Tophatted documentation changes in the style guide

[github-actions]

size-limit report 📦

Path	Size
polaris-react-cjs	221.34 KB (+0.02% 🔺)
polaris-react-esm	140.79 KB (+0.02% 🔺)
polaris-react-esnext	197.51 KB (+0.05% 🔺)
polaris-react-css	43.05 KB (+0.11% 🔺)

[skparkk]

maybe a question for @ardakaracizmeli , but are we fully replacing the keyboard key styling to this one with the grey bg?

[ardakaracizmeli]

maybe a question for @ardakaracizmeli , but are we fully replacing the keyboard key styling to this one with the grey bg?

Yup, the idea is to fully replace

[sarahill]

✅

[sarahill]

Chromatic looks a little off but Storybook looks correct for keyboard key small

Chromatic:

Storybook:

[kyledurand]

Looking pretty good, some general, minor comments. I can take a look again after your next pass

[kyledurand]

Code looks good but I'd like to run the latest update by @sarahill again.

Sara are we cool with changing small variant to all caps?

[rcd00]

Code looks good but I'd like to run the latest update by @sarahill again.

Sara are we cool with changing small variant to all caps?

👌sorry didn't get to mention but @ardakaracizmeli actually confirmed this but open to feedback!