[core] deprecate Icon, Drawer, Spinner size constant static members

packages/core/src/components/button/abstractButton.tsx

@@ -27,7 +27,7 @@ import {
     MaybeElement,
     Utils,
 } from "../../common";
-import { Icon, IconName } from "../icon/icon";
+import { Icon, IconName, IconSize } from "../icon/icon";
 import { Spinner } from "../spinner/spinner";
 
 // eslint-disable-next-line deprecation/deprecation
@@ -186,7 +186,7 @@ export abstract class AbstractButton<E extends HTMLButtonElement | HTMLAnchorEle
     protected renderChildren(): React.ReactNode {
         const { children, icon, loading, rightIcon, text } = this.props;
         return [
-            loading && <Spinner key="loading" className={Classes.BUTTON_SPINNER} size={Icon.SIZE_LARGE} />,
+            loading && <Spinner key="loading" className={Classes.BUTTON_SPINNER} size={IconSize.LARGE} />,
             <Icon key="leftIcon" icon={icon} />,
             (!Utils.isReactNodeEmpty(text) || !Utils.isReactNodeEmpty(children)) && (
                 <span key="text" className={Classes.BUTTON_TEXT}>

packages/core/src/components/callout/callout.tsx

@@ -29,7 +29,7 @@ import {
     MaybeElement,
 } from "../../common";
 import { H4 } from "../html/html";
-import { Icon, IconName } from "../icon/icon";
+import { Icon, IconName, IconSize } from "../icon/icon";
 
 // eslint-disable-next-line deprecation/deprecation
 export type CalloutProps = ICalloutProps;
@@ -78,7 +78,7 @@ export class Callout extends AbstractPureComponent2<CalloutProps> {
 
         return (
             <div className={classes} {...htmlProps}>
-                {iconName && <Icon icon={iconName} iconSize={Icon.SIZE_LARGE} />}
+                {iconName && <Icon icon={iconName} iconSize={IconSize.LARGE} />}
                 {title && <H4>{title}</H4>}
                 {children}
             </div>

packages/core/src/components/dialog/dialog.tsx

@@ -23,7 +23,7 @@ import * as Errors from "../../common/errors";
 import { DISPLAYNAME_PREFIX, Props, MaybeElement } from "../../common/props";
 import { Button } from "../button/buttons";
 import { H4 } from "../html/html";
-import { Icon, IconName } from "../icon/icon";
+import { Icon, IconName, IconSize } from "../icon/icon";
 import { IBackdropProps, OverlayableProps, Overlay } from "../overlay/overlay";
 
 // eslint-disable-next-line deprecation/deprecation
@@ -119,7 +119,7 @@ export class Dialog extends AbstractPureComponent2<DialogProps> {
                 <Button
                     aria-label="Close"
                     className={Classes.DIALOG_CLOSE_BUTTON}
-                    icon={<Icon icon="small-cross" iconSize={Icon.SIZE_LARGE} />}
+                    icon={<Icon icon="small-cross" iconSize={IconSize.LARGE} />}
                     minimal={true}
                     onClick={this.props.onClose}
                 />
@@ -136,7 +136,7 @@ export class Dialog extends AbstractPureComponent2<DialogProps> {
         }
         return (
             <div className={Classes.DIALOG_HEADER}>
-                <Icon icon={icon} iconSize={Icon.SIZE_LARGE} />
+                <Icon icon={icon} iconSize={IconSize.LARGE} />
                 <H4>{title}</H4>
                 {this.maybeRenderCloseButton()}
             </div>

packages/core/src/components/drawer/drawer.md

@@ -10,8 +10,8 @@ Drawers overlay content over existing parts of the UI and are anchored to the ed
 
 Use the `size` prop to set the size of the `Drawer`. This prop sets CSS `width` if `vertical={false}` (default) and `height` otherwise. Constants are available for common sizes:
 
-- `Drawer.SIZE_SMALL = 360px`
-- `Drawer.SIZE_STANDARD = 50%` (default)
-- `Drawer.SIZE_LARGE = 90%`
+- `DrawerSize.SMALL = 360px`
+- `DrawerSize.STANDARD = 50%` (default)
+- `DrawerSize.LARGE = 90%`
 
 @interface IDrawerProps

packages/core/src/components/drawer/drawer.tsx

@@ -24,9 +24,15 @@ import { getPositionIgnoreAngles, isPositionHorizontal, Position } from "../../c
 import { DISPLAYNAME_PREFIX, Props, MaybeElement } from "../../common/props";
 import { Button } from "../button/buttons";
 import { H4 } from "../html/html";
-import { Icon, IconName } from "../icon/icon";
+import { Icon, IconName, IconSize } from "../icon/icon";
 import { IBackdropProps, OverlayableProps, Overlay } from "../overlay/overlay";
 
+export enum DrawerSize {
+    SMALL = "360px",
+    STANDARD = "50%",
+    LARGE = "90%",
+}
+
 // eslint-disable-next-line deprecation/deprecation
 export type DrawerProps = IDrawerProps;
 /** @deprecated use DrawerProps */
@@ -73,11 +79,11 @@ export interface IDrawerProps extends OverlayableProps, IBackdropProps, Props {
      * and `height` otherwise.
      *
      * Constants are available for common sizes:
-     * - `Drawer.SIZE_SMALL = 360px`
-     * - `Drawer.SIZE_STANDARD = 50%`
-     * - `Drawer.SIZE_LARGE = 90%`
+     * - `DrawerSize.SMALL = 360px`
+     * - `DrawerSize.STANDARD = 50%`
+     * - `DrawerSize.LARGE = 90%`
      *
-     * @default Drawer.SIZE_STANDARD = "50%"
+     * @default DrawerSize.STANDARD = "50%"
      */
     size?: number | string;
 
@@ -122,11 +128,14 @@ export class Drawer extends AbstractPureComponent2<DrawerProps> {
         vertical: false,
     };
 
-    public static readonly SIZE_SMALL = "360px";
+    /** @deprecated use DrawerSize.SMALL */
+    public static readonly SIZE_SMALL = DrawerSize.SMALL;
 
-    public static readonly SIZE_STANDARD = "50%";
+    /** @deprecated use DrawerSize.STANDARD */
+    public static readonly SIZE_STANDARD = DrawerSize.STANDARD;
 
-    public static readonly SIZE_LARGE = "90%";
+    /** @deprecated use DrawerSize.LARGE */
+    public static readonly SIZE_LARGE = DrawerSize.LARGE;
 
     private lastActiveElementBeforeOpened: Element | null | undefined;
 
@@ -194,7 +203,7 @@ export class Drawer extends AbstractPureComponent2<DrawerProps> {
                 <Button
                     aria-label="Close"
                     className={Classes.DIALOG_CLOSE_BUTTON}
-                    icon={<Icon icon="small-cross" iconSize={Icon.SIZE_LARGE} />}
+                    icon={<Icon icon="small-cross" iconSize={IconSize.LARGE} />}
                     minimal={true}
                     onClick={this.props.onClose}
                 />
@@ -211,7 +220,7 @@ export class Drawer extends AbstractPureComponent2<DrawerProps> {
         }
         return (
             <div className={Classes.DRAWER_HEADER}>
-                <Icon icon={icon} iconSize={Icon.SIZE_LARGE} />
+                <Icon icon={icon} iconSize={IconSize.LARGE} />
                 <H4>{title}</H4>
                 {this.maybeRenderCloseButton()}
             </div>

packages/core/src/components/icon/icon.md

@@ -41,15 +41,15 @@ which SVG is rendered and `iconSize` determines which pixel grid is used:
 grid.
 
 ```tsx
-import { Icon, Intent } from "@blueprintjs/core";
+import { Icon, IconSize, Intent } from "@blueprintjs/core";
 import { IconNames } from "@blueprintjs/icons";
 
 // string literals are supported through IconName union type
 <Icon icon="cross" />
 <Icon icon="globe" iconSize={20} />
 
 // constants are provided for name and size
-<Icon icon={IconNames.GRAPH} iconSize={Icon.SIZE_LARGE} intent={Intent.PRIMARY} />
+<Icon icon={IconNames.GRAPH} iconSize={IconSize.LARGE} intent={Intent.PRIMARY} />
 
 // can pass all valid HTML props
 <Icon icon="add" onClick={this.handleAdd} onKeyDown={this.handleAddKeys} />

packages/core/src/components/icon/icon.tsx

@@ -24,6 +24,11 @@ import { AbstractPureComponent2, Classes, DISPLAYNAME_PREFIX, IntentProps, Props
 
 export { IconName };
 
+export enum IconSize {
+    STANDARD = 16,
+    LARGE = 20,
+}
+
 // eslint-disable-next-line deprecation/deprecation
 export type IconProps = IIconProps;
 /** @deprecated use IconProps */
@@ -66,7 +71,7 @@ export interface IIconProps extends IntentProps, Props {
      * Size of the icon, in pixels. Blueprint contains 16px and 20px SVG icon
      * images, and chooses the appropriate resolution based on this prop.
      *
-     * @default Icon.SIZE_STANDARD = 16
+     * @default IconSize.STANDARD = 16
      */
     iconSize?: number;
 
@@ -93,9 +98,11 @@ export interface IIconProps extends IntentProps, Props {
 export class Icon extends AbstractPureComponent2<IconProps & Omit<React.HTMLAttributes<HTMLElement>, "title">> {
     public static displayName = `${DISPLAYNAME_PREFIX}.Icon`;
 
-    public static readonly SIZE_STANDARD = 16;
+    /** @deprecated use IconSize.STANDARD */
+    public static readonly SIZE_STANDARD = IconSize.STANDARD;
 
-    public static readonly SIZE_LARGE = 20;
+    /** @deprecated use IconSize.LARGE */
+    public static readonly SIZE_LARGE = IconSize.LARGE;
 
     public render(): JSX.Element | null {
         const { icon } = this.props;
@@ -109,15 +116,15 @@ export class Icon extends AbstractPureComponent2<IconProps & Omit<React.HTMLAttr
             className,
             color,
             htmlTitle,
-            iconSize = Icon.SIZE_STANDARD,
+            iconSize = IconSize.STANDARD,
             intent,
             title = icon,
             tagName = "span",
             ...htmlprops
         } = this.props;
 
         // choose which pixel grid is most appropriate for given icon size
-        const pixelGridSize = iconSize >= Icon.SIZE_LARGE ? Icon.SIZE_LARGE : Icon.SIZE_STANDARD;
+        const pixelGridSize = iconSize >= IconSize.LARGE ? IconSize.LARGE : IconSize.STANDARD;
         // render path elements, or nothing if icon name is unknown.
         const paths = this.renderSvgPaths(pixelGridSize, icon);
 
@@ -141,7 +148,7 @@ export class Icon extends AbstractPureComponent2<IconProps & Omit<React.HTMLAttr
 
     /** Render `<path>` elements for the given icon name. Returns `null` if name is unknown. */
     private renderSvgPaths(pathsSize: number, iconName: IconName): JSX.Element[] | null {
-        const svgPathsRecord = pathsSize === Icon.SIZE_STANDARD ? IconSvgPaths16 : IconSvgPaths20;
+        const svgPathsRecord = pathsSize === IconSize.STANDARD ? IconSvgPaths16 : IconSvgPaths20;
         const pathStrings = svgPathsRecord[iconName];
         if (pathStrings == null) {
             return null;

packages/core/src/components/non-ideal-state/nonIdealState.tsx

@@ -23,7 +23,7 @@ import * as Classes from "../../common/classes";
 import { DISPLAYNAME_PREFIX, Props, MaybeElement } from "../../common/props";
 import { ensureElement } from "../../common/utils";
 import { H4 } from "../html/html";
-import { Icon, IconName } from "../icon/icon";
+import { Icon, IconName, IconSize } from "../icon/icon";
 
 // eslint-disable-next-line deprecation/deprecation
 export type NonIdealStateProps = INonIdealStateProps;
@@ -75,7 +75,7 @@ export class NonIdealState extends AbstractPureComponent2<NonIdealStateProps> {
         } else {
             return (
                 <div className={Classes.NON_IDEAL_STATE_VISUAL}>
-                    <Icon icon={icon} iconSize={Icon.SIZE_LARGE * 3} />
+                    <Icon icon={icon} iconSize={IconSize.LARGE * 3} />
                 </div>
             );
         }

packages/core/src/components/spinner/spinner.md

@@ -16,8 +16,8 @@ changes. Omitting `value` will result in an "indeterminate" spinner where the
 head spins indefinitely (this is the default appearance).
 
 The `size` prop determines the pixel width/height of the spinner. Size constants
-are provided as static properties: `Spinner.SIZE_SMALL`,
-`Spinner.SIZE_STANDARD`, `Spinner.SIZE_LARGE`. Small and large sizes can be set
+are provided as an enum: `SpinnerSize.SMALL`,
+`SpinnerSize.STANDARD`, `SpinnerSize.LARGE`. Small and large sizes can be set
 by including `Classes.SMALL` or `Classes.LARGE` in `className` instead of the
 `size` prop (this prevents an API break when upgrading to 3.x).
 

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

@@ -23,6 +23,12 @@ import { SPINNER_WARN_CLASSES_SIZE } from "../../common/errors";
 import { DISPLAYNAME_PREFIX, IntentProps, Props } from "../../common/props";
 import { clamp } from "../../common/utils";
 
+export enum SpinnerSize {
+    SMALL = 20,
+    STANDARD = 50,
+    LARGE = 100,
+}
+
 // see http://stackoverflow.com/a/18473154/3124288 for calculating arc path
 const R = 45;
 const SPINNER_TRACK = `M 50,50 m 0,-${R} a ${R},${R} 0 1 1 0,${R * 2} a ${R},${R} 0 1 1 0,-${R * 2}`;
@@ -45,11 +51,11 @@ export interface ISpinnerProps extends Props, IntentProps {
      * 10px.
      *
      * Constants are available for common sizes:
-     * - `Spinner.SIZE_SMALL = 20px`
-     * - `Spinner.SIZE_STANDARD = 50px`
-     * - `Spinner.SIZE_LARGE = 100px`
+     * - `SpinnerSize.SMALL = 20px`
+     * - `SpinnerSize.STANDARD = 50px`
+     * - `SpinnerSize.LARGE = 100px`
      *
-     * @default Spinner.SIZE_STANDARD = 50
+     * @default SpinnerSize.STANDARD = 50
      */
     size?: number;
 
@@ -73,11 +79,14 @@ export interface ISpinnerProps extends Props, IntentProps {
 export class Spinner extends AbstractPureComponent2<SpinnerProps> {
     public static displayName = `${DISPLAYNAME_PREFIX}.Spinner`;
 
-    public static readonly SIZE_SMALL = 20;
+    /** @deprecated use SpinnerSize.SMALL */
+    public static readonly SIZE_SMALL = SpinnerSize.SMALL;
 
-    public static readonly SIZE_STANDARD = 50;
+    /** @deprecated use SpinnerSize.STANDARD */
+    public static readonly SIZE_STANDARD = SpinnerSize.STANDARD;
 
-    public static readonly SIZE_LARGE = 100;
+    /** @deprecated use SpinnerSize.LARGE */
+    public static readonly SIZE_LARGE = SpinnerSize.LARGE;
 
     public componentDidUpdate(prevProps: SpinnerProps) {
         if (prevProps.value !== this.props.value) {
@@ -98,7 +107,7 @@ export class Spinner extends AbstractPureComponent2<SpinnerProps> {
         );
 
         // keep spinner track width consistent at all sizes (down to about 10px).
-        const strokeWidth = Math.min(MIN_STROKE_WIDTH, (STROKE_WIDTH * Spinner.SIZE_LARGE) / size);
+        const strokeWidth = Math.min(MIN_STROKE_WIDTH, (STROKE_WIDTH * SpinnerSize.LARGE) / size);
         const strokeOffset = PATH_LENGTH - PATH_LENGTH * (value == null ? 0.25 : clamp(value, 0, 1));
 
         // multiple DOM elements around SVG are necessary to properly isolate animation:
@@ -144,11 +153,11 @@ export class Spinner extends AbstractPureComponent2<SpinnerProps> {
         if (size == null) {
             // allow Classes constants to determine default size.
             if (className.indexOf(Classes.SMALL) >= 0) {
-                return Spinner.SIZE_SMALL;
+                return SpinnerSize.SMALL;
             } else if (className.indexOf(Classes.LARGE) >= 0) {
-                return Spinner.SIZE_LARGE;
+                return SpinnerSize.LARGE;
             }
-            return Spinner.SIZE_STANDARD;
+            return SpinnerSize.STANDARD;
         }
         return Math.max(MIN_SIZE, size);
     }

packages/core/src/components/tag-input/tagInput.tsx

@@ -20,7 +20,7 @@ import { polyfill } from "react-lifecycles-compat";
 
 import { AbstractPureComponent2, Classes, IRef, Keys, refHandler, setRef, Utils } from "../../common";
 import { DISPLAYNAME_PREFIX, HTMLInputProps, IntentProps, Props, MaybeElement } from "../../common/props";
-import { Icon, IconName } from "../icon/icon";
+import { Icon, IconName, IconSize } from "../icon/icon";
 import { TagProps, Tag } from "../tag/tag";
 
 /**
@@ -255,7 +255,7 @@ export class TagInput extends AbstractPureComponent2<TagInputProps, ITagInputSta
                 <Icon
                     className={Classes.TAG_INPUT_ICON}
                     icon={leftIcon}
-                    iconSize={isLarge ? Icon.SIZE_LARGE : Icon.SIZE_STANDARD}
+                    iconSize={isLarge ? IconSize.LARGE : IconSize.STANDARD}
                 />
                 <div className={Classes.TAG_INPUT_VALUES}>
                     {values.map(this.maybeRenderTag)}

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

@@ -29,7 +29,7 @@ import {
     Utils,
 } from "../../common";
 import { isReactNodeEmpty } from "../../common/utils";
-import { Icon, IconName } from "../icon/icon";
+import { Icon, IconName, IconSize } from "../icon/icon";
 import { Text } from "../text/text";
 
 // eslint-disable-next-line deprecation/deprecation
@@ -166,7 +166,7 @@ export class Tag extends AbstractPureComponent2<TagProps> {
                 onClick={this.onRemoveClick}
                 tabIndex={interactive ? tabIndex : undefined}
             >
-                <Icon icon="small-cross" iconSize={isLarge ? Icon.SIZE_LARGE : Icon.SIZE_STANDARD} />
+                <Icon icon="small-cross" iconSize={isLarge ? IconSize.LARGE : IconSize.LARGE} />
             </button>
         ) : null;
 

packages/core/test/dialog/dialogTests.tsx

@@ -19,7 +19,7 @@ import { mount } from "enzyme";
 import * as React from "react";
 import { spy } from "sinon";
 
-import { Button, Classes, Dialog, H4, Icon } from "../../src";
+import { Button, Classes, Dialog, H4, Icon, IconSize } from "../../src";
 import * as Keys from "../../src/common/keys";
 
 describe("<Dialog>", () => {
@@ -151,7 +151,7 @@ describe("<Dialog>", () => {
     function createDialogContents(): JSX.Element[] {
         return [
             <div className={Classes.DIALOG_HEADER} key={0}>
-                <Icon icon="inbox" iconSize={Icon.SIZE_LARGE} />
+                <Icon icon="inbox" iconSize={IconSize.LARGE} />
                 <H4>Dialog header</H4>
             </div>,
             <div className={Classes.DIALOG_BODY} key={1}>

packages/core/test/icon/iconTests.tsx

@@ -20,7 +20,7 @@ import * as React from "react";
 
 import { IconName } from "@blueprintjs/icons";
 
-import { Classes, Icon, IIconProps, Intent } from "../../src";
+import { Classes, Icon, IconSize, IIconProps, Intent } from "../../src";
 
 describe("<Icon>", () => {
     it("tagName dictates HTML tag", () => {
@@ -30,10 +30,10 @@ describe("<Icon>", () => {
     });
 
     it("iconSize=16 renders standard size", () =>
-        assertIconSize(<Icon icon="graph" iconSize={Icon.SIZE_STANDARD} />, Icon.SIZE_STANDARD));
+        assertIconSize(<Icon icon="graph" iconSize={IconSize.STANDARD} />, IconSize.STANDARD));
 
     it("iconSize=20 renders large size", () =>
-        assertIconSize(<Icon icon="graph" iconSize={Icon.SIZE_LARGE} />, Icon.SIZE_LARGE));
+        assertIconSize(<Icon icon="graph" iconSize={IconSize.LARGE} />, IconSize.LARGE));
 
     it("renders intent class", () =>
         assert.isTrue(shallow(<Icon icon="add" intent={Intent.DANGER} />).hasClass(Classes.INTENT_DANGER)));