update keyboardKey component

Author: rcd00

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

@@ -1,23 +1,32 @@
-$key-base-height: 24px;
+$key-base-height: 28px;
+$medium-side-padding: 9.5px;
 
 .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;
   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);
-  border-radius: var(--p-border-radius-1);
+  padding: 0 $medium-side-padding;
+  background: var(--p-surface-depressed);
+  box-shadow: 0px var(--p-space-025) 0px rgb(0 0 0 / 15%);
+  border-radius: var(--p-space-1);
+  color: var(--p-text);
   font-family: var(--p-font-family-sans);
   font-size: var(--p-font-size-75);
   font-weight: var(--p-font-weight-medium);
   line-height: $key-base-height;
-  color: var(--p-text-subdued);
   text-align: center;
   min-width: $key-base-height;
   user-select: none;
 }
+
+.small {
+  color: var(--p-text-subdued);
+  border-radius: var(--p-space-05);
+  box-shadow: none;
+  max-height: var(--p-space-5);
+  display: inline;
+  font-size: var(--p-space-3);
+  padding: var(--p-space-05) var(--p-space-1);
+}

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

@@ -7,5 +7,9 @@ export default {
 } as ComponentMeta<typeof KeyboardKey>;
 
 export function Default() {
-  return <KeyboardKey>Ctrl</KeyboardKey>;
+  return <KeyboardKey>⌘</KeyboardKey>;
+}
+
+export function Small() {
+  return <KeyboardKey variant="small">⌘</KeyboardKey>;
 }

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

@@ -1,15 +1,20 @@
 import React from 'react';
 
+import {classNames} from '../../utilities/css';
+
 import styles from './KeyboardKey.scss';
 
+type Variant = 'small';
+
 export interface KeyboardKeyProps {
-  /** The content to display inside the key */
   children?: string;
+  variant?: Variant;
 }
-
-export function KeyboardKey({children}: KeyboardKeyProps) {
+export function KeyboardKey({children, variant}: KeyboardKeyProps) {
   let key = children || '';
   key = key.length > 1 ? key.toLowerCase() : key.toUpperCase();
 
-  return <kbd className={styles.KeyboardKey}>{key}</kbd>;
+  const className = classNames(styles.KeyboardKey, variant && styles[variant]);
+
+  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 variant is set to 'small'", () => {
+    const keyboardKey = mountWithApp(<KeyboardKey variant="small" />);
+    expect(keyboardKey).toContainReactComponent('kbd', {
+      className: 'KeyboardKey small',
+    });
+  });
 });