From 06ce1b801f09a9ce223fe73ed0d7a571679a3817 Mon Sep 17 00:00:00 2001
From: CJ Cenizal <cj@cenizal.com>
Date: Fri, 13 Jul 2018 09:59:20 -0700
Subject: [PATCH] Add `component` prop to `EuiTextColor`. (#1011)

Fixes bug: `EuiDescribedFormGroup` renders its `description` inside of a `div` instead of a `span`.
---
 CHANGELOG.md                                          |  7 ++++++-
 .../src/views/form_layouts/described_form_group.js    |  9 +++++----
 .../__snapshots__/described_form_group.test.js.snap   |  5 +++--
 src/components/text/text.js                           |  2 +-
 src/components/text/text_color.js                     | 11 +++++++++--
 5 files changed, 24 insertions(+), 10 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 2e7c59596c8..0661df06566 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -18,7 +18,8 @@
 - Made some properties of `EuiFlyout` optional ([#1003](https://github.com/elastic/eui/pull/1003))
 - Added typings for `EuiFlyout`, `EuiFlyoutBody`, `EuiFlyoutHeader`, and `EuiFlyoutFooter` ([#1001](https://github.com/elastic/eui/pull/1001))
 - Gave `EuiFlyout` close button a data-test-subj ([#1000](https://github.com/elastic/eui/pull/1000))
-- Updated `react-vis` version to `1.10.2`. ([#999](https://github.com/elastic/eui/pull/999))
+- Updated `react-vis` version to `1.10.2` ([#999](https://github.com/elastic/eui/pull/999))
+- Added `component` prop to `EuiTextColor` ([#1011](https://github.com/elastic/eui/pull/1011))
 
 **Breaking changes**
 
@@ -26,6 +27,10 @@
   - `EuiPageHeader` must now be contained within `EuiPageBody`
   - `EuiPageSideBar` must now be **outside** of `EuiPageBody`
 
+**Bug fixes**
+
+- `EuiDescribedFormGroup` now renders its `description` inside of a `div` instead of a `span` ([#1011](https://github.com/elastic/eui/pull/1011))
+
 ## [`1.2.1`](https://github.com/elastic/eui/tree/v1.2.1)
 
 **Bug fixes**
diff --git a/src-docs/src/views/form_layouts/described_form_group.js b/src-docs/src/views/form_layouts/described_form_group.js
index ba64963886b..8e5c329f3d4 100644
--- a/src-docs/src/views/form_layouts/described_form_group.js
+++ b/src-docs/src/views/form_layouts/described_form_group.js
@@ -1,5 +1,6 @@
 import React, {
   Component,
+  Fragment,
 } from 'react';
 
 import {
@@ -81,11 +82,11 @@ export default class extends Component {
           idAria="single-example-aria"
           title={<h3>Single text field</h3>}
           description={
-            <span>
+            <Fragment>
               When using this with a single form row where this text serves as the help text for the input,
               it is a good idea to pass <EuiCode>idAria=&quot;someID&quot;</EuiCode> to the form group and pass
               <EuiCode>describedByIds=&#123;[someID]&#125;</EuiCode> to its form row.
-            </span>
+            </Fragment>
           }
         >
           <EuiFormRow
@@ -141,11 +142,11 @@ export default class extends Component {
           title={<h2>Full width</h2>}
           titleSize="xxxs"
           description={
-            <span>
+            <Fragment>
               By default, <EuiCode>EuiDescribedFormGroup</EuiCode> will be double the default width of form elements.
               However, you can pass <EuiCode>fullWidth</EuiCode> prop to this, the individual field and row components
               to expand to their container.
-            </span>
+            </Fragment>
           }
           fullWidth
         >
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
index 83602433b4f..de5e412314b 100644
--- 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
@@ -300,12 +300,13 @@ exports[`EuiDescribedFormGroup ties together parts for accessibility 1`] = `
               >
                 <EuiTextColor
                   color="subdued"
+                  component="div"
                 >
-                  <span
+                  <div
                     className="euiTextColor euiTextColor--subdued"
                   >
                     Test description
-                  </span>
+                  </div>
                 </EuiTextColor>
               </div>
             </EuiText>
diff --git a/src/components/text/text.js b/src/components/text/text.js
index 228664c2c8e..aa2e08c24c1 100644
--- a/src/components/text/text.js
+++ b/src/components/text/text.js
@@ -32,7 +32,7 @@ export const EuiText = ({ size, color, grow, textAlign, children, className, ...
   let optionallyAlteredText;
   if (color) {
     optionallyAlteredText = (
-      <EuiTextColor color={color}>
+      <EuiTextColor color={color} component="div">
         {children}
       </EuiTextColor>
     );
diff --git a/src/components/text/text_color.js b/src/components/text/text_color.js
index 1e7a3dc62a9..5eb4e861bcc 100644
--- a/src/components/text/text_color.js
+++ b/src/components/text/text_color.js
@@ -18,6 +18,7 @@ export const EuiTextColor = ({
   children,
   color,
   className,
+  component: Component,
   ...rest
 }) => {
   const classes = classNames(
@@ -27,12 +28,12 @@ export const EuiTextColor = ({
   );
 
   return (
-    <span
+    <Component
       className={classes}
       {...rest}
     >
       {children}
-    </span>
+    </Component>
   );
 };
 
@@ -40,8 +41,14 @@ EuiTextColor.propTypes = {
   children: PropTypes.node,
   className: PropTypes.string,
   color: PropTypes.oneOf(COLORS),
+
+  /**
+   * Determines the root element
+   */
+  component: PropTypes.oneOf(['div', 'span']),
 };
 
 EuiTextColor.defaultProps = {
   color: 'default',
+  component: 'span',
 };