Add variant to KeyboardKey component (#8288)

<!--
  ☝️How to write a good PR title:
- Prefix it with [ComponentName] (if applicable), for example: [Button]
  - Start with a verb, for example: Add, Delete, Improve, Fix…
  - Give as much context as necessary and as little as possible
  - Prefix it with [WIP] while it’s a work in progress
-->

### WHY are these changes introduced?

Part of the Online store editor Keyboard Shortcut enhancement -
[Figma](https://www.figma.com/file/qRogDRYEpj1CokjAY06WKi/OSE-Keyboard-Shortcuts?node-id=1734%3A15442)

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

<details open>
<summary>Screenshots</summary>
<br>

Before:

<img width="79" alt="image"
src="https://user-images.githubusercontent.com/24706433/223430091-cbeefee6-4843-4c4d-8ffc-edf6b1dd01c5.png">

### Change

Default:

<img width="460" alt="image"
src="https://user-images.githubusercontent.com/24706433/223429825-381e6be6-a7ff-42fb-a95e-6d9e9aa197e8.png">

Small: 

<img width="307" alt="image"
src="https://user-images.githubusercontent.com/24706433/223895796-a835346f-9a42-448c-9b9c-0c408995da5d.png">

</details>





<!--
  Context about the problem that’s being addressed.

-->

### WHAT is this pull request doing?

<!--
  Summary of the changes committed.

Before / after screenshots are appreciated for UI changes. Make sure to
include alt text that describes the screenshot.

If you include an animated gif showing your change, wrapping it in a
details tag is recommended. Gifs usually autoplay, which can cause
accessibility issues for people reviewing your PR:

    <details>
      <summary>Summary of your gif(s)</summary>
      <img src="..." alt="Description of what the gif shows">
    </details>
-->

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.

<!-- ℹ️ Delete the following for small / trivial changes -->

### How to 🎩

🖥 [Local development
instructions](https://github.com/Shopify/polaris/blob/main/README.md#local-development)
🗒 [General tophatting
guidelines](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md)
📄 [Changelog
guidelines](https://github.com/Shopify/polaris/blob/main/.github/CONTRIBUTING.md#changelog)

<!--
  Give as much information as needed to experiment with the component
  in the playground.
-->

<details>
<summary>Copy-paste this code in
<code>playground/Playground.tsx</code>:</summary>

```jsx
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>
  );
}
```

</details>

### 🎩 checklist

- [ ] Tested on
[mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing)
- [ ] Tested on [multiple
browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers)
- [x] Tested for
[accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md)
- [x] [Tophatted
documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md)
changes in the style guide

Author: rcd00

.changeset/quiet-mirrors-talk.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': minor
+---
+
+Updated the style of keyboard component and add optional size prop

polaris-react/src/components/KeyboardKey/KeyboardKey.scss

@@ -1,23 +1,32 @@
-$key-base-height: 24px;
+$key-base-dimension: 28px;
 
 .KeyboardKey {
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-  display: inline-block;
-  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-  height: $key-base-height;
+  height: $key-base-dimension;
+  display: inline-flex;
+  justify-content: center;
   margin: 0 var(--p-space-05) var(--p-space-05);
-  padding: 0 var(--p-space-1);
-  background-color: var(--p-surface);
-  box-shadow: 0 0 0 var(--p-space-025) var(--p-border-subdued),
-    0 var(--p-space-05) 0 0 var(--p-surface),
-    0 var(--p-space-05) 0 var(--p-space-025) var(--p-border-subdued);
+  padding: 0 var(--p-space-2);
+  background: var(--p-surface-depressed);
+  box-shadow: 0 var(--p-space-025) 0 var(--p-hint-from-direct-light);
   border-radius: var(--p-border-radius-1);
-  font-family: var(--p-font-family-sans);
-  font-size: var(--p-font-size-75);
+  color: var(--p-text);
+  font-size: var(--p-font-size-100);
   font-weight: var(--p-font-weight-medium);
-  line-height: $key-base-height;
-  color: var(--p-text-subdued);
+  font-family: var(--p-font-family-sans);
+  line-height: $key-base-dimension;
   text-align: center;
-  min-width: $key-base-height;
+  min-width: $key-base-dimension;
   user-select: none;
 }
+
+.small {
+  background: var(--p-background-selected);
+  border-radius: var(--p-border-radius-05);
+  box-shadow: none;
+  line-height: unset;
+  padding: 0 var(--p-space-1);
+  font-size: var(--p-font-size-75);
+  height: var(--p-space-5);
+  min-width: var(--p-space-5);
+}

polaris-react/src/components/KeyboardKey/KeyboardKey.stories.tsx

@@ -7,5 +7,64 @@ export default {
 } as ComponentMeta<typeof KeyboardKey>;
 
 export function Default() {
-  return <KeyboardKey>Ctrl</KeyboardKey>;
+  return (
+    <div style={{display: 'flex', gap: '20px'}}>
+      <div style={{display: 'flex', flexDirection: 'column'}}>
+        <div style={{display: 'flex'}}>
+          <KeyboardKey>⌘</KeyboardKey>
+          <KeyboardKey>s</KeyboardKey>
+        </div>
+        <div style={{display: 'flex'}}>
+          <KeyboardKey>ctrl</KeyboardKey>
+          <KeyboardKey>s</KeyboardKey>
+        </div>
+      </div>
+
+      <div style={{display: 'flex', flexDirection: 'column'}}>
+        <div style={{display: 'flex'}}>
+          <KeyboardKey>⌘</KeyboardKey>
+          <KeyboardKey>/</KeyboardKey>
+        </div>
+        <div style={{display: 'flex'}}>
+          <KeyboardKey>ctrl</KeyboardKey>
+          <KeyboardKey>/</KeyboardKey>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export function Small() {
+  return (
+    <div style={{display: 'flex', gap: '20px'}}>
+      <div style={{display: 'flex', flexDirection: 'column'}}>
+        <div style={{display: 'flex'}}>
+          <KeyboardKey size="small">⌘</KeyboardKey>
+          <KeyboardKey size="small">d</KeyboardKey>
+        </div>
+        <div style={{display: 'flex'}}>
+          <KeyboardKey size="small">⌘</KeyboardKey>
+          <KeyboardKey size="small">h</KeyboardKey>
+        </div>
+        <div style={{display: 'flex'}}>
+          <KeyboardKey size="small">⌘</KeyboardKey>
+          <KeyboardKey size="small">⌫</KeyboardKey>
+        </div>
+      </div>
+      <div style={{display: 'flex', flexDirection: 'column'}}>
+        <div style={{display: 'flex'}}>
+          <KeyboardKey size="small">ctrl</KeyboardKey>
+          <KeyboardKey size="small">d</KeyboardKey>
+        </div>
+        <div style={{display: 'flex'}}>
+          <KeyboardKey size="small">ctrl</KeyboardKey>
+          <KeyboardKey size="small">h</KeyboardKey>
+        </div>
+        <div style={{display: 'flex'}}>
+          <KeyboardKey size="small">ctrl</KeyboardKey>
+          <KeyboardKey size="small">⌫</KeyboardKey>
+        </div>
+      </div>
+    </div>
+  );
 }

polaris-react/src/components/KeyboardKey/KeyboardKey.tsx

@@ -1,15 +1,22 @@
 import React from 'react';
 
+import {classNames} from '../../utilities/css';
+
 import styles from './KeyboardKey.scss';
 
+type Size = 'small';
+
 export interface KeyboardKeyProps {
-  /** The content to display inside the key */
   children?: string;
+  size?: Size;
 }
+export function KeyboardKey({children = '', size}: KeyboardKeyProps) {
+  const key =
+    !size && children.length > 1
+      ? children.toLowerCase()
+      : children.toUpperCase();
 
-export function KeyboardKey({children}: KeyboardKeyProps) {
-  let key = children || '';
-  key = key.length > 1 ? key.toLowerCase() : key.toUpperCase();
+  const className = classNames(styles.KeyboardKey, size && styles[size]);
 
-  return <kbd className={styles.KeyboardKey}>{key}</kbd>;
+  return <kbd className={className}>{key}</kbd>;
 }

polaris-react/src/components/KeyboardKey/tests/KeyboardKey.test.tsx

@@ -23,4 +23,11 @@ describe('<KeyboardKey />', () => {
     const keyboardKey = mountWithApp(<KeyboardKey />);
     expect(keyboardKey).toContainReactText('');
   });
+
+  it("renders small icon when size is set to 'small'", () => {
+    const keyboardKey = mountWithApp(<KeyboardKey size="small" />);
+    expect(keyboardKey).toContainReactComponent('kbd', {
+      className: 'KeyboardKey small',
+    });
+  });
 });