Added iconProps to EuiIconTip (#1420)

elastic · Jan 10, 2019 · c07d560 · c07d560
1 parent b686fc7
commit c07d560
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 5 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -7,11 +7,13 @@
 - Migrate remaining files in `accessiblity/` to TS ([#1408](https://github.com/elastic/eui/pull/1408))
 - Added `titleProps` and `descriptionProps` to `EuiDescriptionList` ([#1419](https://github.com/elastic/eui/pull/1419))
 - Propagate `className` on `EuiCodeBlock` in fullscreen mode ([#1422](https://github.com/elastic/eui/pull/1422))
+- Added `iconProps` prop to `EuiIconTip` ([#1420](https://github.com/elastic/eui/pull/1420))
 
 **Bug fixes**
 
 - Support extended characters (e.g. non-latin, unicode) in `EuiSearchBar` and `EuiQuery` ([#1415](https://github.com/elastic/eui/pull/1415))
 - Fixed line-heights of the differently sized `EuiDescriptionList` alternates ([#1419](https://github.com/elastic/eui/pull/1419))
+- Updated `EuiIconTip` TS definitions to inherit those from `EuiToolTip` as well ([#1420](https://github.com/elastic/eui/pull/1420))
 
 ## [`6.2.0`](https://github.com/elastic/eui/tree/v6.2.0)
 

diff --git a/src-docs/src/views/tool_tip/icon_tip.js b/src-docs/src/views/tool_tip/icon_tip.js
@@ -6,6 +6,8 @@ import {
   EuiFlexItem,
   EuiIconTip,
   EuiSpacer,
+  EuiText,
+  EuiCode,
 } from '../../../../src/components';
 
 export default () => (
@@ -36,5 +38,24 @@ export default () => (
       color="warning"
       content="I do not think it means what you think it means"
     />
+
+    <EuiSpacer />
+
+    <EuiText>
+      <p>
+        Pass a position utility class via <EuiCode>iconProps</EuiCode> to shift for
+        better alignment.
+        <EuiIconTip
+          type="iInCircle"
+          color="subdued"
+          content={
+            <span>This was passed <EuiCode>.eui-alignTop</EuiCode></span>
+          }
+          iconProps={{
+            className: 'eui-alignTop',
+          }}
+        />
+      </p>
+    </EuiText>
   </Fragment>
 );
diff --git a/src/components/common.ts b/src/components/common.ts
@@ -1,3 +1,5 @@
+import { Component, FunctionComponent, SFC } from 'react';
+
 export interface CommonProps {
   className?: string;
   'aria-label'?: string;
@@ -18,6 +20,12 @@ export function keysOf<T, K extends keyof T>(obj: T): K[] {
   return Object.keys(obj) as K[];
 }
 
+export type PropsOf<C> =
+  C extends SFC<infer SFCProps> ? SFCProps :
+  C extends FunctionComponent<infer FunctionalProps> ? FunctionalProps :
+  C extends Component<infer ComponentProps> ? ComponentProps
+  : never;
+
 /*
 TypeScript's discriminated unions are overly permissive: as long as one type of the union is satisfied
 the other types are not validated against. For example:

diff --git a/src/components/tool_tip/icon_tip.js b/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, size, ...rest }) => (
+export const EuiIconTip = ({ type, 'aria-label': ariaLabel, color, size, iconProps, ...rest }) => (
   <EuiToolTip {...rest}>
-    <EuiIcon tabIndex="0" type={type} color={color} size={size} aria-label={ariaLabel} />
+    <EuiIcon tabIndex="0" type={type} color={color} size={size} aria-label={ariaLabel} {...iconProps} />
   </EuiToolTip>
 );
 
@@ -30,6 +30,11 @@ EuiIconTip.propTypes = {
    * Explain what this icon means for screen readers.
    */
   'aria-label': PropTypes.string,
+
+  /**
+   * Pass certain props down to `EuiIcon`
+   */
+  iconProps: PropTypes.object,
 };
 
 EuiIconTip.defaultProps = {

diff --git a/src/components/tool_tip/index.d.ts b/src/components/tool_tip/index.d.ts
@@ -1,4 +1,6 @@
 import { ReactElement, ReactNode, SFC } from 'react';
+import { EuiIcon } from '../icon';
+import { Omit, PropsOf } from '../common';
 
 declare module '@elastic/eui' {
   export type ToolTipPositions =
@@ -14,7 +16,7 @@ declare module '@elastic/eui' {
   export interface EuiToolTipProps {
     children: ReactElement<any>;
     className?: string;
-    content: ReactNode;
+    content?: ReactNode;
     delay?: ToolTipDelay;
     title?: ReactNode;
     id?: string;
@@ -27,7 +29,7 @@ declare module '@elastic/eui' {
     type?: string;
     size?: string;
     'aria-label'?: string;
-    content: ReactNode;
+    iconProps?: PropsOf<typeof EuiIcon>;
   }
-  export const EuiIconTip: SFC<EuiIconTipProps>;
+  export const EuiIconTip: SFC<Omit<EuiToolTipProps, 'children'> & EuiIconTipProps>;
 }