Hotkey style polish (palantir#10)

* Fix some spacing, shadow and sentence casing
* Change style of .pt-key
* Remove + for key combo, use 10px spacing instead

packages/core/examples/hotkeyPiano.tsx

@@ -120,7 +120,7 @@ class PianoKey extends React.Component<IPianoKeyProps, {}> {
             "piano-key-sharp": /\#/.test(note),
             "piano-key-pressed": pressed,
         });
-        const elevation = classNames(pressed ? "pt-elevation-3" : "pt-elevation-1");
+        const elevation = classNames(pressed ? "pt-elevation-0" : "pt-elevation-2");
         return <div className={classes}>
             <div className={elevation}>
                 <div className="piano-key-text">
@@ -151,7 +151,7 @@ export class HotkeyPiano extends BaseExample<IHotkeyPianoState> {
     /* tslint:disable:max-line-length */
     public renderHotkeys() {
         return <Hotkeys tabIndex={null}>
-            <Hotkey global label="Focus the Piano and a very long description that needs to wrap around to the next line" combo="shift + P" onKeyDown={this.focusPiano} />
+            <Hotkey global label="Focus the piano" combo="shift + P" onKeyDown={this.focusPiano} />
 
             <Hotkey group="Piano" label="Play a C5"  combo="Q" onKeyDown={this.setKey(0, true)} onKeyUp={this.setKey(0, false)} />
             <Hotkey group="Piano" label="Play a C#5" combo="2" onKeyDown={this.setKey(1, true)} onKeyUp={this.setKey(1, false)} />

packages/core/src/components/hotkeys/_hotkeys.scss

@@ -27,7 +27,7 @@ Additionally, any keyboard input that occurs inside a text input (such as a
 
 If you define hotkeys for your page, you'll want to display the hotkeys in a
 nice format for the user. If you register any global or local hotkeys, we
-automatically attach a hotkey for "?", which will display the hotkeys dialog.
+automatically attach a hotkey for <kbd class="pt-key">?</kbd>, which will display the hotkeys dialog.
 
 The dialog will always include all available global hotkeys, and if you are
 focused on an element that has any hotkeys, those will be shown as well.
@@ -42,8 +42,14 @@ Styleguide components.hotkeys
 /*
 Piano example
 
-A.k.a the keyboard keyboard. First, click the keys or press `shift+P` to focus
-the piano, then press the keys on your keyboard to play some music!
+Also known as the keyboard keyboard. First, click the keys or press
+<span class="pt-key-combo">
+  <kbd class="pt-key pt-modifier-key">
+    <span class="pt-icon-standard pt-icon-key-shift"></span>
+    shift
+  </kbd><kbd class="pt-key">P</kbd>
+</span>
+to focus the piano, then press the keys on your keyboard to play some music!
 
 @react-example HotkeyPiano
 
@@ -182,15 +188,15 @@ Note that spaces are ignored.
 
 ##### Aliased keys
 
-* `option` => `alt`
-* `cmd` => `meta`
-* `command` => `meta`
-* `return` => `enter`
-* `escape` => `esc`
-* `win` => `meta`
+* `option` &rarr; `alt`
+* `cmd` &rarr; `meta`
+* `command` &rarr; `meta`
+* `return` &rarr; `enter`
+* `escape` &rarr; `esc`
+* `win` &rarr; `meta`
 
 The special modifier `mod` will choose the OS-preferred modifier key — `cmd`
-for OSX and iOS, or `ctrl` for Windows and Linux.
+for macOS and iOS, or `ctrl` for Windows and Linux.
 
 ##### Hotkey tester
 
@@ -211,12 +217,8 @@ $modifier-key-padding: 3px 8px 3px 6px;
 .pt-key {
   display: inline-block;
 
-  border-radius: 2px;
-  box-shadow: 0 0 0 1px rgba($black, 0.1),
-      0 1px 2px rgba($black, 0.3),
-      0 4px 2px rgba($black, 0.1),
-      inset 0 -2px 0 rgba($black, 0.1),
-      inset 0 1px 1px $white;
+  border-radius: $pt-border-radius - 1;
+  box-shadow: $pt-elevation-shadow-2;
   background: $white;
   min-width: $kbd-key-size;
   height: $kbd-key-size;
@@ -237,18 +239,15 @@ $modifier-key-padding: 3px 8px 3px 6px;
   }
 
   .pt-dark & {
-    box-shadow: 0 0 0 1px rgba($black, 0.2),
-      0 1px 2px rgba($black, 0.6),
-      0 4px 2px rgba($black, 0.2),
-      inset 0 -2px 0 rgba($black, 0.2),
-      inset 0 1px 1px rgba($white, 0.1);
+    box-shadow: $pt-dark-elevation-shadow-2,
+                inset 0 1px 0 rgba($white, 0.05);
     background: $dark-gray5;
     color: $pt-dark-text-color-muted;
   }
 }
 
-.pt-key-combo .pt-icon-small-plus {
-  margin: 0 3px;
+.pt-key-combo .pt-key:not(:last-child) {
+  margin-right: $pt-grid-size / 2;
 }
 
 .pt-hotkey-dialog {
@@ -271,7 +270,7 @@ $modifier-key-padding: 3px 8px 3px 6px;
   margin: auto;
   max-height: 80vh;
   overflow-y: auto;
-  padding: $pt-grid-size * 4;
+  padding: $pt-grid-size * 3;
 
   .pt-hotkey-group {
     margin-bottom: $pt-grid-size * 3;
@@ -288,6 +287,9 @@ $modifier-key-padding: 3px 8px 3px 6px;
   justify-content: space-between;
 
   margin-right: 0;
-  margin-bottom: $pt-grid-size;
   margin-left: 0;
+
+  &:not(:last-child) {
+    margin-bottom: $pt-grid-size;
+  }
 }

packages/core/src/components/hotkeys/hotkey.tsx

@@ -31,10 +31,6 @@ export class KeyCombo extends React.Component<IKeyComboProps, {}> {
         const keys = normalizeKeyCombo(this.props.combo);
         const components = [] as JSX.Element[];
         for (let i = 0; i < keys.length; i++) {
-            if (i > 0) {
-                components.push(<span className="pt-icon-standard pt-icon-small-plus" key={`plus-${i}`} />);
-            }
-
             let key = keys[i];
             const icon = KeyIcons[key];
             if (icon != null) {

packages/core/src/components/hotkeys/hotkeysDialog.tsx

@@ -22,7 +22,7 @@ export interface IHotkeysDialogProps extends IDialogProps {
 
 class HotkeysDialog {
     public hotkeysDialogProps = {
-        globalHotkeysGroup: "Global Hotkeys",
+        globalHotkeysGroup: "Global hotkeys",
     } as any as IHotkeysDialogProps;
     public showing = false;
     private hotkeysQueue = [] as IHotkeyProps[][];

packages/docs/src/components/styleguide.tsx

@@ -143,7 +143,7 @@ export class Styleguide extends React.Component<IStyleguideProps, IStyleguideSta
 
     public renderHotkeys() {
         return <Hotkeys>
-            <Hotkey global={true} combo="[" label="Previous Section" onKeyDown={this.handlePreviousSection}/>
+            <Hotkey global={true} combo="[" label="Previous section" onKeyDown={this.handlePreviousSection}/>
             <Hotkey global={true} combo="]" label="Next section" onKeyDown={this.handleNextSection}/>
         </Hotkeys>;
     }