From 40050eacd5bad8ae0157374645e9dd988c2445ef Mon Sep 17 00:00:00 2001 From: Theo Date: Wed, 22 May 2019 20:48:51 +0100 Subject: [PATCH 1/2] `EuiFormControlLayoutCustomIcon` to TS --- ...m_control_layout_custom_icon.test.tsx.snap | 36 +++++++++++++++++++ .../form_control_layout_custom_icon.test.tsx | 30 ++++++++++++++++ ...js => form_control_layout_custom_icon.tsx} | 30 +++++++--------- .../form/form_control_layout/index.d.ts | 6 ++++ 4 files changed, 85 insertions(+), 17 deletions(-) create mode 100644 src/components/form/form_control_layout/__snapshots__/form_control_layout_custom_icon.test.tsx.snap create mode 100644 src/components/form/form_control_layout/form_control_layout_custom_icon.test.tsx rename src/components/form/form_control_layout/{form_control_layout_custom_icon.js => form_control_layout_custom_icon.tsx} (57%) diff --git a/src/components/form/form_control_layout/__snapshots__/form_control_layout_custom_icon.test.tsx.snap b/src/components/form/form_control_layout/__snapshots__/form_control_layout_custom_icon.test.tsx.snap new file mode 100644 index 00000000000..7d52f7aecff --- /dev/null +++ b/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`] = ` + +`; + +exports[`EuiFormControlLayoutCustomIcon is rendered as span 1`] = ` + + + +`; diff --git a/src/components/form/form_control_layout/form_control_layout_custom_icon.test.tsx b/src/components/form/form_control_layout/form_control_layout_custom_icon.test.tsx new file mode 100644 index 00000000000..e5031922e19 --- /dev/null +++ b/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(); + + expect(component).toMatchSnapshot(); + }); + + test('is rendered as span', () => { + const props = { + className: 'customClass', + 'data-test-subj': 'customIcon', + type: 'alert', + iconRef: 'icon', + }; + const component = render(); + + expect(component).toMatchSnapshot(); + }); +}); diff --git a/src/components/form/form_control_layout/form_control_layout_custom_icon.js b/src/components/form/form_control_layout/form_control_layout_custom_icon.tsx similarity index 57% rename from src/components/form/form_control_layout/form_control_layout_custom_icon.js rename to src/components/form/form_control_layout/form_control_layout_custom_icon.tsx index fd25f286f53..56c0e86430a 100644 --- a/src/components/form/form_control_layout/form_control_layout_custom_icon.js +++ b/src/components/form/form_control_layout/form_control_layout_custom_icon.tsx @@ -1,16 +1,19 @@ -import React from 'react'; -import PropTypes from 'prop-types'; +import React, { ButtonHTMLAttributes, FunctionComponent } from 'react'; import classNames from 'classnames'; -import { EuiIcon } from '../../icon'; +import { EuiIcon, IconType } from '../../icon'; +import { CommonProps } 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 & + ButtonHTMLAttributes & + EuiFormControlLayoutCustomIconProps +> = ({ className, onClick, type, iconRef, ...rest }) => { const classes = classNames('euiFormControlLayoutCustomIcon', className, { 'euiFormControlLayoutCustomIcon--clickable': onClick, }); @@ -42,10 +45,3 @@ export const EuiFormControlLayoutCustomIcon = ({ ); }; - -EuiFormControlLayoutCustomIcon.propTypes = { - className: PropTypes.string, - onClick: PropTypes.func, - type: PropTypes.string, - iconRef: PropTypes.func, -}; diff --git a/src/components/form/form_control_layout/index.d.ts b/src/components/form/form_control_layout/index.d.ts index 5a574d35712..2396d672345 100644 --- a/src/components/form/form_control_layout/index.d.ts +++ b/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; } From 67de75120bd5f77f02cd9f4d8d85dd7267668cc8 Mon Sep 17 00:00:00 2001 From: Theo Date: Thu, 23 May 2019 14:54:08 +0100 Subject: [PATCH 2/2] `EuiFormControlLayoutCustomIcon` code review --- CHANGELOG.md | 1 + .../form_control_layout_custom_icon.tsx | 13 ++++++++++--- 2 files changed, 11 insertions(+), 3 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 13f06d30853..7f3a0b9adc6 100644 --- a/CHANGELOG.md +++ b/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)) diff --git a/src/components/form/form_control_layout/form_control_layout_custom_icon.tsx b/src/components/form/form_control_layout/form_control_layout_custom_icon.tsx index 56c0e86430a..5d34bb1da43 100644 --- a/src/components/form/form_control_layout/form_control_layout_custom_icon.tsx +++ b/src/components/form/form_control_layout/form_control_layout_custom_icon.tsx @@ -1,8 +1,12 @@ -import React, { ButtonHTMLAttributes, FunctionComponent } from 'react'; +import React, { + ButtonHTMLAttributes, + FunctionComponent, + HTMLAttributes, +} from 'react'; import classNames from 'classnames'; import { EuiIcon, IconType } from '../../icon'; -import { CommonProps } from '../../common'; +import { CommonProps, ExclusiveUnion } from '../../common'; export interface EuiFormControlLayoutCustomIconProps { type: IconType; @@ -11,7 +15,10 @@ export interface EuiFormControlLayoutCustomIconProps { export const EuiFormControlLayoutCustomIcon: FunctionComponent< CommonProps & - ButtonHTMLAttributes & + ExclusiveUnion< + ButtonHTMLAttributes, + HTMLAttributes + > & EuiFormControlLayoutCustomIconProps > = ({ className, onClick, type, iconRef, ...rest }) => { const classes = classNames('euiFormControlLayoutCustomIcon', className, {