Skip to content

Commit

Permalink
more Classes constants (#2330)
Browse files Browse the repository at this point in the history 
* use Classes constants instead of hardcoded strings

* add more core classes constants

* add datetime classes constants

* a few more core classes

* fix test

* elevationClass

* use elevationClasses in card

* EditableText classes, alph modifiers list
  • Loading branch information
@giladgray
giladgray authored Mar 29, 2018
1 parent 638699d commit e53d5d4
Show file tree
Hide file tree
Showing 55 changed files with 231 additions and 177 deletions.
76 changes: 56 additions & 20 deletions packages/core/src/common/classes.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -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";

Expand All @@ -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";
Expand All @@ -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";
Expand Down Expand Up @@ -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";
Expand All @@ -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";
Expand All @@ -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";
Expand Down Expand Up @@ -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) {
Expand Down
10 changes: 1 addition & 9 deletions packages/core/src/components/card/card.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand All @@ -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} />;
Expand Down
2 changes: 1 addition & 1 deletion packages/core/src/components/collapse/collapse.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
10 changes: 5 additions & 5 deletions packages/core/src/components/editable-text/editableText.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
);
Expand All @@ -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>
Expand Down Expand Up @@ -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,
Expand Down
2 changes: 1 addition & 1 deletion packages/core/src/components/forms/inputGroup.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
Expand Down
6 changes: 3 additions & 3 deletions packages/core/src/components/hotkeys/hotkey.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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>
);
Expand Down
6 changes: 3 additions & 3 deletions packages/core/src/components/hotkeys/hotkeys.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -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>;
}

Expand Down
2 changes: 1 addition & 1 deletion packages/core/src/components/hotkeys/hotkeysDialog.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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}
>
Expand Down
8 changes: 4 additions & 4 deletions packages/core/src/components/hotkeys/keyCombo.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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";

Expand Down Expand Up @@ -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>
);
Expand Down
2 changes: 1 addition & 1 deletion packages/core/src/components/progress/progressBar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
}
Expand Down
8 changes: 4 additions & 4 deletions packages/core/src/components/spinner/spinner.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
);
Expand All @@ -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,
Expand All @@ -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>,
);
Expand All @@ -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>
);
}
Expand Down
6 changes: 3 additions & 3 deletions packages/core/src/components/tabs/tabs.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 }>;

Expand Down Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion packages/core/src/components/tag/tag.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
Loading

1 comment on commit e53d5d4

@blueprint-bot
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

more Classes constants (#2330)

Preview: documentation | landing | table

Please sign in to comment.