From 6c858b5b37fce85b83122939ca3e2eb41ecd3011 Mon Sep 17 00:00:00 2001
From: Gilad Gray <ggray@palantir.com>
Date: Wed, 2 May 2018 15:59:17 -0700
Subject: [PATCH 1/4] include `<kbd>` in running-text support

---
 packages/core/src/_typography.scss            | 36 +++++++++++++++++++
 packages/core/src/components/alert/alert.tsx  |  2 +-
 packages/core/src/components/button/button.md |  2 +-
 .../src/components/forms/numericInput.tsx     |  4 +--
 .../core/src/components/hotkeys/_hotkeys.scss | 30 ----------------
 .../src/components/tag-input/tag-input.md     |  4 +--
 packages/core/src/docs/accessibility.md       |  2 +-
 packages/docs-theme/src/styles/_props.scss    |  8 +++--
 8 files changed, 48 insertions(+), 40 deletions(-)

diff --git a/packages/core/src/_typography.scss b/packages/core/src/_typography.scss
index dc23e93a51..6d542a97ba 100644
--- a/packages/core/src/_typography.scss
+++ b/packages/core/src/_typography.scss
@@ -155,6 +155,10 @@ Styleguide running-text
     @extend %code-block;
   }
 
+  kbd {
+    @extend %keyboard;
+  }
+
   ul,
   ol {
     @extend %list;
@@ -281,6 +285,38 @@ Styleguide preformatted
   @extend %code-block;
 }
 
+%keyboard {
+  $kbd-key-size: 25px;
+  display: inline-block;
+  border-radius: $pt-border-radius - 1;
+  box-shadow: $pt-elevation-shadow-2;
+  background: $white;
+  min-width: $kbd-key-size;
+  height: $kbd-key-size;
+  padding: 3px 5px;
+  vertical-align: middle;
+  text-align: center;
+  line-height: $pt-grid-size * 2;
+  color: $pt-text-color-muted;
+  font-family: inherit;
+  font-size: $pt-font-size-small;
+
+  &.#{$ns}-modifier-key {
+    padding: 3px 8px 3px 6px;
+  }
+
+  .#{$ns}-dark & {
+    box-shadow: $pt-dark-elevation-shadow-2,
+                inset 0 1px 0 rgba($white, 0.05);
+    background: $dark-gray5;
+    color: $pt-dark-text-color-muted;
+  }
+}
+
+.#{$ns}-key {
+  @extend %keyboard;
+}
+
 /*
 Block quotes
 
diff --git a/packages/core/src/components/alert/alert.tsx b/packages/core/src/components/alert/alert.tsx
index 95dd6ea6f6..a1f0fde168 100644
--- a/packages/core/src/components/alert/alert.tsx
+++ b/packages/core/src/components/alert/alert.tsx
@@ -20,7 +20,7 @@ import { Icon, IconName } from "../icon/icon";
 
 export interface IAlertProps extends IProps {
     /**
-     * Whether pressing <kbd class="pt-key">escape</kbd> when focused on the Alert should cancel the alert.
+     * Whether pressing <kbd>escape</kbd> when focused on the Alert should cancel the alert.
      * If this prop is enabled, then either `onCancel` or `onClose` must also be defined.
      * @default false
      */
diff --git a/packages/core/src/components/button/button.md b/packages/core/src/components/button/button.md
index 4d485d536c..33b35bfab8 100644
--- a/packages/core/src/components/button/button.md
+++ b/packages/core/src/components/button/button.md
@@ -12,7 +12,7 @@ Use the `@ns-button` class to access button styles. You should implement buttons
 * Add the attribute `tabindex="0"` to make `<a>` tags focusable. `<button>` elements are
   focusable by default.
 * For buttons implemented with `<a>` tags, add `tabindex="-1"` to disabled buttons to prevent the
-  user from focusing them by pressing <kbd class="@ns-key">tab</kbd> on the keyboard.
+  user from focusing them by pressing <kbd>tab</kbd> on the keyboard.
 * Note that `<a>` tags do not respond to the `:disabled` attribute; use `.@ns-disabled` instead.
 
 @css button
diff --git a/packages/core/src/components/forms/numericInput.tsx b/packages/core/src/components/forms/numericInput.tsx
index 0864235068..fdfa54143f 100644
--- a/packages/core/src/components/forms/numericInput.tsx
+++ b/packages/core/src/components/forms/numericInput.tsx
@@ -73,7 +73,7 @@ export interface INumericInputProps extends IIntentProps, IProps {
     placeholder?: string;
 
     /**
-     * The increment between successive values when <kbd class="pt-key">shift</kbd> is held.
+     * The increment between successive values when <kbd>shift</kbd> is held.
      * Pass explicit `null` value to disable this interaction.
      * @default 10
      */
@@ -86,7 +86,7 @@ export interface INumericInputProps extends IIntentProps, IProps {
     min?: number;
 
     /**
-     * The increment between successive values when <kbd class="pt-key">alt</kbd> is held.
+     * The increment between successive values when <kbd>alt</kbd> is held.
      * Pass explicit `null` value to disable this interaction.
      * @default 0.1
      */
diff --git a/packages/core/src/components/hotkeys/_hotkeys.scss b/packages/core/src/components/hotkeys/_hotkeys.scss
index a91635001e..a2827161fb 100644
--- a/packages/core/src/components/hotkeys/_hotkeys.scss
+++ b/packages/core/src/components/hotkeys/_hotkeys.scss
@@ -3,36 +3,6 @@
 @import "../../common/variables";
 @import "../../common/mixins";
 
-$kbd-key-size: 25px !default;
-$modifier-key-padding: 3px 8px 3px 6px !default;
-
-.#{$ns}-key {
-  display: inline-block;
-  border-radius: $pt-border-radius - 1;
-  box-shadow: $pt-elevation-shadow-2;
-  background: $white;
-  min-width: $kbd-key-size;
-  height: $kbd-key-size;
-  padding: 3px 5px;
-  vertical-align: middle;
-  text-align: center;
-  line-height: $pt-grid-size * 2;
-  color: $pt-text-color-muted;
-  font-family: inherit;
-  font-size: $pt-font-size-small;
-
-  &.#{$ns}-modifier-key {
-    padding: $modifier-key-padding;
-  }
-
-  .#{$ns}-dark & {
-    box-shadow: $pt-dark-elevation-shadow-2,
-                inset 0 1px 0 rgba($white, 0.05);
-    background: $dark-gray5;
-    color: $pt-dark-text-color-muted;
-  }
-}
-
 .#{$ns}-key-combo .#{$ns}-key:not(:last-child) {
   margin-right: $pt-grid-size / 2;
 }
diff --git a/packages/core/src/components/tag-input/tag-input.md b/packages/core/src/components/tag-input/tag-input.md
index 1b38e6e453..e2e4a8e7e9 100644
--- a/packages/core/src/components/tag-input/tag-input.md
+++ b/packages/core/src/components/tag-input/tag-input.md
@@ -4,9 +4,9 @@ Tag inputs render [`Tag`](#core/components/tag)s inside an input, followed by an
 
 @reactExample TagInputExample
 
-**`TagInput` must be controlled,** meaning the `values` prop is required and event handlers are strongly suggested. Typing in the input and pressing <kbd class="@ns-key">enter</kbd> will **add new items** by invoking callbacks. If `addOnBlur` is set to true, clicking out of the component will also trigger the callback to add new items. A `separator` prop is supported to allow multiple items to be added at once; the default splits on commas.
+**`TagInput` must be controlled,** meaning the `values` prop is required and event handlers are strongly suggested. Typing in the input and pressing <kbd>enter</kbd> will **add new items** by invoking callbacks. If `addOnBlur` is set to true, clicking out of the component will also trigger the callback to add new items. A `separator` prop is supported to allow multiple items to be added at once; the default splits on commas.
 
-**Tags can be removed** by clicking their <span class="@ns-icon-standard @ns-icon-cross"></span> buttons, or by pressing <kbd class="@ns-key">backspace</kbd> repeatedly. Arrow keys can also be used to focus on a particular tag before removing it. The cursor must be at the beginning of the text input for these interactions.
+**Tags can be removed** by clicking their <span class="@ns-icon-standard @ns-icon-cross"></span> buttons, or by pressing <kbd>backspace</kbd> repeatedly. Arrow keys can also be used to focus on a particular tag before removing it. The cursor must be at the beginning of the text input for these interactions.
 
 **`Tag` appearance can be customized** with `tagProps`: supply an object to apply the same props to every tag, or supply a callback to apply dynamic props per tag. Tag `values` must be an array of strings so you may need a transformation step between your state and these props.
 
diff --git a/packages/core/src/docs/accessibility.md b/packages/core/src/docs/accessibility.md
index 84fdd6cef0..6ebfc645d9 100644
--- a/packages/core/src/docs/accessibility.md
+++ b/packages/core/src/docs/accessibility.md
@@ -12,7 +12,7 @@ any time.
 
 Blueprint includes a utility that manages the appearance of focus styles. When enabled, focus styles
 will be hidden while the user interacts using the mouse and will appear when the
-<kbd class="@ns-key">tab</kbd> key is pressed to begin keyboard navigation. Try this out for yourself
+<kbd>tab</kbd> key is pressed to begin keyboard navigation. Try this out for yourself
 below.
 
 **You must explictly enable this feature in your app (and you probably want to):**
diff --git a/packages/docs-theme/src/styles/_props.scss b/packages/docs-theme/src/styles/_props.scss
index d8853decc5..3882926407 100644
--- a/packages/docs-theme/src/styles/_props.scss
+++ b/packages/docs-theme/src/styles/_props.scss
@@ -2,12 +2,14 @@
 // Licensed under the terms of the LICENSE file distributed with this project.
 
 .docs-prop-details code {
-  box-shadow: none;
-  background: none;
+  // stylelint-disable declaration-no-important
+  box-shadow: none !important;
+  background: none !important;
   padding: 0;
-  color: inherit;
+  color: inherit !important;
   font-size: small;
   font-weight: 600;
+  // stylelint-enable declaration-no-important
 }
 
 .docs-prop-default {

From 91cac68fc6e88198c1e88cd98fd160ba096ca685 Mon Sep 17 00:00:00 2001
From: Gilad Gray <ggray@palantir.com>
Date: Mon, 7 May 2018 15:16:42 -0700
Subject: [PATCH 2/4] update docs

---
 packages/core/src/docs/typography.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/core/src/docs/typography.md b/packages/core/src/docs/typography.md
index 0295c15aab..70bbe3857e 100644
--- a/packages/core/src/docs/typography.md
+++ b/packages/core/src/docs/typography.md
@@ -30,7 +30,7 @@ For longer blocks of running text, such as articles or documents, see [running t
 Longform text, such as rendered Markdown documents, benefit from increased spacing and support for unclassed textual elements.
 Apply `.@ns-running-text` to the parent element to apply the following styles to all children:
 
-- `<h*>`, `<ul>`, `<ol>`, `<blockquote>`, `<code>`, `<pre>` do not require additional CSS classes for styles. This is great for rendered Markdown documents.
+- `<h*>`, `<ul>`, `<ol>`, `<blockquote>`, `<code>`, `<pre>`, `<kbd>` tags do not require additional CSS classes for styles. This is great for rendered Markdown documents.
 - `<h*>` tag margins are adjusted to provide clear separation between sections in a document.
 - `<ul>` and `<ol>` tags receive [`.@ns-list`](#core/typography.lists) styles for legibility.
 

From 3d6767d22b514c2fff68c355f8f83cc7de7b08c5 Mon Sep 17 00:00:00 2001
From: Antoine Llorca <allorca@palantir.com>
Date: Tue, 8 May 2018 11:38:35 -0700
Subject: [PATCH 3/4] fix kbd style/layout

---
 packages/core/src/_typography.scss            | 23 +++++++++++--------
 .../core/src/components/hotkeys/_hotkeys.scss |  8 +++++--
 2 files changed, 20 insertions(+), 11 deletions(-)

diff --git a/packages/core/src/_typography.scss b/packages/core/src/_typography.scss
index 6d542a97ba..1ea160a692 100644
--- a/packages/core/src/_typography.scss
+++ b/packages/core/src/_typography.scss
@@ -286,15 +286,16 @@ Styleguide preformatted
 }
 
 %keyboard {
-  $kbd-key-size: 25px;
-  display: inline-block;
-  border-radius: $pt-border-radius - 1;
-  box-shadow: $pt-elevation-shadow-2;
+  $kbd-key-size: $pt-button-height-small;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: $pt-border-radius;
+  box-shadow: $pt-elevation-shadow-1;
   background: $white;
   min-width: $kbd-key-size;
   height: $kbd-key-size;
-  padding: 3px 5px;
-  vertical-align: middle;
+  padding: ($pt-grid-size * 0.3) ($pt-grid-size / 2);
   text-align: center;
   line-height: $pt-grid-size * 2;
   color: $pt-text-color-muted;
@@ -302,12 +303,16 @@ Styleguide preformatted
   font-size: $pt-font-size-small;
 
   &.#{$ns}-modifier-key {
-    padding: 3px 8px 3px 6px;
+    padding-right: $pt-grid-size * 0.8;
+    padding-left: $pt-grid-size * 0.6;
+
+    #{$icon-classes} {
+      margin-right: $pt-grid-size / 2;
+    }
   }
 
   .#{$ns}-dark & {
-    box-shadow: $pt-dark-elevation-shadow-2,
-                inset 0 1px 0 rgba($white, 0.05);
+    box-shadow: $pt-dark-elevation-shadow-1;
     background: $dark-gray5;
     color: $pt-dark-text-color-muted;
   }
diff --git a/packages/core/src/components/hotkeys/_hotkeys.scss b/packages/core/src/components/hotkeys/_hotkeys.scss
index a2827161fb..afae7c7bf4 100644
--- a/packages/core/src/components/hotkeys/_hotkeys.scss
+++ b/packages/core/src/components/hotkeys/_hotkeys.scss
@@ -17,9 +17,8 @@
   }
 
   .#{$ns}-key-combo {
-    flex: 1 0 auto;
+    justify-content: flex-end;
     width: $pt-grid-size * 16;
-    text-align: right;
   }
 }
 
@@ -49,3 +48,8 @@
     margin-bottom: $pt-grid-size;
   }
 }
+
+.#{$ns}-key-combo {
+  display: inline-flex;
+  align-items: center;
+}

From 683d95f1ebf86b69c47e82b6500b41b0c04d913b Mon Sep 17 00:00:00 2001
From: Gilad Gray <ggray@palantir.com>
Date: Tue, 8 May 2018 12:16:36 -0700
Subject: [PATCH 4/4] refactor keyboard & hotkeys css

---
 packages/core/src/_typography.scss            | 20 +++++++------------
 .../core/src/components/hotkeys/_hotkeys.scss | 12 +++--------
 2 files changed, 10 insertions(+), 22 deletions(-)

diff --git a/packages/core/src/_typography.scss b/packages/core/src/_typography.scss
index 1ea160a692..324f36ccd8 100644
--- a/packages/core/src/_typography.scss
+++ b/packages/core/src/_typography.scss
@@ -286,29 +286,23 @@ Styleguide preformatted
 }
 
 %keyboard {
-  $kbd-key-size: $pt-button-height-small;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   border-radius: $pt-border-radius;
   box-shadow: $pt-elevation-shadow-1;
   background: $white;
-  min-width: $kbd-key-size;
-  height: $kbd-key-size;
-  padding: ($pt-grid-size * 0.3) ($pt-grid-size / 2);
-  text-align: center;
-  line-height: $pt-grid-size * 2;
+  min-width: $pt-button-height-small;
+  height: $pt-button-height-small;
+  padding: $pt-border-radius ($pt-border-radius * 2);
+  vertical-align: middle;
+  line-height: $pt-button-height-small;
   color: $pt-text-color-muted;
   font-family: inherit;
   font-size: $pt-font-size-small;
 
-  &.#{$ns}-modifier-key {
-    padding-right: $pt-grid-size * 0.8;
-    padding-left: $pt-grid-size * 0.6;
-
-    #{$icon-classes} {
-      margin-right: $pt-grid-size / 2;
-    }
+  #{$icon-classes} {
+    margin-right: $pt-grid-size / 2;
   }
 
   .#{$ns}-dark & {
diff --git a/packages/core/src/components/hotkeys/_hotkeys.scss b/packages/core/src/components/hotkeys/_hotkeys.scss
index afae7c7bf4..4560b4098f 100644
--- a/packages/core/src/components/hotkeys/_hotkeys.scss
+++ b/packages/core/src/components/hotkeys/_hotkeys.scss
@@ -16,9 +16,8 @@
     padding: 0;
   }
 
-  .#{$ns}-key-combo {
-    justify-content: flex-end;
-    width: $pt-grid-size * 16;
+  .#{$ns}-hotkey-label {
+    flex-grow: 1;
   }
 }
 
@@ -39,7 +38,7 @@
 
 .#{$ns}-hotkey {
   display: flex;
-  align-items: baseline;
+  align-items: center;
   justify-content: space-between;
   margin-right: 0;
   margin-left: 0;
@@ -48,8 +47,3 @@
     margin-bottom: $pt-grid-size;
   }
 }
-
-.#{$ns}-key-combo {
-  display: inline-flex;
-  align-items: center;
-}