Pad internal button elements to correctly space out icons, etc.

Author: andrewn

client/common/Button.jsx

@@ -35,6 +35,10 @@ const StyledButton = styled.button`
       background-color: ${prop('buttonDisabledColorBackground')};
       cursor: not-allowed;
     }
+
+    > *:not(:last-child) {
+      margin-right: ${remSize(8)};
+    }
   }
 `;
 
@@ -58,6 +62,7 @@ const Button = ({
 Button.defaultProps = {
   disabled: false,
   href: null,
+  label: null,
   to: null,
   type: 'button',
 };
@@ -79,7 +84,7 @@ Button.propTypes = {
   /*
    * An ARIA Label used for accessibility
    */
-  label: PropTypes.string.isRequired,
+  label: PropTypes.string,
   /**
    * Specifying a to URL will use a react-router Link
    */

client/common/Button.stories.jsx

@@ -34,3 +34,13 @@ export const AnchorButton = () => (
 export const ReactRouterLink = () => (
   <Button to="./somewhere" label="submit">Actually a Link</Button>
 );
+
+export const InternalElementMargin = () => (
+  <Button>
+    <span>Internal</span>
+    <span>elements</span>
+    <span>have</span>
+    <span>right</span>
+    <span>margins</span>
+  </Button>
+);