Add component prop to EuiTextColor.

- Fix bug: `EuiDescribedFormGroup` renders its `description` inside of a `div` instead of a `span`.
elastic · Jul 13, 2018 · d5c003f · d5c003f
1 parent fc54395
commit d5c003f
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 10 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,14 +4,19 @@
 - Make some proprties of `EuiFlyout` optional ([#1003](https://github.com/elastic/eui/pull/1003))
 - Add 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`
 
 **Breaking changes**
 
 - Altered `EuiPage` and sub-component layout ([#998](https://github.com/elastic/eui/pull/998))
   - `EuiPageHeader` must now be contained within `EuiPageBody`
   - `EuiPageSideBar` must now be **outside** of `EuiPageBody`
 
+**Bug fixes**
+
+- `EuiDescribedFormGroup` renders its `description` inside of a `div` instead of a `span`
+
 ## [`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
@@ -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
@@ -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
@@ -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
@@ -18,6 +18,7 @@ export const EuiTextColor = ({
   children,
   color,
   className,
+  component: Component,
   ...rest
 }) => {
   const classes = classNames(
@@ -27,21 +28,23 @@ export const EuiTextColor = ({
   );
 
   return (
-    <span
+    <Component
       className={classes}
       {...rest}
     >
       {children}
-    </span>
+    </Component>
   );
 };
 
 EuiTextColor.propTypes = {
   children: PropTypes.node,
   className: PropTypes.string,
   color: PropTypes.oneOf(COLORS),
+  component: PropTypes.oneOf(['div', 'span']),
 };
 
 EuiTextColor.defaultProps = {
   color: 'default',
+  component: 'span',
 };