From d6f5b5ee3f58fb45681b9f418b9113f19381ad5f Mon Sep 17 00:00:00 2001 From: Dimitri Mitropoulos Date: Thu, 20 Feb 2020 22:30:18 -0500 Subject: [PATCH 01/13] converts form components to typescript --- src/components/form/field_text/index.ts | 2 +- .../form/{form.test.js => form.test.tsz} | 0 src/components/form/{form.js => form.tsx} | 37 +++++++++++-------- .../form_control_layout_delimited.tsx | 4 +- .../form/form_control_layout/index.ts | 5 ++- .../form/form_error_text/form_error_text.tsx | 13 +++++-- src/components/form/form_error_text/index.ts | 2 +- .../form/form_help_text/form_help_text.tsx | 10 +++-- src/components/form/form_help_text/index.ts | 2 +- src/components/form/form_label/index.ts | 2 +- src/components/form/index.d.ts | 16 -------- src/components/form/index.js | 24 ------------ src/components/form/index.ts | 21 +++++++++++ .../form/validatable_control/index.ts | 5 ++- src/components/index.d.ts | 1 - 15 files changed, 73 insertions(+), 71 deletions(-) rename src/components/form/{form.test.js => form.test.tsz} (100%) rename src/components/form/{form.js => form.tsx} (58%) delete mode 100644 src/components/form/index.d.ts delete mode 100644 src/components/form/index.js create mode 100644 src/components/form/index.ts 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.tsz similarity index 100% rename from src/components/form/form.test.js rename to src/components/form/form.test.tsz diff --git a/src/components/form/form.js b/src/components/form/form.tsx similarity index 58% rename from src/components/form/form.js rename to src/components/form/form.tsx index 4eb406e6f59..40b5332c6fc 100644 --- a/src/components/form/form.js +++ b/src/components/form/form.tsx @@ -1,20 +1,33 @@ -import React from 'react'; -import PropTypes from 'prop-types'; +import React, { FC, FormHTMLAttributes, ReactNode } from 'react'; import classNames from 'classnames'; import { EuiCallOut } from '../call_out'; import { EuiI18n } from '../i18n'; +import { CommonProps } from '../common'; +import makeId from './form_row/make_id'; -export const EuiForm = ({ children, className, isInvalid, error, ...rest }) => { +export type EuiFormProps = CommonProps & + FormHTMLAttributes & { + isInvalid?: boolean; + error?: ReactNode | ReactNode[]; + }; + +export const EuiForm: FC = ({ + 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 => ( -
  • +
  • {error}
    • ))} @@ -29,7 +42,7 @@ export const EuiForm = ({ children, className, isInvalid, error, ...rest }) => { - {addressFormErrors => ( + {(addressFormErrors: string) => ( { } return ( -
    +
    {optionalErrorAlert} {children} -
    + ); }; - -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..869d2309204 100644 --- a/src/components/form/form_control_layout/index.ts +++ b/src/components/form/form_control_layout/index.ts @@ -10,4 +10,7 @@ export { EuiFormControlLayoutCustomIcon, } from './form_control_layout_custom_icon'; -export { EuiFormControlLayoutDelimited } from './form_control_layout_delimited'; +export { + 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..58278838444 100644 --- a/src/components/form/form_error_text/form_error_text.tsx +++ b/src/components/form/form_error_text/form_error_text.tsx @@ -1,11 +1,16 @@ -import React, { FunctionComponent, HTMLAttributes } from 'react'; +import React, { FC, 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: FC = ({ + 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/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/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 From aaa2e0b13da7bb74735fcf12ef31ba6b340346f8 Mon Sep 17 00:00:00 2001 From: Dimitri Mitropoulos Date: Thu, 20 Feb 2020 22:36:20 -0500 Subject: [PATCH 02/13] fixes for Form components being TypeScript now --- src/components/basic_table/basic_table.tsx | 2 +- .../card/checkable_card/checkable_card.tsx | 8 ++++++-- src/components/color_picker/color_picker.tsx | 4 ++-- .../color_stops/color_stop_thumb.tsx | 20 +++++++++---------- .../color_picker/color_stops/color_stops.tsx | 4 +--- src/components/datagrid/column_selector.tsx | 12 +++++------ .../form/__snapshots__/form.test.js.snap | 9 --------- .../filters/field_value_selection_filter.js | 2 +- src/components/search_bar/search_box.js | 2 +- .../selectable_search/selectable_search.tsx | 2 +- src/components/suggest/suggest_input.tsx | 2 +- 11 files changed, 28 insertions(+), 39 deletions(-) delete mode 100644 src/components/form/__snapshots__/form.test.js.snap 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..b415ef96c66 100644 --- a/src/components/color_picker/color_stops/color_stop_thumb.tsx +++ b/src/components/color_picker/color_stops/color_stop_thumb.tsx @@ -20,10 +20,13 @@ 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 { + EuiFieldNumber, + EuiFieldText, + EuiFormRow, + EuiRangeThumb, +} 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'; @@ -310,15 +313,14 @@ export const EuiColorStopThumb: FunctionComponent = ({ = ({     - + @@ -374,7 +373,6 @@ export const EuiColorStopThumb: FunctionComponent = ({ ) => { + onChange={(event: EuiSwitchEvent) => { + 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.js.snap deleted file mode 100644 index 0bd32da79a3..00000000000 --- a/src/components/form/__snapshots__/form.test.js.snap +++ /dev/null @@ -1,9 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`EuiForm is rendered 1`] = ` -
    -`; 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'; From 26cf2483735e141fa06b229241ea190ad5f76ecd Mon Sep 17 00:00:00 2001 From: Dimitri Mitropoulos Date: Fri, 21 Feb 2020 20:39:30 -0500 Subject: [PATCH 03/13] updates CHANGELOG --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 04d9369662d..98dde109bcd 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)) - 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)) - Updated SASS mixin `makeHighContrastColor()` to default `$background: $euiPageBackgroundColor` and `$ratio: 4.5`. Created `makeGraphicContrastColor()` for graphic specific contrast levels of 3.0. ([#2873](https://github.com/elastic/eui/pull/2873)) From 04cac88bb7c82d53209277d10dac55c05195fad3 Mon Sep 17 00:00:00 2001 From: Dimitri Mitropoulos Date: Fri, 21 Feb 2020 20:55:23 -0500 Subject: [PATCH 04/13] removes unnecessary constructor in EuiFormRow --- src/components/form/form_row/form_row.tsx | 23 ++++++++--------------- 1 file changed, 8 insertions(+), 15 deletions(-) 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 { From f35bda6809679938b2f433fee32a8ae261fa96cc Mon Sep 17 00:00:00 2001 From: Dimitri Mitropoulos Date: Mon, 24 Feb 2020 18:47:00 -0500 Subject: [PATCH 05/13] uses array index for element key per review feedback --- src/components/form/form.tsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/components/form/form.tsx b/src/components/form/form.tsx index 40b5332c6fc..b97f8a8445c 100644 --- a/src/components/form/form.tsx +++ b/src/components/form/form.tsx @@ -3,7 +3,6 @@ import classNames from 'classnames'; import { EuiCallOut } from '../call_out'; import { EuiI18n } from '../i18n'; import { CommonProps } from '../common'; -import makeId from './form_row/make_id'; export type EuiFormProps = CommonProps & FormHTMLAttributes & { @@ -26,8 +25,8 @@ export const EuiForm: FC = ({ const errorTexts = Array.isArray(error) ? error : [error]; optionalErrors = (
      - {errorTexts.map(error => ( -
    • + {errorTexts.map((error, index) => ( +
    • {error}
      • ))} From 6a6ba6ca98508e98af82389b05dc1f1dd562d4d8 Mon Sep 17 00:00:00 2001 From: Dimitri Mitropoulos Date: Tue, 25 Feb 2020 19:22:56 -0500 Subject: [PATCH 06/13] prefer FunctionComponent over FC form error text --- src/components/form/form.tsx | 4 ++-- src/components/form/form_error_text/form_error_text.tsx | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/form/form.tsx b/src/components/form/form.tsx index b97f8a8445c..7e22bae8f96 100644 --- a/src/components/form/form.tsx +++ b/src/components/form/form.tsx @@ -1,4 +1,4 @@ -import React, { FC, FormHTMLAttributes, ReactNode } from 'react'; +import React, { FunctionComponent, FormHTMLAttributes, ReactNode } from 'react'; import classNames from 'classnames'; import { EuiCallOut } from '../call_out'; import { EuiI18n } from '../i18n'; @@ -10,7 +10,7 @@ export type EuiFormProps = CommonProps & error?: ReactNode | ReactNode[]; }; -export const EuiForm: FC = ({ +export const EuiForm: FunctionComponent = ({ children, className, isInvalid, 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 58278838444..6e2131d8b5b 100644 --- a/src/components/form/form_error_text/form_error_text.tsx +++ b/src/components/form/form_error_text/form_error_text.tsx @@ -1,4 +1,4 @@ -import React, { FC, HTMLAttributes } from 'react'; +import React, { FunctionComponent, HTMLAttributes } from 'react'; import classNames from 'classnames'; import { CommonProps } from '../../common'; @@ -6,7 +6,7 @@ import { CommonProps } from '../../common'; export type EuiFormErrorTextProps = CommonProps & HTMLAttributes; -export const EuiFormErrorText: FC = ({ +export const EuiFormErrorText: FunctionComponent = ({ children, className, ...rest From 824080f2092e8018fe60585ef15339485ddeefc8 Mon Sep 17 00:00:00 2001 From: Dimitri Mitropoulos Date: Mon, 24 Feb 2020 18:57:51 -0500 Subject: [PATCH 07/13] fixes file extension typo --- src/components/form/__snapshots__/form.test.tsx.snap | 9 +++++++++ src/components/form/{form.test.tsz => form.test.tsx} | 0 2 files changed, 9 insertions(+) create mode 100644 src/components/form/__snapshots__/form.test.tsx.snap rename src/components/form/{form.test.tsz => form.test.tsx} (100%) diff --git a/src/components/form/__snapshots__/form.test.tsx.snap b/src/components/form/__snapshots__/form.test.tsx.snap new file mode 100644 index 00000000000..75d870c88d2 --- /dev/null +++ b/src/components/form/__snapshots__/form.test.tsx.snap @@ -0,0 +1,9 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`EuiForm is rendered 1`] = ` +
      +`; diff --git a/src/components/form/form.test.tsz b/src/components/form/form.test.tsx similarity index 100% rename from src/components/form/form.test.tsz rename to src/components/form/form.test.tsx From f11a8851ae6226b0d65a08c7d327559cc9f058b2 Mon Sep 17 00:00:00 2001 From: Dimitri Mitropoulos Date: Mon, 24 Feb 2020 19:11:20 -0500 Subject: [PATCH 08/13] preference `== null` for EuiFieldNumber.max and .min --- src/components/color_picker/color_stops/color_stop_thumb.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) 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 b415ef96c66..cbb0f074ade 100644 --- a/src/components/color_picker/color_stops/color_stop_thumb.tsx +++ b/src/components/color_picker/color_stops/color_stop_thumb.tsx @@ -319,8 +319,8 @@ export const EuiColorStopThumb: FunctionComponent = ({ inputRef={setNumberInputRef} compressed={true} readOnly={readOnly} - min={isRangeMin || min === undefined ? undefined : localMin} - max={isRangeMax || max === undefined ? undefined : localMax} + min={isRangeMin || min == null ? undefined : localMin} + max={isRangeMax || max == null ? undefined : localMax} value={isStopInvalid(stop) ? '' : stop} isInvalid={stopIsInvalid} onChange={handleStopInputChange} From e251367d131a57fc31b7ad1ea6b8ddd3f902cc29 Mon Sep 17 00:00:00 2001 From: Dimitri Mitropoulos Date: Mon, 24 Feb 2020 19:27:57 -0500 Subject: [PATCH 09/13] reverts EuiForm to use a `div` rather than a `form` --- src/components/form/__snapshots__/form.test.tsx.snap | 2 +- src/components/form/form.tsx | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/form/__snapshots__/form.test.tsx.snap b/src/components/form/__snapshots__/form.test.tsx.snap index 75d870c88d2..0bd32da79a3 100644 --- a/src/components/form/__snapshots__/form.test.tsx.snap +++ b/src/components/form/__snapshots__/form.test.tsx.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`EuiForm is rendered 1`] = ` - & { + HTMLAttributes & { isInvalid?: boolean; error?: ReactNode | ReactNode[]; }; @@ -54,9 +54,9 @@ export const EuiForm: FunctionComponent = ({ } return ( - +
      {optionalErrorAlert} {children} - +
      ); }; From eae3242902a49d22e6159dfc70583a668bea02da Mon Sep 17 00:00:00 2001 From: Dimitri Mitropoulos Date: Tue, 25 Feb 2020 18:46:15 -0500 Subject: [PATCH 10/13] removes unwanted exports per review feedback --- .../color_picker/color_stops/color_stop_thumb.tsx | 8 ++------ .../color_picker/color_stops/color_stops.tsx | 4 +++- src/components/datagrid/column_selector.tsx | 4 ++-- src/components/form/checkbox/index.ts | 9 ++------- src/components/form/form_control_layout/index.ts | 8 -------- src/components/form/radio/index.ts | 8 +------- src/components/form/range/index.ts | 15 --------------- src/components/form/select/index.ts | 2 +- src/components/form/super_select/index.ts | 2 -- src/components/form/switch/index.ts | 2 +- 10 files changed, 12 insertions(+), 50 deletions(-) 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 cbb0f074ade..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,16 +20,12 @@ import { keyCodes } from '../../../services'; import { EuiButtonIcon } from '../../button'; import { EuiColorPicker, EuiColorPickerProps } from '../color_picker'; import { EuiFlexGroup, EuiFlexItem } from '../../flex'; -import { - EuiFieldNumber, - EuiFieldText, - EuiFormRow, - EuiRangeThumb, -} from '../../form'; +import { EuiFieldNumber, EuiFieldText, EuiFormRow } from '../../form'; import { EuiI18n } from '../../i18n'; import { EuiPopover } from '../../popover'; import { EuiScreenReaderOnly } from '../../accessibility'; import { EuiSpacer } from '../../spacer'; +import { EuiRangeThumb } from '../../form/range/range_thumb'; export interface ColorStop { stop: number; diff --git a/src/components/color_picker/color_stops/color_stops.tsx b/src/components/color_picker/color_stops/color_stops.tsx index 3f68773fe53..0c55cbeec50 100644 --- a/src/components/color_picker/color_stops/color_stops.tsx +++ b/src/components/color_picker/color_stops/color_stops.tsx @@ -21,8 +21,10 @@ import { import { EuiColorPickerProps } from '../'; import { EuiI18n } from '../../i18n'; -import { EuiRangeHighlight, EuiRangeTrack, EuiRangeWrapper } from '../../form'; import { EuiScreenReaderOnly } from '../../accessibility'; +import { EuiRangeHighlight } from '../../form/range/range_highlight'; +import { EuiRangeTrack } from '../../form/range/range_track'; +import { EuiRangeWrapper } from '../../form/range/range_wrapper'; export interface EuiColorStopsProps extends CommonProps { addColor?: ColorStop['color']; diff --git a/src/components/datagrid/column_selector.tsx b/src/components/datagrid/column_selector.tsx index 4ad6d2fb8bf..fc776538b1f 100644 --- a/src/components/datagrid/column_selector.tsx +++ b/src/components/datagrid/column_selector.tsx @@ -15,7 +15,7 @@ import { EuiPopover, EuiPopoverFooter, EuiPopoverTitle } from '../popover'; import { EuiI18n } from '../i18n'; import { EuiButtonEmpty } from '../button'; import { EuiFlexGroup, EuiFlexItem } from '../flex'; -import { EuiSwitch, EuiFieldText, EuiSwitchEvent } from '../form'; +import { EuiSwitch, EuiFieldText } from '../form'; import { EuiDragDropContext, EuiDraggable, @@ -147,7 +147,7 @@ export const useColumnSelector = ( checked={visibleColumnIds.has(id)} compressed className="euiSwitch--mini" - onChange={(event: EuiSwitchEvent) => { + onChange={event => { const { target: { checked }, } = event; diff --git a/src/components/form/checkbox/index.ts b/src/components/form/checkbox/index.ts index d4ad37737f0..7be49859685 100644 --- a/src/components/form/checkbox/index.ts +++ b/src/components/form/checkbox/index.ts @@ -1,7 +1,2 @@ -export { EuiCheckbox, EuiCheckboxProps, EuiCheckboxType } from './checkbox'; -export { - EuiCheckboxGroup, - EuiCheckboxGroupProps, - EuiCheckboxGroupOption, - EuiCheckboxGroupIdToSelectedMap, -} from './checkbox_group'; +export { EuiCheckbox, EuiCheckboxProps } from './checkbox'; +export { EuiCheckboxGroup, EuiCheckboxGroupProps } from './checkbox_group'; diff --git a/src/components/form/form_control_layout/index.ts b/src/components/form/form_control_layout/index.ts index 869d2309204..21d33d8f7fb 100644 --- a/src/components/form/form_control_layout/index.ts +++ b/src/components/form/form_control_layout/index.ts @@ -1,15 +1,7 @@ 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, EuiFormControlLayoutDelimitedProps, diff --git a/src/components/form/radio/index.ts b/src/components/form/radio/index.ts index f71f4453a11..15fe348c78f 100644 --- a/src/components/form/radio/index.ts +++ b/src/components/form/radio/index.ts @@ -1,8 +1,2 @@ export { EuiRadio, EuiRadioProps } from './radio'; - -export { - EuiRadioGroup, - EuiRadioGroupProps, - EuiRadioGroupOption, - EuiRadioGroupChangeCallback, -} from './radio_group'; +export { EuiRadioGroup, EuiRadioGroupProps } 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..911289c29b4 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 } from './select'; diff --git a/src/components/form/super_select/index.ts b/src/components/form/super_select/index.ts index c203f20d54d..e36fb46490d 100644 --- a/src/components/form/super_select/index.ts +++ b/src/components/form/super_select/index.ts @@ -1,7 +1,5 @@ export { EuiSuperSelect, EuiSuperSelectProps } from './super_select'; - export { EuiSuperSelectControl, EuiSuperSelectControlProps, - EuiSuperSelectOption, } from './super_select_control'; diff --git a/src/components/form/switch/index.ts b/src/components/form/switch/index.ts index 6c4ce9a8635..7754954a2c6 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 } from './switch'; From 8dc3261a4267a2f2105376cfdf0d22a8cf0971d2 Mon Sep 17 00:00:00 2001 From: Dimitri Mitropoulos Date: Tue, 25 Feb 2020 19:06:04 -0500 Subject: [PATCH 11/13] adds `options` props types to exposed exports --- src/components/form/checkbox/index.ts | 6 +++++- src/components/form/radio/index.ts | 6 +++++- src/components/form/select/index.ts | 2 +- src/components/form/super_select/index.ts | 1 + 4 files changed, 12 insertions(+), 3 deletions(-) diff --git a/src/components/form/checkbox/index.ts b/src/components/form/checkbox/index.ts index 7be49859685..11300c7afe7 100644 --- a/src/components/form/checkbox/index.ts +++ b/src/components/form/checkbox/index.ts @@ -1,2 +1,6 @@ export { EuiCheckbox, EuiCheckboxProps } from './checkbox'; -export { EuiCheckboxGroup, EuiCheckboxGroupProps } from './checkbox_group'; +export { + EuiCheckboxGroup, + EuiCheckboxGroupProps, + EuiCheckboxGroupOption, +} from './checkbox_group'; diff --git a/src/components/form/radio/index.ts b/src/components/form/radio/index.ts index 15fe348c78f..0261be4c04a 100644 --- a/src/components/form/radio/index.ts +++ b/src/components/form/radio/index.ts @@ -1,2 +1,6 @@ export { EuiRadio, EuiRadioProps } from './radio'; -export { EuiRadioGroup, EuiRadioGroupProps } from './radio_group'; +export { + EuiRadioGroup, + EuiRadioGroupProps, + EuiRadioGroupOption, +} from './radio_group'; diff --git a/src/components/form/select/index.ts b/src/components/form/select/index.ts index 911289c29b4..e66523868f6 100644 --- a/src/components/form/select/index.ts +++ b/src/components/form/select/index.ts @@ -1 +1 @@ -export { EuiSelect, EuiSelectProps } from './select'; +export { EuiSelect, EuiSelectProps, EuiSelectOptionProps } from './select'; diff --git a/src/components/form/super_select/index.ts b/src/components/form/super_select/index.ts index e36fb46490d..159340a15e7 100644 --- a/src/components/form/super_select/index.ts +++ b/src/components/form/super_select/index.ts @@ -2,4 +2,5 @@ export { EuiSuperSelect, EuiSuperSelectProps } from './super_select'; export { EuiSuperSelectControl, EuiSuperSelectControlProps, + EuiSuperSelectOption, } from './super_select_control'; From 407f61cb4f37bd527820f70a160117f342a67645 Mon Sep 17 00:00:00 2001 From: Dimitri Mitropoulos Date: Tue, 25 Feb 2020 19:07:50 -0500 Subject: [PATCH 12/13] renames `EuiSelectOptionProps` type to `EuiSelectOption` --- src/components/form/select/index.ts | 2 +- src/components/form/select/select.tsx | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) 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; From ddc709265ea96a3fe5ff5756b1ac16e90045f832 Mon Sep 17 00:00:00 2001 From: Dimitri Mitropoulos Date: Tue, 25 Feb 2020 19:08:49 -0500 Subject: [PATCH 13/13] exports `EuiSwitchEvent` type --- src/components/form/switch/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/form/switch/index.ts b/src/components/form/switch/index.ts index 7754954a2c6..596e4cea2a1 100644 --- a/src/components/form/switch/index.ts +++ b/src/components/form/switch/index.ts @@ -1 +1 @@ -export { EuiSwitch, EuiSwitchProps } from './switch'; +export { EuiSwitch, EuiSwitchProps, EuiSwitchEvent } from './switch';