add new lint rules to ease migration

.circleci/config.yml

@@ -51,6 +51,7 @@ jobs:
           keys:
             - v7-dependency-cache-{{ checksum "yarn.lock" }}
             - v7-dependency-cache-
+      - run: yarn compile --scope "@blueprintjs/tslint-config"
       - run: yarn lint
 
   dist:

packages/core/package.json

@@ -25,7 +25,7 @@
     "dist:verify": "assert-package-layout",
     "lint": "npm-run-all -p lint:stylelint lint:tslint",
     "lint:stylelint": "stylelint -s scss \"src/**/*.scss\"",
-    "lint:tslint": "tslint \"{src,test}/**/*.{ts,tsx}\" -c ../tslint-config -t codeFrame",
+    "lint:tslint": "tslint \"{src,test}/**/*.{ts,tsx}\" -t codeFrame",
     "lint-fix": "yarn lint:tslint --fix",
     "test": "npm-run-all -s compile:cjs test:pre -p test:karma test:iso",
     "test:pre": "tsc -p ./test",

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/package.json

@@ -21,7 +21,7 @@
     "dist:verify": "assert-package-layout",
     "lint": "npm-run-all -p lint:stylelint lint:tslint",
     "lint:stylelint": "stylelint -s scss \"src/**/*.scss\"",
-    "lint:tslint": "tslint \"{src,test}/**/*.{ts,tsx}\" -c ../tslint-config -t codeFrame",
+    "lint:tslint": "tslint \"{src,test}/**/*.{ts,tsx}\" -t codeFrame",
     "lint-fix": "yarn lint:tslint --fix",
     "test": "npm-run-all -s compile:cjs test:pre -p test:karma test:iso",
     "test:pre": "tsc -p ./test",

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/package.json

@@ -11,7 +11,7 @@
     "dist": "cross-env NODE_ENV=production yarn bundle",
     "lint": "run-p lint:stylelint lint:tslint",
     "lint:stylelint": "stylelint -s scss \"src/**/*.scss\"",
-    "lint:tslint": "tslint \"{src,test}/**/*.{ts,tsx}\" -c ../tslint-config -t codeFrame",
+    "lint:tslint": "tslint \"{src,test}/**/*.{ts,tsx}\" -t codeFrame",
     "lint-fix": "yarn lint:tslint --fix",
     "test": "exit 0",
     "verify": "run-p dist lint"

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/docs-theme/package.json

@@ -21,7 +21,7 @@
     "dist:verify": "assert-package-layout",
     "lint": "npm-run-all -p lint:stylelint lint:tslint",
     "lint:stylelint": "stylelint -s scss \"src/**/*.scss\"",
-    "lint:tslint": "tslint \"src/**/*.{ts,tsx}\" -c ../tslint-config -t codeFrame",
+    "lint:tslint": "tslint \"src/**/*.{ts,tsx}\" -t codeFrame",
     "lint-fix": "yarn lint:tslint --fix",
     "verify": "npm-run-all compile -p dist lint"
   },

packages/icons/package.json

@@ -23,7 +23,7 @@
     "dist:verify": "assert-package-layout",
     "lint": "npm-run-all -p lint:stylelint lint:tslint",
     "lint:stylelint": "stylelint -s scss \"src/**/*.scss\"",
-    "lint:tslint": "tslint \"{src,test}/**/*.{ts,tsx}\" -e \"src/generated/**/*\" -c ../tslint-config -t codeFrame",
+    "lint:tslint": "tslint \"{src,test}/**/*.{ts,tsx}\" -e \"src/generated/**/*\" -t codeFrame",
     "lint-fix": "yarn lint:tslint --fix",
     "test": "npm-run-all -s compile:pre compile:cjs test:pre -p test:iso",
     "test:pre": "tsc -p ./test",

packages/labs/package.json

@@ -21,7 +21,7 @@
     "dist:verify": "assert-package-layout",
     "lint": "npm-run-all -p lint:stylelint lint:tslint",
     "lint:stylelint": "stylelint -s scss \"src/**/*.scss\"",
-    "lint:tslint": "tslint \"{src,test}/**/*.{ts,tsx}\" -c ../tslint-config -t codeFrame",
+    "lint:tslint": "tslint \"{src,test}/**/*.{ts,tsx}\" -t codeFrame",
     "lint-fix": "yarn lint:tslint --fix",
     "test": "npm-run-all -s test:pre -p test:karma",
     "test:pre": "tsc -p ./test",

packages/landing-app/package.json

@@ -10,7 +10,7 @@
     "dist": "cross-env NODE_ENV=production yarn bundle",
     "lint": "npm-run-all -p lint:stylelint lint:tslint",
     "lint:stylelint": "stylelint -s scss \"src/**/*.scss\"",
-    "lint:tslint": "tslint \"{src,test}/**/*.{ts,tsx}\" -c ../tslint-config -t codeFrame",
+    "lint:tslint": "tslint \"{src,test}/**/*.{ts,tsx}\" -t codeFrame",
     "lint-fix": "yarn lint:tslint --fix",
     "test": "exit 0",
     "verify": "npm-run-all -p dist lint"

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/package.json

@@ -21,7 +21,7 @@
     "dist:verify": "assert-package-layout",
     "lint": "npm-run-all -p lint:stylelint lint:tslint",
     "lint:stylelint": "stylelint -s scss \"src/**/*.scss\"",
-    "lint:tslint": "tslint \"{src,test}/**/*.{ts,tsx}\" -c ../tslint-config -t codeFrame",
+    "lint:tslint": "tslint \"{src,test}/**/*.{ts,tsx}\" -t codeFrame",
     "lint-fix": "yarn lint:tslint --fix",
     "test": "npm-run-all -s compile:cjs test:pre -p test:karma test:iso",
     "test:pre": "tsc -p ./test",

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/package.json

@@ -10,7 +10,7 @@
     "dist": "cross-env NODE_ENV=production yarn bundle",
     "lint": "npm-run-all -p lint:stylelint lint:tslint",
     "lint:stylelint": "stylelint -s scss \"src/**/*.scss\"",
-    "lint:tslint": "tslint \"{src,test}/**/*.{ts,tsx}\" -c ../tslint-config -t codeFrame",
+    "lint:tslint": "tslint \"{src,test}/**/*.{ts,tsx}\" -t codeFrame",
     "lint-fix": "yarn lint:tslint --fix",
     "test": "exit 0",
     "verify": "npm-run-all -p dist lint"

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/package.json

@@ -21,7 +21,7 @@
     "dist:verify": "assert-package-layout",
     "lint": "npm-run-all -p lint:stylelint lint:tslint",
     "lint:stylelint": "stylelint -s scss \"src/**/*.scss\"",
-    "lint:tslint": "tslint \"{src,test}/**/*.{ts,tsx}\" -c ../tslint-config -t codeFrame",
+    "lint:tslint": "tslint \"{src,test}/**/*.{ts,tsx}\" -t codeFrame",
     "lint-fix": "yarn lint:tslint --fix",
     "test": "npm-run-all -s compile:cjs test:pre -p test:karma test:iso",
     "test:pre": "tsc -p ./test",