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
@@ -61,6 +62,12 @@ export interface IHotkeyProps {
      */
     stopPropagation?: boolean;
 
+    /**
+     * Space-delimited string of class names applied to the
+     * `KeyCombo` contained in the hotkey.
+     */
+    keyComboClassName?: string;
+
     /**
      * `keydown` event handler.
      */
@@ -86,11 +93,13 @@ export class Hotkey extends AbstractPureComponent<IHotkeyProps, {}> {
     }
 
     public render() {
-        const { label, ...spreadableProps } = this.props;
+        const { label, className, keyComboClassName, ...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} />
+                <KeyCombo className={keyComboClassName} {...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

@@ -11,7 +11,9 @@ const Core = require("../dist");
 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,
@@ -29,9 +31,21 @@ const customChildren = {
     Tooltip2: popoverTarget,
 };
 
+const skipList = [
+    "Portal", // doesn't render any DOM inline
+    "Tabs", // deprecated component, logs a warning
+]
+
+const classNameChildList = [
+    "Alert",
+    "Dialog",
+    "MenuItem",
+    "Popover2",
+    "Portal",
+    "Toaster",
+    "Tooltip2"
+]
+
 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, classNameChildList);
 });

packages/select/test/isotest.js

@@ -29,10 +29,24 @@ const customProps = {
     }
 };
 
+const skipList = [
+    "QueryList", // doesn't render any DOM itself
+]
+
+const classNameChildList = [
+    "MultiSelect",
+    "Omnibar",
+    "QueryList",
+    "Select",
+    "Suggest"
+]
+
 describe("Select isomorphic rendering", () => {
     generateIsomorphicTests(
         Select,
         customProps,
-        customChildren
+        customChildren,
+        skipList,
+        classNameChildList
     );
 });

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

@@ -7,23 +7,31 @@ const { generateIsomorphicTests } = require("@blueprintjs/test-commons");
 const React = require("react");
 const Table = require("../dist");
 
-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 classNameChildList = [
+    "CopyCellsMenuItem",
+    "ResizeHandle"
+]
+
+const skipList = [
+    // Pass-through renders
+    "DragSelectable",
+    "Draggable",
+]
+
+
 describe("Table isomorphic rendering", () => {
     generateIsomorphicTests(
         Table,
         customProps,
-        customChildren
+        {},
+        skipList,
+        classNameChildList
     );
 });

packages/test-commons/src/generateIsomorphicTests.ts

@@ -6,6 +6,7 @@
 // TODO: make this an executable script that takes configuration from CLI arguments so we don't need
 // to use the `mocha` CLI and write an isotest.js file in every project
 
+import { assert } from "chai";
 import * as Enzyme from "enzyme";
 import * as Adapter from "enzyme-adapter-react-16";
 import * as React from "react";
@@ -32,12 +33,15 @@ function isReactClass(Component: any): boolean {
  * @param props custom props per component
  * @param children custom children per component
  * @param skipList array of component names to skip
+ * @param classNameChildList array of component names for which className is legitimately passed down to
+ * child element
  */
 export function generateIsomorphicTests(
     Components: { [name: string]: any },
     props: { [name: string]: any },
     children: { [name: string]: React.ReactNode },
     skipList: string[] = [],
+    classNameChildList: string[] = [],
 ) {
     Object.keys(Components)
         .sort()
@@ -54,6 +58,21 @@ export function generateIsomorphicTests(
                         // errors will fail the test and log full stack traces to the console. nifty!
                         Enzyme.render(element);
                     });
+                    it(`<${componentName}> className is applied to outer element`, () => {
+                        const element = React.createElement(
+                            Component,
+                            {
+                                ...props[componentName],
+                                className: "test",
+                            },
+                            children[componentName],
+                        );
+                        if (classNameChildList.includes(componentName)) {
+                            assert.isAtLeast(Enzyme.shallow(element).find(".test").length, 1);
+                        } else {
+                            assert.isTrue(Enzyme.render(element).hasClass("test"));
+                        }
+                    });
                 }
             }
         });

packages/timezone/test/isotest.js

@@ -7,10 +7,18 @@ const { generateIsomorphicTests } = require("@blueprintjs/test-commons");
 const React = require("react");
 const Timezone = require("../dist");
 
+const skipList = []
+
+const classNameChildList = [
+    "TimezonePicker"
+]
+
 describe("Timezone isomorphic rendering", () => {
     generateIsomorphicTests(
         Timezone,
         {},
-        {}
+        {},
+        skipList,
+        classNameChildList
     );
 });