[TextField] Fix label and placeholder overlapping

src/TextField/TextField.js

@@ -59,6 +59,7 @@ class TextField extends Component {
         (value !== '' && value !== null && value !== undefined) ||
         (value === undefined && valueIfUncontrolled !== '') ||
         focused ||
+        placeholder ||
         type === 'date' ||
         type === 'time'
     });

src/TextField/TextField.test.js

@@ -54,5 +54,20 @@ describe('<TextField />', () => {
       fireEvent.focus(input);
       expect(label).toHaveClass(labelUpClass);
     });
+
+    it('must be up when there is a placeholder', () => {
+      const labelUpClass = 'label-up-class';
+      const { getByText } = render(
+        wrapToTest()(
+          <TextField
+            classes={{ labelUp: labelUpClass }}
+            label='Text field'
+            placeholder='Placeholder'
+          />
+        )
+      );
+
+      expect(getByText(/Text field/)).toHaveClass(labelUpClass);
+    });
   });
 });

src/TextField/demos/TextFieldProps.js

@@ -8,7 +8,7 @@ class TextFieldProps extends React.Component {
     prenomField: '',
     errorField: 'Hello world !',
     disabledField: '',
-    questionField: 'Réponse'
+    questionField: ''
   };
 
   handleChange = createCachedFunction((name, event) => {
@@ -54,6 +54,7 @@ class TextFieldProps extends React.Component {
           <Col sm>
             <TextField
               label='Question ?'
+              placeholder='Réponse...'
               value={questionField}
               disableUnderline
               onChange={this.handleChange('questionField')}