more Classes constants

packages/core/src/common/classes.ts

@@ -4,26 +4,39 @@
  * Licensed under the terms of the LICENSE file distributed with this project.
  */
 
+import { Elevation } from "../components/card/card";
 import { Alignment } from "./alignment";
 import { Intent } from "./intent";
 
 // modifiers
-export const DARK = "pt-dark";
 export const ACTIVE = "pt-active";
-export const MINIMAL = "pt-minimal";
-export const DISABLED = "pt-disabled";
-export const SMALL = "pt-small";
-export const LARGE = "pt-large";
-export const LOADING = "pt-loading";
-export const INTERACTIVE = "pt-interactive";
 export const ALIGN_LEFT = "pt-align-left";
 export const ALIGN_RIGHT = "pt-align-right";
-export const INLINE = "pt-inline";
+export const DARK = "pt-dark";
+export const DISABLED = "pt-disabled";
 export const FILL = "pt-fill";
 export const FIXED = "pt-fixed";
 export const FIXED_TOP = "pt-fixed-top";
-export const VERTICAL = "pt-vertical";
+export const INLINE = "pt-inline";
+export const INTERACTIVE = "pt-interactive";
+export const LARGE = "pt-large";
+export const LOADING = "pt-loading";
+export const MINIMAL = "pt-minimal";
+export const MULTILINE = "pt-multiline";
 export const ROUND = "pt-round";
+export const SMALL = "pt-small";
+export const VERTICAL = "pt-vertical";
+
+export const ELEVATION_0 = elevationClass(Elevation.ZERO);
+export const ELEVATION_1 = elevationClass(Elevation.ONE);
+export const ELEVATION_2 = elevationClass(Elevation.TWO);
+export const ELEVATION_3 = elevationClass(Elevation.THREE);
+export const ELEVATION_4 = elevationClass(Elevation.FOUR);
+
+export const INTENT_PRIMARY = intentClass(Intent.PRIMARY);
+export const INTENT_SUCCESS = intentClass(Intent.SUCCESS);
+export const INTENT_WARNING = intentClass(Intent.WARNING);
+export const INTENT_DANGER = intentClass(Intent.DANGER);
 
 // text utilities
 export const TEXT_MUTED = "pt-text-muted";
@@ -61,6 +74,7 @@ export const CALLOUT_TITLE = "pt-callout-title";
 export const CARD = "pt-card";
 
 export const COLLAPSE = "pt-collapse";
+export const COLLAPSE_BODY = "pt-collapse-body";
 
 export const COLLAPSIBLE_LIST = "pt-collapse-list";
 
@@ -81,19 +95,20 @@ export const DIALOG_HEADER = "pt-dialog-header";
 export const DIALOG_HEADER_TITLE = "pt-dialog-header-title";
 
 export const EDITABLE_TEXT = "pt-editable-text";
+export const EDITABLE_TEXT_CONTENT = "pt-editable-content";
+export const EDITABLE_TEXT_EDITING = "pt-editable-editing";
+export const EDITABLE_TEXT_INPUT = "pt-editable-input";
+export const EDITABLE_TEXT_PLACEHOLDER = "pt-editable-placeholder";
 
-export const ELEVATION_0 = "pt-elevation-0";
-export const ELEVATION_1 = "pt-elevation-1";
-export const ELEVATION_2 = "pt-elevation-2";
-export const ELEVATION_3 = "pt-elevation-3";
-export const ELEVATION_4 = "pt-elevation-4";
+export const FLEX_EXPANDER = "pt-flex-expander";
 
 export const HTML_TABLE = "pt-html-table";
 export const HTML_TABLE_STRIPED = "pt-html-table-striped";
 export const HTML_TABLE_BORDERED = "pt-html-table-bordered";
 
 export const INPUT = "pt-input";
 export const INPUT_GROUP = "pt-input-group";
+export const INPUT_ACTION = "pt-input-action";
 
 export const CHECKBOX = "pt-checkbox";
 export const RADIO = "pt-radio";
@@ -103,10 +118,15 @@ export const FILE_UPLOAD_INPUT = "pt-file-upload-input";
 
 export const INPUT_GHOST = "pt-input-ghost";
 
-export const INTENT_PRIMARY = "pt-intent-primary";
-export const INTENT_SUCCESS = "pt-intent-success";
-export const INTENT_WARNING = "pt-intent-warning";
-export const INTENT_DANGER = "pt-intent-danger";
+export const KEY = "pt-key";
+export const KEY_COMBO = "pt-key-combo";
+export const MODIFIER_KEY = "pt-modifier-key";
+
+export const HOTKEY = "pt-hotkey";
+export const HOTKEY_LABEL = "pt-hotkey-label";
+export const HOTKEY_GROUP = "pt-hotkey-group";
+export const HOTKEY_COLUMN = "pt-hotkey-column";
+export const HOTKEY_DIALOG = "pt-hotkey-dialog";
 
 export const LABEL = "pt-label";
 export const FORM_GROUP = "pt-form-group";
@@ -145,6 +165,7 @@ export const POPOVER = "pt-popover";
 export const POPOVER_ARROW = "pt-popover-arrow";
 export const POPOVER_BACKDROP = "pt-popover-backdrop";
 export const POPOVER_CONTENT = "pt-popover-content";
+export const POPOVER_CONTENT_SIZING = "pt-popover-content-sizing";
 export const POPOVER_DISMISS = "pt-popover-dismiss";
 export const POPOVER_DISMISS_OVERRIDE = "pt-popover-dismiss-override";
 export const POPOVER_OPEN = "pt-popover-open";
@@ -164,14 +185,21 @@ export const SELECT = "pt-select";
 export const SKELETON = "pt-skeleton";
 
 export const SLIDER = "pt-slider";
-export const SLIDER_HANDLE = `${SLIDER}-handle`;
-export const SLIDER_LABEL = `${SLIDER}-label`;
+export const SLIDER_HANDLE = "pt-slider-handle";
+export const SLIDER_LABEL = "pt-slider-label";
+export const SLIDER_PROGRESS = "pt-slider-progress";
 export const RANGE_SLIDER = "pt-range-slider";
 
 export const SPINNER = "pt-spinner";
+export const SPINNER_HEAD = "pt-spinner-head";
+export const SPINNER_NO_SPIN = "pt-no-spin";
+export const SPINNER_TRACK = "pt-spinner-track";
+export const SPINNER_SVG_CONTAINER = "pt-spinner-svg-container";
 export const SVG_SPINNER = "pt-svg-spinner";
 
 export const TAB = "pt-tab";
+export const TAB_INDICATOR = "pt-tab-indicator";
+export const TAB_INDICATOR_WRAPPER = "pt-tab-indicator-wrapper";
 export const TAB_LIST = "pt-tab-list";
 export const TAB_PANEL = "pt-tab-panel";
 export const TABS = "pt-tabs";
@@ -189,6 +217,7 @@ export const TOAST_CONTAINER = "pt-toast-container";
 export const TOAST_MESSAGE = "pt-toast-message";
 
 export const TOOLTIP = "pt-tooltip";
+export const TOOLTIP_INDICATOR = "pt-tooltip-indicator";
 
 export const TREE = "pt-tree";
 export const TREE_NODE = "pt-tree-node";
@@ -221,6 +250,13 @@ export function alignmentClass(alignment: Alignment) {
     }
 }
 
+export function elevationClass(elevation: Elevation) {
+    if (elevation == null) {
+        return undefined;
+    }
+    return `pt-elevation-${elevation}`;
+}
+
 /** Return CSS class for icon, whether or not 'pt-icon-' prefix is included */
 export function iconClass(iconName?: string) {
     if (iconName == null) {

packages/core/src/components/card/card.tsx

@@ -45,14 +45,6 @@ export enum Elevation {
     FOUR = 4,
 }
 
-const ELEVATION_CLASSES = [
-    Classes.ELEVATION_0,
-    Classes.ELEVATION_1,
-    Classes.ELEVATION_2,
-    Classes.ELEVATION_3,
-    Classes.ELEVATION_4,
-];
-
 export class Card extends React.PureComponent<ICardProps, {}> {
     public static displayName = "Blueprint2.Card";
     public static defaultProps: ICardProps = {
@@ -65,7 +57,7 @@ export class Card extends React.PureComponent<ICardProps, {}> {
         const classes = classNames(
             Classes.CARD,
             { [Classes.INTERACTIVE]: interactive },
-            ELEVATION_CLASSES[elevation],
+            Classes.elevationClass(elevation),
             className,
         );
         return <div className={classes} {...htmlProps} />;

packages/core/src/components/collapse/collapse.tsx

@@ -150,7 +150,7 @@ export class Collapse extends AbstractPureComponent<ICollapseProps, ICollapseSta
                 style: containerStyle,
             },
             <div
-                className="pt-collapse-body"
+                className={Classes.COLLAPSE_BODY}
                 ref={this.contentsRefHandler}
                 style={contentsStyle}
                 aria-hidden={!isContentVisible && this.props.keepChildrenMounted}

packages/core/src/components/editable-text/editableText.tsx

@@ -156,9 +156,9 @@ export class EditableText extends AbstractPureComponent<IEditableTextProps, IEdi
             Classes.intentClass(this.props.intent),
             {
                 [Classes.DISABLED]: disabled,
-                "pt-editable-editing": this.state.isEditing,
-                "pt-editable-placeholder": !hasValue,
-                "pt-multiline": multiline,
+                [Classes.EDITABLE_TEXT_EDITING]: this.state.isEditing,
+                [Classes.EDITABLE_TEXT_PLACEHOLDER]: !hasValue,
+                [Classes.MULTILINE]: multiline,
             },
             this.props.className,
         );
@@ -183,7 +183,7 @@ export class EditableText extends AbstractPureComponent<IEditableTextProps, IEdi
         return (
             <div className={classes} onFocus={this.handleFocus} tabIndex={tabIndex}>
                 {this.maybeRenderInput(value)}
-                <span className="pt-editable-content" ref={this.refHandlers.content} style={contentStyle}>
+                <span className={Classes.EDITABLE_TEXT_CONTENT} ref={this.refHandlers.content} style={contentStyle}>
                     {hasValue ? value : this.props.placeholder}
                 </span>
             </div>
@@ -283,7 +283,7 @@ export class EditableText extends AbstractPureComponent<IEditableTextProps, IEdi
             return undefined;
         }
         const props: React.HTMLProps<HTMLInputElement | HTMLTextAreaElement> = {
-            className: "pt-editable-input",
+            className: Classes.EDITABLE_TEXT_INPUT,
             maxLength,
             onBlur: this.toggleEditing,
             onChange: this.handleTextChange,

packages/core/src/components/forms/inputGroup.tsx

@@ -111,7 +111,7 @@ export class InputGroup extends React.PureComponent<IInputGroupProps & HTMLInput
             return undefined;
         }
         return (
-            <span className="pt-input-action" ref={this.refHandlers.rightElement}>
+            <span className={Classes.INPUT_ACTION} ref={this.refHandlers.rightElement}>
                 {rightElement}
             </span>
         );

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<IHotkeyProps, {}> {
     public render() {
         const { label, className, ...spreadableProps } = this.props;
 
-        const rootClasses = classNames("pt-hotkey", className);
+        const rootClasses = classNames(Classes.HOTKEY, className);
         return (
             <div className={rootClasses}>
-                <div className="pt-hotkey-label">{label}</div>
+                <div className={Classes.HOTKEY_LABEL}>{label}</div>
                 <KeyCombo {...spreadableProps} />
             </div>
         );

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,15 +58,15 @@ export class Hotkeys extends AbstractPureComponent<IHotkeysProps, {}> {
             const groupLabel = hotkey.group;
             if (groupLabel !== lastGroup) {
                 elems.push(
-                    <h4 key={`group-${elems.length}`} className="pt-hotkey-group">
+                    <h4 key={`group-${elems.length}`} className={Classes.HOTKEY_GROUP}>
                         {groupLabel}
                     </h4>,
                 );
                 lastGroup = groupLabel;
             }
             elems.push(<Hotkey key={elems.length} {...hotkey} />);
         }
-        const rootClasses = classNames("pt-hotkey-column", this.props.className);
+        const rootClasses = classNames(Classes.HOTKEY_COLUMN, this.props.className);
         return <div className={rootClasses}>{elems}</div>;
     }
 

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

@@ -101,7 +101,7 @@ class HotkeysDialog {
         return (
             <Dialog
                 {...this.componentProps}
-                className={classNames(this.componentProps.className, "pt-hotkey-dialog")}
+                className={classNames(Classes.HOTKEY_DIALOG, this.componentProps.className)}
                 isOpen={this.isDialogShowing}
                 onClose={this.hide}
             >

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<IKeyComboProps, {}> {
         const keys = normalizeKeyCombo(combo)
             .map(key => (key.length === 1 ? key.toUpperCase() : key))
             .map(minimal ? this.renderMinimalKey : this.renderKey);
-        return <span className={classNames("pt-key-combo", className)}>{keys}</span>;
+        return <span className={classNames(Classes.KEY_COMBO, className)}>{keys}</span>;
     }
 
     private renderKey = (key: string, index: number) => {
         const icon = KeyIcons[key];
         const reactKey = `key-${index}`;
         return icon == null ? (
-            <kbd className="pt-key" key={reactKey}>
+            <kbd className={Classes.KEY} key={reactKey}>
                 {key}
             </kbd>
         ) : (
-            <kbd className="pt-key pt-modifier-key" key={reactKey}>
+            <kbd className={classNames(Classes.KEY, Classes.MODIFIER_KEY)} key={reactKey}>
                 <Icon icon={icon} /> {key}
             </kbd>
         );

packages/core/src/components/progress/progressBar.tsx

@@ -48,7 +48,7 @@ export class ProgressBar extends React.PureComponent<IProgressBarProps, {}> {
 
         return (
             <div className={classes}>
-                <div className="pt-progress-meter" style={{ width }} />
+                <div className={Classes.PROGRESS_METER} style={{ width }} />
             </div>
         );
     }

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

@@ -45,7 +45,7 @@ export class Spinner extends React.PureComponent<ISpinnerProps, {}> {
             {
                 [Classes.LARGE]: large,
                 [Classes.SMALL]: small,
-                "pt-no-spin": value != null,
+                [Classes.SPINNER_NO_SPIN]: value != null,
             },
             className,
         );
@@ -59,7 +59,7 @@ export class Spinner extends React.PureComponent<ISpinnerProps, {}> {
 
         // HACKHACK to squash error regarding React.SVGProps missing prop pathLength
         const svgPathAttributes: React.DOMAttributes<SVGPathElement> = {
-            className: "pt-spinner-head",
+            className: Classes.SPINNER_HEAD,
             d: SPINNER_TRACK,
             pathLength: PATH_LENGTH,
             style,
@@ -68,7 +68,7 @@ export class Spinner extends React.PureComponent<ISpinnerProps, {}> {
         return this.renderContainer(
             classes,
             <svg viewBox={classes.indexOf(Classes.SMALL) >= 0 ? "-15 -15 130 130" : "0 0 100 100"}>
-                <path className="pt-spinner-track" d={SPINNER_TRACK} />
+                <path className={Classes.SPINNER_TRACK} d={SPINNER_TRACK} />
                 <path {...svgPathAttributes} />
             </svg>,
         );
@@ -78,7 +78,7 @@ export class Spinner extends React.PureComponent<ISpinnerProps, {}> {
     protected renderContainer(classes: string, content: JSX.Element) {
         return (
             <div className={classes}>
-                <div className="pt-spinner-svg-container">{content}</div>
+                <div className={Classes.SPINNER_SVG_CONTAINER}>{content}</div>
             </div>
         );
     }

packages/core/src/components/tabs/tabs.tsx

@@ -16,7 +16,7 @@ import * as Utils from "../../common/utils";
 import { ITabProps, Tab, TabId } from "./tab";
 import { generateTabPanelId, generateTabTitleId, TabTitle } from "./tabTitle";
 
-export const Expander: React.SFC<{}> = () => <div className="pt-flex-expander" />;
+export const Expander: React.SFC<{}> = () => <div className={Classes.FLEX_EXPANDER} />;
 
 type TabElement = React.ReactElement<ITabProps & { children: React.ReactNode }>;
 
@@ -122,8 +122,8 @@ export class Tabs extends AbstractPureComponent<ITabsProps, ITabsState> {
             .map(this.renderTabPanel);
 
         const tabIndicator = this.props.animate ? (
-            <div className="pt-tab-indicator-wrapper" style={indicatorWrapperStyle}>
-                <div className="pt-tab-indicator" />
+            <div className={Classes.TAB_INDICATOR_WRAPPER} style={indicatorWrapperStyle}>
+                <div className={Classes.TAB_INDICATOR} />
             </div>
         ) : (
             undefined

packages/core/src/components/tag/tag.tsx

@@ -13,7 +13,7 @@ import { Icon } from "../icon/icon";
 export interface ITagProps extends IProps, IIntentProps, React.HTMLAttributes<HTMLSpanElement> {
     /**
      * 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;