Add variant to KeyboardKey component

.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',
+    });
+  });
 });