From d1d9ae0e6b5a0e3246521d817f3cd58fced9af1f Mon Sep 17 00:00:00 2001
From: Gilad Gray <giladgray@gmail.com>
Date: Fri, 31 Mar 2017 13:06:11 -0700
Subject: [PATCH] [DM] update docs files and links (#927)

* markdownify Text and DateRangeInput docs

* fix all the links i could find
---
 packages/core/src/components/_index.scss      |  1 -
 packages/core/src/components/alert/alert.md   |  4 +-
 .../src/components/breadcrumbs/breadcrumbs.md |  8 ++--
 packages/core/src/components/button/button.md |  4 +-
 .../core/src/components/collapse/collapse.md  |  2 +-
 .../collapsible-list/collapsible-list.md      |  4 +-
 packages/core/src/components/components.md    |  1 +
 .../components/context-menu/context-menu.md   | 14 +++---
 packages/core/src/components/dialog/dialog.md | 16 +++----
 .../components/editable-text/editable-text.md | 11 ++---
 .../core/src/components/forms/checkbox.md     |  2 +-
 .../core/src/components/forms/form-group.md   |  4 +-
 .../core/src/components/forms/input-group.md  | 14 +++---
 packages/core/src/components/forms/input.md   |  6 +--
 .../src/components/forms/numeric-input.md     |  4 +-
 packages/core/src/components/forms/radio.md   |  2 +-
 packages/core/src/components/forms/select.md  |  4 +-
 packages/core/src/components/forms/switch.md  |  4 +-
 packages/core/src/components/menu/menu.md     | 20 ++++-----
 .../non-ideal-state/non-ideal-state.md        |  4 +-
 .../core/src/components/overlay/overlay.md    |  6 +--
 .../core/src/components/popover/popover.md    | 12 ++---
 packages/core/src/components/portal/portal.md |  6 +--
 .../src/components/progress/progress-bar.md   |  4 +-
 .../core/src/components/spinner/spinner.md    |  6 +--
 packages/core/src/components/tabs/tabs.md     | 12 ++---
 packages/core/src/components/tabs2/tabs2.md   |  7 +--
 packages/core/src/components/tag/tag.md       |  2 +-
 .../components/text/{_text.scss => text.md}   | 19 ++------
 packages/core/src/components/toast/toast.md   | 10 ++---
 .../core/src/components/tooltip/tooltip.md    |  8 ++--
 packages/core/src/components/tree/tree.md     |  6 +--
 packages/core/src/docs/colors.md              |  4 +-
 packages/core/src/docs/variables.md           |  2 +-
 packages/datetime/src/_daterangeinput.scss    | 45 -------------------
 packages/datetime/src/blueprint-datetime.scss |  1 -
 packages/datetime/src/dateinput.md            |  6 +--
 packages/datetime/src/datepicker.md           |  2 +-
 packages/datetime/src/daterangeinput.md       | 28 ++++++++++++
 packages/datetime/src/daterangepicker.md      |  2 +-
 packages/datetime/src/datetimepicker.md       |  6 +--
 packages/datetime/src/index.md                | 13 +++---
 packages/datetime/src/timepicker.md           |  2 +-
 packages/docs-site/src/blueprint.md           |  2 +-
 packages/table/README.md                      |  2 +-
 packages/table/src/docs.md                    |  2 +-
 46 files changed, 158 insertions(+), 186 deletions(-)
 rename packages/core/src/components/text/{_text.scss => text.md} (53%)
 delete mode 100644 packages/datetime/src/_daterangeinput.scss
 create mode 100644 packages/datetime/src/daterangeinput.md

diff --git a/packages/core/src/components/_index.scss b/packages/core/src/components/_index.scss
index 5e0259225b..994565cac0 100644
--- a/packages/core/src/components/_index.scss
+++ b/packages/core/src/components/_index.scss
@@ -19,7 +19,6 @@
 @import "navbar/navbar";
 @import "non-ideal-state/non-ideal-state";
 @import "overlay/overlay";
-@import "text/text";
 @import "popover/popover";
 @import "portal/portal";
 @import "progress/progress-bar";
diff --git a/packages/core/src/components/alert/alert.md b/packages/core/src/components/alert/alert.md
index c51e51cddd..8795b3d3fd 100644
--- a/packages/core/src/components/alert/alert.md
+++ b/packages/core/src/components/alert/alert.md
@@ -3,7 +3,7 @@
 Alerts notify users of important information and force them to acknowledge the alert content before
 continuing.
 
-Although similar to [dialogs](#components.dialog), alerts are more restrictive and should only be
+Although similar to [dialogs](#core/components/dialog), alerts are more restrictive and should only be
 used for important informations. The user can only exit the alert by clicking one of the
 confirmation buttons—clicking the overlay or pressing the `esc` key will not close the alert.
 
@@ -16,6 +16,6 @@ to show the type of the alert.
 @## JavaScript API
 
 The `Alert` component is available in the __@blueprintjs/core__ package.
-Make sure to review the [general usage docs for JS components](#components.usage).
+Make sure to review the [general usage docs for JS components](#blueprint.usage).
 
 @interface IAlertProps
diff --git a/packages/core/src/components/breadcrumbs/breadcrumbs.md b/packages/core/src/components/breadcrumbs/breadcrumbs.md
index 3160a6e6f4..f7fee97bec 100644
--- a/packages/core/src/components/breadcrumbs/breadcrumbs.md
+++ b/packages/core/src/components/breadcrumbs/breadcrumbs.md
@@ -15,18 +15,18 @@ user to that resource.
 * Mark the final breadcrumb `.pt-breadcrumb-current` for an emphasized appearance.
 * The `.pt-breadcrumbs-collapsed` button-like element can be used as the target for a dropdown menu
 containing breadcrumbs that are collapsed due to layout constraints.
-* When adding another element (such as a [tooltip](#components.tooltip) or
-[popover](#components.popover)) to a breadcrumb, wrap it around the contents of the `li`.
+* When adding another element (such as a [tooltip](#core/components/tooltip) or
+[popover](#core/components/popover)) to a breadcrumb, wrap it around the contents of the `li`.
 
 @css pt-breadcrumbs
 
 @## JavaScript API
 
 The `Breadcrumb` component is available in the __@blueprintjs/core__ package.
-Make sure to review the [general usage docs for JS components](#components.usage).
+Make sure to review the [general usage docs for JS components](#blueprint.usage).
 
 The component renders an `a.pt-breadcrumb`. You are responsible for constructing
-the `ul.pt-breadcrumbs` list. [`CollapsibleList`](#components.collapsiblelist)
+the `ul.pt-breadcrumbs` list. [`CollapsibleList`](#core/components/collapsiblelist)
 works nicely with this component because its props are a subset of `IMenuItemProps`.
 
 @interface IBreadcrumbProps
diff --git a/packages/core/src/components/button/button.md b/packages/core/src/components/button/button.md
index 5527ccd1c6..d6634f79d3 100644
--- a/packages/core/src/components/button/button.md
+++ b/packages/core/src/components/button/button.md
@@ -47,10 +47,10 @@ Note that minimal buttons are _not supported_ in button groups at this time.
 @## JavaScript API
 
 The `Button` and `AnchorButton` components are available in the __@blueprintjs/core__ package.
-Make sure to review the [general usage docs for JS components](#components.usage).
+Make sure to review the [general usage docs for JS components](#blueprint.usage).
 
 Button components render buttons with Blueprint classes and attributes.
-See the [Buttons CSS docs](#components.button.css) for styling options.
+See the [Buttons CSS docs](#core/components/button.css-api) for styling options.
 
 You can provide your own props to these components as if they were regular JSX HTML elements. If you
 provide a `className` prop, the class names you provide will be added alongside of the default
diff --git a/packages/core/src/components/collapse/collapse.md b/packages/core/src/components/collapse/collapse.md
index a5328a25db..77b3679dd8 100644
--- a/packages/core/src/components/collapse/collapse.md
+++ b/packages/core/src/components/collapse/collapse.md
@@ -9,7 +9,7 @@ that can be expanded and collapsed.
 @## JavaScript API
 
 The `Collapse` component is available in the __@blueprintjs/core__ package.
-Make sure to review the [general usage docs for JS components](#components.usage).
+Make sure to review the [general usage docs for JS components](#blueprint.usage).
 
 Any content should be a child of the `Collapse` element. Content must be in the document
 flow (e.g. `position: absolute;` wouldn't work, as the parent element would inherit a height of 0).
diff --git a/packages/core/src/components/collapsible-list/collapsible-list.md b/packages/core/src/components/collapsible-list/collapsible-list.md
index 88f88d95a2..8b76bcf6fd 100644
--- a/packages/core/src/components/collapsible-list/collapsible-list.md
+++ b/packages/core/src/components/collapsible-list/collapsible-list.md
@@ -10,11 +10,11 @@ props from the `MenuItem` children.
 @## JavaScript API
 
 The `CollapsibleList` component is available in the __@blueprintjs/core__ package.
-Make sure to review the [general usage docs for JS components](#components.usage).
+Make sure to review the [general usage docs for JS components](#blueprint.usage).
 
 Children of the `CollapsibleList` component _must_ be `MenuItem`s so they can be easily rendered
 in the dropdown. Define a `renderVisibleItem` callback to customize the appearance of visible
-items using their [`IMenuItemProps`](#components.menu.js.menu-item).
+items using their [`IMenuItemProps`](#core/components/menu.menu-item).
 
 @interface ICollapsibleListProps
 
diff --git a/packages/core/src/components/components.md b/packages/core/src/components/components.md
index 1e82970c22..0ed89ce463 100644
--- a/packages/core/src/components/components.md
+++ b/packages/core/src/components/components.md
@@ -27,6 +27,7 @@
 @page tabs
 @page tabs2
 @page tag
+@page text
 @page toast
 @page tooltip
 @page tree
diff --git a/packages/core/src/components/context-menu/context-menu.md b/packages/core/src/components/context-menu/context-menu.md
index 963541675e..8615d567e1 100644
--- a/packages/core/src/components/context-menu/context-menu.md
+++ b/packages/core/src/components/context-menu/context-menu.md
@@ -4,23 +4,23 @@ Context menus present the user with a custom list of actions upon right-click.
 
 You can create context menus in either of the following ways:
 
-- by adding the `@ContextMenuTarget` [decorator](#components.context-menu.decorator) to a React
-component that implements `renderContextMenu(): JSX.Element`.
-- via the [imperative](#components.context-menu.js) `ContextMenu.show` and `ContextMenu.hide` API
-methods, ideal for non-React-based applications.
+- by adding the `@ContextMenuTarget` [decorator](#core/components/context-menu.javascript-api--decorator)
+  to a React component that implements `renderContextMenu(): JSX.Element`.
+- via the [imperative](#core/components/context-menu.javascript-api--imperative) `ContextMenu.show`
+  and `ContextMenu.hide` API methods, ideal for non-React-based applications.
 
 @reactExample ContextMenuExample
 
 @## JavaScript API: decorator
 
 The `ContextMenuTarget` decorator is available in the __@blueprintjs/core__ package.
-Make sure to review the [general usage docs for JS components](#components.usage).
+Make sure to review the [general usage docs for JS components](#blueprint.usage).
 
 The `@ContextMenuTarget` [class decorator][ts-decorator] can be applied to any `React.Component`
 class that meets the following requirements:
 
 - It defines an instance method called `renderContextMenu()` that returns a single `JSX.Element`
-(most likely a [`Menu`](#components.menu)).
+(most likely a [`Menu`](#core/components/menu)).
 - Its root element supports the `"contextmenu"` event and the `onContextMenu` prop.
 
 This is always true if the decorated class uses an intrinsic element, such as `<div>`, as its
@@ -66,7 +66,7 @@ class RightClickMe extends React.Component<{}, {}> {
 @## JavaScript API: imperative
 
 The `ContextMenu` component is available in the __@blueprintjs/core__ package.
-Make sure to review the [general usage docs for JS components](#components.usage).
+Make sure to review the [general usage docs for JS components](#blueprint.usage).
 
 The imperative API provides a single static `ContextMenu` object, enforcing the principle that only
 one context menu can be open at a time.
diff --git a/packages/core/src/components/dialog/dialog.md b/packages/core/src/components/dialog/dialog.md
index 8a1bd6a456..9f293a5e41 100644
--- a/packages/core/src/components/dialog/dialog.md
+++ b/packages/core/src/components/dialog/dialog.md
@@ -3,18 +3,18 @@
 Dialogs present content overlaid over other parts of the UI.
 
 <div class="pt-callout pt-intent-primary pt-icon-info-sign">
-<h5>Terminology note</h5>
-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
-[blocks interaction with the rest of the application](https://en.wikipedia.org/wiki/Modal_window).
-We use the term "dialog" to avoid confusion with the adjective.
+    <h5>Terminology note</h5>
+    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
+    [blocks interaction with the rest of the application](https://en.wikipedia.org/wiki/Modal_window).
+    We use the term "dialog" to avoid confusion with the adjective.
 </div>
 
 @## JavaScript API
 
 The `Dialog` component is available in the __@blueprintjs/core__ package.
-Make sure to review the [general usage docs for JS components](#components.usage).
+Make sure to review the [general usage docs for JS components](#blueprint.usage).
 
 There are two ways to render dialogs:
 
@@ -72,7 +72,7 @@ class DialogExample extends React.Component<{}, IDialogExampleState> {
 @## CSS API
 
 You can create dialogs manually using the HTML markup and `pt-dialog-*` classes below.
-However, you should use the dialog [JavaScript APIs](#components.dialog.js) whenever possible,
+However, you should use the dialog [JavaScript APIs](#core/components/dialog.javascript-api) whenever possible,
 as they automatically generate some of this markup.
 
 More examples of dialog content are shown below.
diff --git a/packages/core/src/components/editable-text/editable-text.md b/packages/core/src/components/editable-text/editable-text.md
index e6a8b78e89..ff600175d5 100644
--- a/packages/core/src/components/editable-text/editable-text.md
+++ b/packages/core/src/components/editable-text/editable-text.md
@@ -6,9 +6,10 @@ focuses it.
 The text input inherits all font styling from its ancestors, making the transition between reading
 and editing text seamless.
 
-You might use this component for inline renaming, or for an [editable multiline
-description](#components.editable.multiline). You should not use `EditableText` when a static
-always-editable `<input>` or `<textarea>` tag would suffice.
+You might use this component for inline renaming, or for an
+[editable multiline description](#core/components/editable-text.multiline-mode).
+You should not use `EditableText` when a static always-editable `<input>` or
+`<textarea>` tag would suffice.
 
 <div class="pt-callout pt-intent-danger pt-icon-error">
     <h5>Centering the component</h5>
@@ -22,7 +23,7 @@ always-editable `<input>` or `<textarea>` tag would suffice.
 @## JavaScript API
 
 The `EditableText` component is available in the __@blueprintjs/core__ package. Make sure to review
-the [general usage docs for JS components](#components.usage).
+the [general usage docs for JS components](#blueprint.usage).
 
 `EditableText` can be used like an [`input`
 element](https://facebook.github.io/react/docs/forms.html) and supports controlled or uncontrolled
@@ -34,7 +35,7 @@ the field to the last confirmed value. Neither callback is invoked if the value
 
 `EditableText` by default supports _exactly one line of text_ and will grow or shrink horizontally
 based on the length of text. See below for information on [multiline
-support](#components.editable.multiline).
+support](#core/components/editable-text.multiline-mode).
 
 @interface IEditableTextProps
 
diff --git a/packages/core/src/components/forms/checkbox.md b/packages/core/src/components/forms/checkbox.md
index 7384372060..8160609ffe 100644
--- a/packages/core/src/components/forms/checkbox.md
+++ b/packages/core/src/components/forms/checkbox.md
@@ -15,7 +15,7 @@ component supports it handily with a prop).
 @## JavaScript API
 
 The `Checkbox` component is available in the __@blueprintjs/core__ package.
-Make sure to review the [general usage docs for JS components](#components.usage).
+Make sure to review the [general usage docs for JS components](#blueprint.usage).
 
 ```tsx
 // simple usage for string labels
diff --git a/packages/core/src/components/forms/form-group.md b/packages/core/src/components/forms/form-group.md
index 95edf544d4..b6ea13d292 100644
--- a/packages/core/src/components/forms/form-group.md
+++ b/packages/core/src/components/forms/form-group.md
@@ -1,7 +1,7 @@
 @# Form groups
 
-Form groups support more complex form controls than [simple labels](#components.forms.labels.simple-labels),
-such as [control groups](#components.forms.control-group) or [`NumericInput`](#components.forms.numeric-input).
+Form groups support more complex form controls than [simple labels](#core/components/forms/label.simple-labels),
+such as [control groups](#core/components/forms/control-group) or [`NumericInput`](#core/components/forms/numeric-input).
 They also support additional helper text to aid with user navigation.
 
 - Link each label to its respective control element with a `for={#id}` attribute on the `<label>` and
diff --git a/packages/core/src/components/forms/input-group.md b/packages/core/src/components/forms/input-group.md
index 573a4eee45..ab28893355 100644
--- a/packages/core/src/components/forms/input-group.md
+++ b/packages/core/src/components/forms/input-group.md
@@ -17,8 +17,8 @@ the parent input.
     in CSS cannot accomodate buttons whose width varies due to text content. You should use icons on
     buttons instead.</p>
 
-    Conversely, the [`InputGroup`](#components.forms.input-group.js) React component _does_ support
-    arbitrary content in its right element.
+    Conversely, the [`InputGroup`](#core/components/forms/input-group.javascript-api) React
+    component _does_ support arbitrary content in its right element.
 </div>
 
 @css pt-input-group
@@ -26,13 +26,13 @@ the parent input.
 @## JavaScript API
 
 The `InputGroup` component is available in the __@blueprintjs/core__ package. Make sure to review
-the [general usage docs for JS components](#components.usage).
+the [general usage docs for JS components](#blueprint.usage).
 
 The `InputGroup` React Component encapsulates the `.pt-input-group`
-[CSS API](#components.forms.input-group.css): it supports one non-interactive icon on the left side
-and one arbitrary element on the right side. Unlike the CSS API, the React Component supports
-_content of any length_ on the right side, not just icon buttons, because it is able to measure the
-content and ensure there is always space for it.
+[CSS API](#core/components/forms/input-group.css-api): it supports one non-interactive icon on the
+left side and one arbitrary element on the right side. Unlike the CSS API, the React Component
+supports _content of any length_ on the right side, not just icon buttons, because it is able to
+measure the content and ensure there is always space for it.
 
 `InputGroup` can be used just like a standard React `input` element, in controlled or uncontrolled
 fashion. In addition to its own content props, it supports all valid props for HTML `input` elements
diff --git a/packages/core/src/components/forms/input.md b/packages/core/src/components/forms/input.md
index 06f6d111a9..1487c5d642 100644
--- a/packages/core/src/components/forms/input.md
+++ b/packages/core/src/components/forms/input.md
@@ -1,8 +1,8 @@
 @# Text inputs
 
-Use the `pt-input` class on an `input[type="text"]`. You should also specify `dir="auto"` [to better
-support RTL languages](http://www.w3.org/International/questions/qa-html-dir#dirauto) (in all
-browsers except Internet Explorer).
+Use the `pt-input` class on an `input[type="text"]`. You should also specify `dir="auto"`
+[to better support RTL languages](http://www.w3.org/International/questions/qa-html-dir#dirauto)
+(in all browsers except Internet Explorer).
 
 @css pt-input
 
diff --git a/packages/core/src/components/forms/numeric-input.md b/packages/core/src/components/forms/numeric-input.md
index eaa8928430..4618939f04 100644
--- a/packages/core/src/components/forms/numeric-input.md
+++ b/packages/core/src/components/forms/numeric-input.md
@@ -54,14 +54,14 @@ trigged, the field will be cleared.
 
 The `NumericInput` component is available in the __@blueprintjs/core__ package.
 Make sure to review the [general usage docs for JS
-components](#components.usage).
+components](#blueprint.usage).
 
 @interface INumericInputProps
 
 @### Responsive numeric inputs
 
 `NumericInput` can be styled with the same set of CSS classes that modify
-regular [control groups](#components.forms.input-group). The most appropriate
+regular [control groups](#core/components/forms/control-group). The most appropriate
 such modifier for `NumericInput` is `pt-fill`, which when passed as a
 `className` will make the component expand to fill all available width.
 
diff --git a/packages/core/src/components/forms/radio.md b/packages/core/src/components/forms/radio.md
index c7152eb368..a08ff4055e 100644
--- a/packages/core/src/components/forms/radio.md
+++ b/packages/core/src/components/forms/radio.md
@@ -14,7 +14,7 @@ element.
 @## JavaScript API
 
 The `Radio` and `RadioGroup` components are available in the __@blueprintjs/core__ package. Make
-sure to review the [general usage docs for JS components](#components.usage).
+sure to review the [general usage docs for JS components](#blueprint.usage).
 
 Typically, radio buttons are used in a group to choose one option from several, similar to how a
 `<select>` tag contains several `<option>` tags. As such, you can use the `RadioGroup` component
diff --git a/packages/core/src/components/forms/select.md b/packages/core/src/components/forms/select.md
index 48aebbdadc..fcd3ee9d62 100644
--- a/packages/core/src/components/forms/select.md
+++ b/packages/core/src/components/forms/select.md
@@ -4,8 +4,8 @@ Styling `<select>` tags requires a wrapper element to customize the dropdown car
 modifiers on the wrapper and attribute modifiers directly on the `<select>`.
 
 <div class="pt-callout pt-intent-primary pt-icon-info-sign">
-    Check out [dropdown menus](#components.menu.js.dropdown) for a simple JavaScript alternative
-    to the `<select>` tag.
+    Check out [dropdown menus](#core/components/menu.dropdown-menus) for a simple JavaScript
+    alternative to the `<select>` tag.
 </div>
 
 @css pt-select
diff --git a/packages/core/src/components/forms/switch.md b/packages/core/src/components/forms/switch.md
index aa4748d26c..0d88cbdfc9 100644
--- a/packages/core/src/components/forms/switch.md
+++ b/packages/core/src/components/forms/switch.md
@@ -1,6 +1,6 @@
 @# Switches
 
-A switch is simply an alternate appearance for a [checkbox](#components.forms.checkbox) that
+A switch is simply an alternate appearance for a [checkbox](#core/components/forms/checkbox) that
 simulates on/off instead of checked/unchecked.
 
 @## CSS API
@@ -10,7 +10,7 @@ simulates on/off instead of checked/unchecked.
 @## JavaScript API
 
 The `Switch` component is available in the __@blueprintjs/core__ package.
-Make sure to review the [general usage docs for JS components](#components.usage).
+Make sure to review the [general usage docs for JS components](#blueprint.usage).
 
 ```tsx
 <Switch checked={this.state.isPublic} label="Public" onChange={this.handlePublicChange} />
diff --git a/packages/core/src/components/menu/menu.md b/packages/core/src/components/menu/menu.md
index c79724e4f4..1bc7e96544 100644
--- a/packages/core/src/components/menu/menu.md
+++ b/packages/core/src/components/menu/menu.md
@@ -5,13 +5,13 @@ Menus display lists of interactive items.
 @## JavaScript API
 
 The `Menu`, `MenuItem`, and `MenuDivider` components are available in the __@blueprintjs/core__
-package. Make sure to review the [general usage docs for JS components](#components.usage).
+package. Make sure to review the [general usage docs for JS components](#blueprint.usage).
 
 The `Menu` API includes three stateless React components:
 
-- [`Menu`](#components.menu.js.menu)
-- [`MenuItem`](#components.menu.js.menu-item)
-- [`MenuDivider`](#components.menu.js.menu-divider)
+- [`Menu`](#core/components/menu.menu)
+- [`MenuItem`](#core/components/menu.menu-item)
+- [`MenuDivider`](#core/components/menu.menu-divider)
 
 @### Sample usage
 
@@ -107,7 +107,7 @@ React.createElement(MenuItem, {
 <div class="pt-callout pt-intent-warning pt-icon-warning-sign">
     <h5>JavaScript only</h5>
     Submenus are only supported in the React components. They cannot be created with CSS alone because
-    they rely on the [`Popover`](#components.popover) component for positioning and transitions.
+    they rely on the [`Popover`](#core/components/popover) component for positioning and transitions.
 </div>
 
 @### Dropdown menus
@@ -123,9 +123,9 @@ element as the `content` property of a `Popover`:
 
 When the user clicks a menu item that is not disabled and is not part of a submenu, the popover is
 automatically dismissed (in other words, the menu closes). This is because the `MenuItem` component
-adds the `pt-popover-dismiss` class to these items by default (see [Popover JavaScript
-API](#components.popover.js) for more information). If you want to opt out of this behavior, you can
-add the `shouldDismissPopover` prop to a `MenuItem`.
+adds the `pt-popover-dismiss` class to these items by default (see
+[Popover JavaScript API](#core/components/popover) for more information). If you want to opt out of
+this behavior, you can add the `shouldDismissPopover` prop to a `MenuItem`.
 
 Notice that selecting the menu item labeled "Table" in the example below does not automatically
 dismiss the `Popover`. Selecting other menu items does dismiss the popover.
@@ -135,8 +135,8 @@ dismiss the `Popover`. Selecting other menu items does dismiss the popover.
 @## CSS API
 
 Menus can be constructed manually using the HTML markup and `pt-menu-*` classes below. However, you
-should use the menu [React components](#components.menu.js) instead wherever possible, as they
-abstract away the tedious parts of implementing a menu.
+should use the menu [React components](#core/components/menu.javscript-api) instead wherever possible,
+as they abstract away the tedious parts of implementing a menu.
 
 - Begin with a `ul.pt-menu`. Each `li` child denotes a single entry in the menu.
 
diff --git a/packages/core/src/components/non-ideal-state/non-ideal-state.md b/packages/core/src/components/non-ideal-state/non-ideal-state.md
index 5f6a406d72..36432db6cf 100644
--- a/packages/core/src/components/non-ideal-state/non-ideal-state.md
+++ b/packages/core/src/components/non-ideal-state/non-ideal-state.md
@@ -18,7 +18,7 @@ In this case, a good practice is to add a call to action directing the user what
 
 @## CSS API
 
-You may use the provided styles without using the [React component](#components.nonidealstate.js).
+You may use the provided styles without using the React component described below.
 See the example below.
 
 @css pt-non-ideal-state
@@ -26,7 +26,7 @@ See the example below.
 @## JavaScript API
 
 The `NonIdealState` component is available in the __@blueprintjs/core__ package.
-Make sure to review the [general usage docs for JS components](#components.usage).
+Make sure to review the [general usage docs for JS components](#blueprint.usage).
 
 A `NonIdealState` component's props determine the content displayed. The content should
 reflect the situation the user is in: no files found, an empty document, a 404 error, etc.
diff --git a/packages/core/src/components/overlay/overlay.md b/packages/core/src/components/overlay/overlay.md
index f58521bd32..b6a5c103e3 100644
--- a/packages/core/src/components/overlay/overlay.md
+++ b/packages/core/src/components/overlay/overlay.md
@@ -3,7 +3,7 @@
 `Overlay` is a generic low-level component for rendering content _above_ its siblings, or above the
 entire application.
 
-It combines a [`Portal`](#components.portal.js), which allows the JSX children to be rendered at a
+It combines a [`Portal`](#core/components/portal), which allows the JSX children to be rendered at a
 different place in the DOM tree, with a
 [`CSSTransitionGroup`](https://facebook.github.io/react/docs/animation.html) to support elegant
 enter and leave transitions.
@@ -11,7 +11,7 @@ enter and leave transitions.
 An optional "backdrop" element can be rendered behind the overlaid children to provide modal
 behavior, whereby the overlay prevents interaction with anything behind it.
 
-`Overlay` is the backbone of the [`Dialog`](#components.dialog) component. In most use cases, the
+`Overlay` is the backbone of the [`Dialog`](#core/components/dialog) component. In most use cases, the
 `Dialog` component should be sufficient; only use `Overlay` directly if an existing component _truly
 does not_ meet your needs.
 
@@ -20,7 +20,7 @@ does not_ meet your needs.
 @## JavaScript API
 
 The `Overlay` component is available in the __@blueprintjs/core__ package.
-Make sure to review the [general usage docs for JS components](#components.usage).
+Make sure to review the [general usage docs for JS components](#blueprint.usage).
 
 `Overlay` is a controlled component that renders its children only when `isOpen={true}`. The
 optional backdrop element will be inserted before the children if `hasBackdrop={true}`.
diff --git a/packages/core/src/components/popover/popover.md b/packages/core/src/components/popover/popover.md
index 27877322f3..213ca06e46 100644
--- a/packages/core/src/components/popover/popover.md
+++ b/packages/core/src/components/popover/popover.md
@@ -7,7 +7,7 @@ Popovers display floating content next to a target element.
 @## JavaScript API
 
 The `Popover` component is available in the __@blueprintjs/core__ package.
-Make sure to review the [general usage docs for JS components](#components.usage).
+Make sure to review the [general usage docs for JS components](#blueprint.usage).
 
 When creating a popover, you must specify both:
 - its _content_, by setting the `content` prop, and
@@ -23,8 +23,8 @@ HTML in the component's place.
     <h5>Button targets</h5>
     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`](#components.button.js.anchor-button) instead.
-    See the [callout here](#components.button.js) for more details.
+    triggers a popover, you should use [`AnchorButton`](#core/components/button.anchor-button) instead.
+    See the [callout here](#core/components/button.javascript-api) for more details.
 </div>
 
 ```tsx
@@ -146,7 +146,7 @@ target or the rest of the document, but by default, a user interacting with a po
 does __not__ close the popover.
 
 To enable click-to-close behavior on an element inside a popover, simply add the class
-`pt-popover-dismiss` to that element. The "Dismiss" button in the demo [above](#components.popover)
+`pt-popover-dismiss` to that element. The "Dismiss" button in the demo [above](#core/components/popover)
 has this class. To enable this behavior on the entire popover, pass the
 `popoverClassName="pt-popover-dismiss"` prop.
 
@@ -173,7 +173,7 @@ and an error is thrown if used otherwise.
 
 By default, the popover backdrop is invisible, but you can easily add your own styles to
 `.pt-popover-backdrop` to customize the appearance of the backdrop (for example, you could give it
-a translucent background color, like the backdrop for the [`Dialog`](#components.dialog) component).
+a translucent background color, like the backdrop for the [`Dialog`](#core/components/dialog) component).
 
 The backdrop element has the same opacity fade transition as the `Dialog` backdrop.
 
@@ -212,7 +212,7 @@ user clicking or hovering over something. For example, a minimal popover is usef
 typeahead menus where the menu appears almost instantly after the user starts typing.
 
 Minimal popovers are also useful for context menus that require quick enter and leave animations to
-support fast workflows. You can see an example in the [context menus](#components.context-menu)
+support fast workflows. You can see an example in the [context menus](#core/components/context-menu)
 documentation.
 
 @### Dark theme
diff --git a/packages/core/src/components/portal/portal.md b/packages/core/src/components/portal/portal.md
index 8afcafcc9a..f80d1579cb 100644
--- a/packages/core/src/components/portal/portal.md
+++ b/packages/core/src/components/portal/portal.md
@@ -1,19 +1,19 @@
 @# Portals
 
 The `Portal` component renders its children into a new "subtree" outside of the current component
-hierarchy. It is essential piece of [`Overlay`](#components.overlay), responsible for ensuring that
+hierarchy. It is essential piece of [`Overlay`](#core/components/overlay), responsible for ensuring that
 the overlay contents cover the application below. In most cases you do not need to use a `Portal`
 directly; this documentation is provided simply for reference.
 
 @## JavaScript API
 
 The `Portal` component is available in the __@blueprintjs/core__ package. Make sure to review the
-[general usage docs for JS components](#components.usage).
+[general usage docs for JS components](#blueprint.usage).
 
 The `Portal` component functions like a declarative `appendChild()`, or jQuery's `$.fn.appendTo()`.
 The children of a `Portal` component are appended to the `<body>` element.
 
-`Portal` is used inside [`Overlay`](#components.overlay) to actually overlay the content on the
+`Portal` is used inside [`Overlay`](#core/components/overlay) to actually overlay the content on the
 application.
 
 <div class="pt-callout pt-intent-warning pt-icon-warning-sign">
diff --git a/packages/core/src/components/progress/progress-bar.md b/packages/core/src/components/progress/progress-bar.md
index a81c5b665f..4bd86d9c21 100644
--- a/packages/core/src/components/progress/progress-bar.md
+++ b/packages/core/src/components/progress/progress-bar.md
@@ -16,13 +16,13 @@ Omitting `width` will result in an "indeterminate" progress meter that fills the
 @## JavaScript API
 
 The `ProgressBar` component is available in the __@blueprintjs/core__ package.
-Make sure to review the [general usage docs for JS components](#components.usage).
+Make sure to review the [general usage docs for JS components](#blueprint.usage).
 
 A `ProgressBar` is a simple stateless component that renders the appropriate HTML markup.
 It supports a `value` prop between 0 and 1 that determines the width of the progress meter.
 Omitting `value` will result in an "indeterminate" progress meter that fills the entire bar.
 
-Note that the CSS modifiers described in the [CSS API](#components.progress.bar.css)
+Note that the CSS modifiers described in the [CSS API](#core/components/progress/progress-bar.css-api)
 are supported via the `className` prop.
 
 @interface IProgressBarProps
diff --git a/packages/core/src/components/spinner/spinner.md b/packages/core/src/components/spinner/spinner.md
index c865d2dfc5..e166cc4303 100644
--- a/packages/core/src/components/spinner/spinner.md
+++ b/packages/core/src/components/spinner/spinner.md
@@ -6,14 +6,14 @@ Spinners indicate indeterminate progress.
 
 You can create spinners manually by inserting their whole markup into your HTML.
 Spinners created via markup use same modifier classes as the
-[React `Spinner` component](#components.progress.spinner.js).
+[React `Spinner` component](#core/components/progress/spinner.javascript-api).
 
 @css pt-spinner
 
 @## JavaScript API
 
 The `Spinner` component is available in the __@blueprintjs/core__ package.
-Make sure to review the [general usage docs for JS components](#components.usage).
+Make sure to review the [general usage docs for JS components](#blueprint.usage).
 
 A `Spinner` is a simple stateless component that renders HTML/SVG markup.
 It supports a `value` prop between 0 and 1 that determines how much of the track is filled by the
@@ -21,7 +21,7 @@ head. When this prop is defined, the spinner head will not spin but it will smoo
 `value` updates. Omitting `value` will result in an "indeterminate" spinner where the head spins
 indefinitely (this is the default appearance).
 
-Note that the CSS modifiers described in the [CSS API](#components.progress.spinner.css)
+Note that the CSS modifiers described in the [CSS API](#core/components/progress/spinner.css-api)
 are supported via the `className` prop.
 
 <div class="pt-callout pt-intent-warning pt-icon-warning-sign">
diff --git a/packages/core/src/components/tabs/tabs.md b/packages/core/src/components/tabs/tabs.md
index 44febc3212..58ba78ce6e 100644
--- a/packages/core/src/components/tabs/tabs.md
+++ b/packages/core/src/components/tabs/tabs.md
@@ -3,12 +3,12 @@
 <div class="pt-callout pt-intent-danger pt-icon-error">
   <h5>The `Tabs` JavaScript API is deprecated since v1.11.0</h5>
   The following `Tabs` React components been deprecated in v1.11.0 favor of the [simpler and more flexible
-  `Tabs2` API](#components.tabs2). `Tabs2` will replace `Tabs` in version 2.0. The CSS API has not been changed.
+  `Tabs2` API](#core/components/tabs2). `Tabs2` will replace `Tabs` in version 2.0. The CSS API has not been changed.
 </div>
 
 @## CSS API
 
-In addition to the [JavaScript API](#components.tabs.js), Blueprint also offers tab styles with the
+In addition to the [JavaScript API](#core/components/tabs2.javascript-api), Blueprint also offers tab styles with the
 class `pt-tabs`. You should add the proper accessibility attributes (`role`, `aria-selected`, and
 `aria-hidden`) if you choose to implement tabs with CSS.
 
@@ -21,11 +21,11 @@ JavaScript component does this by default).
 @## Deprecated JavaScript API
 
 <div class="pt-callout pt-intent-danger pt-icon-error">
-    These components are deprecated since v1.11.0. Please use the [`Tabs2` API](#components.tabs2) instead.
+    These components are deprecated since v1.11.0. Please use the [`Tabs2` API](#core/components/tabs2) instead.
 </div>
 
 The `Tabs`, `TabList`, `Tab`, and `TabPanel` components are available in the __@blueprintjs/core__
-package. Make sure to review the [general usage docs for JS components](#components.usage).
+package. Make sure to review the [general usage docs for JS components](#blueprint.usage).
 
 Four components are necessary to render tabs: `Tabs`, `TabList`, `Tab`, and `TabPanel`.
 
@@ -69,7 +69,7 @@ between these approaches.
 @### Tabs props
 
 <div class="pt-callout pt-intent-danger pt-icon-error">
-    This component is deprecated since v1.11.0. Please use the [`Tabs2` API](#components.tabs2) instead.
+    This component is deprecated since v1.11.0. Please use the [`Tabs2` API](#core/components/tabs2) instead.
 </div>
 
 @interface ITabsProps
@@ -77,7 +77,7 @@ between these approaches.
 @### Tab props
 
 <div class="pt-callout pt-intent-danger pt-icon-error">
-    This component is deprecated since v1.11.0. Please use the [`Tabs2` API](#components.tabs2) instead.
+    This component is deprecated since v1.11.0. Please use the [`Tabs2` API](#core/components/tabs2) instead.
 </div>
 
 @interface ITabProps
diff --git a/packages/core/src/components/tabs2/tabs2.md b/packages/core/src/components/tabs2/tabs2.md
index 28bc662753..82f1cbb2e6 100644
--- a/packages/core/src/components/tabs2/tabs2.md
+++ b/packages/core/src/components/tabs2/tabs2.md
@@ -4,7 +4,7 @@ Tabs allow the user to switch between panels of content.
 
 @## CSS API
 
-In addition to the [JavaScript API](#components.tabs.js), Blueprint also offers tab styles with the
+In addition to the [JavaScript API](#core/components/tabs2.javascript-api), Blueprint also offers tab styles with the
 class `pt-tabs`. You should add the proper accessibility attributes (`role`, `aria-selected`, and
 `aria-hidden`) if you choose to implement tabs with CSS.
 
@@ -20,7 +20,8 @@ JavaScript component does this by default).
   <h5>Original `Tabs` API is deprecated since v1.11.0</h5>
   The original `Tabs` API has been deprecated in v1.11.0 favor of the simpler and more flexible
   `Tabs2` API described below. Documentation for the deprecated components can be found
-  [further below](#components.tabs.deprecated). This API will replace the deprecated one in v2.0.
+  [further below](#core/components/tabs.deprecated-javascript-api).
+  This API will replace the deprecated one in v2.0.
 </div>
 
 <div class="pt-callout pt-intent-primary pt-icon-info-sign">
@@ -34,7 +35,7 @@ JavaScript component does this by default).
 </div>
 
 The `Tabs2` and `Tab2` components are available in the __@blueprintjs/core__
-package. Make sure to review the [general usage docs for JS components](#components.usage).
+package. Make sure to review the [general usage docs for JS components](#blueprint.usage).
 
 ```tsx
 import { Tab2, Tabs2 } from "@blueprintjs/core";
diff --git a/packages/core/src/components/tag/tag.md b/packages/core/src/components/tag/tag.md
index 60324c8f45..439007f8ce 100644
--- a/packages/core/src/components/tag/tag.md
+++ b/packages/core/src/components/tag/tag.md
@@ -22,7 +22,7 @@ will adapt to its container's background color.
 @## JavaScript API
 
 The `Tag` component is available in the __@blueprintjs/core__ package.
-Make sure to review the [general usage docs for JS components](#components.usage).
+Make sure to review the [general usage docs for JS components](#blueprint.usage).
 
 Tag components render `.pt-tag` elements with optional close buttons. Provide tag content as `children`.
 
diff --git a/packages/core/src/components/text/_text.scss b/packages/core/src/components/text/text.md
similarity index 53%
rename from packages/core/src/components/text/_text.scss
rename to packages/core/src/components/text/text.md
index fa5f01ba69..f031964a29 100644
--- a/packages/core/src/components/text/_text.scss
+++ b/packages/core/src/components/text/text.md
@@ -1,28 +1,15 @@
-// Copyright 2017 Palantir Technologies, Inc. All rights reserved.
-// Licensed under the BSD-3 License as modified (the “License”); you may obtain a copy
-// of the license at https://github.com/palantir/blueprint/blob/master/LICENSE
-// and https://github.com/palantir/blueprint/blob/master/PATENTS
-
-/*
-Text
+@# Text
 
 The `Text` component adds accessible overflow behavior to a line of text by
 conditionally adding the title attribute and truncating with an ellipsis when content overflows its container.
 
-Styleguide components.text
-*/
-
-/*
-JavaScript API
+@##JavaScript API
 
 The `Text` component is available in the __@blueprintjs/core__ package.
-Make sure to review the [general usage docs for JS components](#components.usage).
+Make sure to review the [general usage docs for JS components](#blueprint.usage).
 
 `Text` accepts and renders arbitrary children. It is intended that these children render as text.
 
 @interface ITextProps
 
 @react-example TextExample
-
-Styleguide components.text.js
-*/
diff --git a/packages/core/src/components/toast/toast.md b/packages/core/src/components/toast/toast.md
index 0a08f0c8ab..6891192ae5 100644
--- a/packages/core/src/components/toast/toast.md
+++ b/packages/core/src/components/toast/toast.md
@@ -8,7 +8,7 @@ Similarly, focusing the toast (for example, by hitting the `tab` key) halts the
 
 You can add one additional action button to a toast. You might use this to undo the user's action, for example.
 
-You can also apply the same visual intent styles to `Toast`s that you can to [`Button`s](components.button.css).
+You can also apply the same visual intent styles to `Toast`s that you can to [`Button`s](#core/components/button.css-api).
 
 Toasts can be configured to appear at either the top or the bottom of an application window, and it is possible to
 have more than one toast onscreen at a time.
@@ -18,7 +18,7 @@ have more than one toast onscreen at a time.
 @## JavaScript API
 
 The `Toast` and `Toaster` components are available in the __@blueprintjs/core__ package.
-Make sure to review the [general usage docs for JS components](#components.usage).
+Make sure to review the [general usage docs for JS components](#blueprint.usage).
 
 The `Toaster` component provides the static `create` method that returns a new `Toaster` instance, rendered into an
 element attached to `<body>`. (You can also specify the element to render into if desired.) A `Toaster` instance
@@ -92,12 +92,12 @@ Updating a key that does not exist is effectively a no-op.
 @### React component
 
 The `Toaster` React component is a stateful container for a single list of toasts. Internally, it
-uses [`Overlay`](#components.overlay) to manage children and transitions. It can be vertically
+uses [`Overlay`](#core/components/overlay) to manage children and transitions. It can be vertically
 aligned along the top or bottom edge of its container (new toasts will slide in from that edge) and
 horizontally aligned along the left edge, center, or right edge of its container.
 
-You should use [`Toaster.create`](#components.toaster.js.create), rather than using the `Toaster`
-component API directly in React, to avoid having to use `ref` to access the instance.
+You should use [`Toaster.create`](#core/components/toast.static-method), rather than using the
+`Toaster` component API directly in React, to avoid having to use `ref` to access the instance.
 
 ```tsx
 import { Button, Position, Toaster } from "@blueprintjs/core";
diff --git a/packages/core/src/components/tooltip/tooltip.md b/packages/core/src/components/tooltip/tooltip.md
index b3cbed575e..e4724e1c42 100644
--- a/packages/core/src/components/tooltip/tooltip.md
+++ b/packages/core/src/components/tooltip/tooltip.md
@@ -7,7 +7,7 @@ Tooltips display a small string of text next to a target element.
 @## JavaScript API
 
 The `Tooltip` component is available in the __@blueprintjs/core__ package.
-Make sure to review the [general usage docs for JS components](#components.usage).
+Make sure to review the [general usage docs for JS components](#blueprint.usage).
 
 When creating a tooltip, you must specify both:
 - its _content_, by setting the `content` prop, and
@@ -21,8 +21,8 @@ but you should keep it simple. If you need more space, consider using a popover
 <div class="pt-callout pt-intent-warning pt-icon-warning-sign">
     <h5>Button targets</h5>
     Buttons make great tooltip targets, but the `disabled` attribute will prevent all events so the enclosing `Tooltip`
-    will not know when to respond. Use [`AnchorButton`](#components.button.js.anchor-button) instead;
-    see the [callout here](#components.button.js) for more details.
+    will not know when to respond. Use [`AnchorButton`](#ore/components/button.anchor-button) instead;
+    see the [callout here](#ore/components/button.javascript-api) for more details.
 </div>
 
 @interface ITooltipProps
@@ -30,7 +30,7 @@ but you should keep it simple. If you need more space, consider using a popover
 @### Controlled mode
 
 The `Tooltip` component supports controlled mode in exactly the same way the `Popover` component
-does. Please refer to the [controlled mode documentation](#components.popover.js.controlled) for
+does. Please refer to the [controlled mode documentation](#core/components/popover.controlled-mode) for
 `Popover` for details.
 
 @### Inline tooltips
diff --git a/packages/core/src/components/tree/tree.md b/packages/core/src/components/tree/tree.md
index 223ef3ba71..d282c8c22d 100644
--- a/packages/core/src/components/tree/tree.md
+++ b/packages/core/src/components/tree/tree.md
@@ -4,7 +4,7 @@ Trees display hierarchical data.
 
 @## CSS API
 
-See below for the [JavaScript API](#components.tree.js) for the `Tree` React component. However, you
+See below for the [JavaScript API](#core/components/tree.javascript-api) for the `Tree` React component. However, you
 may also use the provided styles by themselves, without using the component.
 
 <div class="pt-callout pt-intent-primary pt-icon-info-sign">
@@ -17,10 +17,10 @@ may also use the provided styles by themselves, without using the component.
 @## JavaScript API
 
 The `Tree` component is available in the __@blueprintjs/core__ package.
-Make sure to review the [general usage docs for JS components](#components.usage).
+Make sure to review the [general usage docs for JS components](#blueprint.usage).
 
 `Tree` is a stateless component. Its contents are dictated by the `contents` prop, which is an array
-of `ITreeNode`s (see [below](#components.tree.js.treenode)). The tree is multi-rooted if `contents`
+of `ITreeNode`s (see [below](#components/tree.tree-node-interface)). The tree is multi-rooted if `contents`
 contains more than one top-level object.
 
 A variety of interaction callbacks are also exposed as props. All interaction callbacks supply a
diff --git a/packages/core/src/docs/colors.md b/packages/core/src/docs/colors.md
index a972bb9832..2be33b5f1d 100644
--- a/packages/core/src/docs/colors.md
+++ b/packages/core/src/docs/colors.md
@@ -8,7 +8,7 @@ the `Blueprint.Colors` object. In CommonJS, you may `import { Colors } from "@bl
 Black, white and everything in between. The gray scale should be used for
 the main UI frame: containers, headers, sections, boxes, etc.
 If you need to call attention to a particular element (buttons, icons, tooltips, etc.),
-use one of the [core colors](#colors.core).
+use one of the [core colors](#colors.core-colors).
 
 @reactDocs GrayscalePalette
 
@@ -38,7 +38,7 @@ Extended colors should typically be reserved for data visualizations: any time
 you need to represent data of some sort, you can use these.
 These colors are less strict on [WCAG 2.0](https://www.w3.org/TR/WCAG20/)
 accessibility standards and should therefore not be used for typical user
-interface design — take a look at [core colors](#colors.core) instead.
+interface design — take a look at [core colors](#colors.core-colors) instead.
 
 @reactDocs ExtendedColorsPalette
 
diff --git a/packages/core/src/docs/variables.md b/packages/core/src/docs/variables.md
index e53fcdcb49..b45271d939 100644
--- a/packages/core/src/docs/variables.md
+++ b/packages/core/src/docs/variables.md
@@ -68,7 +68,7 @@ without writing much CSS. Here are some resources for learning flexbox:
 @## Layering
 
 Blueprint provides variables for three z-index layers. This should be enough for most use cases,
-especially if you make correct use of [stacking context][MDN]. [Overlay](#components.overlay)
+especially if you make correct use of [stacking context][MDN]. [Overlay](#core/components/overlay)
 components such as dialogs and popovers use these z-index values to configure their stacking
 contexts.
 
diff --git a/packages/datetime/src/_daterangeinput.scss b/packages/datetime/src/_daterangeinput.scss
deleted file mode 100644
index 4ab875f8c3..0000000000
--- a/packages/datetime/src/_daterangeinput.scss
+++ /dev/null
@@ -1,45 +0,0 @@
-// Copyright 2017 Palantir Technologies, Inc. All rights reserved.
-// Licensed under the BSD-3 License as modified (the “License”); you may obtain a copy
-// of the license at https://github.com/palantir/blueprint/blob/master/LICENSE
-// and https://github.com/palantir/blueprint/blob/master/PATENTS
-
-@import "../../core/src/common/variables";
-
-/*
-Date range input
-
-The `DateRangeInput` component is a [control group](#components.forms.control-group) composed of two
-[input groups](#components.forms.input-group). It shows a
-[`DateRangePicker`](#components.datetime.daterangepicker) in a [`Popover`](#components.popover) on focus.
-
-Use this component in forms where the user must enter a date range.
-
-@react-example DateRangeInputExample
-
-Weight: 3
-
-Styleguide components.datetime.daterangeinput
-*/
-
-/*
-JavaScript API
-
-The `DateRangeInput` component is available in the __@blueprintjs/datetime__ package.
-Make sure to review the [general usage docs for date & time components](#components.datetime).
-
-Use the `onChange` function to listen for changes to the selected date. Use `onError` to listen for
-invalid entered dates or date ranges.
-
-You can control the selected date by setting the `value` prop, or use the component in uncontrolled
-mode and specify an initial date by setting `defaultValue`.
-
-```
-import { DateRangeInput } from "@blueprintjs/datetime";
-
-<DateRangeInput value={[this.state.startDate, this.state.endDate]} onChange={this.handleChange} />
-```
-
-@interface IDateRangeInputProps
-
-Styleguide components.datetime.daterangeinput.js
-*/
diff --git a/packages/datetime/src/blueprint-datetime.scss b/packages/datetime/src/blueprint-datetime.scss
index db1fe400c7..d625ad3044 100644
--- a/packages/datetime/src/blueprint-datetime.scss
+++ b/packages/datetime/src/blueprint-datetime.scss
@@ -42,7 +42,6 @@ Styleguide components.datetime
 */
 
 @import "datepicker";
-@import "daterangeinput";
 @import "daterangepicker";
 @import "timepicker";
 @import "datetimepicker";
diff --git a/packages/datetime/src/dateinput.md b/packages/datetime/src/dateinput.md
index 4c89e0efdf..7554d22679 100644
--- a/packages/datetime/src/dateinput.md
+++ b/packages/datetime/src/dateinput.md
@@ -1,7 +1,7 @@
 @# Date input
 
-The `DateInput` component is an [input group](#components.forms.input-group) with a calendar button
-that shows a [`DatePicker`](#components.datetime.datepicker) in a [`Popover`](#components.popover).
+The `DateInput` component is an [input group](#core/components/forms/input-group) with a calendar button
+that shows a [`DatePicker`](#datetime/datepicker) in a [`Popover`](#core/components/popover).
 
 Use the `onChange` function to listen for changes to the selected date. Use `onError` to listen for
 invalid entered dates.
@@ -16,7 +16,7 @@ Use this component in forms where the user must enter a date.
 @## JavaScript API
 
 The `DateInput` component is available in the __@blueprintjs/datetime__ package.
-Make sure to review the [general usage docs for date & time components](#components.datetime).
+Make sure to review the [general usage docs for JS components](#blueprint.usage).
 
 ```tsx
 import { DateInput } from "@blueprintjs/datetime";
diff --git a/packages/datetime/src/datepicker.md b/packages/datetime/src/datepicker.md
index 7f2b92315f..e4993c1f46 100644
--- a/packages/datetime/src/datepicker.md
+++ b/packages/datetime/src/datepicker.md
@@ -20,7 +20,7 @@ for an example of defining `localeUtils` functions using Moment.js.
 @## JavaScript API
 
 The `DatePicker` component is available in the __@blueprintjs/datetime__ package.
-Make sure to review the [general usage docs for date & time components](#components.datetime).
+Make sure to review the [general usage docs for JS components](#blueprint.usage).
 
 Some props are managed by the `DatePicker` component, while others are passed
 to the **react-day-picker** library. These passed props are documented in full
diff --git a/packages/datetime/src/daterangeinput.md b/packages/datetime/src/daterangeinput.md
new file mode 100644
index 0000000000..18a3d1efc9
--- /dev/null
+++ b/packages/datetime/src/daterangeinput.md
@@ -0,0 +1,28 @@
+@# Date range input
+
+The `DateRangeInput` component is a [control group](#core/components/forms/control-group) composed of two
+[input groups](#core/components/forms/input-group). It shows a
+[`DateRangePicker`](#datetime/daterangepicker) in a [`Popover`](#core/components/popover) on focus.
+
+Use this component in forms where the user must enter a date range.
+
+@react-example DateRangeInputExample
+
+@## JavaScript API
+
+The `DateRangeInput` component is available in the __@blueprintjs/datetime__ package.
+Make sure to review the [general usage docs for JS components](#blueprint.usage).
+
+Use the `onChange` function to listen for changes to the selected date. Use `onError` to listen for
+invalid entered dates or date ranges.
+
+You can control the selected date by setting the `value` prop, or use the component in uncontrolled
+mode and specify an initial date by setting `defaultValue`.
+
+```
+import { DateRangeInput } from "@blueprintjs/datetime";
+
+<DateRangeInput value={[this.state.startDate, this.state.endDate]} onChange={this.handleChange} />
+```
+
+@interface IDateRangeInputProps
diff --git a/packages/datetime/src/daterangepicker.md b/packages/datetime/src/daterangepicker.md
index 06a1c1d967..4c2df00649 100644
--- a/packages/datetime/src/daterangepicker.md
+++ b/packages/datetime/src/daterangepicker.md
@@ -19,7 +19,7 @@ Semantically:
 @## JavaScript API
 
 The `DateRangePicker` component is available in the __@blueprintjs/datetime__ package.
-Make sure to review the [general usage docs for date & time components](#components.datetime).
+Make sure to review the [general usage docs for JS components](#blueprint.usage).
 
 ```tsx
 import { DateRangePicker } from "@blueprintjs/datetime";
diff --git a/packages/datetime/src/datetimepicker.md b/packages/datetime/src/datetimepicker.md
index ba95722457..2320b1e619 100644
--- a/packages/datetime/src/datetimepicker.md
+++ b/packages/datetime/src/datetimepicker.md
@@ -1,7 +1,7 @@
 @# Date time picker
 
-A combined component consisting of a [`DatePicker`](#components.datetime.datepicker)
-and a [`TimePicker`](#components.datetime.timepicker).
+A combined component consisting of a [`DatePicker`](#datetime/datepicker)
+and a [`TimePicker`](#datetime/timepicker).
 
 Use the `onChange` prop to listen for changes to the selected date and time. You can control the
 selected date and time by setting the `value` prop, or use the component in uncontrolled
@@ -16,7 +16,7 @@ You can pass props to the inner `DatePicker` and `TimePicker` components using
 @## JavaScript API
 
 The `DateTimePicker` component is available in the __@blueprintjs/datetime__ package.
-Make sure to review the [general usage docs for date & time components](#components.datetime).
+Make sure to review the [general usage docs for JS components](#blueprint.usage).
 
 ```tsx
 import { DateTimePicker } from "@blueprintjs/datetime";
diff --git a/packages/datetime/src/index.md b/packages/datetime/src/index.md
index f4e819e194..66270bf95b 100644
--- a/packages/datetime/src/index.md
+++ b/packages/datetime/src/index.md
@@ -6,23 +6,23 @@ reference: datetime
 
 The __@blueprintjs/datetime__ NPM package provides several components for interacting with dates and times:
 
-- [`DatePicker`](#components.datetime.datepicker) for selecting a single date (day, month, year).
+- [`DatePicker`](#datetime/datepicker) for selecting a single date (day, month, year).
 
-- [`DateRangePicker`](#components.datetime.daterangepicker) for selecting date ranges.
+- [`DateRangePicker`](#datetime/daterangepicker) for selecting date ranges.
 
-- [`TimePicker`](#components.datetime.timepicker) for selecting a time (hour, minute, second,
+- [`TimePicker`](#datetime/timepicker) for selecting a time (hour, minute, second,
   millisecond).
 
-- [`DateTimePicker`](#components.datetime.datetimepicker), which composes `DatePicker` and
+- [`DateTimePicker`](#datetime/datetimepicker), which composes `DatePicker` and
   `TimePicker` to select a date and time together.
 
-- [`DateInput`](#components.datetime.dateinput), which composes a text input with a `DatePicker` in
+- [`DateInput`](#datetime/dateinput), which composes a text input with a `DatePicker` in
   a `Popover`, for use in forms.
 
 They are available in the __@blueprintjs/datetime__ package on
 [NPM](https://www.npmjs.com/package/@blueprintjs/datetime).
 
-Make sure to review the [general usage docs for JS components](#components.usage).
+Make sure to review the [general usage docs for JS components](#blueprint.usage).
 
 ```sh
 npm install --save @blueprintjs/datetime
@@ -33,3 +33,4 @@ npm install --save @blueprintjs/datetime
 @page timepicker
 @page datetimepicker
 @page dateinput
+@page daterangeinput
diff --git a/packages/datetime/src/timepicker.md b/packages/datetime/src/timepicker.md
index f4795854e0..69acb8719e 100644
--- a/packages/datetime/src/timepicker.md
+++ b/packages/datetime/src/timepicker.md
@@ -18,6 +18,6 @@ application if needed.
 @## JavaScript API
 
 The `TimePicker` component is available in the __@blueprintjs/datetime__ package.
-Make sure to review the [general usage docs for date & time components](#components.datetime).
+Make sure to review the [general usage docs for JS components](#blueprint.usage).
 
 @interface ITimePickerProps
diff --git a/packages/docs-site/src/blueprint.md b/packages/docs-site/src/blueprint.md
index 27c6d87bd7..132016d853 100644
--- a/packages/docs-site/src/blueprint.md
+++ b/packages/docs-site/src/blueprint.md
@@ -198,7 +198,7 @@ npm install --save @blueprintjs/core react react-dom react-addons-css-transition
 Import components from the `@blueprintjs/core` module into your project.
 Don't forget to include the main CSS stylesheet too!
 
-**Review the [general usage docs](#components.usage) for more complete installation instructions.**
+**Review the [general usage docs](#blueprint.usage) for more complete installation instructions.**
 
 @## Understanding TypeScript
 
diff --git a/packages/table/README.md b/packages/table/README.md
index 29abfa95e6..5a895576d5 100644
--- a/packages/table/README.md
+++ b/packages/table/README.md
@@ -23,4 +23,4 @@ or spreadsheet.
 npm install --save @blueprintjs/table
 ```
 
-### [Table Documentation](http://blueprintjs.com/docs/#components.table-js) | [Full Documentation](http://blueprintjs.com/docs) | [Source Code](https://github.com/palantir/blueprint)
+### [Table Documentation](http://blueprintjs.com/docs/#table-js) | [Full Documentation](http://blueprintjs.com/docs) | [Source Code](https://github.com/palantir/blueprint)
diff --git a/packages/table/src/docs.md b/packages/table/src/docs.md
index 5e09e05f6e..2b7716c383 100644
--- a/packages/table/src/docs.md
+++ b/packages/table/src/docs.md
@@ -8,7 +8,7 @@ A highly interactive React `Table` component.
 
 <div class="pt-callout pt-large pt-intent-primary pt-icon-info-sign">
   If you are looking instead for the Blueprint-styled HTML table, see
-  [`.pt-table` in **@blueprintjs/core**](#core.components.table).
+  [`.pt-table` in **@blueprintjs/core**](#core/components/table).
 </div>
 
 ### Features