[UI Framework] [ K7] Fix code block font-family and annotate reset (e…

…lastic#13219) * Fix broken code block font family. * Fix font family of KeyPadMenuItem.
cjcenizal · Aug 26, 2017 · 07f4b4d · 07f4b4d
1 parent 7e967f3
commit 07f4b4d
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 7 deletions.
diff --git 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
@@ -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
@@ -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;
 }