feat(tooltip): Set tooltip min and max widths

src/components/FormFields.modules.scss

@@ -1,14 +1,21 @@
 @import '../scss/settings/typography';
 
+// Hardcode the height rather than relying on line-height, padding, and borders to ensure that form fields such as
+//  buttons, inputs, and selects all have the same height.
+// Browsers treat line height of input fields oddly, which makes it an unreliable method for aligning the height
+//  of various elements.
+// --> http://joshnh.com/weblog/line-height-doesnt-work-as-expected-on-inputs/
 .height {
-  // Hardcode the height rather than relying on line-height, padding, and borders to ensure that form fields such as
-  //  buttons, inputs, and selects all have the same height.
-  // Browsers treat line height of input fields oddly, which makes it an unreliable method for aligning the height
-  //  of various elements.
-  // --> http://joshnh.com/weblog/line-height-doesnt-work-as-expected-on-inputs/
   height: 3.25rem; // 52px
 }
 
+// Ensure inputs and other form elements do not use the browser font.
 .font {
   font-family: $font-telus;
 }
+
+// The tooltip is positioned absolutely and this is needed on the row that contains the tooltip so that the bubble
+// has enough available width to be sized properly.
+.containsTooltip {
+  position: relative;
+}

src/components/Input/Input.jsx

@@ -15,6 +15,7 @@ import safeRest from '../../utils/safeRest'
 import joinClassNames from '../../utils/joinClassNames'
 import generateId from '../../utils/generateId'
 
+import formFieldStyles from '../FormFields.modules.scss'
 import styles from './Input.modules.scss'
 
 const getWrapperClassName = (feedback, focus, disabled) => {
@@ -150,7 +151,7 @@ class Input extends React.Component {
     return (
       <Flexbox direction="column">
         <Box spacing="margin" bottom={2}>
-          <Flexbox direction="row">
+          <Flexbox direction="row" dangerouslyAddClassName={formFieldStyles.containsTooltip}>
             <label htmlFor={inputId.identity()} className={labelClassNames}>
               <Text size="medium" bold>
                 {label}

src/components/Input/__tests__/__snapshots__/Input.spec.jsx.snap

@@ -8,7 +8,7 @@ exports[`Input renders 1`] = `
     class="bottomMargin-2"
   >
     <div
-      class="row"
+      class="row containsTooltip"
     >
       <label
         class="resetLabel label"
@@ -51,7 +51,7 @@ exports[`Input renders with a feedback state and icon 1`] = `
     class="bottomMargin-2"
   >
     <div
-      class="row"
+      class="row containsTooltip"
     >
       <label
         class="resetLabel label"

src/components/Tooltip/Tooltip.jsx

@@ -10,6 +10,7 @@ import Text from '../Typography/Text/Text'
 import Box from '../Box/Box'
 
 import displayStyles from '../Display.modules.scss'
+import iconWrapperStyles from '../Icons/IconWrapper.modules.scss'
 import styles from './Tooltip.modules.scss'
 
 const getTriggerA11yText = connectedFieldLabel => {
@@ -64,7 +65,7 @@ class Tooltip extends React.Component {
     const id = generateId(connectedFieldLabel, 'unknown-field').postfix('tooltip')
 
     return (
-      <div {...safeRest(rest)} className={styles.wrapper}>
+      <div {...safeRest(rest)} className={iconWrapperStyles.fixLineHeight}>
         {this.renderBubble(id, direction, this.state.open, children)}
 
         <button

src/components/Tooltip/Tooltip.modules.scss

@@ -1,19 +1,13 @@
 @import '../../scss/settings/colours';
 
-$bubble-trigger-size: 16px;
+$bubble-trigger-size: 24px;
+
+$bubble-offset: 7px;
 
 $bubble-triangle-height: 10px;
 $bubble-triangle-width: 7px;
 $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: none from '../Borders.modules.scss';
 
@@ -22,18 +16,18 @@ $bubble-position: $bubble-trigger-size * -0.5;
   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
+  // the icon font. Can switch to the composes when using SVGs.
   // composes: noSpacing from '../Spacing.modules.scss';
   padding: 0 1px;
 }
 
-.baseBubble {
+.bubble {
   composes: rounded from '../Borders.modules.scss';
 
   position: absolute;
   bottom: calc(100% + #{$bubble-triangle-height});
 
-  min-width: 200px;
+  min-width: 200px; // TODO: check what the value should be
   max-width: 600px; // TODO: check what the value should be
 
   background-color: $color-white;
@@ -59,19 +53,19 @@ $bubble-position: $bubble-trigger-size * -0.5;
 }
 
 .left {
-  composes: baseBubble;
+  composes: bubble;
 
-  right: $bubble-position;
+  right: $bubble-offset * -1;
 
   &::before {
     right: $bubble-triangle-position;
   }
 }
 
 .right {
-  composes: baseBubble;
+  composes: bubble;
 
-  left: $bubble-position;
+  left: calc(100% - #{$bubble-trigger-size} - #{$bubble-offset});
 
   &::before {
     left: $bubble-triangle-position;

src/components/Tooltip/__tests__/__snapshots__/Tooltip.spec.jsx.snap

@@ -2,7 +2,7 @@
 
 exports[`Tooltip renders 1`] = `
 <div
-  class="wrapper"
+  class="fixLineHeight"
   id="the-id"
 >
   <div