<Button /> supports icons directly to style hover states

Author: andrewn

client/common/Button.jsx

@@ -4,6 +4,7 @@ import styled from 'styled-components';
 import { Link } from 'react-router';
 
 import { remSize, prop } from '../theme';
+import Icon, { ValidIconNameType } from './Icon';
 
 // The '&&&' will increase the specificity of the
 // component's CSS so that it overrides the more
@@ -28,6 +29,10 @@ const StyledButton = styled.button`
     &:hover:not(:disabled) {
       color: ${prop('buttonHoverColor')};
       background-color: ${prop('buttonHoverColorBackground')};
+
+      svg * {
+        fill: ${prop('buttonHoverColor')};
+      }
     }
 
     &:disabled {
@@ -46,27 +51,36 @@ const StyledButton = styled.button`
  * A Button performs an primary action
  */
 const Button = ({
-  children, href, label, to, type, ...props
+  children, href, iconAfterName, iconBeforeName, label, to, type, ...props
 }) => {
+  const iconAfter = iconAfterName && <Icon name={iconAfterName} />;
+  const iconBefore = iconBeforeName && <Icon name={iconBeforeName} />;
+
+  const content = <>{iconBefore}<span>{children}</span>{iconAfter}</>;
+
   if (href) {
-    return <StyledButton as="a" aria-label={label} href={href} {...props}>{children}</StyledButton>;
+    return <StyledButton as="a" aria-label={label} href={href} {...props}>{content}</StyledButton>;
   }
 
   if (to) {
-    return <StyledButton as={Link} aria-label={label} to={to} {...props}>{children}</StyledButton>;
+    return <StyledButton as={Link} aria-label={label} to={to} {...props}>{content}</StyledButton>;
   }
 
-  return <StyledButton aria-label={label} type={type} {...props}>{children}</StyledButton>;
+  return <StyledButton aria-label={label} type={type} {...props}>{content}</StyledButton>;
 };
 
 Button.defaultProps = {
   disabled: false,
+  iconAfterName: null,
+  iconBeforeName: null,
   href: null,
   label: null,
   to: null,
   type: 'button',
 };
 
+Button.iconNames = Icon.names;
+
 Button.propTypes = {
   /**
    * The visible part of the button, telling the user what
@@ -77,6 +91,15 @@ Button.propTypes = {
     If the button can be activated or not
   */
   disabled: PropTypes.bool,
+  /**
+   * Name of icon to place before child content
+   */
+  iconAfterName: ValidIconNameType,
+
+  /**
+   * Name of icon to place after child content
+   */
+  iconBeforeName: ValidIconNameType,
   /**
    * Specifying an href will use an <a> to link to the URL
    */

client/common/Button.stories.jsx

@@ -35,12 +35,10 @@ 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>
+export const ButtonWithIconBefore = () => (
+  <Button iconBeforeName={Button.iconNames.github}>Create</Button>
+);
+
+export const ButtonWithIconAfter = () => (
+  <Button iconAfterName={Button.iconNames.github}>Create</Button>
 );

client/common/Icon.jsx

@@ -22,17 +22,20 @@ const icons = {
 */
 const names = lodash.mapValues(icons, (value, key) => key);
 
+export const ValidIconNameType = PropTypes.oneOf(Object.keys(names));
+
 
 function Icon({ name, ...props }) {
   return (
     <InlineSVG src={icons[name]} {...props} />
   );
 }
 
+
 Icon.names = names;
 
 Icon.propTypes = {
-  name: PropTypes.oneOf(Object.keys(names)).isRequired
+  name: ValidIconNameType.isRequired
 };
 
 export default Icon;

client/images/google.svg

@@ -1,9 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import InlineSVG from 'react-inlinesvg';
 
 import Button from '../../../common/Button';
-import Icon from '../../../common/Icon';
 import CopyableInput from '../../IDE/components/CopyableInput';
 
 import APIKeyList from './APIKeyList';
@@ -82,13 +80,12 @@ class APIKeyForm extends React.Component {
               value={this.state.keyLabel}
             />
             <Button
-
+              iconBeforeName={Button.iconNames.plus}
               disabled={this.state.keyLabel === ''}
               type="submit"
               label="Create new key"
             >
-              <Icon name={Icon.names.plus} />
-              <span>Create</span>
+              Create
             </Button>
           </form>
 

client/modules/User/components/APIKeyForm.jsx

@@ -9,7 +9,6 @@ import { bindActionCreators } from 'redux';
 import classNames from 'classnames';
 
 import Button from '../../../common/Button';
-import Icon from '../../../common/Icon';
 import * as ProjectActions from '../../IDE/actions/project';
 import * as ProjectsActions from '../../IDE/actions/projects';
 import * as CollectionsActions from '../../IDE/actions/collections';
@@ -54,9 +53,9 @@ const ShareURL = ({ value }) => {
   return (
     <div className="collection-share" ref={node}>
       <Button
+        iconAfterName={Button.iconNames.sortArrowDown}
         onClick={() => setShowURL(!showURL)}
-      ><span>Share</span>
-        <Icon name={Icon.names.sortArrowDown} />
+      >Share
       </Button>
       { showURL &&
         <div className="collection__share-dropdown">

client/modules/User/components/Collection.jsx

@@ -2,10 +2,9 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import styled from 'styled-components';
 
-import { remSize, prop } from '../../../theme';
+import { remSize } from '../../../theme';
 
 import Button from '../../../common/Button';
-import Icon from '../../../common/Icon';
 
 const authUrls = {
   github: '/auth-github',
@@ -24,24 +23,15 @@ const services = {
 
 const StyledButton = styled(Button)`
   width: ${remSize(300)};
-
-  > * + * {
-    margin-left: ${remSize(10)};
-  }
-`;
-
-const StyledIcon = styled(Icon)`
-  width: ${remSize(32)};
-  height: ${remSize(32)};
 `;
 
 function SocialAuthButton({ service }) {
   return (
     <StyledButton
+      iconBeforeName={Button.iconNames[service]}
       href={authUrls[service]}
     >
-      <StyledIcon name={Icon.names[service]} />
-      <span>{labels[service]}</span>
+      {labels[service]}
     </StyledButton>
   );
 }