From 190738782f1b59f46e5578a3e1b91dea5ec5964e Mon Sep 17 00:00:00 2001 From: Gilad Gray Date: Wed, 28 Mar 2018 13:37:35 -0700 Subject: [PATCH 1/8] use Classes constants instead of hardcoded strings --- .../core/src/components/collapse/collapse.tsx | 2 +- .../core/src/components/forms/inputGroup.tsx | 2 +- .../core/src/components/hotkeys/hotkey.tsx | 6 ++--- .../core/src/components/hotkeys/hotkeys.tsx | 6 ++--- .../src/components/hotkeys/hotkeysDialog.tsx | 2 +- .../core/src/components/hotkeys/keyCombo.tsx | 8 +++---- .../src/components/progress/progressBar.tsx | 4 ++-- .../core/src/components/spinner/spinner.tsx | 8 +++---- packages/core/src/components/tag/tag.tsx | 2 +- .../core/src/components/tree/treeNode.tsx | 5 +++- packages/core/test/alert/alertTests.tsx | 4 ++-- packages/core/test/controls/controlsTests.tsx | 12 +++++----- .../core/test/controls/inputGroupTests.tsx | 8 +++---- packages/core/test/forms/labelTests.tsx | 6 ++--- packages/core/test/hotkeys/hotkeysTests.tsx | 6 +++-- packages/core/test/menu/menuItemTests.tsx | 2 +- packages/core/test/overlay/overlayTests.tsx | 2 +- packages/core/test/popover/popoverTests.tsx | 9 ++++--- .../core/test/progress/progressBarTests.tsx | 8 +++---- packages/core/test/slider/sliderTests.tsx | 2 +- packages/core/test/spinner/spinnerTests.tsx | 8 +++---- packages/core/test/tabs/tabsTests.tsx | 6 ++--- .../core/test/tag-input/tagInputTests.tsx | 4 ++-- packages/core/test/tag/tagTests.tsx | 4 ++-- packages/datetime/src/dateInput.tsx | 3 ++- packages/datetime/src/datePicker.tsx | 14 +++-------- packages/datetime/src/datePickerCaption.tsx | 10 ++++---- packages/datetime/test/dateInputTests.tsx | 8 ++++--- .../docs-app/src/components/blueprintDocs.tsx | 10 ++++---- .../docs-app/src/components/colorPalettes.tsx | 6 +++-- packages/docs-app/src/components/docsIcon.tsx | 12 ++++++---- packages/docs-app/src/components/icons.tsx | 24 +++++++++---------- .../docs-app/src/components/navHeader.tsx | 2 +- .../examples/core-examples/focusExample.tsx | 4 ++-- .../examples/core-examples/hotkeyPiano.tsx | 4 ++-- .../examples/core-examples/navbarExample.tsx | 15 +++++++++--- .../core-examples/nonIdealStateExample.tsx | 4 ++-- .../examples/core-examples/popoverExample.tsx | 2 +- .../examples/core-examples/tabsExample.tsx | 10 ++++---- .../examples/core-examples/toastExample.tsx | 2 +- .../examples/core-examples/tooltipExample.tsx | 18 +++++++------- .../src/components/documentation.tsx | 6 ++++- .../src/components/modifierTable.tsx | 2 +- .../docs-theme/src/components/navButton.tsx | 3 ++- .../docs-theme/src/components/navMenu.tsx | 2 +- .../src/components/typescript/enumTable.tsx | 4 ++-- .../components/typescript/interfaceTable.tsx | 2 +- packages/table-dev-app/src/features.tsx | 4 ++-- packages/table-dev-app/src/nav.tsx | 3 ++- packages/table/test/menusTests.tsx | 4 ++-- 50 files changed, 163 insertions(+), 141 deletions(-) diff --git a/packages/core/src/components/collapse/collapse.tsx b/packages/core/src/components/collapse/collapse.tsx index 8e02e96e71..bdddfd9bf6 100644 --- a/packages/core/src/components/collapse/collapse.tsx +++ b/packages/core/src/components/collapse/collapse.tsx @@ -150,7 +150,7 @@ export class Collapse extends AbstractPureComponent + {rightElement} ); diff --git a/packages/core/src/components/hotkeys/hotkey.tsx b/packages/core/src/components/hotkeys/hotkey.tsx index b9d6bea582..619514ea08 100644 --- a/packages/core/src/components/hotkeys/hotkey.tsx +++ b/packages/core/src/components/hotkeys/hotkey.tsx @@ -7,7 +7,7 @@ import classNames from "classnames"; import * as React from "react"; -import { AbstractPureComponent, IProps } from "../../common"; +import { AbstractPureComponent, Classes, IProps } from "../../common"; import { KeyCombo } from "./keyCombo"; export interface IHotkeyProps extends IProps { @@ -85,10 +85,10 @@ export class Hotkey extends AbstractPureComponent { public render() { const { label, className, ...spreadableProps } = this.props; - const rootClasses = classNames("pt-hotkey", className); + const rootClasses = classNames(Classes.HOTKEY, className); return (
-
{label}
+
{label}
); diff --git a/packages/core/src/components/hotkeys/hotkeys.tsx b/packages/core/src/components/hotkeys/hotkeys.tsx index 69bd444d49..08efd4134d 100644 --- a/packages/core/src/components/hotkeys/hotkeys.tsx +++ b/packages/core/src/components/hotkeys/hotkeys.tsx @@ -7,7 +7,7 @@ import * as React from "react"; import classNames from "classnames"; -import { AbstractPureComponent, IProps } from "../../common"; +import { AbstractPureComponent, Classes, IProps } from "../../common"; import { HOTKEYS_HOTKEY_CHILDREN } from "../../common/errors"; import { isElementOfType } from "../../common/utils"; import { Hotkey, IHotkeyProps } from "./hotkey"; @@ -58,7 +58,7 @@ export class Hotkeys extends AbstractPureComponent { const groupLabel = hotkey.group; if (groupLabel !== lastGroup) { elems.push( -

+

{groupLabel}

, ); @@ -66,7 +66,7 @@ export class Hotkeys extends AbstractPureComponent { } elems.push(); } - const rootClasses = classNames("pt-hotkey-column", this.props.className); + const rootClasses = classNames(Classes.HOTKEY_COLUMN, this.props.className); return
{elems}
; } diff --git a/packages/core/src/components/hotkeys/hotkeysDialog.tsx b/packages/core/src/components/hotkeys/hotkeysDialog.tsx index 7b0fe43c88..b287dbf0ea 100644 --- a/packages/core/src/components/hotkeys/hotkeysDialog.tsx +++ b/packages/core/src/components/hotkeys/hotkeysDialog.tsx @@ -101,7 +101,7 @@ class HotkeysDialog { return ( diff --git a/packages/core/src/components/hotkeys/keyCombo.tsx b/packages/core/src/components/hotkeys/keyCombo.tsx index 698987c957..67cf83eed5 100644 --- a/packages/core/src/components/hotkeys/keyCombo.tsx +++ b/packages/core/src/components/hotkeys/keyCombo.tsx @@ -6,7 +6,7 @@ import classNames from "classnames"; import * as React from "react"; -import { IProps } from "../../common"; +import { Classes, IProps } from "../../common"; import { Icon, IconName } from "../icon/icon"; import { normalizeKeyCombo } from "./hotkeyParser"; @@ -43,18 +43,18 @@ export class KeyCombo extends React.Component { const keys = normalizeKeyCombo(combo) .map(key => (key.length === 1 ? key.toUpperCase() : key)) .map(minimal ? this.renderMinimalKey : this.renderKey); - return {keys}; + return {keys}; } private renderKey = (key: string, index: number) => { const icon = KeyIcons[key]; const reactKey = `key-${index}`; return icon == null ? ( - + {key} ) : ( - + {key} ); diff --git a/packages/core/src/components/progress/progressBar.tsx b/packages/core/src/components/progress/progressBar.tsx index 4e8a405b5d..d39c9bd864 100644 --- a/packages/core/src/components/progress/progressBar.tsx +++ b/packages/core/src/components/progress/progressBar.tsx @@ -25,13 +25,13 @@ export class ProgressBar extends React.PureComponent { public render() { const { className, intent, value } = this.props; - const classes = classNames("pt-progress-bar", Classes.intentClass(intent), className); + const classes = classNames(Classes.PROGRESS_BAR, Classes.intentClass(intent), className); // don't set width if value is null (rely on default CSS value) const width = value == null ? null : 100 * clamp(value, 0, 1) + "%"; return (
-
+
); } diff --git a/packages/core/src/components/spinner/spinner.tsx b/packages/core/src/components/spinner/spinner.tsx index 6fb69d22a4..f051c45c7d 100644 --- a/packages/core/src/components/spinner/spinner.tsx +++ b/packages/core/src/components/spinner/spinner.tsx @@ -37,7 +37,7 @@ export class Spinner extends React.PureComponent { Classes.SPINNER, Classes.intentClass(intent), { - "pt-no-spin": value != null, + [Classes.SPINNER_NO_SPIN]: value != null, }, className, ); @@ -51,7 +51,7 @@ export class Spinner extends React.PureComponent { // HACKHACK to squash error regarding React.SVGProps missing prop pathLength const svgPathAttributes: React.DOMAttributes = { - className: "pt-spinner-head", + className: Classes.SPINNER_HEAD, d: SPINNER_TRACK, pathLength: PATH_LENGTH, style, @@ -60,7 +60,7 @@ export class Spinner extends React.PureComponent { return this.renderContainer( classes, = 0 ? "-15 -15 130 130" : "0 0 100 100"}> - + , ); @@ -70,7 +70,7 @@ export class Spinner extends React.PureComponent { protected renderContainer(classes: string, content: JSX.Element) { return (
-
{content}
+
{content}
); } diff --git a/packages/core/src/components/tag/tag.tsx b/packages/core/src/components/tag/tag.tsx index f7a926762c..2411b343d3 100644 --- a/packages/core/src/components/tag/tag.tsx +++ b/packages/core/src/components/tag/tag.tsx @@ -13,7 +13,7 @@ import { Icon } from "../icon/icon"; export interface ITagProps extends IProps, IIntentProps, React.HTMLAttributes { /** * If set to `true`, the tag will display in an active state. - * This is equivalent to setting `className="pt-active"`. + * This is equivalent to setting `className={Classes.ACTIVE}`. * @default false */ active?: boolean; diff --git a/packages/core/src/components/tree/treeNode.tsx b/packages/core/src/components/tree/treeNode.tsx index a333a293d8..ff46a5015a 100644 --- a/packages/core/src/components/tree/treeNode.tsx +++ b/packages/core/src/components/tree/treeNode.tsx @@ -101,7 +101,10 @@ export class TreeNode extends React.Component, {}> { className, ); - const contentClasses = classNames(Classes.TREE_NODE_CONTENT, `pt-tree-node-content-${this.props.depth}`); + const contentClasses = classNames( + Classes.TREE_NODE_CONTENT, + `${Classes.TREE_NODE_CONTENT}-${this.props.depth}`, + ); return (
  • diff --git a/packages/core/test/alert/alertTests.tsx b/packages/core/test/alert/alertTests.tsx index 2b4c995610..5a3bc545bb 100644 --- a/packages/core/test/alert/alertTests.tsx +++ b/packages/core/test/alert/alertTests.tsx @@ -136,7 +136,7 @@ describe("", () => {

    There is no going back.

    , ); - const overlay = alert.find(".pt-overlay").hostNodes(); + const overlay = alert.find("." + Classes.OVERLAY).hostNodes(); overlay.simulate("keydown", { which: Keys.ESCAPE }); assert.isTrue(onCancel.notCalled); @@ -155,7 +155,7 @@ describe("", () => {

    There is no going back.

    , ); - const backdrop = alert.find(".pt-overlay-backdrop").hostNodes(); + const backdrop = alert.find("." + Classes.OVERLAY_BACKDROP).hostNodes(); backdrop.simulate("mousedown"); assert.isTrue(onCancel.notCalled); diff --git a/packages/core/test/controls/controlsTests.tsx b/packages/core/test/controls/controlsTests.tsx index d01a03d49a..74bcf17991 100644 --- a/packages/core/test/controls/controlsTests.tsx +++ b/packages/core/test/controls/controlsTests.tsx @@ -8,13 +8,13 @@ import { assert } from "chai"; import { mount } from "enzyme"; import * as React from "react"; -import { Icon } from "../../src"; +import { Classes, Icon } from "../../src"; import { Checkbox, IControlProps, Radio, Switch } from "../../src/components/forms/controls"; type ControlType = typeof Checkbox | typeof Radio | typeof Switch; describe("Controls:", () => { - controlsTests(Checkbox, "checkbox", "pt-checkbox", () => { + controlsTests(Checkbox, "checkbox", Classes.CHECKBOX, () => { describe("indeterminate", () => { let input: HTMLInputElement; const handleInputRef = (ref: HTMLInputElement) => (input = ref); @@ -53,15 +53,15 @@ describe("Controls:", () => { }); }); - controlsTests(Switch, "checkbox", "pt-switch"); + controlsTests(Switch, "checkbox", Classes.SWITCH); - controlsTests(Radio, "radio", "pt-radio"); + controlsTests(Radio, "radio", Classes.RADIO); function controlsTests(classType: ControlType, propType: string, className: string, moreTests?: () => void) { describe(`<${classType.displayName.split(".")[1]}>`, () => { - it(`renders .pt-control.${className}`, () => { + it(`renders .${Classes.CONTROL}.${className}`, () => { const control = mountControl(); - assert.isTrue(control.find(".pt-control").hasClass(className)); + assert.isTrue(control.find(`.${Classes.CONTROL}`).hasClass(className)); }); it(`renders input[type=${propType}]`, () => { diff --git a/packages/core/test/controls/inputGroupTests.tsx b/packages/core/test/controls/inputGroupTests.tsx index fbad934c1c..b2eef39da7 100644 --- a/packages/core/test/controls/inputGroupTests.tsx +++ b/packages/core/test/controls/inputGroupTests.tsx @@ -9,13 +9,13 @@ import { mount } from "enzyme"; import * as React from "react"; import { spy } from "sinon"; -import { Icon, InputGroup } from "../../src/index"; +import { Classes, Icon, InputGroup } from "../../src/index"; describe("", () => { it("renders left icon before input", () => { const input = mount().children(); assert.isTrue(input.childAt(0).is(Icon)); - assert.isTrue(input.childAt(1).hasClass("pt-input")); + assert.isTrue(input.childAt(1).hasClass(Classes.INPUT)); }); it("supports custom style", () => { @@ -27,11 +27,11 @@ describe("", () => { assert.equal(inputElement.style.background, "yellow"); }); - it("renders right element inside .pt-input-action after input", () => { + it(`renders right element inside .${Classes.INPUT_ACTION} after input`, () => { const action = mount(} />) .children() .childAt(2); - assert.isTrue(action.hasClass("pt-input-action")); + assert.isTrue(action.hasClass(Classes.INPUT_ACTION)); assert.lengthOf(action.find("address"), 1); }); diff --git a/packages/core/test/forms/labelTests.tsx b/packages/core/test/forms/labelTests.tsx index 6880601505..c780893e91 100644 --- a/packages/core/test/forms/labelTests.tsx +++ b/packages/core/test/forms/labelTests.tsx @@ -7,13 +7,13 @@ import { assert } from "chai"; import { shallow } from "enzyme"; import * as React from "react"; -import { Label } from "../../src/index"; +import { Classes, Label } from "../../src/index"; describe("