EuiFieldText: converted to Typescript (#2688)

* Converts EuiFieldText to Typescript

* Adds PR number to CHANGELOG line

* Fixes openLabel, closeLabel typing

* Removes index.d.ts

CHANGELOG.md

@@ -1,5 +1,6 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
+- Converted `EuiFieldText` to Typescript ([#2688](https://github.com/elastic/eui/pull/2688))
 - Added `nested` glyph to `EuiIcon` ([#2707](https://github.com/elastic/eui/pull/2707))
 - Added `tableLayout` prop to `EuiTable`, `EuiBasicTable` and `EuiInMemoryTable` to provide the option of auto layout ([#2697](https://github.com/elastic/eui/pull/2697))
 - Converted `EuiErrorBoundary` to Typescript  ([#2690](https://github.com/elastic/eui/pull/2690))

src/components/color_picker/color_picker.tsx

@@ -1,7 +1,6 @@
 import React, {
   FunctionComponent,
   HTMLAttributes,
-  ReactChild,
   ReactElement,
   cloneElement,
   useEffect,
@@ -324,7 +323,7 @@ export const EuiColorPicker: FunctionComponent<EuiColorPickerProps> = ({
               'Press the escape key to close the popover',
               'Press the down key to open a popover containing color options',
             ]}>
-            {([openLabel, closeLabel]: ReactChild[]) => (
+            {([openLabel, closeLabel]: string[]) => (
               <EuiFieldText
                 className="euiColorPicker__input"
                 onClick={handleInputActivity}

src/components/form/field_text/__snapshots__/field_text.test.js.snap → src/components/form/field_text/__snapshots__/field_text.test.tsx.snap

@@ -2,11 +2,9 @@
 
 exports[`EuiFieldText is rendered 1`] = `
 <eui-form-control-layout
-  compressed="false"
   fullwidth="false"
   icon="foo"
   inputid="1"
-  isloading="false"
 >
   <eui-validatable-control>
     <input
@@ -34,9 +32,7 @@ exports[`EuiFieldText props controlOnly is rendered 1`] = `
 
 exports[`EuiFieldText props fullWidth is rendered 1`] = `
 <eui-form-control-layout
-  compressed="false"
   fullwidth="true"
-  isloading="false"
 >
   <eui-validatable-control>
     <input
@@ -49,9 +45,7 @@ exports[`EuiFieldText props fullWidth is rendered 1`] = `
 
 exports[`EuiFieldText props isInvalid is rendered 1`] = `
 <eui-form-control-layout
-  compressed="false"
   fullwidth="false"
-  isloading="false"
 >
   <eui-validatable-control
     isinvalid="true"
@@ -66,7 +60,6 @@ exports[`EuiFieldText props isInvalid is rendered 1`] = `
 
 exports[`EuiFieldText props isLoading is rendered 1`] = `
 <eui-form-control-layout
-  compressed="false"
   fullwidth="false"
   isloading="true"
 >
@@ -81,9 +74,7 @@ exports[`EuiFieldText props isLoading is rendered 1`] = `
 
 exports[`EuiFieldText props readOnly is rendered 1`] = `
 <eui-form-control-layout
-  compressed="false"
   fullwidth="false"
-  isloading="false"
   readonly="true"
 >
   <eui-validatable-control>

src/components/form/field_text/field_text.js → src/components/form/field_text/field_text.tsx

@@ -1,12 +1,46 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import React, { InputHTMLAttributes, Ref, FunctionComponent } from 'react';
+import { CommonProps } from '../../common';
 import classNames from 'classnames';
 
-import { EuiFormControlLayout } from '../form_control_layout';
+import {
+  EuiFormControlLayout,
+  EuiFormControlLayoutProps,
+} from '../form_control_layout';
 
 import { EuiValidatableControl } from '../validatable_control';
 
-export const EuiFieldText = ({
+export type EuiFieldTextProps = InputHTMLAttributes<HTMLInputElement> &
+  CommonProps & {
+    icon?: EuiFormControlLayoutProps['icon'];
+    isInvalid?: boolean;
+    fullWidth?: boolean;
+    isLoading?: boolean;
+    readOnly?: boolean;
+    inputRef?: Ref<HTMLInputElement>;
+
+    /**
+     * Creates an input group with element(s) coming before input
+     */
+    prepend?: EuiFormControlLayoutProps['prepend'];
+
+    /**
+     * Creates an input group with element(s) coming after input
+     */
+    append?: EuiFormControlLayoutProps['append'];
+
+    /**
+     * Completely removes form control layout wrapper and ignores
+     * icon, prepend, and append. Best used inside EuiFormControlLayoutDelimited.
+     */
+    controlOnly?: boolean;
+
+    /**
+     * when `true` creates a shorter height input
+     */
+    compressed?: boolean;
+  };
+
+export const EuiFieldText: FunctionComponent<EuiFieldTextProps> = ({
   id,
   name,
   placeholder,
@@ -15,7 +49,7 @@ export const EuiFieldText = ({
   icon,
   isInvalid,
   inputRef,
-  fullWidth,
+  fullWidth = false,
   isLoading,
   compressed,
   prepend,
@@ -64,46 +98,3 @@ export const EuiFieldText = ({
     </EuiFormControlLayout>
   );
 };
-
-EuiFieldText.propTypes = {
-  name: PropTypes.string,
-  id: PropTypes.string,
-  placeholder: PropTypes.string,
-  value: PropTypes.string,
-  icon: PropTypes.string,
-  isInvalid: PropTypes.bool,
-  inputRef: PropTypes.func,
-  fullWidth: PropTypes.bool,
-  isLoading: PropTypes.bool,
-  readOnly: PropTypes.bool,
-  /**
-   * when `true` creates a shorter height input
-   */
-  compressed: PropTypes.bool,
-  /**
-   * Creates an input group with element(s) coming before input
-   */
-  prepend: PropTypes.oneOfType([
-    PropTypes.node,
-    PropTypes.arrayOf(PropTypes.node),
-  ]),
-  /**
-   * Creates an input group with element(s) coming after input
-   */
-  append: PropTypes.oneOfType([
-    PropTypes.node,
-    PropTypes.arrayOf(PropTypes.node),
-  ]),
-  /**
-   * Completely removes form control layout wrapper and ignores
-   * icon, prepend, and append. Best used inside EuiFormControlLayoutDelimited.
-   */
-  controlOnly: PropTypes.bool,
-};
-
-EuiFieldText.defaultProps = {
-  value: undefined,
-  fullWidth: false,
-  isLoading: false,
-  compressed: false,
-};

src/components/form/index.d.ts

@@ -1,6 +1,5 @@
 import { CommonProps } from '../common';
 /// <reference path="./field_search/index.d.ts" />
-/// <reference path="./field_text/index.d.ts" />
 /// <reference path="./form_row/index.d.ts" />
 /// <reference path="./range/index.d.ts" />
 /// <reference path="./select/index.d.ts" />