ref(feedback) Use new Input component (#12265)

Remove @atlaskit/field-text-area dep

package-lock.json

@@ -11,7 +11,6 @@
       "license": "Apache-2.0",
       "dependencies": {
         "@amplitude/react-native": "2.7.0",
-        "@atlaskit/field-text-area": "8.0.4",
         "@atlaskit/flag": "14.1.0",
         "@atlaskit/icon": "21.2.0",
         "@atlaskit/inline-dialog": "13.0.9",
@@ -510,21 +509,6 @@
         "react": "^16.8.0"
       }
     },
-    "node_modules/@atlaskit/field-text-area": {
-      "version": "8.0.4",
-      "resolved": "https://registry.npmjs.org/@atlaskit/field-text-area/-/field-text-area-8.0.4.tgz",
-      "integrity": "sha512-LLeles+F8tkFdXwnyuBLRVWeobXWcZWGf32twrp3SThgrgP64HSME6rielYO/InTwdNGgDo63n6oLVLEMpRS/g==",
-      "dependencies": {
-        "@atlaskit/analytics-next": "^8.0.0",
-        "@atlaskit/field-base": "^15.0.0",
-        "@atlaskit/theme": "^11.0.0",
-        "@babel/runtime": "^7.0.0"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0",
-        "styled-components": "^3.2.6"
-      }
-    },
     "node_modules/@atlaskit/flag": {
       "version": "14.1.0",
       "resolved": "https://registry.npmjs.org/@atlaskit/flag/-/flag-14.1.0.tgz",
@@ -20870,17 +20854,6 @@
         }
       }
     },
-    "@atlaskit/field-text-area": {
-      "version": "8.0.4",
-      "resolved": "https://registry.npmjs.org/@atlaskit/field-text-area/-/field-text-area-8.0.4.tgz",
-      "integrity": "sha512-LLeles+F8tkFdXwnyuBLRVWeobXWcZWGf32twrp3SThgrgP64HSME6rielYO/InTwdNGgDo63n6oLVLEMpRS/g==",
-      "requires": {
-        "@atlaskit/analytics-next": "^8.0.0",
-        "@atlaskit/field-base": "^15.0.0",
-        "@atlaskit/theme": "^11.0.0",
-        "@babel/runtime": "^7.0.0"
-      }
-    },
     "@atlaskit/flag": {
       "version": "14.1.0",
       "resolved": "https://registry.npmjs.org/@atlaskit/flag/-/flag-14.1.0.tgz",

package.json

@@ -16,7 +16,6 @@
   "readmeFilename": "README.md",
   "dependencies": {
     "@amplitude/react-native": "2.7.0",
-    "@atlaskit/field-text-area": "8.0.4",
     "@atlaskit/flag": "14.1.0",
     "@atlaskit/icon": "21.2.0",
     "@atlaskit/inline-dialog": "13.0.9",

react/features/feedback/components/FeedbackDialog.web.js

@@ -1,6 +1,5 @@
 // @flow
 
-import { FieldTextAreaStateless } from '@atlaskit/field-text-area';
 import StarIcon from '@atlaskit/icon/glyph/star';
 import StarFilledIcon from '@atlaskit/icon/glyph/star-filled';
 import React, { Component } from 'react';
@@ -14,6 +13,7 @@ import { Dialog } from '../../base/dialog';
 import { isMobileBrowser } from '../../base/environment/utils';
 import { translate } from '../../base/i18n';
 import { connect } from '../../base/redux';
+import Input from '../../base/ui/components/web/Input';
 import { cancelFeedback, submitFeedback } from '../actions';
 
 declare var APP: Object;
@@ -271,13 +271,12 @@ class FeedbackDialog extends Component<Props, State> {
                         </div>
                     </div>
                     <div className = 'details'>
-                        <FieldTextAreaStateless
+                        <Input
                             autoFocus = { true }
-                            className = 'input-control'
                             id = 'feedbackTextArea'
                             label = { t('feedback.detailsLabel') }
                             onChange = { this._onMessageChange }
-                            shouldFitContainer = { true }
+                            textarea = { true }
                             value = { message } />
                     </div>
                 </div>
@@ -309,13 +308,13 @@ class FeedbackDialog extends Component<Props, State> {
     /**
      * Updates the known entered feedback message.
      *
-     * @param {Object} event - The DOM event from updating the textfield for the
+     * @param {string} newValue - The new value from updating the textfield for the
      * feedback message.
      * @private
      * @returns {void}
      */
-    _onMessageChange(event) {
+    _onMessageChange(newValue) {
-        this.setState({ message: event.target.value });
+        this.setState({ message: newValue });
     }
 
     /**