fix: fix a bug with text-button outline

ipfs-shipyard · Oct 10, 2018 · 4ff2d61 · 4ff2d61
1 parent c8b50ce
commit 4ff2d61
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 14 deletions.
diff --git a/src/components/text-button/TextButton.css b/src/components/text-button/TextButton.css
@@ -3,7 +3,6 @@
 
 .textButton {
     padding: 0;
-    display: inline-flex;
     align-items: center;
     border: 0;
     background: none;
@@ -38,25 +37,19 @@
 
     & .text {
         @mixin typography-caption em, no-line-height;
+        vertical-align: middle;
     }
 
     & .icon {
+        vertical-align: middle;
         font-size: 1.5em;
     }
 
-    &.left {
-        flex-direction: row-reverse;
-
-        & .icon {
-            margin-right: calc(0.8em / 1.5);
-        }
+    &.left .icon {
+        margin-right: calc(0.8em / 1.5);
     }
 
-    &.right {
-        flex-direction: row;
-
-        & .icon {
-            margin-left: calc(0.8em / 1.5);
-        }
+    &.right .icon {
+        margin-left: calc(0.8em / 1.5);
     }
 }
diff --git a/src/components/text-button/TextButton.js b/src/components/text-button/TextButton.js
@@ -3,6 +3,9 @@ import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import styles from './TextButton.css';
 
+const renderIcon = (icon, className) =>
+    icon ? React.cloneElement(icon, { className: classNames(styles.icon, className) }) : null;
+
 const TextButton = ({ variant, icon, iconPosition, children, className, ...rest }) => {
     const finalClassName = classNames(
         styles.textButton,
@@ -13,8 +16,9 @@ const TextButton = ({ variant, icon, iconPosition, children, className, ...rest
 
     return (
         <button { ...rest } className={ finalClassName }>
+            { icon && iconPosition === 'left' ? renderIcon(icon, icon.props.className) : null }
             <span className={ styles.text }>{ children }</span>
-            { icon ? React.cloneElement(icon, { className: classNames(styles.icon, icon.props.className) }) : null }
+            { icon && iconPosition === 'right' ? renderIcon(icon, icon.props.className) : null }
         </button>
     );
 };