Allow size to be passed in for EuiIconTip (#987)

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 - Changed `EuiXYChart` components exports to `/experimental` subfolder ([#975](https://github.com/elastic/eui/pull/975))
 - Added beta version of `EuiXYChart` and associated components ([#309](https://github.com/elastic/eui/pull/309))
+- Added `size` prop to `EuiIconTip` ([987](https://github.com/elastic/eui/pull/987))
 
 **Bug fixes**
 

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

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

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

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

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

@@ -50,6 +50,31 @@ exports[`EuiIconTip props color is rendered as the icon color 1`] = `
 </span>
 `;
 
+exports[`EuiIconTip props size is rendered as the icon size 1`] = `
+<span
+  class="euiToolTipAnchor"
+>
+  <svg
+    aria-describedby="id"
+    aria-label="Info"
+    class="euiIcon euiIcon--xLarge"
+    focusable="true"
+    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, color, ...rest }) => (
+export const EuiIconTip = ({ type, 'aria-label': ariaLabel, color, size, ...rest }) => (
   <EuiToolTip {...rest}>
-    <EuiIcon tabIndex="0" type={type} color={color} aria-label={ariaLabel} />
+    <EuiIcon tabIndex="0" type={type} color={color} size={size} aria-label={ariaLabel} />
   </EuiToolTip>
 );
 
@@ -21,6 +21,11 @@ EuiIconTip.propTypes = {
    */
   color: PropTypes.string,
 
+  /**
+   * The icon size.
+   */
+  size: PropTypes.string,
+
   /**
    * Explain what this icon means for screen readers.
    */

src/components/tool_tip/icon_tip.test.js

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