Allow prop-setting on the FlexItems within DescribedFormGroup (#3717)

* Allow prop-setting on the FlexItems within DescribedFormGroup * Add changelog entry * Honor classes on fieldFlexItem * Update src/components/form/described_form_group/described_form_group.test.tsx Co-authored-by: Caroline Horn <[email protected]> * Update snap name Co-authored-by: Caroline Horn <[email protected]>
elastic · Jul 14, 2020 · 9dacc39 · 9dacc39
1 parent 4f2064e
commit 9dacc39
Show file tree

Hide file tree

Showing 4 changed files with 144 additions and 4 deletions.
diff --git 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
@@ -369,6 +369,116 @@ exports[`EuiDescribedFormGroup props gutterSize is rendered 1`] = `
 </EuiDescribedFormGroup>
 `;
 
+exports[`EuiDescribedFormGroup props props for the flex item containers are passed down 1`] = `
+<EuiDescribedFormGroup
+  aria-label="aria-label"
+  className="testClass1 testClass2"
+  data-test-subj="test subject string"
+  description="Test description"
+  descriptionFlexItemProps={
+    Object {
+      "grow": 2,
+    }
+  }
+  fieldFlexItemProps={
+    Object {
+      "component": "section",
+    }
+  }
+  title={
+    <h3>
+      Title
+    </h3>
+  }
+>
+  <div
+    aria-label="aria-label"
+    className="euiDescribedFormGroup testClass1 testClass2"
+    data-test-subj="test subject string"
+    role="group"
+  >
+    <EuiFlexGroup
+      gutterSize="l"
+    >
+      <div
+        className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
+      >
+        <EuiFlexItem
+          grow={2}
+        >
+          <div
+            className="euiFlexItem euiFlexItem--flexGrow2"
+          >
+            <EuiTitle
+              className="euiDescribedFormGroup__title"
+              size="xs"
+            >
+              <h3
+                className="euiTitle euiTitle--xsmall euiDescribedFormGroup__title"
+              >
+                Title
+              </h3>
+            </EuiTitle>
+            <EuiText
+              className="euiDescribedFormGroup__description"
+              color="subdued"
+              size="s"
+            >
+              <div
+                className="euiText euiText--small euiDescribedFormGroup__description"
+              >
+                <EuiTextColor
+                  color="subdued"
+                  component="div"
+                >
+                  <div
+                    className="euiTextColor euiTextColor--subdued"
+                  >
+                    Test description
+                  </div>
+                </EuiTextColor>
+              </div>
+            </EuiText>
+          </div>
+        </EuiFlexItem>
+        <EuiFlexItem
+          className="euiDescribedFormGroup__fields euiDescribedFormGroup__fieldPadding--xsmall"
+          component="section"
+        >
+          <section
+            className="euiFlexItem euiDescribedFormGroup__fields euiDescribedFormGroup__fieldPadding--xsmall"
+          >
+            <EuiFormRow
+              describedByIds={Array []}
+              display="row"
+              fullWidth={false}
+              hasChildLabel={true}
+              hasEmptyLabelSpace={false}
+              labelType="label"
+            >
+              <div
+                className="euiFormRow"
+                id="generated-id-row"
+              >
+                <div
+                  className="euiFormRow__fieldWrapper"
+                >
+                  <input
+                    id="generated-id"
+                    onBlur={[Function]}
+                    onFocus={[Function]}
+                  />
+                </div>
+              </div>
+            </EuiFormRow>
+          </section>
+        </EuiFlexItem>
+      </div>
+    </EuiFlexGroup>
+  </div>
+</EuiDescribedFormGroup>
+`;
+
 exports[`EuiDescribedFormGroup props titleSize is rendered 1`] = `
 <EuiDescribedFormGroup
   aria-label="aria-label"

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
@@ -120,5 +120,21 @@ describe('EuiDescribedFormGroup', () => {
 
       expect(component).toMatchSnapshot();
     });
+
+    test('props for the flex item containers are passed down', () => {
+      const component = mount(
+        <EuiDescribedFormGroup
+          {...requiredProps}
+          {...props}
+          descriptionFlexItemProps={{ grow: 2 }}
+          fieldFlexItemProps={{ component: 'section' }}>
+          <EuiFormRow>
+            <input />
+          </EuiFormRow>
+        </EuiDescribedFormGroup>
+      );
+
+      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
@@ -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<typeof EuiFlexItem>;
+    /**
+     * For customizing the field container. Extended from `EuiFlexItem`
+     */
+    fieldFlexItemProps?: PropsOf<typeof EuiFlexItem>;
   };
 
 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,15 +114,17 @@ export const EuiDescribedFormGroup: React.FunctionComponent<
   return (
     <div role="group" className={classes} {...rest}>
       <EuiFlexGroup gutterSize={gutterSize}>
-        <EuiFlexItem>
+        <EuiFlexItem {...descriptionFlexItemProps}>
           <EuiTitle size={titleSize} className="euiDescribedFormGroup__title">
             {title}
           </EuiTitle>
 
           {renderedDescription}
         </EuiFlexItem>
 
-        <EuiFlexItem className={fieldClasses}>{children}</EuiFlexItem>
+        <EuiFlexItem {...fieldFlexItemProps} className={fieldClasses}>
+          {children}
+        </EuiFlexItem>
       </EuiFlexGroup>
     </div>
   );