use HTMLAttributes instead of HTMLProps

packages/core/src/components/button/abstractButton.tsx

@@ -56,7 +56,10 @@ export interface IButtonState {
     isActive: boolean;
 }
 
-export abstract class AbstractButton<T> extends React.Component<React.HTMLProps<T> & IButtonProps, IButtonState> {
+export abstract class AbstractButton<H extends React.HTMLAttributes<any>> extends React.PureComponent<
+    IButtonProps & H,
+    IButtonState
+> {
     public state = {
         isActive: false,
     };

packages/core/src/components/button/buttonGroup.tsx

@@ -10,7 +10,7 @@ import { Alignment } from "../../common/alignment";
 import * as Classes from "../../common/classes";
 import { IProps } from "../../common/props";
 
-export interface IButtonGroupProps extends IProps, React.HTMLProps<HTMLDivElement> {
+export interface IButtonGroupProps extends IProps, React.HTMLAttributes<HTMLDivElement> {
     /**
      * Text alignment of button contents.
      * This prop only has an effect if buttons are wider than their default widths.

packages/core/src/components/button/buttons.tsx

@@ -14,7 +14,7 @@ import { AbstractButton, IButtonProps } from "./abstractButton";
 
 export { IButtonProps };
 
-export class Button extends AbstractButton<HTMLButtonElement> {
+export class Button extends AbstractButton<React.ButtonHTMLAttributes<HTMLButtonElement>> {
     public static displayName = "Blueprint2.Button";
 
     public render() {
@@ -26,7 +26,7 @@ export class Button extends AbstractButton<HTMLButtonElement> {
     }
 }
 
-export class AnchorButton extends AbstractButton<HTMLAnchorElement> {
+export class AnchorButton extends AbstractButton<React.AnchorHTMLAttributes<HTMLAnchorElement>> {
     public static displayName = "Blueprint2.AnchorButton";
 
     public render() {

packages/core/src/components/callout/callout.tsx

@@ -12,7 +12,7 @@ import { Icon } from "../../index";
 import { IconName } from "../icon/icon";
 
 /** This component also supports the full range of HTML `<div>` props. */
-export interface ICalloutProps extends IIntentProps, IProps {
+export interface ICalloutProps extends IIntentProps, IProps, React.HTMLAttributes<HTMLDivElement> {
     /**
      * Name of a Blueprint UI icon (or an icon element) to render on the left side.
      *
@@ -30,7 +30,7 @@ export interface ICalloutProps extends IIntentProps, IProps {
     title?: string;
 }
 
-export class Callout extends React.PureComponent<ICalloutProps & React.HTMLAttributes<HTMLDivElement>, {}> {
+export class Callout extends React.PureComponent<ICalloutProps, {}> {
     public render() {
         const { className, children, icon: _nospread, intent, title, ...htmlProps } = this.props;
         const iconName = this.getIconName();

packages/core/src/components/card/card.tsx

@@ -9,7 +9,7 @@ import * as React from "react";
 import * as Classes from "../../common/classes";
 import { IProps } from "../../common/props";
 
-export interface ICardProps extends IProps {
+export interface ICardProps extends IProps, React.HTMLAttributes<HTMLDivElement> {
     /**
      * Controls the intensity of the drop shadow beneath the card: the higher
      * the elevation, the higher the drop shadow. At elevation `0`, no drop
@@ -61,20 +61,13 @@ export class Card extends React.PureComponent<ICardProps, {}> {
     };
 
     public render() {
-        return (
-            <div className={this.getClassName()} onClick={this.props.onClick}>
-                {this.props.children}
-            </div>
-        );
-    }
-
-    private getClassName() {
-        const { elevation, interactive, className } = this.props;
-        return classNames(
+        const { className, elevation, interactive, ...htmlProps } = this.props;
+        const classes = classNames(
             Classes.CARD,
             { [Classes.INTERACTIVE]: interactive },
             ELEVATION_CLASSES[elevation],
             className,
         );
+        return <div className={classes} {...htmlProps} />;
     }
 }

packages/core/src/components/forms/controlGroup.tsx

@@ -9,7 +9,7 @@ import * as React from "react";
 import * as Classes from "../../common/classes";
 import { IProps } from "../../common/props";
 
-export interface IControlGroupProps extends React.AllHTMLAttributes<HTMLDivElement>, IProps {
+export interface IControlGroupProps extends React.HTMLAttributes<HTMLDivElement>, IProps {
     /**
      * Whether the control group should take up the full width of its container.
      */

packages/core/src/components/forms/fileInput.tsx

@@ -10,7 +10,7 @@ import { Utils } from "../../common";
 import * as Classes from "../../common/classes";
 import { IProps } from "../../common/props";
 
-export interface IFileInputProps extends React.AllHTMLAttributes<HTMLLabelElement>, IProps {
+export interface IFileInputProps extends React.LabelHTMLAttributes<HTMLLabelElement>, IProps {
     /**
      * Whether the file input is non-interactive.
      * Setting this to `true` will automatically disable the child input too.
@@ -56,7 +56,7 @@ export interface IFileInputProps extends React.AllHTMLAttributes<HTMLLabelElemen
 
 // TODO: write tests (ignoring for now to get a build passing quickly)
 /* istanbul ignore next */
-export class FileInput extends React.Component<IFileInputProps, {}> {
+export class FileInput extends React.PureComponent<IFileInputProps, {}> {
     public static displayName = "Blueprint2.FileInput";
 
     public static defaultProps: IFileInputProps = {

packages/core/src/components/forms/inputGroup.tsx

@@ -48,7 +48,7 @@ export interface IInputGroupState {
     rightElementWidth?: number;
 }
 
-export class InputGroup extends React.PureComponent<HTMLInputProps & IInputGroupProps, IInputGroupState> {
+export class InputGroup extends React.PureComponent<IInputGroupProps & HTMLInputProps, IInputGroupState> {
     public static displayName = "Blueprint2.InputGroup";
 
     public state: IInputGroupState = {

packages/core/src/components/forms/label.tsx

@@ -9,7 +9,7 @@ import * as React from "react";
 import * as Classes from "../../common/classes";
 import { IProps } from "../../common/props";
 
-export interface ILabelProps extends React.AllHTMLAttributes<HTMLLabelElement>, IProps {
+export interface ILabelProps extends React.LabelHTMLAttributes<HTMLLabelElement>, IProps {
     /**
      * Whether the label is non-interactive.
      * Be sure to explicitly disable any child controls as well.

packages/core/src/components/forms/textArea.tsx

@@ -9,7 +9,7 @@ import * as React from "react";
 import * as Classes from "../../common/classes";
 import { IIntentProps, IProps } from "../../common/props";
 
-export interface ITextAreaProps extends React.AllHTMLAttributes<HTMLTextAreaElement>, IIntentProps, IProps {
+export interface ITextAreaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement>, IIntentProps, IProps {
     /**
      * Whether the text area should take up the full width of its container.
      */

packages/core/src/components/navbar/navbar.tsx

@@ -15,8 +15,7 @@ import { NavbarHeading } from "./navbarHeading";
 export { INavbarDividerProps } from "./navbarDivider";
 
 // allow the empty interface so we can label it clearly in the docs
-// tslint:disable-next-line:no-empty-interface
-export interface INavbarProps extends React.HTMLProps<HTMLDivElement>, IProps {
+export interface INavbarProps extends IProps, React.HTMLAttributes<HTMLDivElement> {
     // Empty
 }
 

packages/core/src/components/navbar/navbarDivider.tsx

@@ -10,8 +10,7 @@ import * as Classes from "../../common/classes";
 import { IProps } from "../../common/props";
 
 // allow the empty interface so we can label it clearly in the docs
-// tslint:disable-next-line:no-empty-interface
-export interface INavbarDividerProps extends React.HTMLProps<HTMLDivElement>, IProps {
+export interface INavbarDividerProps extends IProps, React.HTMLAttributes<HTMLDivElement> {
     // Empty
 }
 

packages/core/src/components/navbar/navbarGroup.tsx

@@ -10,7 +10,7 @@ import { Alignment } from "../../common/alignment";
 import * as Classes from "../../common/classes";
 import { IProps } from "../../common/props";
 
-export interface INavbarGroupProps extends React.HTMLProps<HTMLDivElement>, IProps {
+export interface INavbarGroupProps extends IProps, React.HTMLAttributes<HTMLDivElement> {
     /**
      * The side of the navbar on which the group should appear.
      * The `Alignment` enum provides constants for these values.

packages/core/src/components/navbar/navbarHeading.tsx

@@ -10,14 +10,13 @@ import * as Classes from "../../common/classes";
 import { IProps } from "../../common/props";
 
 // allow the empty interface so we can label it clearly in the docs
-// tslint:disable-next-line:no-empty-interface
-export interface INavbarHeadingProps extends React.HTMLProps<HTMLDivElement>, IProps {
+export interface INavbarHeadingProps extends IProps, React.HTMLAttributes<HTMLDivElement> {
     // Empty
 }
 
 // this component is simple enough that tests would be purely tautological.
 /* istanbul ignore next */
-export class NavbarHeading extends React.PureComponent<React.HTMLProps<HTMLDivElement>, {}> {
+export class NavbarHeading extends React.PureComponent<INavbarHeadingProps, {}> {
     public static displayName = "Blueprint2.NavbarHeading";
 
     public render() {

packages/core/src/components/portal/portal.tsx

@@ -12,7 +12,7 @@ import * as Errors from "../../common/errors";
 import { IProps } from "../../common/props";
 import { safeInvoke } from "../../common/utils";
 
-export interface IPortalProps extends IProps, React.HTMLProps<HTMLDivElement> {
+export interface IPortalProps extends IProps, React.HTMLAttributes<HTMLDivElement> {
     /**
      * Callback invoked when the children of this `Portal` have been added to the DOM.
      */

packages/core/test/card/cardTests.tsx

@@ -37,4 +37,11 @@ describe("<Card>", () => {
         shallow(<Card onClick={onClick} />).simulate("click");
         assert.isTrue(onClick.calledOnce);
     });
+
+    it("supports HTML props", () => {
+        const onChange = sinon.spy();
+        const card = shallow(<Card onChange={onChange} title="foo" tabIndex={4000} />).find("div");
+        assert.strictEqual(card.prop("onChange"), onChange);
+        assert.strictEqual(card.prop("title"), "foo");
+    });
 });

packages/docs-app/src/components/clickToCopy.tsx

@@ -10,7 +10,7 @@ import * as React from "react";
 import { IProps, Keys, removeNonHTMLProps, Utils } from "@blueprintjs/core";
 import { createKeyEventHandler } from "@blueprintjs/docs-theme";
 
-export interface IClickToCopyProps extends IProps, React.HTMLProps<HTMLDivElement> {
+export interface IClickToCopyProps extends IProps, React.HTMLAttributes<HTMLDivElement> {
     /**
      * Additional class names to apply after value has been copied
      * @default "docs-clipboard-copied"