className prop consistency

packages/core/src/components/hotkeys/hotkey.tsx

@@ -4,12 +4,13 @@
  * Licensed under the terms of the LICENSE file distributed with this project.
  */
 
+import * as classNames from "classnames";
 import * as React from "react";
 
-import { AbstractPureComponent } from "../../common";
+import { AbstractPureComponent, IProps } from "../../common";
 import { KeyCombo } from "./keyCombo";
 
-export interface IHotkeyProps {
+export interface IHotkeyProps extends IProps {
     /**
      * Whether the hotkey should be triggerable when focused in a text input.
      * @default false
@@ -86,9 +87,11 @@ export class Hotkey extends AbstractPureComponent<IHotkeyProps, {}> {
     }
 
     public render() {
-        const { label, ...spreadableProps } = this.props;
+        const { label, className, ...spreadableProps } = this.props;
+
+        const rootClasses = classNames("pt-hotkey", className);
         return (
-            <div className="pt-hotkey">
+            <div className={rootClasses}>
                 <div className="pt-hotkey-label">{label}</div>
                 <KeyCombo {...spreadableProps} />
             </div>

packages/core/src/components/hotkeys/hotkeys.tsx

@@ -6,6 +6,7 @@
 
 import * as React from "react";
 
+import * as classNames from "classnames";
 import { AbstractPureComponent, IProps } from "../../common";
 import { HOTKEYS_HOTKEY_CHILDREN } from "../../common/errors";
 import { Hotkey, IHotkeyProps } from "./hotkey";
@@ -64,8 +65,8 @@ export class Hotkeys extends AbstractPureComponent<IHotkeysProps, {}> {
             }
             elems.push(<Hotkey key={elems.length} {...hotkey} />);
         }
-
-        return <div className="pt-hotkey-column">{elems}</div>;
+        const rootClasses = classNames("pt-hotkey-column", this.props.className);
+        return <div className={rootClasses}>{elems}</div>;
     }
 
     protected validateProps(props: IHotkeysProps & { children: React.ReactNode }) {

packages/core/src/components/hotkeys/keyCombo.tsx

@@ -4,7 +4,9 @@
  * Licensed under the terms of the LICENSE file distributed with this project.
  */
 
+import * as classNames from "classnames";
 import * as React from "react";
+import { IProps } from "../../common";
 import { normalizeKeyCombo } from "./hotkeyParser";
 
 const KeyIcons: { [key: string]: string } = {
@@ -21,7 +23,7 @@ const KeyIcons: { [key: string]: string } = {
     up: "pt-icon-arrow-up",
 };
 
-export interface IKeyComboProps {
+export interface IKeyComboProps extends IProps {
     allowInInput?: boolean;
     combo: string;
     disabled?: boolean;
@@ -33,6 +35,7 @@ export class KeyCombo extends React.Component<IKeyComboProps, {}> {
     public render() {
         const keys = normalizeKeyCombo(this.props.combo);
         const components = [] as JSX.Element[];
+        const rootClasses = classNames("pt-key-combo", this.props.className);
         for (let i = 0; i < keys.length; i++) {
             let key = keys[i];
             const icon = KeyIcons[key];
@@ -54,6 +57,6 @@ export class KeyCombo extends React.Component<IKeyComboProps, {}> {
                 );
             }
         }
-        return <span className="pt-key-combo">{components}</span>;
+        return <span className={rootClasses}>{components}</span>;
     }
 }

packages/core/test/isotest.js

@@ -3,6 +3,7 @@
  * Licensed under the terms of the LICENSE file distributed with this project.
  */
 
+// @ts-check
 const { generateIsomorphicTests } = require("@blueprintjs/test-commons");
 const React = require("react");
 // TODO: get this to work with require("@std/esm")(module)("../lib/esm")
@@ -11,10 +12,13 @@ const Core = require("../lib/cjs");
 const tooltipContent = { content: React.createElement("h1", {}, "content") };
 const customProps = {
     Hotkey: { combo: "mod+s", global: true, label: "save" },
+    Icon: { iconName: "pt-icon-build" },
     KeyCombo: { combo: "?" },
+    Overlay: { lazy: false, inline: true },
     SVGTooltip: tooltipContent,
     TagInput: { values: ["foo", "bar", "baz"] },
     Tooltip: tooltipContent,
+    Toaster: { inline: true },
 };
 
 const popoverTarget = React.createElement("button");
@@ -25,11 +29,13 @@ const customChildren = {
     SVGTooltip: popoverTarget,
     Tabs: React.createElement(Core.Tab, { key: 1, id: 1, title: "Tab one" }),
     Tooltip: popoverTarget,
+    Toaster: React.createElement(Core.Toast, { message: "Toast" }),
 };
 
+const skipList = [
+    "Portal", // doesn't render any DOM inline
+]
+
 describe("Core isomorphic rendering", () => {
-    generateIsomorphicTests(Core, customProps, customChildren, [
-        "Portal", // doesn't render any DOM inline
-        "Tabs", // deprecated component, logs a warning
-    ]);
+    generateIsomorphicTests(Core, customProps, customChildren, skipList);
 });

packages/icons/test/isotest.js

@@ -3,6 +3,7 @@
  * Licensed under the terms of the LICENSE file distributed with this project.
  */
 
+// @ts-check
 const { generateIsomorphicTests } = require("@blueprintjs/test-commons");
 const React = require("react");
 const Icons = require("../lib/cjs");

packages/select/test/isotest.js

@@ -3,6 +3,7 @@
  * Licensed under the terms of the LICENSE file distributed with this project.
  */
 
+// @ts-check
 const { generateIsomorphicTests } = require("@blueprintjs/test-commons");
 const React = require("react");
 const Select = require("../lib/cjs");
@@ -22,17 +23,17 @@ const customProps = {
         renderer: () => null
     },
     Select: {
-        items: []
+        items: [],
     },
     Suggest: {
-        items: []
+        items: [],
     }
 };
 
+const skipList = [
+    "QueryList", // doesn't render any DOM itself
+]
+
 describe("Select isomorphic rendering", () => {
-    generateIsomorphicTests(
-        Select,
-        customProps,
-        customChildren
-    );
+    generateIsomorphicTests(Select, customProps, customChildren, skipList);
 });

packages/table/src/interactions/resizeHandle.tsx

@@ -67,11 +67,15 @@ export class ResizeHandle extends React.PureComponent<IResizeHandleProps, IResiz
             return undefined;
         }
 
-        const targetClasses = classNames(Classes.TABLE_RESIZE_HANDLE_TARGET, {
-            [Classes.TABLE_DRAGGING]: this.state.isDragging,
-            [Classes.TABLE_RESIZE_HORIZONTAL]: orientation === Orientation.HORIZONTAL,
-            [Classes.TABLE_RESIZE_VERTICAL]: orientation === Orientation.VERTICAL,
-        });
+        const targetClasses = classNames(
+            Classes.TABLE_RESIZE_HANDLE_TARGET,
+            {
+                [Classes.TABLE_DRAGGING]: this.state.isDragging,
+                [Classes.TABLE_RESIZE_HORIZONTAL]: orientation === Orientation.HORIZONTAL,
+                [Classes.TABLE_RESIZE_VERTICAL]: orientation === Orientation.VERTICAL,
+            },
+            this.props.className,
+        );
 
         const handleClasses = classNames(Classes.TABLE_RESIZE_HANDLE, {
             [Classes.TABLE_DRAGGING]: this.state.isDragging,

packages/table/test/isotest.js

@@ -3,27 +3,30 @@
  * Licensed under the terms of the LICENSE file distributed with this project.
  */
 
+// @ts-check
 const { generateIsomorphicTests } = require("@blueprintjs/test-commons");
 const React = require("react");
 const Table = require("../lib/cjs");
 
-const draggableElement = React.createElement("button");
-const customChildren = {
-    DragSelectable: draggableElement,
-    Draggable: draggableElement,
-};
-
 const customProps = {
     ResizeHandle: {
         // needs at least one handler or it returns undefined
         onDoubleClick: () => undefined,
     },
 };
 
+const skipList = [
+    // Pass-through renders
+    "DragSelectable",
+    "Draggable",
+]
+
+
 describe("Table isomorphic rendering", () => {
     generateIsomorphicTests(
         Table,
         customProps,
-        customChildren
+        {},
+        skipList
     );
 });

packages/timezone/test/isotest.js

@@ -3,14 +3,18 @@
  * Licensed under the terms of the LICENSE file distributed with this project.
  */
 
+// @ts-check
 const { generateIsomorphicTests } = require("@blueprintjs/test-commons");
 const React = require("react");
 const Timezone = require("../lib/cjs");
 
+const skipList = []
+
 describe("Timezone isomorphic rendering", () => {
     generateIsomorphicTests(
         Timezone,
         {},
-        {}
+        {},
+        skipList
     );
 });