From 13c662355d7f3c9add4680883f4c2280e3c2608e Mon Sep 17 00:00:00 2001 From: Anish Aggarwal Date: Mon, 9 Mar 2020 14:53:27 +0530 Subject: [PATCH 01/11] added renderForm prop to EuiForm --- CHANGELOG.md | 1 + src-docs/src/views/form_layouts/form_rows.js | 2 +- src/components/form/form.test.tsx | 6 ++++ src/components/form/form.tsx | 29 ++++++++++++++++++-- 4 files changed, 34 insertions(+), 4 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 04ca018c2f7..48e8421041c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,6 @@ ## [`master`](https://github.com/elastic/eui/tree/master) +- Added a renderForm prop to `EuiForm` to render a `
`([#2987](https://github.com/elastic/eui/pull/2987)) - Added `EuiDataGrid`'s default sort order property ([#2987](https://github.com/elastic/eui/pull/2987)) - Fixed `EuiDataGrid`'s pagination visibility when changing rows per page ([#2978](https://github.com/elastic/eui/pull/2978)) - Added `highlightAll` prop to `EuiHighlight` to highlight all matches ([#2957](https://github.com/elastic/eui/pull/2957)) diff --git a/src-docs/src/views/form_layouts/form_rows.js b/src-docs/src/views/form_layouts/form_rows.js index 5cb3a437aae..49823703f0f 100644 --- a/src-docs/src/views/form_layouts/form_rows.js +++ b/src-docs/src/views/form_layouts/form_rows.js @@ -87,7 +87,7 @@ export default class extends Component { render() { return ( - + diff --git a/src/components/form/form.test.tsx b/src/components/form/form.test.tsx index e6e47ccdf1b..9510a1b0ac2 100644 --- a/src/components/form/form.test.tsx +++ b/src/components/form/form.test.tsx @@ -10,4 +10,10 @@ describe('EuiForm', () => { expect(component).toMatchSnapshot(); }); + + test('renders ', () => { + const component = render(); + + expect(component).toMatchSnapshot(); + }); }); diff --git a/src/components/form/form.tsx b/src/components/form/form.tsx index 2dcfa5cdda7..beb90d22318 100644 --- a/src/components/form/form.tsx +++ b/src/components/form/form.tsx @@ -1,12 +1,22 @@ -import React, { FunctionComponent, ReactNode, HTMLAttributes } from 'react'; +import React, { + FunctionComponent, + ReactNode, + HTMLAttributes, + FormEvent, +} from 'react'; import classNames from 'classnames'; import { EuiCallOut } from '../call_out'; import { EuiI18n } from '../i18n'; import { CommonProps } from '../common'; export type EuiFormProps = CommonProps & + HTMLAttributes & HTMLAttributes & { isInvalid?: boolean; + /** + * Renders From element + */ + renderForm?: boolean; error?: ReactNode | ReactNode[]; }; @@ -15,6 +25,8 @@ export const EuiForm: FunctionComponent = ({ className, isInvalid, error, + renderForm = false, + onSubmit, ...rest }) => { const classes = classNames('euiForm', className); @@ -53,10 +65,21 @@ export const EuiForm: FunctionComponent = ({ ); } + const Element = renderForm ? 'form' : 'div'; + const relObj: { + onSubmit?: + | (((event: FormEvent) => void) & + ((event: FormEvent) => void)) + | undefined; + } = {}; + + if (renderForm) { + relObj.onSubmit = onSubmit; + } return ( -
+ {optionalErrorAlert} {children} -
+ ); }; From 2db92ce7078aef2575c3fc5dfce273af93bf57b4 Mon Sep 17 00:00:00 2001 From: Anish Aggarwal Date: Mon, 9 Mar 2020 14:55:45 +0530 Subject: [PATCH 02/11] added teset for renderForm prop --- src/components/form/__snapshots__/form.test.tsx.snap | 8 ++++++++ src/components/form/form.tsx | 1 + 2 files changed, 9 insertions(+) diff --git a/src/components/form/__snapshots__/form.test.tsx.snap b/src/components/form/__snapshots__/form.test.tsx.snap index 0bd32da79a3..f4e3b992c68 100644 --- a/src/components/form/__snapshots__/form.test.tsx.snap +++ b/src/components/form/__snapshots__/form.test.tsx.snap @@ -7,3 +7,11 @@ exports[`EuiForm is rendered 1`] = ` data-test-subj="test subject string" /> `; + +exports[`EuiForm renders 1`] = ` + +`; diff --git a/src/components/form/form.tsx b/src/components/form/form.tsx index beb90d22318..bc2161ebfd3 100644 --- a/src/components/form/form.tsx +++ b/src/components/form/form.tsx @@ -76,6 +76,7 @@ export const EuiForm: FunctionComponent = ({ if (renderForm) { relObj.onSubmit = onSubmit; } + return ( {optionalErrorAlert} From d52cfa34268e29fc30a27c6a452c726e448510f5 Mon Sep 17 00:00:00 2001 From: Anish Aggarwal <43617894+anishagg17@users.noreply.github.com> Date: Mon, 9 Mar 2020 14:57:59 +0530 Subject: [PATCH 03/11] Update CHANGELOG.md --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 48e8421041c..0e3961a5dde 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,6 @@ ## [`master`](https://github.com/elastic/eui/tree/master) -- Added a renderForm prop to `EuiForm` to render a ``([#2987](https://github.com/elastic/eui/pull/2987)) +- Added a renderForm prop to `EuiForm` to render a ``([#3010](https://github.com/elastic/eui/pull/3010)) - Added `EuiDataGrid`'s default sort order property ([#2987](https://github.com/elastic/eui/pull/2987)) - Fixed `EuiDataGrid`'s pagination visibility when changing rows per page ([#2978](https://github.com/elastic/eui/pull/2978)) - Added `highlightAll` prop to `EuiHighlight` to highlight all matches ([#2957](https://github.com/elastic/eui/pull/2957)) From e15dd65137c59d43c3d849e05459f6066681a333 Mon Sep 17 00:00:00 2001 From: Anish Aggarwal Date: Tue, 10 Mar 2020 01:44:52 +0530 Subject: [PATCH 04/11] changed prop --- src/components/form/form.test.tsx | 2 +- src/components/form/form.tsx | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/form/form.test.tsx b/src/components/form/form.test.tsx index 9510a1b0ac2..bef824399e5 100644 --- a/src/components/form/form.test.tsx +++ b/src/components/form/form.test.tsx @@ -12,7 +12,7 @@ describe('EuiForm', () => { }); test('renders ', () => { - const component = render(); + const component = render(); expect(component).toMatchSnapshot(); }); diff --git a/src/components/form/form.tsx b/src/components/form/form.tsx index bc2161ebfd3..795fcd7ff81 100644 --- a/src/components/form/form.tsx +++ b/src/components/form/form.tsx @@ -16,7 +16,7 @@ export type EuiFormProps = CommonProps & /** * Renders From element */ - renderForm?: boolean; + component?: 'form' | 'div'; error?: ReactNode | ReactNode[]; }; @@ -25,7 +25,7 @@ export const EuiForm: FunctionComponent = ({ className, isInvalid, error, - renderForm = false, + component = 'div', onSubmit, ...rest }) => { @@ -65,7 +65,6 @@ export const EuiForm: FunctionComponent = ({ ); } - const Element = renderForm ? 'form' : 'div'; const relObj: { onSubmit?: | (((event: FormEvent) => void) & @@ -73,9 +72,10 @@ export const EuiForm: FunctionComponent = ({ | undefined; } = {}; - if (renderForm) { + if (component === 'form') { relObj.onSubmit = onSubmit; } + const Element = component; return ( From d16540a4dde5701c8128973dc6643673ae1de622 Mon Sep 17 00:00:00 2001 From: Anish Aggarwal <43617894+anishagg17@users.noreply.github.com> Date: Tue, 10 Mar 2020 01:51:00 +0530 Subject: [PATCH 05/11] Update form_rows.js --- src-docs/src/views/form_layouts/form_rows.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src-docs/src/views/form_layouts/form_rows.js b/src-docs/src/views/form_layouts/form_rows.js index 49823703f0f..c47cf321f6c 100644 --- a/src-docs/src/views/form_layouts/form_rows.js +++ b/src-docs/src/views/form_layouts/form_rows.js @@ -87,7 +87,7 @@ export default class extends Component { render() { return ( - + From 0fd86ac77101633a38c22c5ad1bc606a133b9b56 Mon Sep 17 00:00:00 2001 From: Anish Aggarwal <43617894+anishagg17@users.noreply.github.com> Date: Wed, 11 Mar 2020 03:38:33 +0530 Subject: [PATCH 06/11] Update src/components/form/form.tsx Co-Authored-By: Caroline Horn <549577+cchaos@users.noreply.github.com> --- src/components/form/form.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/form/form.tsx b/src/components/form/form.tsx index 795fcd7ff81..4a2cbce5820 100644 --- a/src/components/form/form.tsx +++ b/src/components/form/form.tsx @@ -14,7 +14,7 @@ export type EuiFormProps = CommonProps & HTMLAttributes & { isInvalid?: boolean; /** - * Renders From element + * Which HTML element to render */ component?: 'form' | 'div'; error?: ReactNode | ReactNode[]; From 8d444fdc4ed8a7d92fff85df5f32ecd2c981b6d3 Mon Sep 17 00:00:00 2001 From: Anish Aggarwal <43617894+anishagg17@users.noreply.github.com> Date: Wed, 11 Mar 2020 03:38:46 +0530 Subject: [PATCH 07/11] Update src/components/form/form.test.tsx Co-Authored-By: Caroline Horn <549577+cchaos@users.noreply.github.com> --- src/components/form/form.test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/form/form.test.tsx b/src/components/form/form.test.tsx index bef824399e5..a2cd56da801 100644 --- a/src/components/form/form.test.tsx +++ b/src/components/form/form.test.tsx @@ -11,7 +11,7 @@ describe('EuiForm', () => { expect(component).toMatchSnapshot(); }); - test('renders ', () => { + test('renders a form element', () => { const component = render(); expect(component).toMatchSnapshot(); From b56eb9f6b66acc9e7f99a2fb9962ff432847d90b Mon Sep 17 00:00:00 2001 From: Anish Aggarwal <43617894+anishagg17@users.noreply.github.com> Date: Wed, 11 Mar 2020 03:38:54 +0530 Subject: [PATCH 08/11] Update CHANGELOG.md Co-Authored-By: Caroline Horn <549577+cchaos@users.noreply.github.com> --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index b2cdb0b25d5..4f43578b9d9 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,6 @@ ## [`master`](https://github.com/elastic/eui/tree/master) -- Added a renderForm prop to `EuiForm` to render a ``([#3010](https://github.com/elastic/eui/pull/3010)) +- Added a `component` prop to `EuiForm` to render a ``([#3010](https://github.com/elastic/eui/pull/3010)) ## [`21.0.0`](https://github.com/elastic/eui/tree/v21.0.0) From a5b2520cabf412b9e5f5f1fa2732a911a98f7e03 Mon Sep 17 00:00:00 2001 From: Anish Aggarwal Date: Wed, 11 Mar 2020 04:10:28 +0530 Subject: [PATCH 09/11] used exclusive union --- .../form_layouts/form_layouts_example.js | 4 ++- src/components/form/form.tsx | 28 +++++-------------- 2 files changed, 10 insertions(+), 22 deletions(-) diff --git a/src-docs/src/views/form_layouts/form_layouts_example.js b/src-docs/src/views/form_layouts/form_layouts_example.js index 5dce9eb01ca..77fa810ce83 100644 --- a/src-docs/src/views/form_layouts/form_layouts_example.js +++ b/src-docs/src/views/form_layouts/form_layouts_example.js @@ -55,7 +55,9 @@ export const FormLayoutsExample = { Use the EuiFormRow component to easily associate form components with labels, help text, and error text. Use the{' '} EuiForm component to group{' '} - EuiFormRows. + EuiFormRows. By default EuiForm will render as a + simple div unless you pass{' '} + component="form".

), props: { diff --git a/src/components/form/form.tsx b/src/components/form/form.tsx index 4a2cbce5820..f7f5000b6a6 100644 --- a/src/components/form/form.tsx +++ b/src/components/form/form.tsx @@ -1,17 +1,14 @@ -import React, { - FunctionComponent, - ReactNode, - HTMLAttributes, - FormEvent, -} from 'react'; +import React, { FunctionComponent, ReactNode, HTMLAttributes } from 'react'; import classNames from 'classnames'; import { EuiCallOut } from '../call_out'; import { EuiI18n } from '../i18n'; -import { CommonProps } from '../common'; +import { CommonProps, ExclusiveUnion } from '../common'; export type EuiFormProps = CommonProps & - HTMLAttributes & - HTMLAttributes & { + ExclusiveUnion< + HTMLAttributes, + HTMLAttributes + > & { isInvalid?: boolean; /** * Which HTML element to render @@ -26,7 +23,6 @@ export const EuiForm: FunctionComponent = ({ isInvalid, error, component = 'div', - onSubmit, ...rest }) => { const classes = classNames('euiForm', className); @@ -65,20 +61,10 @@ export const EuiForm: FunctionComponent = ({ ); } - const relObj: { - onSubmit?: - | (((event: FormEvent) => void) & - ((event: FormEvent) => void)) - | undefined; - } = {}; - - if (component === 'form') { - relObj.onSubmit = onSubmit; - } const Element = component; return ( - + {optionalErrorAlert} {children} From d9fa948219732b97e12ef7efa35ed87c78318a36 Mon Sep 17 00:00:00 2001 From: Anish Aggarwal Date: Thu, 12 Mar 2020 10:04:07 +0530 Subject: [PATCH 10/11] fixed errors --- CHANGELOG.md | 1 - .../form/__snapshots__/form.test.tsx.snap | 2 +- src/components/form/form.tsx | 13 +++++++++---- 3 files changed, 10 insertions(+), 6 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 001bf6ac861..27ed058ab33 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,7 +3,6 @@ - Exported `dateFormatAliases` as a part of the public API ([#3043](https://github.com/elastic/eui/pull/3043)) - Exported `EuiTextProps` type definition ([#3039](https://github.com/elastic/eui/pull/3039)) - Added a `component` prop to `EuiForm` to render a ``([#3010](https://github.com/elastic/eui/pull/3010)) -- Added `prepend` and `append` ability to `EuiComboBox` single selection only ([#3003](https://github.com/elastic/eui/pull/3003)) - Removed `role` attribute from `EuiImage`([#3036](https://github.com/elastic/eui/pull/3036)) - Added `prepend` and `append` ability to `EuiComboBox` single selection only ([#3003](https://github.com/elastic/eui/pull/3003)) - Added `onColumnResize` prop to `EuiDataGrid` of type `EuiDataGridOnColumnResizeHandler` that gets called when column changes it's size ([#2963](https://github.com/elastic/eui/pull/2963)) diff --git a/src/components/form/__snapshots__/form.test.tsx.snap b/src/components/form/__snapshots__/form.test.tsx.snap index f4e3b992c68..cf47bd6563a 100644 --- a/src/components/form/__snapshots__/form.test.tsx.snap +++ b/src/components/form/__snapshots__/form.test.tsx.snap @@ -8,7 +8,7 @@ exports[`EuiForm is rendered 1`] = ` /> `; -exports[`EuiForm renders 1`] = ` +exports[`EuiForm renders a form element 1`] = ` , - HTMLAttributes + { component: 'form' } & FormHTMLAttributes, + { component?: 'div' } & HTMLAttributes > & { isInvalid?: boolean; /** @@ -64,7 +69,7 @@ export const EuiForm: FunctionComponent = ({ const Element = component; return ( - + }> {optionalErrorAlert} {children} From 0b5f72a30661ae3541572bd8d1109ca0785cdef1 Mon Sep 17 00:00:00 2001 From: Anish Aggarwal <43617894+anishagg17@users.noreply.github.com> Date: Thu, 12 Mar 2020 21:28:28 +0530 Subject: [PATCH 11/11] Update src/components/form/form.tsx Co-Authored-By: Caroline Horn <549577+cchaos@users.noreply.github.com> --- src/components/form/form.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/form/form.tsx b/src/components/form/form.tsx index a215c3133d6..5b1e598d243 100644 --- a/src/components/form/form.tsx +++ b/src/components/form/form.tsx @@ -16,7 +16,7 @@ export type EuiFormProps = CommonProps & > & { isInvalid?: boolean; /** - * Which HTML element to render + * Which HTML element to render `div` or `form` */ component?: 'form' | 'div'; error?: ReactNode | ReactNode[];