Button - Fix padding (#588)

* Adjust button padding depending on label existence

* Update test snapshots

Author: kapantzak

src/components/button/__snapshots__/button.test.js.snap

@@ -223,7 +223,7 @@ exports[`Button states renders only icon 1`] = `
   word-break: keep-all;
   cursor: pointer;
   pointer-events: auto;
-  padding: 4px 12px;
+  padding: 4px 6px;
   transition: all 150ms;
   background-color: rgba(255,255,255,0.0);
   color: #00AB44;
@@ -307,7 +307,7 @@ exports[`Button states renders only icon 1`] = `
   class="c0"
   colors="[object Object]"
   flavour="hollow"
-  padding="1,3"
+  padding="1,1.5"
   round="0.5"
   texttransform="firstLetter"
 >
@@ -342,7 +342,7 @@ exports[`Button states renders smaller only icon 1`] = `
   word-break: keep-all;
   cursor: pointer;
   pointer-events: auto;
-  padding: 4px 12px;
+  padding: 4px 6px;
   transition: all 150ms;
   background-color: rgba(255,255,255,0.0);
   color: #00AB44;
@@ -426,7 +426,7 @@ exports[`Button states renders smaller only icon 1`] = `
   class="c0"
   colors="[object Object]"
   flavour="hollow"
-  padding="1,3"
+  padding="1,1.5"
   round="0.5"
   texttransform="firstLetter"
 >

src/components/button/button.js

@@ -24,6 +24,7 @@ export const Button = ({
     flavour={flavour}
     textTransform={textTransform}
     hasIcon={!!icon || isLoading}
+    hasLabel={!!children}
     onClick={isLoading ? undefined : onClick}
     ref={ref}
     iconColor={iconColor}

src/components/button/styled.js

@@ -123,7 +123,13 @@ const colorsByFlavour = ({ flavour = DEFAULT, danger, warning, iconColor }) => {
 
 export const StyledButton = styled.button.attrs(
   ({ groupFirst, groupLast, groupMiddle, ...props }) => ({
-    padding: props.large ? [1.5, 4] : [1, 3],
+    padding: props.large
+      ? !props.hasLabel
+        ? [1.5, 3]
+        : [1.5, 4]
+      : !props.hasLabel
+        ? [1, 1.5]
+        : [1, 3],
     colors: colorsByFlavour(props),
     round: groupFirst
       ? { side: "left", size: 0.5 }