Classes.HEADING instead of custom classes (#2443)

* fix dark selector in heading-typography()

* Callout uses Classes.HEADING instead of CALLOUT_TITLE

* Dialog uses Classes.HEADING instead of DIALOG_HEADER_TITLE

* replace CALLOUT_TITLE in markdown callouts

packages/core/src/common/_mixins.scss

@@ -51,7 +51,7 @@ $pt-dark-intent-text-colors: (
   color: $pt-heading-color;
   font-weight: 600;
 
-  .pt-dark & {
+  .#{$ns}-dark & {
     color: $pt-dark-heading-color;
   }
 }

packages/core/src/common/classes.ts

@@ -76,7 +76,6 @@ export const BUTTON_TEXT = `${BUTTON}-text`;
 
 export const CALLOUT = `${NS}-callout`;
 export const CALLOUT_ICON = `${CALLOUT}-icon`;
-export const CALLOUT_TITLE = `${CALLOUT}-title`;
 
 export const CARD = `${NS}-card`;
 
@@ -97,7 +96,6 @@ export const DIALOG_CLOSE_BUTTON = `${DIALOG}-close-button`;
 export const DIALOG_FOOTER = `${DIALOG}-footer`;
 export const DIALOG_FOOTER_ACTIONS = `${DIALOG}-footer-actions`;
 export const DIALOG_HEADER = `${DIALOG}-header`;
-export const DIALOG_HEADER_TITLE = `${DIALOG}-header-title`;
 
 export const EDITABLE_TEXT = `${NS}-editable-text`;
 export const EDITABLE_TEXT_CONTENT = `${EDITABLE_TEXT}-content`;

packages/core/src/components/button/button.md

@@ -56,7 +56,7 @@ Blueprint class name. If you specify other attributes that the component provide
 for an `<AnchorButton>`, you'll overide the default value.
 
 <div class="@ns-callout @ns-intent-danger @ns-icon-error">
-    <h4 class="@ns-callout-title">Interactions with disabled buttons</h4>
+    <h4 class="@ns-heading">Interactions with disabled buttons</h4>
     Use `AnchorButton` if you need mouse interaction events (such as hovering) on a disabled button.
     This is because `Button` and `AnchorButton` handle the `disabled` prop differently: `Button` uses
     the native `disabled` attribute on the `<button>` tag so the browser disables all interactions,
@@ -69,15 +69,15 @@ for an `<AnchorButton>`, you'll overide the default value.
 
 @### Anchor button
 
-```jsx
+```tsx
 <AnchorButton text="Click" />
 // renders:
 <a class="@ns-button" role="button" tabIndex={0}>Click</a>
 ```
 
 @### Button
 
-```jsx
+```tsx
 <Button icon="refresh" />
 // renders:
 <button class="@ns-button @ns-icon-refresh" type="button"></button>

packages/core/src/components/callout/_callout.scss

@@ -8,7 +8,7 @@ Callout
 
 Markup:
 <div class="#{$ns}-callout {{.modifier}}">
-  <h4 class="#{$ns}-callout-title">Callout Heading</h4>
+  <h4 class="#{$ns}-heading">Callout Heading</h4>
   Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex, delectus!
 </div>
 
@@ -53,7 +53,7 @@ Styleguide callout
     }
   }
 
-  .#{$ns}-callout-title {
+  .#{$ns}-heading {
     margin-top: 0;
     margin-bottom: $pt-grid-size / 2;
     line-height: $pt-icon-size-large;
@@ -73,7 +73,7 @@ Styleguide callout
 
       &[class*="#{$ns}-icon-"]::before,
       .#{$ns}-icon,
-      .#{$ns}-callout-title {
+      .#{$ns}-heading {
         color: map-get($pt-intent-text-colors, $intent);
       }
 
@@ -82,7 +82,7 @@ Styleguide callout
 
         &[class*="#{$ns}-icon-"]::before,
         .#{$ns}-callout-icon,
-        .#{$ns}-callout-title {
+        .#{$ns}-heading {
           color: map-get($pt-dark-intent-text-colors, $intent);
         }
       }

packages/core/src/components/callout/callout.md

@@ -7,7 +7,7 @@ Callouts visually highlight important content for the user.
 @## CSS API
 
 Callouts use the same visual intent modifier classes as buttons. If you need a
-heading, use the `<h4>` element with a `.@ns-callout-title` class.
+heading, use the `<h4>` element with a `.@ns-heading` class.
 
 <div class="@ns-callout @ns-intent-primary @ns-icon-info-sign">
     Note that the title is entirely optional.

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

@@ -25,16 +25,16 @@ export interface ICalloutProps extends IIntentProps, IProps, HTMLDivProps {
      * String content of optional title element.
      *
      * Due to a conflict with the HTML prop types, to provide JSX content simply
-     * pass `<h4 className={Classes.CALLOUT_TITLE}>JSX title content<h4>` as
+     * pass `<h4 className={Classes.HEADING}>JSX title content<h4>` as
      * first `children` element instead of using this prop.
      */
     title?: string;
 }
 
 export class Callout extends React.PureComponent<ICalloutProps, {}> {
     public render() {
-        const { className, children, icon: _nospread, intent, title, ...htmlProps } = this.props;
-        const iconName = this.getIconName();
+        const { className, children, icon, intent, title, ...htmlProps } = this.props;
+        const iconName = this.getIconName(icon, intent);
         const classes = classNames(
             Classes.CALLOUT,
             Classes.intentClass(intent),
@@ -45,14 +45,13 @@ export class Callout extends React.PureComponent<ICalloutProps, {}> {
         return (
             <div className={classes} {...htmlProps}>
                 {iconName && <Icon icon={iconName} iconSize={Icon.SIZE_LARGE} />}
-                {title && <h4 className={Classes.CALLOUT_TITLE}>{title}</h4>}
+                {title && <h4 className={Classes.HEADING}>{title}</h4>}
                 {children}
             </div>
         );
     }
 
-    private getIconName(): JSX.Element | IconName | undefined {
-        const { icon, intent } = this.props;
+    private getIconName(icon?: ICalloutProps["icon"], intent?: Intent): JSX.Element | IconName | undefined {
         // 1. no icon
         if (icon === null) {
             return undefined;

packages/core/src/components/dialog/_dialog.scss

@@ -15,7 +15,7 @@ Markup:
   <div class="#{$ns}-dialog">
     <div class="#{$ns}-dialog-header">
       <span class="#{$ns}-icon-large #{$ns}-icon-inbox"></span>
-      <h4 class="#{$ns}-dialog-header-title">Dialog header</h4>
+      <h4 class="#{$ns}-heading">Dialog header</h4>
       <button aria-label="Close" class="#{$ns}-dialog-close-button #{$ns}-icon-small-cross"></button>
     </div>
     <div class="#{$ns}-dialog-body">
@@ -107,7 +107,7 @@ $dialog-padding: $pt-grid-size * 2 !default;
     color: $pt-icon-color;
   }
 
-  .#{$ns}-dialog-header-title {
+  .#{$ns}-heading {
     @include overflow-ellipsis();
     flex: 1 1 auto;
     margin: 0;
@@ -126,10 +126,6 @@ $dialog-padding: $pt-grid-size * 2 !default;
     .#{$ns}-icon {
       color: $pt-dark-icon-color;
     }
-
-    .#{$ns}-dialog-header-title {
-      color: $pt-dark-heading-color;
-    }
   }
 }
 

packages/core/src/components/dialog/dialog.md

@@ -3,7 +3,7 @@
 Dialogs present content overlaid over other parts of the UI.
 
 <div class="@ns-callout @ns-intent-primary @ns-icon-info-sign">
-    <h4 class="@ns-callout-title">Terminology note</h4>
+    <h4 class="@ns-heading">Terminology note</h4>
     The term "modal" is sometimes used to mean "dialog," but this is a misnomer.
     _Modal_ is an adjective that describes parts of a UI.
     An element is considered modal if it

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

@@ -115,7 +115,7 @@ export class Dialog extends AbstractPureComponent<IDialogProps, {}> {
         return (
             <div className={Classes.DIALOG_HEADER}>
                 <Icon icon={icon} iconSize={Icon.SIZE_LARGE} />
-                <h4 className={Classes.DIALOG_HEADER_TITLE}>{title}</h4>
+                <h4 className={Classes.HEADING}>{title}</h4>
                 {this.maybeRenderCloseButton()}
             </div>
         );

packages/core/src/components/editable-text/editable-text.md

@@ -12,7 +12,7 @@ You should not use `EditableText` when a static always-editable `<input>` or
 `<textarea>` tag would suffice.
 
 <div class="@ns-callout @ns-intent-danger @ns-icon-error">
-    <h4 class="@ns-callout-title">Centering the component</h4>
+    <h4 class="@ns-heading">Centering the component</h4>
     **Do not center this component** using `text-align: center`, as it will cause an infinite loop
     in the browser ([more details](https://github.com/JedWatson/react-select/issues/540)). Instead,
     you should center the component via flexbox or with `position` and `transform: translateX(-50%)`.
@@ -56,7 +56,7 @@ _vertically_ instead, based on the number of lines of text. You can use the `min
 `maxLines` props to constrain the vertical size of the component.
 
 <div class="@ns-callout @ns-intent-warning @ns-icon-warning-sign">
-    <h4 class="@ns-callout-title">Multiline prop format</h4>
+    <h4 class="@ns-heading">Multiline prop format</h4>
     You should declare `multiline` as a valueless boolean prop, as in the example above
     (`<EditableText multiline ...>`). This prevents you from changing the value after declaring it,
     which would provide a sub-optimal experience for users (multiline text does not always render

packages/core/src/components/forms/control-group.md

@@ -8,7 +8,7 @@ Note that `.@ns-control-group` does not cascade any modifiers to its children. F
 child must be marked individually as `.@ns-large` for uniform large appearance.
 
 <div class="@ns-callout @ns-intent-success @ns-icon-comparison">
-    <h4 class="@ns-callout-title">Control group vs. input group</h4>
+    <h4 class="@ns-heading">Control group vs. input group</h4>
     <p>Both components group multiple elements into a single unit, but their usage patterns are
     different.</p>
     <p>Think of `.@ns-control-group` as a parent with multiple children, each of them a

packages/core/src/components/forms/file-input.md

@@ -4,7 +4,7 @@ Use the standard `input type="file"` along with a `span` with class `@ns-file-up
 Wrap that all in a `label` with class `@ns-file-input`.
 
 <div class="@ns-callout @ns-intent-warning @ns-icon-warning-sign">
-    <h4 class="@ns-callout-title">Static file name</h4>
+    <h4 class="@ns-heading">Static file name</h4>
     File name does not update on file selection. To get this behavior,
     you must implement it separately in JS.
 </div>

packages/core/src/components/forms/input-group.md

@@ -14,7 +14,7 @@ vice versa. You do not need to apply sizing classes to the children—they i
 the parent input.
 
 <div class="@ns-callout @ns-intent-warning @ns-icon-warning-sign">
-    <h4 class="@ns-callout-title">Icons only</h4>
+    <h4 class="@ns-heading">Icons only</h4>
     <p>You cannot use buttons with text in the CSS API for input groups. The padding for text inputs
     in CSS cannot accomodate buttons whose width varies due to text content. You should use icons on
     buttons instead.</p>

packages/core/src/components/forms/label.md

@@ -3,7 +3,7 @@
 Labels enhance the usability of your forms.
 
 <div class="@ns-callout @ns-intent-success @ns-icon-comparison">
-    <h4 class="@ns-callout-title">Simple labels vs. form groups</h4>
+    <h4 class="@ns-heading">Simple labels vs. form groups</h4>
     <p>Blueprint provides two ways of connecting label text to control fields, depending on the complexity of the control.</p>
     <p>Simple labels are a basic way to connect a label with a single control.</p>
     <p>Form groups support more complex control layouts but require more markup to maintain consistent visuals.</p>

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

@@ -5,7 +5,7 @@
 </div>
 
 <div class="@ns-callout @ns-intent-primary @ns-icon-info-sign">
-    <h4 class="@ns-callout-title">SVG icons in 2.0</h4>
+    <h4 class="@ns-heading">SVG icons in 2.0</h4>
     Blueprint 2.0 introduced SVG icon support and moved icon resources to a separate __@blueprintjs/icons__ package.
     The `Icon` component now renders SVG paths and the icon classes are no longer used by any Blueprint React component.
     Icon font support has been preserved but should be considered a legacy feature that will be removed in a
@@ -62,7 +62,7 @@ import { IconNames } from "@blueprintjs/icons";
 @## CSS API
 
 <div class="@ns-callout @ns-intent-warning @ns-icon-warning-sign">
-    <h4 class="@ns-callout-title">Icon fonts are legacy in 2.0</h4>
+    <h4 class="@ns-heading">Icon fonts are legacy in 2.0</h4>
     Blueprint's icon fonts should be considered a legacy feature and will be removed in a future major version.
     The SVGs rendered by the React component do not suffer from the blurriness of icon fonts, and browser
     support is equivalent.
@@ -84,7 +84,7 @@ Icon classes also support the four `.@ns-intent-*` modifiers to color the image.
 ```
 
 <div class="@ns-callout @ns-intent-primary @ns-icon-info-sign">
-    <h4 class="@ns-callout-title">Non-standard sizes</h4>
+    <h4 class="@ns-heading">Non-standard sizes</h4>
     Generally, font icons should only be used at either 16px or 20px. However, if a non-standard size is
     necessary, set a `font-size` that is whole multiple of 16 or 20 with the relevant size class.
     You can instead use the class `@ns-icon` to make the icon inherit its size from surrounding text.

packages/core/src/components/menu/menu.md

@@ -82,7 +82,7 @@ there is not enough room to the right.
 ```
 
 <div class="@ns-callout @ns-intent-warning @ns-icon-warning-sign">
-    <h4 class="@ns-callout-title">JavaScript only</h4>
+    <h4 class="@ns-heading">JavaScript only</h4>
     Submenus are only supported in the React components. They cannot be created with CSS alone because
     they rely on the [`Popover`](#core/components/popover) component for positioning and transitions.
 </div>

packages/core/src/components/navbar/navbar.md

@@ -25,7 +25,7 @@ screen as the user scrolls through the document.
 This modifier is not illustrated here because it breaks the documentation flow.
 
 <div class="@ns-callout @ns-intent-danger @ns-icon-error">
-    <h4 class="@ns-callout-title">Body padding required</h4>
+    <h4 class="@ns-heading">Body padding required</h4>
     The fixed navbar will lie on top of your other content unless you add padding to the top of the
     `<body>` element equal to the height of the navbar. Use the `$pt-navbar-height` Sass variable to
     access the height of the navbar (50px).

packages/core/src/components/overlay/overlay.md

@@ -29,7 +29,7 @@ The `onClose` callback prop is invoked when user interaction causes the overlay
 but your application is responsible for updating the state that actually closes the overlay.
 
 <div class="@ns-callout @ns-intent-primary @ns-icon-info-sign">
-    <h4 class="@ns-callout-title">A note about overlay content positioning</h4>
+    <h4 class="@ns-heading">A note about overlay content positioning</h4>
     When rendered inline, content will automatically be set to `position: absolute` to respect
     document flow. Otherwise, content will be set to `position: fixed` to cover the entire viewport.
 </div>

packages/core/src/components/popover/popover.md

@@ -64,7 +64,7 @@ Internally, the provided target is wrapped in a `span.@ns-popover-target`. This
 ```
 
 <div class="@ns-callout @ns-intent-warning @ns-icon-warning-sign">
-    <h4 class="@ns-callout-title">Button targets</h4>
+    <h4 class="@ns-heading">Button targets</h4>
     Buttons make great popover targets, but the `disabled` attribute on a `<button>` blocks all
     events, which interferes with the popover functioning. If you need to disable a button that
     triggers a popover, you should use [`AnchorButton`](#core/components/button.anchor-button) instead.
@@ -163,7 +163,7 @@ in your application logic whether you should care about a particular invocation
 if the `nextOpenState` is not the same as the `Popover`'s current state).
 
 <div class="@ns-callout @ns-intent-warning @ns-icon-warning-sign">
-    <h4 class="@ns-callout-title">Disabling controlled popovers</h4>
+    <h4 class="@ns-heading">Disabling controlled popovers</h4>
     <p>If `disabled={true}`, a controlled popover will remain closed even if `isOpen={true}`.
     The popover will re-open when `disabled` is set to `false.</p>
 </div>
@@ -235,7 +235,7 @@ The __@blueprintjs/core__ package exports the above values in the `PopoverIntera
 </div>
 
 <div class="@ns-callout @ns-intent-primary @ns-icon-info-sign">
-    <h4 class="@ns-callout-title">Conditionally styling popover targets</h4>
+    <h4 class="@ns-heading">Conditionally styling popover targets</h4>
     When a popover is open, the target has a <code>.@ns-popover-open</code> class applied to it.
     You can use this to style the target differently when the popover is open.
 </div>
@@ -279,7 +279,7 @@ a translucent background color, like the backdrop for the [`Dialog`](#core/compo
 The backdrop element has the same opacity-fade transition as the `Dialog` backdrop.
 
 <div class="@ns-callout @ns-intent-danger @ns-icon-error">
-    <h4 class="@ns-callout-title">Dangerous edge case</h4>
+    <h4 class="@ns-heading">Dangerous edge case</h4>
     Rendering a `<Popover isOpen={true} hasBackdrop={true}>` outside the viewport bounds can easily break
     your application by covering the UI with an invisible non-interactive backdrop. This edge case
     must be handled by your application code or simply avoided if possible.

packages/core/src/components/portal/portal.md

@@ -17,7 +17,7 @@ The children of a `Portal` component are appended to the `<body>` element.
 application.
 
 <div class="@ns-callout @ns-intent-warning @ns-icon-warning-sign">
-    <h4 class="@ns-callout-title">A note about responsive layouts</h4>
+    <h4 class="@ns-heading">A note about responsive layouts</h4>
     For a single-page app, if the `<body>` is styled with `width: 100%` and `height: 100%`, a `Portal`
     may take up extra whitespace and cause the window to undesirably scroll. To fix this, instead
     apply `position: absolute` to the `<body>` tag.

packages/core/src/components/skeleton/skeleton.md

@@ -10,7 +10,7 @@ when using skeletons to show loading text, you should use some sort of placehold
 approximately the length of your expected text.
 
 <div class="@ns-callout @ns-intent-warning @ns-icon-warning-sign">
-    <h4 class="@ns-callout-title">Manually disable focusable elements</h4>
+    <h4 class="@ns-heading">Manually disable focusable elements</h4>
     When using the `.@ns-skeleton` class on focusable elements such as inputs and buttons, be sure to
     disable the element, via either the `disabled` or `tabindex="-1"` attributes. Failing to do so
     will allow these skeleton elements to be focused when they shouldn't be.

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

@@ -25,7 +25,7 @@ Note that the CSS modifiers described in the [CSS API](#core/components/progress
 are supported via the `className` prop.
 
 <div class="@ns-callout @ns-intent-warning @ns-icon-warning-sign">
-    <h4 class="@ns-callout-title">IE11 compatibility note</h4>
+    <h4 class="@ns-heading">IE11 compatibility note</h4>
     IE11 [does not support CSS transitions on SVG elements][msdn-css-svg] so spinners with known
     `value` will not smoothly transition as `value` changes. Indeterminate spinners still animate
     correctly because they rely on CSS animations, not transitions.
@@ -42,7 +42,7 @@ are supported via the `className` prop.
 Use the `SVGSpinner` component to render a spinner inside an SVG element.
 
 <div class="@ns-callout @ns-intent-primary @ns-icon-info-sign">
-    <h4 class="@ns-callout-title">Sizing note</h4>
+    <h4 class="@ns-heading">Sizing note</h4>
     Because of the way SVG elements are sized, you may need to manually scale the spinner inside your
     SVG to make it an appropriate size.
 </div>

packages/core/src/components/table/table-html.md

@@ -3,7 +3,7 @@
 This component adds Blueprint styling to native HTML tables.
 
 <div class="@ns-callout @ns-intent-primary @ns-icon-info-sign">
-    <h4 class="@ns-callout-title">This is not @blueprintjs/table</h4>
+    <h4 class="@ns-heading">This is not @blueprintjs/table</h4>
     This table component is a simple CSS-only skin for HTML `<table>` elements.
     It is ideal for basic static tables. If you're looking for more complex
     spreadsheet-like features, check out [**@blueprintjs/table**](#table).

packages/core/src/components/tag-input/tag-input.md

@@ -15,17 +15,17 @@ Tag inputs render [`Tag`](#core/components/tag)s inside an input, followed by an
 The `<input>` element can be controlled directly via the `inputValue` and `onInputChange` props. Additional properties (such as custom event handlers) can be applied to the input via `inputProps`.
 
 <div class="@ns-callout @ns-intent-success @ns-icon-info-sign">
-    <h4 class="@ns-callout-title">Looking for a dropdown menu?</h4>
+    <h4 class="@ns-heading">Looking for a dropdown menu?</h4>
     [`MultiSelect`](#select/multi-select) from the **@blueprintjs/select** package composes this component with a dropdopwn menu of suggestions.
 </div>
 
 <div class="@ns-callout @ns-intent-primary @ns-icon-info-sign">
-    <h4 class="@ns-callout-title">Handling long words</h4>
+    <h4 class="@ns-heading">Handling long words</h4>
     Set an explicit `width` on `.@ns-tag-input` to cause long words to wrap onto multiple lines. Either supply a specific pixel value, or use `<TagInput className="@ns-fill">` to fill its container's width (try this in the example above).
 </div>
 
 <div class="@ns-callout @ns-intent-primary @ns-icon-info-sign">
-    <h4 class="@ns-callout-title">Disabling a tag input</h4>
+    <h4 class="@ns-heading">Disabling a tag input</h4>
     <p>Disabling this component requires setting the `disabled` prop to `true` and separately disabling the component's `rightElement` as appropriate (because `TagInput` accepts any `JSX.Element` as its `rightElement`).</p>
     <p>In the example below, when you slide the `Disabled` toggle switch on, the result becomes `<TagInput ... disabled={true} rightElement={<Button ... disabled={true} />} />`</p>
 </div>