EuiFormControlLayoutCustomIcon to TS

CHANGELOG.md

@@ -1,5 +1,6 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
+- Converted `EuiFormControlLayoutCustomIcon` to TS ([#1956](https://github.com/elastic/eui/pull/1956))
 - Converted `EuiStepNumber` to TS ([#1893](https://github.com/elastic/eui/pull/1893))
 - Converted `EuiFormControlLayoutClearButton` to TS ([#1922](https://github.com/elastic/eui/pull/1922))
 - Added `data-test-subj` property to `EuiDraggable` and `EuiDroppable` ([#1943](https://github.com/elastic/eui/pull/1943))

src/components/form/form_control_layout/__snapshots__/form_control_layout_custom_icon.test.tsx.snap

@@ -0,0 +1,36 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`EuiFormControlLayoutCustomIcon is rendered as button 1`] = `
+<button
+  class="euiFormControlLayoutCustomIcon customClass euiFormControlLayoutCustomIcon--clickable"
+  data-test-subj="customIcon"
+  type="button"
+>
+  <svg
+    aria-hidden="true"
+    class="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+    focusable="false"
+    height="16"
+    viewBox="0 0 16 16"
+    width="16"
+    xmlns="http://www.w3.org/2000/svg"
+  />
+</button>
+`;
+
+exports[`EuiFormControlLayoutCustomIcon is rendered as span 1`] = `
+<span
+  class="euiFormControlLayoutCustomIcon customClass"
+  data-test-subj="customIcon"
+>
+  <svg
+    aria-hidden="true"
+    class="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+    focusable="false"
+    height="16"
+    viewBox="0 0 16 16"
+    width="16"
+    xmlns="http://www.w3.org/2000/svg"
+  />
+</span>
+`;

src/components/form/form_control_layout/form_control_layout_custom_icon.test.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { render } from 'enzyme';
+import { EuiFormControlLayoutCustomIcon } from './form_control_layout_custom_icon';
+
+describe('EuiFormControlLayoutCustomIcon', () => {
+  test('is rendered as button', () => {
+    const props = {
+      onClick: () => null,
+      className: 'customClass',
+      'data-test-subj': 'customIcon',
+      type: 'alert',
+      iconRef: 'icon',
+    };
+    const component = render(<EuiFormControlLayoutCustomIcon {...props} />);
+
+    expect(component).toMatchSnapshot();
+  });
+
+  test('is rendered as span', () => {
+    const props = {
+      className: 'customClass',
+      'data-test-subj': 'customIcon',
+      type: 'alert',
+      iconRef: 'icon',
+    };
+    const component = render(<EuiFormControlLayoutCustomIcon {...props} />);
+
+    expect(component).toMatchSnapshot();
+  });
+});

src/components/form/form_control_layout/form_control_layout_custom_icon.js → src/components/form/form_control_layout/form_control_layout_custom_icon.tsx

@@ -1,16 +1,26 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import React, {
+  ButtonHTMLAttributes,
+  FunctionComponent,
+  HTMLAttributes,
+} from 'react';
 import classNames from 'classnames';
 
-import { EuiIcon } from '../../icon';
+import { EuiIcon, IconType } from '../../icon';
+import { CommonProps, ExclusiveUnion } from '../../common';
 
-export const EuiFormControlLayoutCustomIcon = ({
-  className,
-  onClick,
-  type,
-  iconRef,
-  ...rest
-}) => {
+export interface EuiFormControlLayoutCustomIconProps {
+  type: IconType;
+  iconRef?: string | ((el: HTMLButtonElement | HTMLSpanElement | null) => void);
+}
+
+export const EuiFormControlLayoutCustomIcon: FunctionComponent<
+  CommonProps &
+    ExclusiveUnion<
+      ButtonHTMLAttributes<HTMLButtonElement>,
+      HTMLAttributes<HTMLSpanElement>
+    > &
+    EuiFormControlLayoutCustomIconProps
+> = ({ className, onClick, type, iconRef, ...rest }) => {
   const classes = classNames('euiFormControlLayoutCustomIcon', className, {
     'euiFormControlLayoutCustomIcon--clickable': onClick,
   });
@@ -42,10 +52,3 @@ export const EuiFormControlLayoutCustomIcon = ({
     </span>
   );
 };
-
-EuiFormControlLayoutCustomIcon.propTypes = {
-  className: PropTypes.string,
-  onClick: PropTypes.func,
-  type: PropTypes.string,
-  iconRef: PropTypes.func,
-};

src/components/form/form_control_layout/index.d.ts

@@ -1,8 +1,14 @@
 import { EuiFormControlLayoutClearButton as FormControlLayoutClearButton } from './form_control_layout_clear_button';
+import { EuiFormControlLayoutCustomIcon as FormControlLayoutCustomIcon } from './form_control_layout_custom_icon';
 
 declare module '@elastic/eui' {
   /**
    * @see './form_control_layout_clear_button.js'
    */
   export const EuiFormControlLayoutClearButton: typeof FormControlLayoutClearButton;
+
+  /**
+   * @see './form_control_layout_custom_icon.js'
+   */
+  export const EuiFormControlLayoutCustomIcon: typeof FormControlLayoutCustomIcon;
 }