diff --git a/CHANGELOG.md b/CHANGELOG.md index 63a0319afd9..6d1ab884c07 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,7 @@ - Updated `securityAnalyticsApp` app icon ([#3720](https://github.com/elastic/eui/pull/3720)) - Removed `src/test` and `@types/enzyme` references from `eui.d.ts` ([#3715](https://github.com/elastic/eui/pull/3715)) - Added `index.d.ts` file to `lib/test` and `es/test` ([#3715](https://github.com/elastic/eui/pull/3715)) +- 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)) 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..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,6 +369,116 @@ exports[`EuiDescribedFormGroup props gutterSize is rendered 1`] = ` `; +exports[`EuiDescribedFormGroup props props for the flex item containers are passed down 1`] = ` + + Title + + } +> +
+ +
+ +
+ +

+ Title +

+
+ +
+ +
+ Test description +
+
+
+
+
+
+ +
+ +
+
+ +
+
+
+
+
+
+
+
+
+`; + exports[`EuiDescribedFormGroup props titleSize is rendered 1`] = ` { expect(component).toMatchSnapshot(); }); + + test('props for the flex item 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..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,7 +21,7 @@ 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'; @@ -60,6 +60,14 @@ export type EuiDescribedFormGroupProps = CommonProps & * Added as a child of `EuiText` */ description?: ReactNode; + /** + * For customizing the description container. Extended from `EuiFlexItem` + */ + descriptionFlexItemProps?: PropsOf; + /** + * For customizing the field container. Extended from `EuiFlexItem` + */ + fieldFlexItemProps?: PropsOf; }; export const EuiDescribedFormGroup: React.FunctionComponent< @@ -72,6 +80,8 @@ export const EuiDescribedFormGroup: React.FunctionComponent< titleSize = 'xs', title, description, + descriptionFlexItemProps, + fieldFlexItemProps, ...rest }) => { const classes = classNames( @@ -84,7 +94,8 @@ export const EuiDescribedFormGroup: React.FunctionComponent< const fieldClasses = classNames( 'euiDescribedFormGroup__fields', - paddingSizeToClassNameMap[titleSize] + paddingSizeToClassNameMap[titleSize], + fieldFlexItemProps && fieldFlexItemProps.className ); let renderedDescription: ReactNode; @@ -103,7 +114,7 @@ export const EuiDescribedFormGroup: React.FunctionComponent< return (
- + {title} @@ -111,7 +122,9 @@ export const EuiDescribedFormGroup: React.FunctionComponent< {renderedDescription} - {children} + + {children} +
);