Convert EuiFacetButton to TS

src/components/facet/facet_button.js → src/components/facet/facet_button.tsx

@@ -1,18 +1,49 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import React, {
+  FunctionComponent,
+  HTMLAttributes,
+  MouseEventHandler,
+  ReactNode,
+} from 'react';
 import classNames from 'classnames';
 
+import { CommonProps, RefCallback } from '../common';
+
 import { EuiNotificationBadge } from '../badge';
 
 import { EuiLoadingSpinner } from '../loading';
 
-export const EuiFacetButton = ({
+export interface EuiFacetButtonProps {
+  buttonRef?: RefCallback<HTMLButtonElement>;
+  children: ReactNode;
+  /**
+   * Any node, but preferrably a `EuiIcon` or `EuiAvatar`
+   */
+  icon?: ReactNode;
+  isDisabled?: boolean;
+  /**
+   * Adds/swaps for loading spinner & disables
+   */
+  isLoading?: boolean;
+  /**
+   * Changes visual of button to indicate it's currently selected
+   */
+  isSelected?: boolean;
+  onClick?: MouseEventHandler<HTMLButtonElement>;
+  /**
+   * Adds a notification indicator for displaying the quantity provided
+   */
+  quantity?: number;
+}
+
+export const EuiFacetButton: FunctionComponent<
+  CommonProps & HTMLAttributes<HTMLButtonElement> & EuiFacetButtonProps
+> = ({
   children,
   className,
   icon,
-  isDisabled,
-  isLoading,
-  isSelected,
+  isDisabled = false,
+  isLoading = false,
+  isSelected = false,
   quantity,
   buttonRef,
   ...rest
@@ -50,8 +81,8 @@ export const EuiFacetButton = ({
   // Add an icon to the button if one exists.
   let buttonIcon;
 
-  if (icon) {
-    buttonIcon = React.cloneElement(icon, {
+  if (React.isValidElement(icon)) {
+    buttonIcon = React.cloneElement<{ className?: string }>(icon, {
       className: 'euiFacetButton__icon',
     });
   }
@@ -78,37 +109,3 @@ export const EuiFacetButton = ({
     </button>
   );
 };
-
-EuiFacetButton.propTypes = {
-  children: PropTypes.node.isRequired,
-  className: PropTypes.string,
-  isDisabled: PropTypes.bool,
-  onClick: PropTypes.func,
-  buttonRef: PropTypes.func,
-
-  /**
-   * Any node, but preferrably a `EuiIcon` or `EuiAvatar`
-   */
-  icon: PropTypes.node,
-
-  /**
-   * Adds/swaps for loading spinner & disables
-   */
-  isLoading: PropTypes.bool,
-
-  /**
-   * Changes visual of button to indicate it's currently selected
-   */
-  isSelected: PropTypes.bool,
-
-  /**
-   * Adds a notification indicator for displaying the quantity provided
-   */
-  quantity: PropTypes.number,
-};
-
-EuiFacetButton.defaultProps = {
-  isDisabled: false,
-  isLoading: false,
-  isSelected: false,
-};

src/components/facet/index.d.ts

@@ -1,30 +1,18 @@
-import {
-  ButtonHTMLAttributes,
-  HTMLAttributes,
-  ReactNode,
-  MouseEventHandler,
-  FunctionComponent,
-} from 'react';
-import { CommonProps, RefCallback } from '../common';
+import { ButtonHTMLAttributes, HTMLAttributes, FunctionComponent } from 'react';
+import { CommonProps } from '../common';
 /// <reference path="../flex/index.d.ts" />
 
+import { EuiFacetButtonProps as ButtonProps } from './facet_button';
+
 declare module '@elastic/eui' {
   /**
    * Facet button type defs
    *
    * @see './facet_button.js'
    */
 
-  export interface EuiFacetButtonProps {
-    children: ReactNode;
-    icon?: ReactNode;
-    isDisabled?: boolean;
-    onClick?: MouseEventHandler<HTMLButtonElement>;
-    isLoading?: boolean;
-    isSelected?: boolean;
-    quantity: number;
-    buttonRef: RefCallback<HTMLButtonElement>;
-  }
+  export type EuiFacetButtonProps = ButtonProps;
+
   export const EuiFacetButton: FunctionComponent<
     CommonProps & ButtonHTMLAttributes<HTMLButtonElement> & EuiFacetButtonProps
   >;