Make description prop optional for EuiDescribedFormGroup. (#1191)

elastic · Sep 13, 2018 · 0836392 · 0836392
1 parent d8fbca9
commit 0836392
Show file tree

Hide file tree

Showing 5 changed files with 95 additions and 9 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,6 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
-No public interface changes since `4.0.1`.
+- Made `description` prop optional for `EuiDescribedFormGroup` ([#1191](https://github.com/elastic/eui/pull/1191))
 
 ## [`4.0.1`](https://github.com/elastic/eui/tree/v4.0.1)
 

diff --git a/src-docs/src/views/form_layouts/described_form_group.js b/src-docs/src/views/form_layouts/described_form_group.js
@@ -97,6 +97,18 @@ export default class extends Component {
           </EuiFormRow>
         </EuiDescribedFormGroup>
 
+        <EuiDescribedFormGroup
+          idAria="no-description"
+          title={<h3>No description</h3>}
+        >
+          <EuiFormRow
+            label="Text field"
+            describedByIds={['no-description']}
+          >
+            <EuiFieldText name="first" />
+          </EuiFormRow>
+        </EuiDescribedFormGroup>
+
         <EuiDescribedFormGroup
           title={<strong>Multiple fields</strong>}
           titleSize="m"

diff --git a/src/components/form/described_form_group/__snapshots__/described_form_group.test.js.snap b/src/components/form/described_form_group/__snapshots__/described_form_group.test.js.snap
@@ -58,6 +58,54 @@ exports[`EuiDescribedFormGroup is rendered 1`] = `
 </div>
 `;
 
+exports[`EuiDescribedFormGroup props description is not rendered when it's not provided 1`] = `
+<div
+  aria-label="aria-label"
+  aria-labelledby="generated-id-title"
+  className="euiDescribedFormGroup testClass1 testClass2"
+  data-test-subj="test subject string"
+  role="group"
+>
+  <EuiFlexGroup
+    alignItems="stretch"
+    component="div"
+    direction="row"
+    gutterSize="l"
+    justifyContent="flexStart"
+    responsive={true}
+    wrap={false}
+  >
+    <EuiFlexItem
+      component="div"
+      grow={true}
+    >
+      <EuiTitle
+        className="euiDescribedFormGroup__title"
+        id="generated-id-title"
+        size="xs"
+      >
+        <h3>
+          Title
+        </h3>
+      </EuiTitle>
+    </EuiFlexItem>
+    <EuiFlexItem
+      className="euiDescribedFormGroup__fields euiDescribedFormGroup__fieldPadding--xsmall"
+      component="div"
+      grow={true}
+    >
+      <EuiFormRow
+        describedByIds={Array []}
+        fullWidth={false}
+        hasEmptyLabelSpace={false}
+      >
+        <input />
+      </EuiFormRow>
+    </EuiFlexItem>
+  </EuiFlexGroup>
+</div>
+`;
+
 exports[`EuiDescribedFormGroup props fullWidth is rendered 1`] = `
 <div
   aria-describedby="generated-id"

diff --git a/src/components/form/described_form_group/described_form_group.js b/src/components/form/described_form_group/described_form_group.js
@@ -56,12 +56,22 @@ export class EuiDescribedFormGroup extends Component {
 
     const ariaProps = {
       'aria-labelledby': `${ariaId}-title`,
-
-      // if user has defined an aria ID, assume they have passed the ID to
-      // the form row describedByIds and skip describedby here
-      'aria-describedby': userAriaId ? null : ariaId,
     };
 
+    let renderedDescription;
+
+    if (description) {
+      renderedDescription = (
+        <EuiText id={ariaId} size="s" color="subdued" className="euiDescribedFormGroup__description">
+          {description}
+        </EuiText>
+      );
+
+      // If user has defined an aria ID, assume they have passed the ID to
+      // the form row describedByIds and skip describedby here.
+      ariaProps['aria-describedby'] = userAriaId ? null : ariaId;
+    }
+
     return (
       <div
         role="group"
@@ -74,10 +84,10 @@ export class EuiDescribedFormGroup extends Component {
             <EuiTitle id={`${ariaId}-title`} size={titleSize} className="euiDescribedFormGroup__title">
               {title}
             </EuiTitle>
-            <EuiText id={ariaId} size="s" color="subdued" className="euiDescribedFormGroup__description">
-              {description}
-            </EuiText>
+
+            {renderedDescription}
           </EuiFlexItem>
+
           <EuiFlexItem className={fieldClasses}>
             {children}
           </EuiFlexItem>
@@ -100,7 +110,7 @@ EuiDescribedFormGroup.propTypes = {
   fullWidth: PropTypes.bool,
   titleSize: PropTypes.oneOf(TITLE_SIZES),
   title: PropTypes.node.isRequired,
-  description: PropTypes.node.isRequired,
+  description: PropTypes.node,
   idAria: PropTypes.string,
 };
 

diff --git a/src/components/form/described_form_group/described_form_group.test.js b/src/components/form/described_form_group/described_form_group.test.js
@@ -105,5 +105,21 @@ describe('EuiDescribedFormGroup', () => {
       expect(component)
         .toMatchSnapshot();
     });
+
+    test(`description is not rendered when it's not provided`, () => {
+      const component = shallow(
+        <EuiDescribedFormGroup
+          {...requiredProps}
+          title={<h3>Title</h3>}
+        >
+          <EuiFormRow>
+            <input />
+          </EuiFormRow>
+        </EuiDescribedFormGroup>
+      );
+
+      expect(component)
+        .toMatchSnapshot();
+    });
   });
 });