Allow color to be passed in for EuiIconTip (#580)

* Allow color to be passed in for EuiIconTip
* Update changelog

CHANGELOG.md

@@ -1,6 +1,7 @@
 # [`master`](https://github.com/elastic/eui/tree/master)
 
 - Modified `link` and all buttons to support both href and onClick ([554](https://github.com/elastic/eui/pull/554))
+- Added `color` prop to `EuiIconTip` ([580](https://github.com/elastic/eui/pull/580))
 
 # [`0.0.34`](https://github.com/elastic/eui/tree/v0.0.34)
 

src-docs/src/views/tool_tip/icon_tip.js

@@ -32,6 +32,7 @@ export default () => (
     <EuiIconTip
       aria-label="Warning"
       type="alert"
+      color="warning"
       content="I do not think it means what you think it means"
     />
   </Fragment>

src-docs/src/views/tool_tip/tool_tip_example.js

@@ -75,7 +75,8 @@ export const ToolTipExample = {
         </p>
         <p>
           It accepts all the same props as <EuiCode>EuiToolTip</EuiCode>.
-          For convenience, you can also specify an optional icon <EuiCode>type</EuiCode> prop.
+          For convenience, you can also specify optional icon <EuiCode>type</EuiCode> and
+          <EuiCode>color</EuiCode> props.
         </p>
       </Fragment>
     ),

src/components/tool_tip/__snapshots__/icon_tip.test.js.snap

@@ -24,6 +24,30 @@ exports[`EuiIconTip is rendered 1`] = `
 </span>
 `;
 
+exports[`EuiIconTip props color is rendered as the icon color 1`] = `
+<span
+  class="euiToolTipAnchor"
+>
+  <svg
+    aria-describedby="id"
+    aria-label="Info"
+    class="euiIcon euiIcon--medium euiIcon--warning"
+    height="16"
+    tabindex="0"
+    viewBox="0 0 16 16"
+    width="16"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14zm0 1A8 8 0 1 1 8 0a8 8 0 0 1 0 16z"
+    />
+    <path
+      d="M7.086 10.169c.01-.534.077-.955.2-1.264.123-.31.375-.653.755-1.03l.969-.907c.414-.426.621-.883.621-1.372 0-.47-.135-.84-.407-1.106-.27-.267-.665-.4-1.183-.4-.503 0-.908.12-1.214.363-.305.242-.458.567-.458.975H5c.01-.727.295-1.313.855-1.759C6.415 3.223 7.143 3 8.04 3c.932 0 1.658.228 2.178.683.52.455.781 1.079.781 1.872 0 .785-.4 1.558-1.199 2.32l-.806.727c-.36.363-.54.885-.54 1.567H7.086zM7.027 12.3c0-.202.068-.371.204-.508.135-.137.336-.205.603-.205.266 0 .468.068.606.205a.686.686 0 0 1 .207.508.664.664 0 0 1-.207.5c-.138.133-.34.199-.606.199-.267 0-.468-.066-.603-.198a.67.67 0 0 1-.204-.501z"
+    />
+  </svg>
+</span>
+`;
+
 exports[`EuiIconTip props type is rendered as the icon 1`] = `
 <span
   class="euiToolTipAnchor"

src/components/tool_tip/icon_tip.js

@@ -4,9 +4,9 @@ import PropTypes from 'prop-types';
 import { EuiIcon } from '../icon';
 import { EuiToolTip } from './tool_tip';
 
-export const EuiIconTip = ({ type, 'aria-label': ariaLabel, ...rest }) => (
+export const EuiIconTip = ({ type, 'aria-label': ariaLabel, color, ...rest }) => (
   <EuiToolTip {...rest}>
-    <EuiIcon tabIndex="0" type={type} aria-label={ariaLabel} />
+    <EuiIcon tabIndex="0" type={type} color={color} aria-label={ariaLabel} />
   </EuiToolTip>
 );
 
@@ -16,6 +16,11 @@ EuiIconTip.propTypes = {
    */
   type: PropTypes.string,
 
+  /**
+   * The icon color.
+   */
+  color: PropTypes.string,
+
   /**
    * Explain what this icon means for screen readers.
    */

src/components/tool_tip/icon_tip.test.js

@@ -25,5 +25,16 @@ describe('EuiIconTip', () => {
           .toMatchSnapshot();
       });
     });
+
+    describe('color', () => {
+      test('is rendered as the icon color', () => {
+        const component = render(
+          <EuiIconTip color="warning" id="id" content="content" />
+        );
+
+        expect(component)
+          .toMatchSnapshot();
+      });
+    });
   });
 });