fix(file-input): correct line height and add className prop

dhis2 · Nov 25, 2019 · c6b79d5 · c6b79d5
1 parent 2f4a1cf
commit c6b79d5
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 4 deletions.
diff --git a/src/FileInput.js b/src/FileInput.js
@@ -25,6 +25,7 @@ class FileInput extends PureComponent {
 
     render() {
         const {
+            className,
             label,
             buttonLabel,
             error,
@@ -40,7 +41,7 @@ class FileInput extends PureComponent {
         } = this.props
 
         return (
-            <div>
+            <div className={cx('container', className)}>
                 {label && <p className={cx('label', { required })}>{label}</p>}
 
                 <input
@@ -92,6 +93,7 @@ class FileInput extends PureComponent {
                     .button-container {
                         display: flex;
                         align-items: center;
+                        padding-bottom: ${spacers.dp4};
                     }
 
                     .button-container > :global(svg) {
@@ -115,6 +117,7 @@ const childPropType = propTypes.oneOfType([
 ])
 
 FileInput.propTypes = {
+    className: propTypes.string,
     onChange: propTypes.func.isRequired,
 
     label: propTypes.string,

diff --git a/src/FileInput/SelectedFile.js b/src/FileInput/SelectedFile.js
@@ -1,19 +1,21 @@
 import React from 'react'
 import propTypes from 'prop-types'
+import cx from 'classnames'
 
 import { colors, spacers } from '../theme.js'
 import { AttachFile } from '../icons/AttachFile.js'
 import { Loading } from '../icons/Status.js'
 
 const SelectedFile = ({
+    className,
     label,
     onRemove,
     removeText,
     loading,
     onCancel,
     cancelText,
 }) => (
-    <p>
+    <p className={cx('selected-file', className)}>
         <span className="icon">{loading ? <Loading /> : <AttachFile />}</span>
 
         <span className="text">
@@ -36,8 +38,8 @@ const SelectedFile = ({
             p {
                 display: flex;
                 margin: 0;
-                padding-top: ${spacers.dp8};
-                line-height: 14px;
+                padding-top: ${spacers.dp4};
+                line-height: 18px;
             }
             .icon > :global(svg) {
                 width: 12px;
@@ -74,6 +76,7 @@ const SelectedFile = ({
 )
 
 SelectedFile.propTypes = {
+    className: propTypes.string,
     label: propTypes.string.isRequired,
     onRemove: propTypes.func.isRequired,
     removeText: propTypes.string.isRequired,