Repository: mapbox/mr-ui
Pull request #47 (2018-10-24 23:53:22)

Put controlFile's icon and text on the same line
Uses `IconText` to put the icon and text on the same line

Current styling:
![image](https://user-images.githubusercontent.com/25856619/47467860-25e6d900-d7ad-11e8-9fa7-568f9576ad97.png)

Updated styling:
![image](https://user-images.githubusercontent.com/25856619/47467849-1a93ad80-d7ad-11e8-87f2-86e2c7e13550.png)


- [x] updated snapshots
- [x] tests pass


Patch:
diff --git a/src/components/control-file/control-file.js b/src/components/control-file/control-file.js
index 68dd65a..cf0c820 100644
--- a/src/components/control-file/control-file.js
+++ b/src/components/control-file/control-file.js
@@ -5,6 +5,7 @@ import Tooltip from '../tooltip';
 import Icon from '../icon';
 import ControlLabel from '../control-label';
 import ControlWrapper from '../control-wrapper';
+import IconText from '../icon-text';
 
 const propNames = [
   'value',
@@ -165,11 +166,9 @@ export default class ControlFile extends React.Component {
               onClick={this.onButtonClick}
             >
               <span className="txt-truncate">
-                <Icon
-                  themeIcon="mr6 inline-block align-middle"
-                  name="harddrive"
-                />
-                {this.state.displayValue || initialDisplayValue}
+                <IconText iconBefore="harddrive">
+                  {this.state.displayValue || initialDisplayValue}
+                </IconText>
               </span>
             </button>
             <input {...inputProps} {...extraProps} />


Test patch:
diff --git a/src/components/control-file/__tests__/__snapshots__/control-file.test.js.snap b/src/components/control-file/__tests__/__snapshots__/control-file.test.js.snap
index b0d16a3..4b8723c 100644
--- a/src/components/control-file/__tests__/__snapshots__/control-file.test.js.snap
+++ b/src/components/control-file/__tests__/__snapshots__/control-file.test.js.snap
@@ -33,14 +33,12 @@ exports[`ControlFile all options renders 1`] = `
         <span
           className="txt-truncate"
         >
-          <Icon
-            inline={false}
-            name="harddrive"
-            passthroughProps={Object {}}
-            size={18}
-            themeIcon="mr6 inline-block align-middle"
-          />
-          Select an image
+          <IconText
+            gap="small"
+            iconBefore="harddrive"
+          >
+            Select an image
+          </IconText>
         </span>
       </button>
       <input
@@ -97,14 +95,12 @@ exports[`ControlFile basic receives an array of one file as value, displaying it
         <span
           className="txt-truncate"
         >
-          <Icon
-            inline={false}
-            name="harddrive"
-            passthroughProps={Object {}}
-            size={18}
-            themeIcon="mr6 inline-block align-middle"
-          />
-          bon jovi.mp3
+          <IconText
+            gap="small"
+            iconBefore="harddrive"
+          >
+            bon jovi.mp3
+          </IconText>
         </span>
       </button>
       <input
@@ -187,14 +183,12 @@ exports[`ControlFile basic renders 1`] = `
         <span
           className="txt-truncate"
         >
-          <Icon
-            inline={false}
-            name="harddrive"
-            passthroughProps={Object {}}
-            size={18}
-            themeIcon="mr6 inline-block align-middle"
-          />
-          Select a file
+          <IconText
+            gap="small"
+            iconBefore="harddrive"
+          >
+            Select a file
+          </IconText>
         </span>
       </button>
       <input
@@ -247,14 +241,12 @@ exports[`ControlFile disabled renders 1`] = `
         <span
           className="txt-truncate"
         >
-          <Icon
-            inline={false}
-            name="harddrive"
-            passthroughProps={Object {}}
-            size={18}
-            themeIcon="mr6 inline-block align-middle"
-          />
-          Select a file
+          <IconText
+            gap="small"
+            iconBefore="harddrive"
+          >
+            Select a file
+          </IconText>
         </span>
       </button>
       <input
@@ -307,14 +299,12 @@ exports[`ControlFile multiple receives an array of files as value, displaying th
         <span
           className="txt-truncate"
         >
-          <Icon
-            inline={false}
-            name="harddrive"
-            passthroughProps={Object {}}
-            size={18}
-            themeIcon="mr6 inline-block align-middle"
-          />
-          bon jovi.mp3, aerosmith.mp3
+          <IconText
+            gap="small"
+            iconBefore="harddrive"
+          >
+            bon jovi.mp3, aerosmith.mp3
+          </IconText>
         </span>
       </button>
       <input