From d39af61d06f3bd0396f635fd29adac9e5b214903 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fl=C3=A1vio=20Franco=20Knob?= Date: Wed, 18 Dec 2019 08:51:17 -0300 Subject: [PATCH 1/4] Converts EuiFieldText to Typescript --- CHANGELOG.md | 2 +- src/components/color_picker/color_picker.tsx | 6 +- ....test.js.snap => field_text.test.tsx.snap} | 0 ...field_text.test.js => field_text.test.tsx} | 0 .../{field_text.js => field_text.tsx} | 73 +++++++++---------- .../form/field_text/{index.js => index.ts} | 0 6 files changed, 40 insertions(+), 41 deletions(-) rename src/components/form/field_text/__snapshots__/{field_text.test.js.snap => field_text.test.tsx.snap} (100%) rename src/components/form/field_text/{field_text.test.js => field_text.test.tsx} (100%) rename src/components/form/field_text/{field_text.js => field_text.tsx} (57%) rename src/components/form/field_text/{index.js => index.ts} (100%) diff --git a/CHANGELOG.md b/CHANGELOG.md index 3ff40217ca3..189550bfd8a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,6 @@ ## [`master`](https://github.com/elastic/eui/tree/master) -No public interface changes since `17.2.1`. +- Converted `EuiFieldText` to Typescript ([#](https://github.com/elastic/eui/pull/)) ## [`17.2.1`](https://github.com/elastic/eui/tree/v17.2.1) diff --git a/src/components/color_picker/color_picker.tsx b/src/components/color_picker/color_picker.tsx index 0f1dc83511e..372e1313031 100644 --- a/src/components/color_picker/color_picker.tsx +++ b/src/components/color_picker/color_picker.tsx @@ -343,7 +343,11 @@ export const EuiColorPicker: FunctionComponent = ({ fullWidth={fullWidth} autoComplete="off" data-test-subj={testSubjAnchor} - aria-label={isColorSelectorShown ? openLabel : closeLabel} + aria-label={ + isColorSelectorShown + ? (openLabel as string) + : (closeLabel as string) + } /> )} diff --git a/src/components/form/field_text/__snapshots__/field_text.test.js.snap b/src/components/form/field_text/__snapshots__/field_text.test.tsx.snap similarity index 100% rename from src/components/form/field_text/__snapshots__/field_text.test.js.snap rename to src/components/form/field_text/__snapshots__/field_text.test.tsx.snap diff --git a/src/components/form/field_text/field_text.test.js b/src/components/form/field_text/field_text.test.tsx similarity index 100% rename from src/components/form/field_text/field_text.test.js rename to src/components/form/field_text/field_text.test.tsx diff --git a/src/components/form/field_text/field_text.js b/src/components/form/field_text/field_text.tsx similarity index 57% rename from src/components/form/field_text/field_text.js rename to src/components/form/field_text/field_text.tsx index 5ace91b3e7e..89e9ecaa32d 100644 --- a/src/components/form/field_text/field_text.js +++ b/src/components/form/field_text/field_text.tsx @@ -1,12 +1,43 @@ -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 { EuiValidatableControl } from '../validatable_control'; -export const EuiFieldText = ({ +export type EuiFieldTextProps = InputHTMLAttributes & + CommonProps & { + icon?: string; + isInvalid?: boolean; + fullWidth?: boolean; + isLoading?: boolean; + readOnly?: boolean; + inputRef?: Ref; + + /** + * Creates an input group with element(s) coming before input + */ + prepend?: JSX.Element | JSX.Element[]; + + /** + * Creates an input group with element(s) coming after input + */ + append?: string; + + /** + * 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 = ({ id, name, placeholder, @@ -65,42 +96,6 @@ export const EuiFieldText = ({ ); }; -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, diff --git a/src/components/form/field_text/index.js b/src/components/form/field_text/index.ts similarity index 100% rename from src/components/form/field_text/index.js rename to src/components/form/field_text/index.ts From eb6bbd99d0e4472b11516d740537c6a1eb9ed370 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fl=C3=A1vio=20Franco=20Knob?= Date: Wed, 18 Dec 2019 08:55:12 -0300 Subject: [PATCH 2/4] Adds PR number to CHANGELOG line --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 189550bfd8a..4950cc8bdc8 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,6 @@ ## [`master`](https://github.com/elastic/eui/tree/master) -- Converted `EuiFieldText` to Typescript ([#](https://github.com/elastic/eui/pull/)) +- Converted `EuiFieldText` to Typescript ([#2688](https://github.com/elastic/eui/pull/2688)) ## [`17.2.1`](https://github.com/elastic/eui/tree/v17.2.1) From 3f471eff9f959674d916cf0a967daf1aced9b13f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fl=C3=A1vio=20Knob?= Date: Fri, 27 Dec 2019 17:21:31 -0300 Subject: [PATCH 3/4] Fixes openLabel, closeLabel typing --- src/components/color_picker/color_picker.tsx | 9 ++------- 1 file changed, 2 insertions(+), 7 deletions(-) diff --git a/src/components/color_picker/color_picker.tsx b/src/components/color_picker/color_picker.tsx index 372e1313031..e9b38cd3d57 100644 --- a/src/components/color_picker/color_picker.tsx +++ b/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 = ({ '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[]) => ( = ({ fullWidth={fullWidth} autoComplete="off" data-test-subj={testSubjAnchor} - aria-label={ - isColorSelectorShown - ? (openLabel as string) - : (closeLabel as string) - } + aria-label={isColorSelectorShown ? openLabel : closeLabel} /> )} From 8bba0c49fa51eff165182974e1fdb3faace669ed Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fl=C3=A1vio=20Knob?= Date: Fri, 27 Dec 2019 19:09:09 -0300 Subject: [PATCH 4/4] Removes index.d.ts --- src/components/form/field_text/index.d.ts | 26 ----------------------- 1 file changed, 26 deletions(-) delete mode 100644 src/components/form/field_text/index.d.ts diff --git a/src/components/form/field_text/index.d.ts b/src/components/form/field_text/index.d.ts deleted file mode 100644 index c88d2f18840..00000000000 --- a/src/components/form/field_text/index.d.ts +++ /dev/null @@ -1,26 +0,0 @@ -import { CommonProps } from '../../common'; - -import { FunctionComponent, InputHTMLAttributes, Ref } from 'react'; - -declare module '@elastic/eui' { - /** - * text field type defs - * - * @see './field_text.js' - */ - export interface EuiFieldTextProps { - icon?: string; - isInvalid?: boolean; - inputRef?: Ref; - fullWidth?: boolean; - isLoading?: boolean; - prepend?: React.ReactNode; - append?: React.ReactNode; - compressed?: boolean; - controlOnly?: boolean; - } - - export const EuiFieldText: FunctionComponent< - CommonProps & InputHTMLAttributes & EuiFieldTextProps - >; -}