From 07f4b4df328371c27023c4dc7629f85ee02fea57 Mon Sep 17 00:00:00 2001
From: CJ Cenizal <cj@cenizal.com>
Date: Mon, 31 Jul 2017 15:12:26 -0700
Subject: [PATCH] [UI Framework] [ K7] Fix code block font-family and annotate
 reset (#13219)

* Fix broken code block font family.
* Fix font family of KeyPadMenuItem.
---
 ui_framework/dist/ui_framework.css            | 26 ++++++++++++++++---
 .../key_pad_menu/_key_pad_menu.scss           | 13 ++++++++--
 .../src/global_styling/reset/_reset.scss      | 10 +++++--
 3 files changed, 42 insertions(+), 7 deletions(-)

diff --git a/ui_framework/dist/ui_framework.css b/ui_framework/dist/ui_framework.css
index f6927a0815b1d..b5e2ba1ed8529 100644
--- a/ui_framework/dist/ui_framework.css
+++ b/ui_framework/dist/ui_framework.css
@@ -5,6 +5,12 @@
 *, *:before, *:after {
   box-sizing: border-box; }
 
+/**
+ * 1. Inheriting the font will allow some browser defaults to take effect, e.g. Chrome applies
+ *    `font: 11px system-ui` to the button element. We can't hardcode the font-family here because
+ *    that will disrupt components which rely upon a different inherited font-family, e.g. code
+ *    blocks.
+ */
 html, body, div, span, applet, object, iframe,
 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 a, abbr, acronym, address, big, cite, code,
@@ -23,7 +29,9 @@ time, mark, audio, video {
   border: 0;
   font-size: 100%;
   font: inherit;
-  font-family: "Roboto", Helvetica, Arial, sans-serif;
+  /* 1 */
+  font-family: inherit;
+  /* 1 */
   vertical-align: baseline; }
 
 /* HTML5 display-role reset for older browsers */
@@ -524,6 +532,12 @@ table {
   width: 40px;
   height: 40px; }
 
+/**
+ * Dial menu is a phone like dial comprised of an svg icon and a title.
+ */
+/**
+ * 1. Default to grid of 3.
+ */
 .kuiKeyPadMenu {
   display: -webkit-box;
   display: -webkit-flex;
@@ -537,8 +551,12 @@ table {
   -webkit-flex-wrap: wrap;
       -ms-flex-wrap: wrap;
           flex-wrap: wrap;
-  width: 288px; }
+  width: 288px;
+  /* 1 */ }
 
+/**
+ * 1. If this class is applied to a button, we need to override the Chrome default font.
+ */
 .kuiKeyPadMenuItem {
   display: block;
   padding: 16px;
@@ -547,7 +565,9 @@ table {
   color: #666;
   border: 1px solid #D9D9D9;
   border-color: transparent;
-  border-radius: 4px; }
+  border-radius: 4px;
+  font-family: "Roboto", Helvetica, Arial, sans-serif;
+  /* 1 */ }
   .kuiKeyPadMenuItem:hover, .kuiKeyPadMenuItem:focus {
     border-color: #D9D9D9; }
     .kuiKeyPadMenuItem:hover .kuiKeyPadMenuItem__icon, .kuiKeyPadMenuItem:focus .kuiKeyPadMenuItem__icon {
diff --git a/ui_framework/src/components/key_pad_menu/_key_pad_menu.scss b/ui_framework/src/components/key_pad_menu/_key_pad_menu.scss
index 5521030a87774..50b73cd3f5720 100644
--- a/ui_framework/src/components/key_pad_menu/_key_pad_menu.scss
+++ b/ui_framework/src/components/key_pad_menu/_key_pad_menu.scss
@@ -1,12 +1,20 @@
-// Dial menu is a phone like dial comprised of an svg icon and a title.
+/**
+ * Dial menu is a phone like dial comprised of an svg icon and a title.
+ */
 
+/**
+ * 1. Default to grid of 3.
+ */
 .kuiKeyPadMenu {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
-  width: $kuiKeyPadMenuSize * 3; // Default to grid of 3
+  width: $kuiKeyPadMenuSize * 3; /* 1 */
 }
 
+/**
+ * 1. If this class is applied to a button, we need to override the Chrome default font.
+ */
 .kuiKeyPadMenuItem {
   display: block;
   padding: $kuiSize;
@@ -16,6 +24,7 @@
   border: $kuiBorderThin;
   border-color: transparent;
   border-radius: $kuiBorderRadius;
+  font-family: $kuiFontFamily; /* 1 */
 
   &:hover, &:focus {
     border-color: $kuiBorderColor;
diff --git a/ui_framework/src/global_styling/reset/_reset.scss b/ui_framework/src/global_styling/reset/_reset.scss
index eb1d04c75867b..70f70e3009529 100644
--- a/ui_framework/src/global_styling/reset/_reset.scss
+++ b/ui_framework/src/global_styling/reset/_reset.scss
@@ -7,6 +7,12 @@
   box-sizing: border-box;
 }
 
+/**
+ * 1. Inheriting the font will allow some browser defaults to take effect, e.g. Chrome applies
+ *    `font: 11px system-ui` to the button element. We can't hardcode the font-family here because
+ *    that will disrupt components which rely upon a different inherited font-family, e.g. code
+ *    blocks.
+ */
 html, body, div, span, applet, object, iframe,
 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 a, abbr, acronym, address, big, cite, code,
@@ -24,8 +30,8 @@ time, mark, audio, video {
   padding: 0;
   border: 0;
   font-size: 100%;
-  font: inherit;
-  font-family: $kuiFontFamily;
+  font: inherit; /* 1 */
+  font-family: inherit; /* 1 */
   vertical-align: baseline;
 }