Fix incorrect TypeScript type for custom components passed to EuiIcon (…

…#3252)

* Fix incorrect TypeScript type for custom components passed to EuiIcon

* TS->proptype generation for ComponentType

* changelog

CHANGELOG.md

@@ -8,6 +8,7 @@
 
 - Fixed the `img` element in `EuiIcon` using custom SVGs to have an `alt` attribute with an empty string, rather than no `alt` attribute at all ([#3245](https://github.com/elastic/eui/pull/3245))
 - Added overflows to EuiDataGrid toolbar dropdowns when there are many columns ([#3238](https://github.com/elastic/eui/pull/3238))
+- Fixed `EuiIcon`'s icon `type` definition to allow custom React components ([#3252](https://github.com/elastic/eui/pull/3252))
 
 ## [`22.3.0`](https://github.com/elastic/eui/tree/v22.3.0)
 

scripts/babel/proptypes-from-ts-props/index.js

@@ -225,6 +225,12 @@ function resolveIdentifierToPropTypes(node, state) {
         types.identifier('node')
       );
 
+    case 'ComponentType':
+      return types.memberExpression(
+        types.identifier('PropTypes'),
+        types.identifier('elementType')
+      );
+
     case 'JSXElementConstructor':
       return types.memberExpression(
         types.identifier('PropTypes'),

scripts/babel/proptypes-from-ts-props/index.test.js

@@ -1001,6 +1001,58 @@ FooComponent.propTypes = {
 
       });
 
+      describe('elementType propType', () => {
+
+        it('understands React.ComponentType', () => {
+          const result = transform(
+            `
+import React from 'react';
+interface IFooProps {foo: React.ComponentType, bar: React.ComponentType<{ prop: any }>}
+const FooComponent: React.SFC<IFooProps> = () => {
+  return (<div>Hello World</div>);
+}`,
+            babelOptions
+          );
+
+          expect(result.code).toBe(`import React from 'react';
+import PropTypes from "prop-types";
+
+const FooComponent = () => {
+  return <div>Hello World</div>;
+};
+
+FooComponent.propTypes = {
+  foo: PropTypes.elementType.isRequired,
+  bar: PropTypes.elementType.isRequired
+};`);
+        });
+
+        it('understands ComponentType', () => {
+          const result = transform(
+            `
+import React from 'react';
+interface IFooProps {foo: ComponentType, bar: ComponentType<{ prop: any }>}
+const FooComponent: React.SFC<IFooProps> = () => {
+  return (<div>Hello World</div>);
+}`,
+            babelOptions
+          );
+
+          expect(result.code).toBe(`import React from 'react';
+import PropTypes from "prop-types";
+
+const FooComponent = () => {
+  return <div>Hello World</div>;
+};
+
+FooComponent.propTypes = {
+  foo: PropTypes.elementType.isRequired,
+  bar: PropTypes.elementType.isRequired
+};`);
+        });
+
+      });
+
     });
 
     describe('intersection types', () => {

src/components/icon/__snapshots__/icon.test.tsx.snap

@@ -9053,3 +9053,15 @@ exports[`EuiIcon props type wrench is rendered 1`] = `
   />
 </svg>
 `;
+
+exports[`EuiIcon renders custom components 1`] = `
+<span
+  aria-hidden="true"
+  aria-label="heart"
+  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  focusable="false"
+  role="img"
+>
+  ❤️
+</span>
+`;

src/components/icon/icon.test.tsx

@@ -93,4 +93,16 @@ describe('EuiIcon', () => {
       );
     });
   });
+
+  it('renders custom components', () => {
+    const CustomIcon = ({ ...props }) => {
+      return (
+        <span role="img" aria-label="heart" {...props}>
+          ❤️
+        </span>
+      );
+    };
+    const component = mount(<EuiIcon type={CustomIcon} />);
+    expect(prettyHtml(component.html())).toMatchSnapshot();
+  });
 });

src/components/icon/icon.tsx

@@ -1,7 +1,7 @@
 import React, {
   PureComponent,
   HTMLAttributes,
-  ReactElement,
+  ComponentType,
   SVGAttributes,
 } from 'react';
 import classNames from 'classnames';
@@ -415,7 +415,7 @@ export const TYPES = keysOf(typeToPathMap);
 
 export type EuiIconType = keyof typeof typeToPathMap;
 
-export type IconType = EuiIconType | string | ReactElement;
+export type IconType = EuiIconType | string | ComponentType;
 
 const colorToClassMap = {
   default: null,
@@ -457,7 +457,7 @@ export type IconSize = keyof typeof sizeToClassNameMap;
 export type EuiIconProps = CommonProps &
   Omit<SVGAttributes<SVGElement>, 'type' | 'color' | 'size'> & {
     /**
-     * `Enum` is any of the named icons listed in the docs, `Element` is any React SVG element, and `string` is usually a URL to an SVG file
+     * `Enum` is any of the named icons listed in the docs, `string` is usually a URL to an SVG file, and `elementType` is any React SVG component
      */
     type: IconType;
     /**
@@ -488,7 +488,7 @@ export type EuiIconProps = CommonProps &
   };
 
 interface State {
-  icon: undefined | ReactElement | string;
+  icon: undefined | ComponentType | string;
   iconTitle: undefined | string;
   isLoading: boolean;
 }
@@ -625,7 +625,7 @@ export class EuiIcon extends PureComponent<EuiIconProps, State> {
       className
     );
 
-    const icon = this.state.icon || empty;
+    const icon = this.state.icon || (empty as ComponentType);
 
     // This is a fix for IE and Edge, which ignores tabindex="-1" on an SVG, but respects
     // focusable="false".