FFE-155 Used padding instead of line-height to set button height/padd…

…ing. Update visual tests screenshots. Lint.

CHANGELOG.md

@@ -1,5 +1,8 @@
 # Changelog
 
+## v2.5.7
+* Removed use of `line-height` to set button height, instead use `padding`. This so line breaks won't look awkward - with padding around every text row.
+
 ## v2.5.6
 * Changed primary button background color to @ffe-blue-royal-light-wcag
 

less/back-button.less

@@ -1,31 +1,31 @@
 .ffe-back-button {
-  box-shadow: none;
-  border: none;
-  width: auto;
-  color: @ffe-grey-dark;
-  font-family: "MuseoSansRounded-500", arial, sans-serif;
-  font-size: 16px;
-  height: 24px;
-  line-height: 20px;
-  padding-left: 1em;
-  background: transparent no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='0.8em' height='1.5em' viewBox='0 0 200 200'%3E%3Cpath transform = 'rotate(90 100 100)' fill = '%23676767' d='m16.171492,41.999998c-4.143269,0-8.2852797,1.57464-11.4277496,4.706478-6.3249899,6.283609-6.3249899,16.499474,0,22.803034l84.0286676,83.76282c6.30496,6.30356,16.54928,6.30356,22.87426,0l83.60959-83.26412c6.32499-6.28361,6.32499-16.499477,0-22.803038-6.30496-6.30356-16.55553-6.30356-22.88051,0l-72.13806,71.893768-72.613438-72.373767c-3.14247-3.151781-7.29074-4.725174-11.433999-4.725174h-0.0188z'/%3E%3C/svg%3E");
-  cursor: pointer;
-  display: block;
-  outline: none;
-  overflow: hidden;
+    box-shadow: none;
+    border: none;
+    width: auto;
+    color: @ffe-grey-dark;
+    font-family: "MuseoSansRounded-500", arial, sans-serif;
+    font-size: 16px;
+    height: 24px;
+    line-height: 20px;
+    padding-left: 1em;
+    background: transparent no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='0.8em' height='1.5em' viewBox='0 0 200 200'%3E%3Cpath transform = 'rotate(90 100 100)' fill = '%23676767' d='m16.171492,41.999998c-4.143269,0-8.2852797,1.57464-11.4277496,4.706478-6.3249899,6.283609-6.3249899,16.499474,0,22.803034l84.0286676,83.76282c6.30496,6.30356,16.54928,6.30356,22.87426,0l83.60959-83.26412c6.32499-6.28361,6.32499-16.499477,0-22.803038-6.30496-6.30356-16.55553-6.30356-22.88051,0l-72.13806,71.893768-72.613438-72.373767c-3.14247-3.151781-7.29074-4.725174-11.433999-4.725174h-0.0188z'/%3E%3C/svg%3E");
+    cursor: pointer;
+    display: block;
+    outline: none;
+    overflow: hidden;
 
-  &:focus {
-    background-color: transparent;
-    border-radius: 4px;
-    box-shadow: 0 0 0 2px @ffe-blue-focus;
-  }
+    &:focus {
+        background-color: transparent;
+        border-radius: 4px;
+        box-shadow: 0 0 0 2px @ffe-blue-focus;
+    }
 
-  &:hover {
-    background-color: transparent;
-    box-shadow: none;
-  }
+    &:hover {
+        background-color: transparent;
+        box-shadow: none;
+    }
 
-  &:hover &__label {
-    border-bottom: 1px solid @ffe-grey-dark;
-  }
-}
+    &:hover &__label {
+        border-bottom: 1px solid @ffe-grey-dark;
+    }
+}

less/primary-button.less

@@ -9,10 +9,9 @@
 
     font-family: "MuseoSansRounded-500", arial, sans-serif;
     font-size: 18px;
-    line-height: 41px;
     outline: none;
     overflow: hidden;
-    padding: 0 30px;
+    padding: 8px 30px 7px;
     text-align: center;
     text-decoration: none;
     transition: all 0.2s;
@@ -71,8 +70,7 @@
 
     &--condensed {
         font-size: 14px;
-        line-height: 36px;
-        padding: 0 20px;
+        padding: 5px 20px;
 
         [class*="-button__label-spinner"][aria-hidden="false"] {
             bottom: -3px;

less/shortcut-button.less

@@ -26,9 +26,9 @@
         padding-right: 25px;
 
         .ffe-shortcut-button__icon-chevron {
-              height: 14px;
-              width: 14px;
-              left: 10px;
+            height: 14px;
+            width: 14px;
+            left: 10px;
         }
 
         &:hover {

less/tertiary-button.less

@@ -11,7 +11,7 @@
     margin: 0 -4px; // Hack to allow box-shadow to float outside content on focus
     padding: 0 4px;
 
-    &:after {
+    &::after {
         border-bottom: solid 1px @ffe-blue-royal-light-wcag;
         content: " ";
         display: block;
@@ -28,9 +28,9 @@
         color: @ffe-blue-flat;
     }
 
-    &:active:after,
-    &:focus:after,
-    &:hover:after {
+    &:active::after,
+    &:focus::after,
+    &:hover::after {
         border-color: @ffe-blue-flat;
     }
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ffe-buttons",
-  "version": "2.5.6",
+  "version": "2.5.7",
   "main": "less/buttons.less",
   "scripts": {
     "compile": "npm run lint && lessc example/example.less example/example.css && cp -R node_modules/ffe-core/fonts/ example/ && echo \"$(date +%T): Updated example\"",