feat(Input): add multiline prop allowing textarea tag

momentum-design · May 30, 2019 · 668417c · 668417c
1 parent d198845
commit 668417c
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 1 deletion.
diff --git a/react/src/lib/Input/index.js b/react/src/lib/Input/index.js
@@ -136,6 +136,7 @@ class Input extends React.Component {
       inputHelpText,
       inputSize,
       label,
+      multiline,
       nestedLevel,
       placeholder,
       readOnly,
@@ -195,10 +196,13 @@ class Input extends React.Component {
       );
     };
 
+    const InputTag = multiline ? 'textarea' : 'input';
+
     const inputElement = (
-      <input
+      <InputTag
         className={
           'md-input' +
+          `${multiline ? ' md-input--multiline' : ''}` +
           `${inputClassName ? ` ${inputClassName}` : ''}` +
           `${readOnly ? ' read-only' : ''}` +
           `${disabled ? ' disabled' : ''}` +
@@ -298,6 +302,8 @@ Input.propTypes = {
   inputSize: PropTypes.string,
   /** @prop Input label text | '' */
   label: PropTypes.string,
+  /** @prop Input is multiline(textarea) | false */
+  multiline: PropTypes.bool,
   /*** @prop Optional Input name prop type | null */
   name: PropTypes.string,
   /** @prop Set the level of nested Input components | 0 */
@@ -344,6 +350,7 @@ Input.defaultProps = {
   inputRef: null,
   inputSize: '',
   label: '',
+  multiline: false,
   name: null,
   nestedLevel: 0,
   onChange: null,

diff --git a/react/src/lib/Input/tests/__snapshots__/index.spec.js.snap b/react/src/lib/Input/tests/__snapshots__/index.spec.js.snap
@@ -20,6 +20,7 @@ ShallowWrapper {
     inputRef={null}
     inputSize=""
     label="test"
+    multiline={false}
     name="test"
     nestedLevel={0}
     onChange={null}
@@ -245,6 +246,7 @@ ShallowWrapper {
     inputRef={null}
     inputSize=""
     label="test"
+    multiline={false}
     name="test"
     nestedLevel={0}
     onChange={null}
@@ -536,6 +538,7 @@ ShallowWrapper {
     inputRef={null}
     inputSize=""
     label="test"
+    multiline={false}
     name="test"
     nestedLevel={0}
     onChange={null}
@@ -753,6 +756,7 @@ ShallowWrapper {
     inputRef={null}
     inputSize=""
     label="test"
+    multiline={false}
     name="test"
     nestedLevel={0}
     onChange={null}
@@ -970,6 +974,7 @@ ShallowWrapper {
     inputRef={null}
     inputSize=""
     label="test"
+    multiline={false}
     name="test"
     nestedLevel={0}
     onChange={null}

diff --git a/react/src/lib/Input/tests/index.spec.js b/react/src/lib/Input/tests/index.spec.js
@@ -17,6 +17,14 @@ describe('tests for <Input />', () => {
     expect(container).toMatchSnapshot();
   });
 
+  it('should change tag based on multiline prop', () => {
+    const container = shallow(
+      <Input htmlId='1' name='test' label='test' multiline/>
+    );
+
+    expect(container.find('textarea').length).toEqual(1);
+  });
+
   it('should match number SnapShot', () => {
     const container = shallow(
       <Input htmlId="1" name="test" label="test" type="number" />

diff --git a/react/src/lib/InputSearch/tests/__snapshots__/index.spec.js.snap b/react/src/lib/InputSearch/tests/__snapshots__/index.spec.js.snap
@@ -53,6 +53,7 @@ ShallowWrapper {
       "inputRef": null,
       "inputSize": "",
       "label": "",
+      "multiline": false,
       "name": "test",
       "nestedLevel": 0,
       "onChange": null,
@@ -130,6 +131,7 @@ ShallowWrapper {
         "inputRef": null,
         "inputSize": "",
         "label": "",
+        "multiline": false,
         "name": "test",
         "nestedLevel": 0,
         "onChange": null,
@@ -251,6 +253,7 @@ ShallowWrapper {
       "inputRef": null,
       "inputSize": "",
       "label": "",
+      "multiline": false,
       "name": "test",
       "nestedLevel": 0,
       "onChange": null,
@@ -328,6 +331,7 @@ ShallowWrapper {
         "inputRef": null,
         "inputSize": "",
         "label": "",
+        "multiline": false,
         "name": "test",
         "nestedLevel": 0,
         "onChange": null,

diff --git a/react/src/lib/TimePicker/tests/__snapshots__/index.spec.js.snap b/react/src/lib/TimePicker/tests/__snapshots__/index.spec.js.snap
@@ -44,6 +44,7 @@ ShallowWrapper {
           inputRef={[Function]}
           inputSize=""
           label=""
+          multiline={false}
           name="md-timepicker__input-1"
           nestedLevel={0}
           onChange={[Function]}
@@ -150,6 +151,7 @@ ShallowWrapper {
           "inputRef": [Function],
           "inputSize": "",
           "label": "",
+          "multiline": false,
           "name": "md-timepicker__input-1",
           "nestedLevel": 0,
           "onChange": [Function],
@@ -371,6 +373,7 @@ ShallowWrapper {
             inputRef={[Function]}
             inputSize=""
             label=""
+            multiline={false}
             name="md-timepicker__input-1"
             nestedLevel={0}
             onChange={[Function]}
@@ -477,6 +480,7 @@ ShallowWrapper {
             "inputRef": [Function],
             "inputSize": "",
             "label": "",
+            "multiline": false,
             "name": "md-timepicker__input-1",
             "nestedLevel": 0,
             "onChange": [Function],