diff --git a/CHANGELOG.md b/CHANGELOG.md index c4a781eb26c..bbd1d779aaa 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,6 @@ ## [`master`](https://github.com/elastic/eui/tree/master) +- Converted `EuiForm` to TypeScript, added many missing `/form` Prop types ([#2896](https://github.com/elastic/eui/pull/2896)) - Empty table th elements replaced with td in `EuiTable`. ([#2934](https://github.com/elastic/eui/pull/2934)) - Added default prompt text to `aria-describedby` for `EuiFilePicker` ([#2919](https://github.com/elastic/eui/pull/2919)) - Added SASS variables for text variants of the primary palette `$euiColorPrimaryText`, `$euiColorSecondaryText`, etc... Updated components to use these new variables. ([#2873](https://github.com/elastic/eui/pull/2873)) diff --git a/src/components/basic_table/basic_table.tsx b/src/components/basic_table/basic_table.tsx index 989cffcb4fe..e1b96ead978 100644 --- a/src/components/basic_table/basic_table.tsx +++ b/src/components/basic_table/basic_table.tsx @@ -16,7 +16,7 @@ import { CommonProps } from '../common'; import { isFunction } from '../../services/predicate'; import { get } from '../../services/objects'; import { EuiFlexGroup, EuiFlexItem } from '../flex'; -import { EuiCheckbox } from '../form/checkbox/checkbox'; +import { EuiCheckbox } from '../form'; import { EuiTable, diff --git a/src/components/card/checkable_card/checkable_card.tsx b/src/components/card/checkable_card/checkable_card.tsx index 8da1def6e1c..a4dd3480ae3 100644 --- a/src/components/card/checkable_card/checkable_card.tsx +++ b/src/components/card/checkable_card/checkable_card.tsx @@ -1,8 +1,12 @@ import React, { FunctionComponent, ReactNode } from 'react'; import classNames from 'classnames'; -import { EuiRadio, EuiRadioProps } from '../../form/radio'; -import { EuiCheckbox, EuiCheckboxProps } from '../../form/checkbox'; +import { + EuiRadio, + EuiRadioProps, + EuiCheckbox, + EuiCheckboxProps, +} from '../../form'; interface EuiCheckableCardBaseProps { id: string; diff --git a/src/components/color_picker/color_picker.tsx b/src/components/color_picker/color_picker.tsx index 9004714d5ec..901ec8588fe 100644 --- a/src/components/color_picker/color_picker.tsx +++ b/src/components/color_picker/color_picker.tsx @@ -17,11 +17,11 @@ import { EuiScreenReaderOnly } from '../accessibility'; import { EuiColorPickerSwatch } from './color_picker_swatch'; import { EuiFocusTrap } from '../focus_trap'; import { EuiFlexGroup, EuiFlexItem } from '../flex'; -import { EuiFieldText } from '../form/field_text'; import { + EuiFieldText, EuiFormControlLayout, EuiFormControlLayoutProps, -} from '../form/form_control_layout'; +} from '../form'; import { EuiI18n } from '../i18n'; import { EuiPopover } from '../popover'; import { VISUALIZATION_COLORS, keyCodes } from '../../services'; diff --git a/src/components/color_picker/color_stops/color_stop_thumb.tsx b/src/components/color_picker/color_stops/color_stop_thumb.tsx index 35628b55366..4aa27edae0c 100644 --- a/src/components/color_picker/color_stops/color_stop_thumb.tsx +++ b/src/components/color_picker/color_stops/color_stop_thumb.tsx @@ -20,13 +20,12 @@ import { keyCodes } from '../../../services'; import { EuiButtonIcon } from '../../button'; import { EuiColorPicker, EuiColorPickerProps } from '../color_picker'; import { EuiFlexGroup, EuiFlexItem } from '../../flex'; -// @ts-ignore import { EuiFieldNumber, EuiFieldText, EuiFormRow } from '../../form'; import { EuiI18n } from '../../i18n'; -import { EuiRangeThumb } from '../../form/range/range_thumb'; import { EuiPopover } from '../../popover'; import { EuiScreenReaderOnly } from '../../accessibility'; import { EuiSpacer } from '../../spacer'; +import { EuiRangeThumb } from '../../form/range/range_thumb'; export interface ColorStop { stop: number; @@ -310,15 +309,14 @@ export const EuiColorStopThumb: FunctionComponent = ({ = ({ - + @@ -374,7 +369,6 @@ export const EuiColorStopThumb: FunctionComponent = ({ ) => { + onChange={event => { + const { + target: { checked }, + } = event; const nextVisibleColumns = sortedColumns.filter( columnId => checked diff --git a/src/components/form/__snapshots__/form.test.js.snap b/src/components/form/__snapshots__/form.test.tsx.snap similarity index 100% rename from src/components/form/__snapshots__/form.test.js.snap rename to src/components/form/__snapshots__/form.test.tsx.snap diff --git a/src/components/form/checkbox/index.ts b/src/components/form/checkbox/index.ts index d4ad37737f0..11300c7afe7 100644 --- a/src/components/form/checkbox/index.ts +++ b/src/components/form/checkbox/index.ts @@ -1,7 +1,6 @@ -export { EuiCheckbox, EuiCheckboxProps, EuiCheckboxType } from './checkbox'; +export { EuiCheckbox, EuiCheckboxProps } from './checkbox'; export { EuiCheckboxGroup, EuiCheckboxGroupProps, EuiCheckboxGroupOption, - EuiCheckboxGroupIdToSelectedMap, } from './checkbox_group'; diff --git a/src/components/form/field_text/index.ts b/src/components/form/field_text/index.ts index ee9223ee315..6a1bc31aba0 100644 --- a/src/components/form/field_text/index.ts +++ b/src/components/form/field_text/index.ts @@ -1 +1 @@ -export { EuiFieldText } from './field_text'; +export { EuiFieldText, EuiFieldTextProps } from './field_text'; diff --git a/src/components/form/form.test.js b/src/components/form/form.test.tsx similarity index 100% rename from src/components/form/form.test.js rename to src/components/form/form.test.tsx diff --git a/src/components/form/form.js b/src/components/form/form.tsx similarity index 60% rename from src/components/form/form.js rename to src/components/form/form.tsx index 4eb406e6f59..2dcfa5cdda7 100644 --- a/src/components/form/form.js +++ b/src/components/form/form.tsx @@ -1,20 +1,32 @@ -import React from 'react'; -import PropTypes from 'prop-types'; +import React, { FunctionComponent, ReactNode, HTMLAttributes } from 'react'; import classNames from 'classnames'; import { EuiCallOut } from '../call_out'; import { EuiI18n } from '../i18n'; +import { CommonProps } from '../common'; -export const EuiForm = ({ children, className, isInvalid, error, ...rest }) => { +export type EuiFormProps = CommonProps & + HTMLAttributes & { + isInvalid?: boolean; + error?: ReactNode | ReactNode[]; + }; + +export const EuiForm: FunctionComponent = ({ + children, + className, + isInvalid, + error, + ...rest +}) => { const classes = classNames('euiForm', className); - let optionalErrors; + let optionalErrors: JSX.Element | null = null; if (error) { const errorTexts = Array.isArray(error) ? error : [error]; optionalErrors = (
    - {errorTexts.map(error => ( -
  • + {errorTexts.map((error, index) => ( +
  • {error}
    • ))} @@ -29,7 +41,7 @@ export const EuiForm = ({ children, className, isInvalid, error, ...rest }) => { - {addressFormErrors => ( + {(addressFormErrors: string) => ( { ); }; - -EuiForm.propTypes = { - isInvalid: PropTypes.bool, - error: PropTypes.oneOfType([ - PropTypes.node, - PropTypes.arrayOf(PropTypes.node), - ]), -}; diff --git a/src/components/form/form_control_layout/form_control_layout_delimited.tsx b/src/components/form/form_control_layout/form_control_layout_delimited.tsx index 0ca6b9f3e9f..91c3f750a87 100644 --- a/src/components/form/form_control_layout/form_control_layout_delimited.tsx +++ b/src/components/form/form_control_layout/form_control_layout_delimited.tsx @@ -12,7 +12,9 @@ import { EuiFormControlLayoutProps, } from './form_control_layout'; -type EuiFormControlLayoutDelimitedProps = Partial & { +export type EuiFormControlLayoutDelimitedProps = Partial< + EuiFormControlLayoutProps +> & { /** * Left side control */ diff --git a/src/components/form/form_control_layout/index.ts b/src/components/form/form_control_layout/index.ts index b0222a4889f..21d33d8f7fb 100644 --- a/src/components/form/form_control_layout/index.ts +++ b/src/components/form/form_control_layout/index.ts @@ -1,13 +1,8 @@ export { EuiFormControlLayout, EuiFormControlLayoutProps, - ICON_SIDES, } from './form_control_layout'; export { - EuiFormControlLayoutClearButton, -} from './form_control_layout_clear_button'; -export { - EuiFormControlLayoutCustomIcon, -} from './form_control_layout_custom_icon'; - -export { EuiFormControlLayoutDelimited } from './form_control_layout_delimited'; + EuiFormControlLayoutDelimited, + EuiFormControlLayoutDelimitedProps, +} from './form_control_layout_delimited'; diff --git a/src/components/form/form_error_text/form_error_text.tsx b/src/components/form/form_error_text/form_error_text.tsx index 535b6a75989..6e2131d8b5b 100644 --- a/src/components/form/form_error_text/form_error_text.tsx +++ b/src/components/form/form_error_text/form_error_text.tsx @@ -3,9 +3,14 @@ import React, { FunctionComponent, HTMLAttributes } from 'react'; import classNames from 'classnames'; import { CommonProps } from '../../common'; -export const EuiFormErrorText: FunctionComponent< - CommonProps & HTMLAttributes -> = ({ children, className, ...rest }) => { +export type EuiFormErrorTextProps = CommonProps & + HTMLAttributes; + +export const EuiFormErrorText: FunctionComponent = ({ + children, + className, + ...rest +}) => { const classes = classNames('euiFormErrorText', className); return ( diff --git a/src/components/form/form_error_text/index.ts b/src/components/form/form_error_text/index.ts index b0fd3c27565..8bc88482184 100644 --- a/src/components/form/form_error_text/index.ts +++ b/src/components/form/form_error_text/index.ts @@ -1 +1 @@ -export { EuiFormErrorText } from './form_error_text'; +export { EuiFormErrorText, EuiFormErrorTextProps } from './form_error_text'; diff --git a/src/components/form/form_help_text/form_help_text.tsx b/src/components/form/form_help_text/form_help_text.tsx index fbaa04f1d74..a9129ec62ec 100644 --- a/src/components/form/form_help_text/form_help_text.tsx +++ b/src/components/form/form_help_text/form_help_text.tsx @@ -3,9 +3,13 @@ import React, { FunctionComponent, HTMLAttributes } from 'react'; import classNames from 'classnames'; import { CommonProps } from '../../common'; -export const EuiFormHelpText: FunctionComponent< - CommonProps & HTMLAttributes -> = ({ children, className, ...rest }) => { +export type EuiFormHelpTextProps = CommonProps & HTMLAttributes; + +export const EuiFormHelpText: FunctionComponent = ({ + children, + className, + ...rest +}) => { const classes = classNames('euiFormHelpText', className); return ( diff --git a/src/components/form/form_help_text/index.ts b/src/components/form/form_help_text/index.ts index dbdc14ff04a..b460e86a117 100644 --- a/src/components/form/form_help_text/index.ts +++ b/src/components/form/form_help_text/index.ts @@ -1 +1 @@ -export { EuiFormHelpText } from './form_help_text'; +export { EuiFormHelpText, EuiFormHelpTextProps } from './form_help_text'; diff --git a/src/components/form/form_label/index.ts b/src/components/form/form_label/index.ts index d06e08e5ffd..74c431f88fd 100644 --- a/src/components/form/form_label/index.ts +++ b/src/components/form/form_label/index.ts @@ -1 +1 @@ -export { EuiFormLabel } from './form_label'; +export { EuiFormLabel, EuiFormLabelProps } from './form_label'; diff --git a/src/components/form/form_row/form_row.tsx b/src/components/form/form_row/form_row.tsx index 7e22ef4e4b5..7e7d80cd378 100644 --- a/src/components/form/form_row/form_row.tsx +++ b/src/components/form/form_row/form_row.tsx @@ -104,19 +104,12 @@ export class EuiFormRow extends Component { hasChildLabel: true, }; - constructor(props: EuiFormRowProps) { - super(props); - - this.state = { - isFocused: false, - id: props.id || makeId(), - }; - - this.onFocus = this.onFocus.bind(this); - this.onBlur = this.onBlur.bind(this); - } + state: EuiFormRowState = { + isFocused: false, + id: this.props.id || makeId(), + }; - onFocus(...args: any[]) { + onFocus = (...args: any[]) => { // Doing this to allow onFocus to be called correctly from the child input element as this component overrides it const onChildFocus = get(this.props, 'children.props.onFocus'); if (onChildFocus) { @@ -126,9 +119,9 @@ export class EuiFormRow extends Component { this.setState({ isFocused: true, }); - } + }; - onBlur(...args: any[]) { + onBlur = (...args: any[]) => { // Doing this to allow onBlur to be called correctly from the child input element as this component overrides it const onChildBlur = get(this.props, 'children.props.onBlur'); if (onChildBlur) { @@ -138,7 +131,7 @@ export class EuiFormRow extends Component { this.setState({ isFocused: false, }); - } + }; render() { const { diff --git a/src/components/form/index.d.ts b/src/components/form/index.d.ts deleted file mode 100644 index c90d2a6366d..00000000000 --- a/src/components/form/index.d.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { CommonProps } from '../common'; - -import { FunctionComponent, FormHTMLAttributes, ReactNode } from 'react'; - -declare module '@elastic/eui' { - /** - * @see './form.js' - */ - export type EuiFormProps = CommonProps & - FormHTMLAttributes & { - isInvalid?: boolean; - error?: ReactNode | ReactNode[]; - }; - - export const EuiForm: FunctionComponent; -} diff --git a/src/components/form/index.js b/src/components/form/index.js deleted file mode 100644 index b07c9f0c34f..00000000000 --- a/src/components/form/index.js +++ /dev/null @@ -1,24 +0,0 @@ -export { EuiCheckbox, EuiCheckboxGroup } from './checkbox'; -export { EuiDescribedFormGroup } from './described_form_group'; -export { EuiFieldNumber } from './field_number'; -export { EuiFieldPassword } from './field_password'; -export { EuiFieldSearch } from './field_search'; -export { EuiFieldText } from './field_text'; -export { EuiFilePicker } from './file_picker'; -export { EuiForm } from './form'; -export { - EuiFormControlLayout, - EuiFormControlLayoutDelimited, -} from './form_control_layout'; -export { EuiFormErrorText } from './form_error_text'; -export { EuiFormFieldset, EuiFormLegend } from './form_fieldset'; -export { EuiFormHelpText } from './form_help_text'; -export { EuiFormLabel } from './form_label'; -export { EuiFormRow } from './form_row'; -export { EuiRadio, EuiRadioGroup } from './radio'; -export { EuiDualRange, EuiRange } from './range'; -export { EuiSelect } from './select'; -export { EuiSuperSelect, EuiSuperSelectControl } from './super_select'; -export { EuiSwitch } from './switch'; -export { EuiTextArea } from './text_area'; -export { EuiValidatableControl } from './validatable_control'; diff --git a/src/components/form/index.ts b/src/components/form/index.ts new file mode 100644 index 00000000000..b5146a08423 --- /dev/null +++ b/src/components/form/index.ts @@ -0,0 +1,21 @@ +export * from './checkbox'; +export * from './described_form_group'; +export * from './field_number'; +export * from './field_password'; +export * from './field_search'; +export * from './field_text'; +export * from './file_picker'; +export * from './form'; +export * from './form_control_layout'; +export * from './form_error_text'; +export * from './form_fieldset'; +export * from './form_help_text'; +export * from './form_label'; +export * from './form_row'; +export * from './radio'; +export * from './range'; +export * from './select'; +export * from './super_select'; +export * from './switch'; +export * from './text_area'; +export * from './validatable_control'; diff --git a/src/components/form/radio/index.ts b/src/components/form/radio/index.ts index f71f4453a11..0261be4c04a 100644 --- a/src/components/form/radio/index.ts +++ b/src/components/form/radio/index.ts @@ -1,8 +1,6 @@ export { EuiRadio, EuiRadioProps } from './radio'; - export { EuiRadioGroup, EuiRadioGroupProps, EuiRadioGroupOption, - EuiRadioGroupChangeCallback, } from './radio_group'; diff --git a/src/components/form/range/index.ts b/src/components/form/range/index.ts index 8413e8019d5..a8e3254a036 100644 --- a/src/components/form/range/index.ts +++ b/src/components/form/range/index.ts @@ -1,17 +1,2 @@ -export { EuiRangeHighlight, EuiRangeHighlightProps } from './range_highlight'; -export { EuiRangeLabel, EuiRangeLabelProps } from './range_label'; -export { - EuiRangeLevels, - EuiRangeLevelsProps, - EuiRangeLevel, - EuiRangeLevelColor, -} from './range_levels'; -export { EuiRangeSlider, EuiRangeSliderProps } from './range_slider'; -export { EuiRangeThumb, EuiRangeThumbProps } from './range_thumb'; -export { EuiRangeTicks, EuiRangeTicksProps } from './range_ticks'; -export { EuiRangeTooltip, EuiRangeTooltipProps } from './range_tooltip'; -export { EuiRangeTrack, EuiRangeTrackProps } from './range_track'; -export { EuiRangeWrapper, EuiRangeWrapperProps } from './range_wrapper'; - export { EuiDualRange, EuiDualRangeProps } from './dual_range'; export { EuiRange, EuiRangeProps } from './range'; diff --git a/src/components/form/select/index.ts b/src/components/form/select/index.ts index e66523868f6..2b826830382 100644 --- a/src/components/form/select/index.ts +++ b/src/components/form/select/index.ts @@ -1 +1 @@ -export { EuiSelect, EuiSelectProps, EuiSelectOptionProps } from './select'; +export { EuiSelect, EuiSelectProps, EuiSelectOption } from './select'; diff --git a/src/components/form/select/select.tsx b/src/components/form/select/select.tsx index 8b6606c3496..6eb141b48a6 100644 --- a/src/components/form/select/select.tsx +++ b/src/components/form/select/select.tsx @@ -13,14 +13,14 @@ import { import { EuiValidatableControl } from '../validatable_control'; import { EuiFormControlLayoutIconsProps } from '../form_control_layout/form_control_layout_icons'; -export interface EuiSelectOptionProps +export interface EuiSelectOption extends OptionHTMLAttributes { text: React.ReactNode; } export type EuiSelectProps = SelectHTMLAttributes & CommonProps & { - options?: EuiSelectOptionProps[]; + options?: EuiSelectOption[]; isInvalid?: boolean; fullWidth?: boolean; isLoading?: boolean; diff --git a/src/components/form/super_select/index.ts b/src/components/form/super_select/index.ts index c203f20d54d..159340a15e7 100644 --- a/src/components/form/super_select/index.ts +++ b/src/components/form/super_select/index.ts @@ -1,5 +1,4 @@ export { EuiSuperSelect, EuiSuperSelectProps } from './super_select'; - export { EuiSuperSelectControl, EuiSuperSelectControlProps, diff --git a/src/components/form/switch/index.ts b/src/components/form/switch/index.ts index 6c4ce9a8635..596e4cea2a1 100644 --- a/src/components/form/switch/index.ts +++ b/src/components/form/switch/index.ts @@ -1 +1 @@ -export { EuiSwitch, EuiSwitchEvent, EuiSwitchProps } from './switch'; +export { EuiSwitch, EuiSwitchProps, EuiSwitchEvent } from './switch'; diff --git a/src/components/form/validatable_control/index.ts b/src/components/form/validatable_control/index.ts index 3b66a8d893c..9e16b487822 100644 --- a/src/components/form/validatable_control/index.ts +++ b/src/components/form/validatable_control/index.ts @@ -1 +1,4 @@ -export { EuiValidatableControl } from './validatable_control'; +export { + EuiValidatableControl, + EuiValidatableControlProps, +} from './validatable_control'; diff --git a/src/components/index.d.ts b/src/components/index.d.ts index e69343571bb..5f67d7876f8 100644 --- a/src/components/index.d.ts +++ b/src/components/index.d.ts @@ -1,5 +1,4 @@ /// -/// declare module '@elastic/eui' { // @ts-ignore diff --git a/src/components/search_bar/filters/field_value_selection_filter.js b/src/components/search_bar/filters/field_value_selection_filter.js index d11849d6002..fe9f6792cd0 100644 --- a/src/components/search_bar/filters/field_value_selection_filter.js +++ b/src/components/search_bar/filters/field_value_selection_filter.js @@ -5,7 +5,7 @@ import { keyCodes } from '../../../services'; import { EuiPropTypes } from '../../../utils/prop_types'; import { EuiPopover } from '../../popover/popover'; import { EuiPopoverTitle } from '../../popover/popover_title'; -import { EuiFieldSearch } from '../../form/field_search/field_search'; +import { EuiFieldSearch } from '../../form'; import { EuiFilterSelectItem, EuiFilterButton } from '../../filter_group'; import { EuiLoadingChart } from '../../loading/loading_chart'; import { EuiSpacer } from '../../spacer/spacer'; diff --git a/src/components/search_bar/search_box.js b/src/components/search_bar/search_box.js index 5e41ef6d0af..c13dc590fad 100644 --- a/src/components/search_bar/search_box.js +++ b/src/components/search_bar/search_box.js @@ -1,5 +1,5 @@ import React, { Component } from 'react'; -import { EuiFieldSearch } from '../form/field_search/field_search'; +import { EuiFieldSearch } from '../form'; import PropTypes from 'prop-types'; export const SchemaType = PropTypes.shape({ diff --git a/src/components/selectable/selectable_search/selectable_search.tsx b/src/components/selectable/selectable_search/selectable_search.tsx index 3721e1bd570..39559fc7625 100644 --- a/src/components/selectable/selectable_search/selectable_search.tsx +++ b/src/components/selectable/selectable_search/selectable_search.tsx @@ -1,7 +1,7 @@ import React, { Component, InputHTMLAttributes } from 'react'; import classNames from 'classnames'; import { CommonProps } from '../../common'; -import { EuiFieldSearch, EuiFieldSearchProps } from '../../form/field_search'; +import { EuiFieldSearch, EuiFieldSearchProps } from '../../form'; import { getMatchingOptions } from '../matching_options'; import { EuiSelectableOption } from '../selectable_option'; diff --git a/src/components/suggest/suggest_input.tsx b/src/components/suggest/suggest_input.tsx index 2cb5d2fd2a0..7bf5e007523 100644 --- a/src/components/suggest/suggest_input.tsx +++ b/src/components/suggest/suggest_input.tsx @@ -3,7 +3,7 @@ import React, { useState, FunctionComponent } from 'react'; import { CommonProps } from '../common'; import classNames from 'classnames'; // @ts-ignore -import { EuiFieldText } from '../form/field_text'; +import { EuiFieldText } from '../form'; import { EuiToolTip } from '../tool_tip'; import { EuiIcon } from '../icon'; import { EuiInputPopover } from '../popover';