From ffb51cb6f1048b540c616f6c98a592c9b0e7207f Mon Sep 17 00:00:00 2001 From: Scott Gould Date: Thu, 9 Jul 2020 12:45:53 +1200 Subject: [PATCH 1/5] Allow prop-setting on the FlexItems within DescribedFormGroup --- .../described_form_group.test.tsx.snap | 110 ++++++++++++++++++ .../described_form_group.test.tsx | 16 +++ .../described_form_group.tsx | 17 ++- 3 files changed, 141 insertions(+), 2 deletions(-) diff --git a/src/components/form/described_form_group/__snapshots__/described_form_group.test.tsx.snap b/src/components/form/described_form_group/__snapshots__/described_form_group.test.tsx.snap index 77f97ad1b28..f35120b9ad5 100644 --- a/src/components/form/described_form_group/__snapshots__/described_form_group.test.tsx.snap +++ b/src/components/form/described_form_group/__snapshots__/described_form_group.test.tsx.snap @@ -369,6 +369,116 @@ exports[`EuiDescribedFormGroup props gutterSize is rendered 1`] = ` `; +exports[`EuiDescribedFormGroup props props for the FlexItem containers are passed down 1`] = ` + + Title + + } +> +
+ +
+ +
+ +

+ Title +

+ + +
+ +
+ Test description +
+ +
+ +
+ + +
+ +
+
+ +
+
+ +
+ +
+ +
+ +`; + exports[`EuiDescribedFormGroup props titleSize is rendered 1`] = ` { expect(component).toMatchSnapshot(); }); + + test('props for the FlexItem containers are passed down', () => { + const component = mount( + + + + + + ); + + expect(component).toMatchSnapshot(); + }); }); }); diff --git a/src/components/form/described_form_group/described_form_group.tsx b/src/components/form/described_form_group/described_form_group.tsx index c040979a4d7..40fd27493b3 100644 --- a/src/components/form/described_form_group/described_form_group.tsx +++ b/src/components/form/described_form_group/described_form_group.tsx @@ -26,6 +26,7 @@ import { CommonProps, keysOf } from '../../common'; import { EuiTitle, EuiTitleSize, EuiTitleProps } from '../../title'; import { EuiText } from '../../text'; import { EuiFlexGroup, EuiFlexItem, EuiFlexGroupGutterSize } from '../../flex'; +import { EuiFlexItemProps } from '../../flex/flex_item'; const paddingSizeToClassNameMap = { xxxs: 'euiDescribedFormGroup__fieldPadding--xxxsmall', @@ -60,6 +61,14 @@ export type EuiDescribedFormGroupProps = CommonProps & * Added as a child of `EuiText` */ description?: ReactNode; + /** + * For customizing the description container + */ + descriptionFlexItemProps?: Partial; + /** + * For customizing the field container + */ + fieldFlexItemProps?: Partial; }; export const EuiDescribedFormGroup: React.FunctionComponent< @@ -72,6 +81,8 @@ export const EuiDescribedFormGroup: React.FunctionComponent< titleSize = 'xs', title, description, + descriptionFlexItemProps, + fieldFlexItemProps, ...rest }) => { const classes = classNames( @@ -103,7 +114,7 @@ export const EuiDescribedFormGroup: React.FunctionComponent< return (
- + {title} @@ -111,7 +122,9 @@ export const EuiDescribedFormGroup: React.FunctionComponent< {renderedDescription} - {children} + + {children} +
); From ce725096c94b56a55a1064a609480f18ae564d24 Mon Sep 17 00:00:00 2001 From: Scott Gould Date: Thu, 9 Jul 2020 12:51:11 +1200 Subject: [PATCH 2/5] Add changelog entry --- CHANGELOG.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index d94b270350e..6b553e47748 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,6 @@ ## [`master`](https://github.com/elastic/eui/tree/master) -No public interface changes since `27.0.0`. +- Added `descriptionFlexItemProps` and `fieldFlexItemProps` props to `EuiDescribedFormGroup` ([#3717](https://github.com/elastic/eui/pull/3717)) ## [`27.0.0`](https://github.com/elastic/eui/tree/v27.0.0) - Added `paddingSize` prop to `EuiCard` ([#3638](https://github.com/elastic/eui/pull/3638)) @@ -23,7 +23,7 @@ No public interface changes since `27.0.0`. - Added `listId` to `EuiSelectableSearch` - `options` passed into `EuiSelectable` cannot have an `id` - Requires an `onChange` to be passed into `EuiSelectableSearch` - + ## [`26.3.1`](https://github.com/elastic/eui/tree/v26.3.1) **Note: this release is a backport containing changes originally made in `27.0.0`** From 71f25335ac563e9bfd3cf65656d35abc14bcc6d5 Mon Sep 17 00:00:00 2001 From: Scott Gould Date: Tue, 14 Jul 2020 10:24:28 +1200 Subject: [PATCH 3/5] Honor classes on fieldFlexItem --- .../described_form_group/described_form_group.tsx | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/components/form/described_form_group/described_form_group.tsx b/src/components/form/described_form_group/described_form_group.tsx index 40fd27493b3..6d597d7881b 100644 --- a/src/components/form/described_form_group/described_form_group.tsx +++ b/src/components/form/described_form_group/described_form_group.tsx @@ -21,12 +21,11 @@ import React, { ReactNode, HTMLAttributes } from 'react'; import classNames from 'classnames'; -import { CommonProps, keysOf } from '../../common'; +import { CommonProps, keysOf, PropsOf } from '../../common'; import { EuiTitle, EuiTitleSize, EuiTitleProps } from '../../title'; import { EuiText } from '../../text'; import { EuiFlexGroup, EuiFlexItem, EuiFlexGroupGutterSize } from '../../flex'; -import { EuiFlexItemProps } from '../../flex/flex_item'; const paddingSizeToClassNameMap = { xxxs: 'euiDescribedFormGroup__fieldPadding--xxxsmall', @@ -62,13 +61,13 @@ export type EuiDescribedFormGroupProps = CommonProps & */ description?: ReactNode; /** - * For customizing the description container + * For customizing the description container. Extended from `EuiFlexItem` */ - descriptionFlexItemProps?: Partial; + descriptionFlexItemProps?: PropsOf; /** - * For customizing the field container + * For customizing the field container. Extended from `EuiFlexItem` */ - fieldFlexItemProps?: Partial; + fieldFlexItemProps?: PropsOf; }; export const EuiDescribedFormGroup: React.FunctionComponent< @@ -95,7 +94,8 @@ export const EuiDescribedFormGroup: React.FunctionComponent< const fieldClasses = classNames( 'euiDescribedFormGroup__fields', - paddingSizeToClassNameMap[titleSize] + paddingSizeToClassNameMap[titleSize], + fieldFlexItemProps && fieldFlexItemProps.className ); let renderedDescription: ReactNode; From 4625326fe379d442f1e7352f32cf3428d4bb28c4 Mon Sep 17 00:00:00 2001 From: Scott Gould Date: Tue, 14 Jul 2020 11:09:03 +1200 Subject: [PATCH 4/5] Update src/components/form/described_form_group/described_form_group.test.tsx Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com> --- .../form/described_form_group/described_form_group.test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/form/described_form_group/described_form_group.test.tsx b/src/components/form/described_form_group/described_form_group.test.tsx index 6b555c0430d..20ae6208bad 100644 --- a/src/components/form/described_form_group/described_form_group.test.tsx +++ b/src/components/form/described_form_group/described_form_group.test.tsx @@ -121,7 +121,7 @@ describe('EuiDescribedFormGroup', () => { expect(component).toMatchSnapshot(); }); - test('props for the FlexItem containers are passed down', () => { + test('props for the flex item containers are passed down', () => { const component = mount( Date: Tue, 14 Jul 2020 11:38:32 +1200 Subject: [PATCH 5/5] Update snap name --- .../__snapshots__/described_form_group.test.tsx.snap | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/form/described_form_group/__snapshots__/described_form_group.test.tsx.snap b/src/components/form/described_form_group/__snapshots__/described_form_group.test.tsx.snap index f35120b9ad5..af6a84db698 100644 --- a/src/components/form/described_form_group/__snapshots__/described_form_group.test.tsx.snap +++ b/src/components/form/described_form_group/__snapshots__/described_form_group.test.tsx.snap @@ -369,7 +369,7 @@ exports[`EuiDescribedFormGroup props gutterSize is rendered 1`] = ` `; -exports[`EuiDescribedFormGroup props props for the FlexItem containers are passed down 1`] = ` +exports[`EuiDescribedFormGroup props props for the flex item containers are passed down 1`] = `