From a0c7aa0bf8007e29261cf39fa22880dbae8c80d6 Mon Sep 17 00:00:00 2001
From: Theofanis Despoudis <thdespou@hotmail.com>
Date: Tue, 21 May 2019 15:03:07 +0100
Subject: [PATCH] `EuiFormControlLayoutClearButton` converted to TS (#1922)

* `EuiFormControlLayoutClearButton` converted to TS

* `EuiFormControlLayoutClearButton` code review
---
 CHANGELOG.md                                  |  2 +-
 ..._control_layout_clear_button.test.tsx.snap | 19 +++++++++++++++++
 .../form_control_layout_clear_button.test.tsx | 16 ++++++++++++++
 ...s => form_control_layout_clear_button.tsx} | 21 +++++++------------
 .../form/form_control_layout/index.d.ts       |  8 +++++++
 src/components/form/index.d.ts                |  2 ++
 6 files changed, 53 insertions(+), 15 deletions(-)
 create mode 100644 src/components/form/form_control_layout/__snapshots__/form_control_layout_clear_button.test.tsx.snap
 create mode 100644 src/components/form/form_control_layout/form_control_layout_clear_button.test.tsx
 rename src/components/form/form_control_layout/{form_control_layout_clear_button.js => form_control_layout_clear_button.tsx} (66%)
 create mode 100644 src/components/form/form_control_layout/index.d.ts

diff --git a/CHANGELOG.md b/CHANGELOG.md
index eadf8a1adb0..2ce223abbdf 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,6 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
-No public interface changes since `11.1.0`.
+- Converted `EuiFormControlLayoutClearButton` to TS ([#1922](https://github.com/elastic/eui/pull/1922))
 
 ## [`11.1.0`](https://github.com/elastic/eui/tree/v11.1.0)
 
diff --git a/src/components/form/form_control_layout/__snapshots__/form_control_layout_clear_button.test.tsx.snap b/src/components/form/form_control_layout/__snapshots__/form_control_layout_clear_button.test.tsx.snap
new file mode 100644
index 00000000000..62e712f7b36
--- /dev/null
+++ b/src/components/form/form_control_layout/__snapshots__/form_control_layout_clear_button.test.tsx.snap
@@ -0,0 +1,19 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`EuiFormControlLayoutClearButton is rendered 1`] = `
+<button
+  aria-label="Clear input"
+  class="euiFormControlLayoutClearButton customClass"
+  data-test-subj="clearButton"
+  type="button"
+>
+  <svg
+    class="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutClearButton__icon"
+    focusable="false"
+    height="16"
+    viewBox="0 0 16 16"
+    width="16"
+    xmlns="http://www.w3.org/2000/svg"
+  />
+</button>
+`;
diff --git a/src/components/form/form_control_layout/form_control_layout_clear_button.test.tsx b/src/components/form/form_control_layout/form_control_layout_clear_button.test.tsx
new file mode 100644
index 00000000000..b5964bb44ea
--- /dev/null
+++ b/src/components/form/form_control_layout/form_control_layout_clear_button.test.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import { render } from 'enzyme';
+import { EuiFormControlLayoutClearButton } from './form_control_layout_clear_button';
+
+describe('EuiFormControlLayoutClearButton', () => {
+  test('is rendered', () => {
+    const clear = {
+      onClick: () => null,
+      className: 'customClass',
+      'data-test-subj': 'clearButton',
+    };
+    const component = render(<EuiFormControlLayoutClearButton {...clear} />);
+
+    expect(component).toMatchSnapshot();
+  });
+});
diff --git a/src/components/form/form_control_layout/form_control_layout_clear_button.js b/src/components/form/form_control_layout/form_control_layout_clear_button.tsx
similarity index 66%
rename from src/components/form/form_control_layout/form_control_layout_clear_button.js
rename to src/components/form/form_control_layout/form_control_layout_clear_button.tsx
index 9c840ac9904..f9a712a90ce 100644
--- a/src/components/form/form_control_layout/form_control_layout_clear_button.js
+++ b/src/components/form/form_control_layout/form_control_layout_clear_button.tsx
@@ -1,22 +1,20 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import React, { FunctionComponent, ButtonHTMLAttributes } from 'react';
 
+import classNames from 'classnames';
+import { CommonProps } from '../../common';
 import { EuiIcon } from '../../icon';
 import { EuiI18n } from '../../i18n';
 
-export const EuiFormControlLayoutClearButton = ({
-  className,
-  onClick,
-  ...rest
-}) => {
+export const EuiFormControlLayoutClearButton: FunctionComponent<
+  CommonProps & ButtonHTMLAttributes<HTMLButtonElement>
+> = ({ className, onClick, ...rest }) => {
   const classes = classNames('euiFormControlLayoutClearButton', className);
 
   return (
     <EuiI18n
       token="euiFormControlLayoutClearButton.label"
       default="Clear input">
-      {label => (
+      {(label: string) => (
         <button
           type="button"
           className={classes}
@@ -32,8 +30,3 @@ export const EuiFormControlLayoutClearButton = ({
     </EuiI18n>
   );
 };
-
-EuiFormControlLayoutClearButton.propTypes = {
-  className: PropTypes.string,
-  onClick: PropTypes.func,
-};
diff --git a/src/components/form/form_control_layout/index.d.ts b/src/components/form/form_control_layout/index.d.ts
new file mode 100644
index 00000000000..5a574d35712
--- /dev/null
+++ b/src/components/form/form_control_layout/index.d.ts
@@ -0,0 +1,8 @@
+import { EuiFormControlLayoutClearButton as FormControlLayoutClearButton } from './form_control_layout_clear_button';
+
+declare module '@elastic/eui' {
+  /**
+   * @see './form_control_layout_clear_button.js'
+   */
+  export const EuiFormControlLayoutClearButton: typeof FormControlLayoutClearButton;
+}
diff --git a/src/components/form/index.d.ts b/src/components/form/index.d.ts
index 22100d015a1..3463ca41dd3 100644
--- a/src/components/form/index.d.ts
+++ b/src/components/form/index.d.ts
@@ -5,6 +5,7 @@ import { CommonProps } from '../common';
 /// <reference path="./field_search/index.d.ts" />
 /// <reference path="./field_text/index.d.ts" />
 /// <reference path="./form_help_text/index.d.ts" />
+/// <reference path="./form_control_layout/index.d.ts" />
 /// <reference path="./form_row/index.d.ts" />
 /// <reference path="./radio/index.d.ts" />
 /// <reference path="./range/index.d.ts" />
@@ -12,6 +13,7 @@ import { CommonProps } from '../common';
 /// <reference path="./switch/index.d.ts" />
 /// <reference path="./text_area/index.d.ts" />
 
+
 import { FunctionComponent, FormHTMLAttributes, ReactNode } from 'react';
 
 declare module '@elastic/eui' {