feat(tooltip): Align the tooltip icon

Add a line height override that can be used on things that wrap icons.

src/components/Icons/Icon/Icon.modules.scss

@@ -32,45 +32,48 @@
 
 .icon {
   @include core-icon;
+
+  line-height: 1;
+  vertical-align: middle;
 }
 
 .iconCaretDown {
   composes: icon;
 
   &::before {
-    content: "\f105";
+    content: '\f105';
   }
 }
 
 .iconCaretUp {
   composes: icon;
 
   &::before {
-    content: "\f106";
+    content: '\f106';
   }
 }
 
 .iconCheckmark {
   composes: icon;
 
   &::before {
-    content: "\f101";
+    content: '\f101';
   }
 }
 
 .iconChevron {
   composes: icon;
 
   &::before {
-    content: "\f107";
+    content: '\f107';
   }
 }
 
 .iconLeftChevron {
   composes: icon;
 
   &::before {
-    content: "\f107";
+    content: '\f107';
     display: inline-block;
     transform: rotate(-180deg) translateY(1.5px);
   }
@@ -80,70 +83,70 @@
   composes: icon;
 
   &::before {
-    content: "\f103";
+    content: '\f103';
   }
 }
 
 .iconExpander {
   composes: icon;
 
   &::before {
-    content: "\f113";
+    content: '\f113';
   }
 }
 
 .iconHamburger {
   composes: icon;
 
   &::before {
-    content: "\f112";
+    content: '\f112';
   }
 }
 
 .iconLocation {
   composes: icon;
 
   &::before {
-    content: "\f110";
+    content: '\f110';
   }
 }
 
 .iconMinus {
   composes: icon;
 
   &::before {
-    content: "\f109";
+    content: '\f109';
   }
 }
 
 .iconPlus {
   composes: icon;
 
   &::before {
-    content: "\f108";
+    content: '\f108';
   }
 }
 
 .iconQuestionMarkCircle {
   composes: icon;
 
   &::before {
-    content: "\f102";
+    content: '\f102';
   }
 }
 
 .iconSpyglass {
   composes: icon;
 
   &::before {
-    content: "\f111";
+    content: '\f111';
   }
 }
 
 .iconTimes {
   composes: icon;
 
   &::before {
-    content: "\f104";
+    content: '\f104';
   }
 }

src/components/Icons/IconWrapper.modules.scss

@@ -0,0 +1,5 @@
+// FIXME: This is meant to be used as a class on elements that directly wrap Icons. There is some odd positioning
+// of the icon font, so this should be able to be removed when we switch to SVG icons.
+.fixLineHeight {
+  line-height: 1;
+}

src/components/Input/Input.modules.scss

@@ -12,7 +12,6 @@
 
 .label {
   flex: 1;
-  // padding-top: 10px; // TODO:  is there a better way to align label with tooltip
 }
 
 .inputWrapper {

src/components/Notification/Notification.jsx

@@ -11,6 +11,7 @@ import Flexbox from '../Flexbox/Flexbox'
 import Box from '../Box/Box'
 
 import messagingStyles from '../Messaging.modules.scss'
+import iconWrapperStyles from '../Icons/IconWrapper.modules.scss'
 import styles from './Notification.modules.scss'
 
 const { Container, Row, Column } = Grid
@@ -29,7 +30,7 @@ const iconByVariant = {
 const isImportant = variant => variant === 'success' || variant === 'error'
 
 const renderIcon = icon => (
-  <Box spacing="margin" right={3} dangerouslyAddClassName={styles.icon}>
+  <Box spacing="margin" right={3} dangerouslyAddClassName={iconWrapperStyles.fixLineHeight}>
     <DecorativeIcon symbol={icon.symbol} variant={icon.color} />
   </Box>
 )

src/components/Notification/Notification.modules.scss

@@ -15,7 +15,3 @@
 .error {
   composes: error from '../Messaging.modules.scss';
 }
-
-.icon {
-  line-height: 1;
-}

src/components/Tooltip/Tooltip.jsx

@@ -8,8 +8,8 @@ import StandaloneIcon from '../Icons/StandaloneIcon/StandaloneIcon'
 import Text from '../Typography/Text/Text'
 import Box from '../Box/Box'
 
-import styles from './Tooltip.modules.scss'
 import displayStyles from '../Display.modules.scss'
+import styles from './Tooltip.modules.scss'
 
 /**
  * Provide more detailed instructions.

src/components/Tooltip/Tooltip.modules.scss

@@ -9,16 +9,22 @@ $bubble-triangle-position: $bubble-triangle-width + 5px;
 $bubble-position: $bubble-trigger-size * -0.5;
 
 .wrapper {
+  composes: fixLineHeight from '../Icons/IconWrapper.modules.scss';
+
   position: relative;
 }
 
 .trigger {
-  composes: noSpacing from '../Spacing.modules.scss';
   composes: none from '../Borders.modules.scss';
 
   background: none;
   box-shadow: none;
   cursor: pointer;
+
+  // FIXME: Without the 1px padding the icon gets clipped just barely. This is due to the odd sizing/positioning of
+  //  the icon font
+  // composes: noSpacing from '../Spacing.modules.scss';
+  padding: 0 1px;
 }
 
 .baseBubble {