add new lint rules to ease migration

packages/core/src/accessibility/focusStyleManager.ts

@@ -4,10 +4,9 @@
  * Licensed under the terms of the LICENSE file distributed with this project.
  */
 
+import { FOCUS_DISABLED } from "../common/classes";
 import { InteractionModeEngine } from "../common/interactionMode";
 
-export const FOCUS_DISABLED_CLASS = "pt-focus-disabled";
-
 const fakeFocusEngine = {
     isActive: () => true,
     start: () => true,
@@ -16,7 +15,7 @@ const fakeFocusEngine = {
 
 const focusEngine =
     typeof document !== "undefined"
-        ? new InteractionModeEngine(document.documentElement, FOCUS_DISABLED_CLASS)
+        ? new InteractionModeEngine(document.documentElement, FOCUS_DISABLED)
         : fakeFocusEngine;
 
 export const FocusStyleManager = {

packages/core/src/common/classes.ts

@@ -8,6 +8,8 @@ import { Elevation } from "../components/card/card";
 import { Alignment } from "./alignment";
 import { Intent } from "./intent";
 
+// tslint:disable:blueprint-classes-constants
+
 // modifiers
 export const ACTIVE = "pt-active";
 export const ALIGN_LEFT = "pt-align-left";
@@ -47,6 +49,8 @@ export const RUNNING_TEXT = "pt-running-text";
 export const RUNNING_TEXT_SMALL = "pt-running-text-small";
 export const MONOSPACE_TEXT = "pt-monospace-text";
 
+export const FOCUS_DISABLED = "pt-focus-disabled";
+
 // lists
 export const LIST = "pt-list";
 export const LIST_UNSTYLED = "pt-list-unstyled";
@@ -272,3 +276,5 @@ export function intentClass(intent = Intent.NONE) {
     }
     return `pt-intent-${intent.toLowerCase()}`;
 }
+
+// tslint:enable:blueprint-classes-constants

packages/core/src/components/overlay/overlay.tsx

@@ -135,7 +135,7 @@ export class Overlay extends React.PureComponent<IOverlayProps, IOverlayState> {
         isOpen: false,
         lazy: true,
         transitionDuration: 300,
-        transitionName: "pt-overlay",
+        transitionName: Classes.OVERLAY,
         usePortal: true,
     };
 

packages/core/src/components/spinner/svgSpinner.tsx

@@ -12,6 +12,8 @@ import { Spinner } from "./spinner";
 
 export class SVGSpinner extends Spinner {
     protected renderContainer(classes: string, content: JSX.Element) {
+        // TODO: planning to remove this nested `g` element in 3.0
+        // tslint:disable:blueprint-classes-constants
         return (
             <g className={classNames(Classes.SVG_SPINNER, classes)}>
                 <g className="pt-svg-spinner-transform-group">{content}</g>

packages/core/src/components/toast/toaster.tsx

@@ -166,7 +166,7 @@ export class Toaster extends AbstractPureComponent<IToasterProps, IToasterState>
                 isOpen={this.state.toasts.length > 0 || this.props.children != null}
                 onClose={this.handleClose}
                 transitionDuration={350}
-                transitionName="pt-toast"
+                transitionName={Classes.TOAST}
                 usePortal={this.props.usePortal}
             >
                 {this.state.toasts.map(this.renderToast, this)}

packages/core/test/dialog/dialogTests.tsx

@@ -31,7 +31,7 @@ describe("<Dialog>", () => {
         });
     });
 
-    it("attempts to close when .pt-overlay-backdrop element is moused down", () => {
+    it("attempts to close when overlay backdrop element is moused down", () => {
         const onClose = spy();
         const dialog = mount(
             <Dialog isOpen={true} onClose={onClose} usePortal={false}>
@@ -42,7 +42,7 @@ describe("<Dialog>", () => {
         assert.isTrue(onClose.calledOnce);
     });
 
-    it("attempts to close when .pt-dialog-container element is moused down", () => {
+    it("attempts to close when dialog container element is moused down", () => {
         const onClose = spy();
         const dialog = mount(
             <Dialog isOpen={true} onClose={onClose} usePortal={false}>
@@ -53,7 +53,7 @@ describe("<Dialog>", () => {
         assert.isTrue(onClose.calledOnce);
     });
 
-    it("doesn't close when canOutsideClickClose=false and .pt-overlay-backdrop element is moused down", () => {
+    it("doesn't close when canOutsideClickClose=false and overlay backdrop element is moused down", () => {
         const onClose = spy();
         const dialog = mount(
             <Dialog canOutsideClickClose={false} isOpen={true} onClose={onClose} usePortal={false}>

packages/core/test/popover/popoverTests.tsx

@@ -138,7 +138,7 @@ describe("<Popover>", () => {
         assert.isTrue(wrapper.findClass(Classes.POPOVER_TARGET).hasClass("baz"));
     });
 
-    it("adds .pt-popover-open class to target when the popover is open", () => {
+    it("adds POPOVER_OPEN class to target when the popover is open", () => {
         wrapper = renderPopover();
         assert.isFalse(wrapper.findClass(Classes.POPOVER_TARGET).hasClass(Classes.POPOVER_OPEN));
         wrapper.setState({ isOpen: true });
@@ -210,14 +210,14 @@ describe("<Popover>", () => {
         assert.isTrue(popoverDidOpen.calledOnce);
     });
 
-    it("inherits .pt-dark from trigger ancestor", () => {
+    it("inherits dark theme from trigger ancestor", () => {
         testsContainerElement.classList.add(Classes.DARK);
         const { popover } = renderPopover({ isOpen: true, inheritDarkTheme: true, usePortal: true });
         assert.isTrue(popover.matches(`.${Classes.DARK}`));
         testsContainerElement.classList.remove(Classes.DARK);
     });
 
-    it("inheritDarkTheme=false disables inheriting .pt-dark from trigger ancestor", () => {
+    it("inheritDarkTheme=false disables inheriting dark theme from trigger ancestor", () => {
         testsContainerElement.classList.add(Classes.DARK);
         const { popover } = renderPopover({ inheritDarkTheme: false, isOpen: true, usePortal: true });
         assert.isFalse(popover.matches(`.${Classes.DARK}`));
@@ -461,7 +461,7 @@ describe("<Popover>", () => {
                 assert.isTrue(onInteraction.calledWith(false), "B");
             });
 
-            it("is invoked with `false` when clicking .pt-popover-dismiss", () => {
+            it("is invoked with `false` when clicking POPOVER_DISMISS", () => {
                 renderPopover(
                     { isOpen: true, onInteraction },
                     <button className={Classes.POPOVER_DISMISS}>Dismiss</button>,
@@ -535,7 +535,7 @@ describe("<Popover>", () => {
             wrapper.then(() => wrapper.assertIsOpen(false), done);
         });
 
-        it("clicking .pt-popover-dismiss closes popover when usePortal=true", () => {
+        it("clicking POPOVER_DISMISS closes popover when usePortal=true", () => {
             wrapper = renderPopover(
                 {
                     interactionKind: PopoverInteractionKind.CLICK_TARGET_ONLY,
@@ -550,7 +550,7 @@ describe("<Popover>", () => {
             wrapper.update().assertIsOpen(false);
         });
 
-        it("clicking .pt-popover-dismiss closes popover when usePortal=false", () => {
+        it("clicking POPOVER_DISMISS closes popover when usePortal=false", () => {
             wrapper = renderPopover(
                 {
                     interactionKind: PopoverInteractionKind.CLICK_TARGET_ONLY,

packages/core/test/progress/progressBarTests.tsx

@@ -11,7 +11,7 @@ import * as React from "react";
 import { Classes, ProgressBar } from "../../src/index";
 
 describe("ProgressBar", () => {
-    it("renders a .pt-progress-bar", () => {
+    it("renders a PROGRESS_BAR", () => {
         assert.lengthOf(mount(<ProgressBar />).find("." + Classes.PROGRESS_BAR), 1);
     });
 

packages/core/test/spinner/spinnerTests.tsx

@@ -26,7 +26,10 @@ describe("Spinner", () => {
     it("value sets stroke-dashoffset", () => {
         // dash offset = X * (1 - value)
         const root = mount(<Spinner value={0.35} />);
-        assert.isTrue(root.find(`.${Classes.SPINNER}`).hasClass(Classes.SPINNER_NO_SPIN), "missing class pt-no-spin");
+        assert.isTrue(
+            root.find(`.${Classes.SPINNER}`).hasClass(Classes.SPINNER_NO_SPIN),
+            `missing class ${Classes.SPINNER_NO_SPIN}`,
+        );
         assertStrokePercent(root, 0.35);
     });
 

packages/core/test/tag-input/tagInputTests.tsx

@@ -417,10 +417,10 @@ describe("<TagInput>", () => {
         );
         assert.isTrue(
             wrapper
-                .find(".pt-input-ghost")
+                .find(".pt-input-ghost") // tslint:disable-line:blueprint-classes-constants
                 .first()
                 .prop("disabled"),
-            ".pt-input-ghost should have a 'disabled' attribute",
+            "input should be disabled",
         );
         wrapper.find(Tag).forEach(tag => {
             assert.isFalse(tag.hasClass(Classes.TAG_REMOVABLE), "tag should not have tag-removable applied");

packages/core/test/toast/toasterTests.ts

@@ -26,7 +26,7 @@ describe("Toaster", () => {
         ReactDOM.unmountComponentAtNode(testsContainerElement);
     });
 
-    it("does not attach .pt-toast-container to body on script load", () => {
+    it("does not attach toast container to body on script load", () => {
         assert.lengthOf(document.getElementsByClassName(Classes.TOAST_CONTAINER), 0, "unexpected toast container");
     });
 
@@ -132,7 +132,7 @@ describe("Toaster", () => {
             toaster.show({ message: "focus on me" });
             // small explicit timeout reduces flakiness of these tests
             setTimeout(() => {
-                assert.equal(testsContainerElement.querySelector(".pt-toast"), document.activeElement);
+                assert.equal(testsContainerElement.querySelector(`.${Classes.TOAST}`), document.activeElement);
                 done();
             }, 10);
         });

packages/datetime/src/common/classes.ts

@@ -4,6 +4,8 @@
  * Licensed under the terms of the LICENSE file distributed with this project.
  */
 
+// tslint:disable:blueprint-classes-constants
+
 export const DATEINPUT = "pt-dateinput";
 export const DATEINPUT_POPOVER = "pt-dateinput-popover";
 
@@ -40,3 +42,5 @@ export const TIMEPICKER_MILLISECOND = "pt-timepicker-millisecond";
 export const TIMEPICKER_MINUTE = "pt-timepicker-minute";
 export const TIMEPICKER_SECOND = "pt-timepicker-second";
 export const TIMEPICKER_AMPM_SELECT = "pt-timepicker-ampm-select";
+
+// tslint:enable:blueprint-classes-constants

packages/datetime/test/dateInputTests.tsx

@@ -336,11 +336,11 @@ describe("<DateInput>", () => {
             wrapper.setState({ isOpen: true });
 
             // try typing a new time
-            wrapper.find(".pt-timepicker-millisecond").simulate("change", { target: { value: "1" } });
+            wrapper.find("." + Classes.TIMEPICKER_MILLISECOND).simulate("change", { target: { value: "1" } });
             assert.isTrue(wrapper.find(Popover).prop("isOpen"));
 
             // try keyboard-incrementing to a new time
-            wrapper.find(".pt-timepicker-millisecond").simulate("keydown", { which: Keys.ARROW_UP });
+            wrapper.find("." + Classes.TIMEPICKER_MILLISECOND).simulate("keydown", { which: Keys.ARROW_UP });
             assert.isTrue(wrapper.find(Popover).prop("isOpen"));
         });
 

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

@@ -15,7 +15,7 @@ import { NavIcon } from "./navIcons";
 
 const DARK_THEME = Classes.DARK;
 const LIGHT_THEME = "";
-const THEME_LOCAL_STORAGE_KEY = "pt-blueprint-theme";
+const THEME_LOCAL_STORAGE_KEY = "blueprint-docs-theme";
 
 /** Return the current theme className. */
 export function getTheme(): string {

packages/landing-app/src/index.tsx

@@ -10,6 +10,7 @@ import { initializeSVGs } from "./svgs";
 
 FocusStyleManager.onlyShowFocusOnTabs();
 
+// tslint:disable:blueprint-classes-constants
 initializeLogo(
     document.getElementById("pt-logo") as HTMLCanvasElement,
     document.getElementById("pt-logo-background") as HTMLCanvasElement,

packages/landing-app/src/svgs/index.ts

@@ -24,6 +24,7 @@ const HERO_SVGS: Record<string, string> = {
 
 function injectSVG(elem: HTMLElement, id: string) {
     const wrapper = document.createElement("div");
+    // tslint:disable-next-line:blueprint-classes-constants
     wrapper.classList.add("pt-wireframe", `pt-logo-wireframe-${id}`);
     wrapper.innerHTML = HERO_SVGS[id];
     elem.appendChild(wrapper);

packages/select/src/common/classes.ts

@@ -4,9 +4,13 @@
  * Licensed under the terms of the LICENSE file distributed with this project.
  */
 
+// tslint:disable:blueprint-classes-constants
+
 export const MULTISELECT = "pt-multi-select";
 export const MULTISELECT_POPOVER = `${MULTISELECT}-popover`;
 export const OMNIBAR = "pt-omnibar";
 export const OMNIBAR_OVERLAY = `${OMNIBAR}-overlay`;
 export const SELECT = "pt-select";
 export const SELECT_POPOVER = `${SELECT}-popover`;
+
+// tslint:enable:blueprint-classes-constants

packages/table-dev-app/src/mutableTable.tsx

@@ -601,7 +601,7 @@ export class MutableTable extends React.Component<{}, IMutableTableState> {
         );
 
         return (
-            <div className="sidebar pt-elevation-0">
+            <div className={classNames("sidebar", Classes.ELEVATION_0)}>
                 <h4>Table</h4>
                 <h6>Display</h6>
                 {this.renderSwitch("Inline", "showInline")}

packages/table-dev-app/src/nav.tsx

@@ -33,6 +33,6 @@ export class Nav extends React.PureComponent<INavProps> {
     }
 
     private handleToggleDarkTheme() {
-        document.body.classList.toggle("pt-dark");
+        document.body.classList.toggle(Classes.DARK);
     }
 }

packages/table/src/common/classes.ts

@@ -4,7 +4,10 @@
  * Licensed under the terms of the LICENSE file distributed with this project.
  */
 
+// tslint:disable:blueprint-classes-constants
+
 export const TABLE_BODY = "pt-table-body";
+export const TABLE_BODY_CELLS = "pt-table-body-cells";
 export const TABLE_BODY_SCROLL_CLIENT = "pt-table-body-scroll-client";
 export const TABLE_BODY_VIRTUAL_CLIENT = "pt-table-body-virtual-client";
 export const TABLE_BOTTOM_CONTAINER = "pt-table-bottom-container";
@@ -122,3 +125,5 @@ export function columnCellIndexClass(columnIndex: string | number) {
 export function rowCellIndexClass(rowIndex: string | number) {
     return dimensionIndexClass("pt-table-cell-row-", rowIndex);
 }
+
+// tslint:enable:blueprint-classes-constants

packages/table/src/layers/guides.tsx

@@ -52,7 +52,7 @@ export class GuideLayer extends React.Component<IGuideLayerProps, {}> {
             left: `${offset}px`,
         };
         const className = classNames(Classes.TABLE_OVERLAY, Classes.TABLE_VERTICAL_GUIDE, {
-            "pt-table-vertical-guide-flush-left": offset === 0,
+            [`${Classes.TABLE_VERTICAL_GUIDE}-flush-left`]: offset === 0,
         });
         return <div className={className} key={index} style={style} />;
     };
@@ -62,7 +62,7 @@ export class GuideLayer extends React.Component<IGuideLayerProps, {}> {
             top: `${offset}px`,
         };
         const className = classNames(Classes.TABLE_OVERLAY, Classes.TABLE_HORIZONTAL_GUIDE, {
-            "pt-table-horizontal-guide-flush-top": offset === 0,
+            [`${Classes.TABLE_HORIZONTAL_GUIDE}-flush-top`]: offset === 0,
         });
         return <div className={className} key={index} style={style} />;
     };

packages/table/src/tableBodyCells.tsx

@@ -117,7 +117,7 @@ export class TableBodyCells extends React.Component<ITableBodyCellsProps, {}> {
     public render() {
         const { renderMode } = this.props;
         const cells = renderMode === RenderMode.BATCH ? this.renderBatchedCells() : this.renderAllCells();
-        return <div className="pt-table-body-cells">{cells}</div>;
+        return <div className={Classes.TABLE_BODY_CELLS}>{cells}</div>;
     }
 
     // Render modes

packages/table/test/editableNameTests.tsx

@@ -9,12 +9,13 @@ import { mount } from "enzyme";
 import * as React from "react";
 import * as sinon from "sinon";
 
+import { Classes } from "@blueprintjs/core";
 import { EditableName } from "../src/index";
 
 describe("<EditableName>", () => {
     it("renders", () => {
         const elem = mount(<EditableName name="test-name-5000" />);
-        expect(elem.find(".pt-editable-content").text()).to.equal("test-name-5000");
+        expect(elem.find(`.${Classes.EDITABLE_TEXT_CONTENT}`).text()).to.equal("test-name-5000");
     });
 
     it("edits", () => {
@@ -26,14 +27,16 @@ describe("<EditableName>", () => {
         );
 
         // focus
-        elem.find(".pt-editable-text").simulate("focus");
+        elem.find(`.${Classes.EDITABLE_TEXT}`).simulate("focus");
 
         // edit
-        const input = elem.find(".pt-editable-input").simulate("change", { target: { value: "my-changed-name" } });
+        const input = elem
+            .find(`.${Classes.EDITABLE_TEXT_INPUT}`)
+            .simulate("change", { target: { value: "my-changed-name" } });
         expect(onChange.called).to.be.true;
         expect(onCancel.called).to.be.false;
         expect(onConfirm.called).to.be.false;
-        expect(elem.find(".pt-editable-content").text()).to.equal("my-changed-name");
+        expect(elem.find(`.${Classes.EDITABLE_TEXT_CONTENT}`).text()).to.equal("my-changed-name");
 
         // confirm
         input.simulate("blur");

packages/timezone/src/common/classes.ts

@@ -4,5 +4,6 @@
  * Licensed under the terms of the LICENSE file distributed with this project.
  */
 
+// tslint:disable-next-line:blueprint-classes-constants
 export const TIMEZONE_PICKER = "pt-timezone-picker";
 export const TIMEZONE_PICKER_POPOVER = `${TIMEZONE_PICKER}-popover`;

packages/tslint-config/.npmignore

@@ -1 +1,4 @@
 .npmrc
+scripts/
+src/
+test/

packages/tslint-config/index.js

@@ -13,6 +13,8 @@ module.exports = {
 
     defaultSeverity: "error",
 
+    rulesDirectory: "./rules",
+
     rules: {
         "ban": {
             options: [
@@ -25,6 +27,8 @@ module.exports = {
                 // ["assert", "equal", "use assert.strictEqual instead"]
             ],
         },
+        "blueprint-classes-constants": true,
+        "blueprint-icon-components": false,
         "file-header": {
             options: [
                 "Copyright \\d{4} Palantir Technologies, Inc\\. All rights reserved.",