feat(input): Set the height of inputs and buttons to ensure they are …

…the same cross-browser.

src/components/Button/Button.modules.scss

@@ -1,6 +1,5 @@
 @import '../../scss/settings/colours';
 @import '../../scss/settings/spacing';
-@import '../../scss/settings/typography';
 @import '../../scss/settings/responsive-grid';
 @import '../../scss/utility/responsive';
 
@@ -17,12 +16,17 @@ $button-text-color: $color-white;
 .button {
   composes: none rounded from "../Borders.modules.scss";
   composes: medium boldFont from '../Typography/Text/Text.modules.scss';
+  composes: height font from '../FormFields.modules.scss';
+
   display: block;
+
   width: 100%;
-  padding: $spacing-base $spacing-wide;
+  padding: 0 $spacing-wide;
+
   transition: background 0.2s;
-  font-family: $font-telus;
+
   text-align: center;
+
   cursor: pointer;
 }
 
@@ -52,6 +56,7 @@ $button-text-color: $color-white;
 
 .primary {
   composes: button;
+
   background-color: $primary-bg-color;
   color: $button-text-color;
 
@@ -65,6 +70,7 @@ $button-text-color: $color-white;
 
 .secondary {
   composes: button;
+
   background-color: $secondary-bg-color;
   color: $button-text-color;
 
@@ -78,6 +84,7 @@ $button-text-color: $color-white;
 
 .secondaryInverted {
   composes: deprecatedInverted button;
+
   color: $secondary-bg-color;
 
   &:hover {
@@ -97,12 +104,14 @@ $button-text-color: $color-white;
   &:hover {
     background-color: $button-text-color;
     color: $color-text;
+
     box-shadow: none;
   }
 }
 
 .outlinedInverted {
   composes: deprecatedInverted button;
+
   color: $color-text;
 
   &:hover {
@@ -114,6 +123,7 @@ $button-text-color: $color-white;
 
 .inverted {
   composes: button;
+
   background-color: $button-text-color;
   color: $color-text;
 

src/components/FormFields.modules.scss

@@ -0,0 +1,14 @@
+@import '../scss/settings/typography';
+
+.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
+}
+
+.font {
+  font-family: $font-telus;
+}

src/components/Input/Input.md

@@ -18,7 +18,7 @@ Supply additional HTML input attributes as normal.
 </div>
 ```
 
-### Showing feedback for entered values
+### Getting feedback for entered values
 
 Use the `feedback` attribute to give the user feedback regarding their input. You can affirm that the user's input
 was correct, or highlight errors that must be corrected.

src/components/Input/Input.modules.scss

@@ -14,9 +14,10 @@
 .inputWrapper {
   composes: thin rounded from '../Borders.modules.scss';
   composes: row from '../Flexbox.modules.scss';
+  composes: height from '../FormFields.modules.scss';
 
   align-items: center;
-  padding: $spacing-base;
+  padding: 0 $spacing-base;
 }
 
 .defaultBoxShadow {
@@ -68,12 +69,16 @@ input.input {
   //composes: noSpacing from '../Spacing/Spacing.modules.scss';
   padding: 0;
   margin: 0;
+
   outline: 0;
 
   // FIXME: Will be able to use composes when removing the targeting of the <input> element above
   // composes: none rounded from '../Borders.modules.scss';
   border: 0;
   border-radius: 4px;
+
+  // FIXME: Will be able to use composes when removing the targeting of the <input> element above
+  // composes: font from '../FormFields.modules.scss';
   font-family: $font-telus;
 
   // FIXME: Will be able to use composes when removing the targeting of the <input> element above