Various documentation fixes (#3635)

packages/core/src/_typography.scss

@@ -109,18 +109,20 @@ Running text
 Markup:
 <div class="@ns-running-text {{.modifier}}">
   <p>
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-    eiusmod tempor incididunt ut labore et dolore magna aliqua.
+    We build products that make people better at their most important
+    work — the kind of work you read about on the front page of the
+    newspaper, not just the technology section.
   </p>
   <ul>
     <li>Item the <code>first</code>.</li>
     <li>Item the <strong>second</strong></code>.</li>
     <li>Item the <a href="#core/typography.running-text">third</a>.</li>
   </ul>
-  <h3>New section</h3>
+  <h3>Scale, Speed, Agility</h3>
   <p>
-    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
-    nisi ut aliquip ex ea commodo consequat.
+    A successful data transformation requires the whole organization — users, the IT shop, and
+    leadership — to operate in lockstep. With Foundry, the enterprise comes together to
+    transform the organization and turn data into a competitive advantage.
   </p>
 </div>
 
@@ -356,10 +358,10 @@ Block quotes
 
 Markup:
 <blockquote class="@ns-blockquote">
-  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
-  ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
-  ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
-  reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+  Premium Aerotec is a key supplier for Airbus, producing 30 million parts per year,
+  which is huge complexity. Skywise helps us manage all the production steps.
+  It gives Airbus much better visibility into where the product is in the supply chain,
+  and it lets us immediately see our weak points so we can react on the spot.
 </blockquote>
 
 Styleguide blockquote

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

@@ -9,7 +9,7 @@ Callout
 Markup:
 <div class="#{$ns}-callout {{.modifier}}">
   <h4 class="#{$ns}-heading">Callout Heading</h4>
-  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex, delectus!
+  It's dangerous to go alone! Take this.
 </div>
 
 .#{$ns}-intent-primary - Primary intent

packages/core/src/components/hotkeys/hotkeys.md

@@ -43,6 +43,14 @@ export class MyComponent extends React.Component<{}, {}> {
 }
 ```
 
+<div class="@ns-callout @ns-intent-primary @ns-icon-info-sign">
+
+Your decorated component must return a single DOM element in its `render()` method,
+not a custom React component. This constraint allows `HotkeysTarget` to inject
+event handlers without creating an extra wrapper element.
+
+</div>
+
 @### Decorator
 
 The `@HotkeysTarget` decorator allows you to easily add global and local

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

@@ -413,6 +413,14 @@ Minimal popovers are also useful for context menus that require quick enter and
 support fast workflows. You can see an example in the [context menus](#core/components/context-menu)
 documentation.
 
+@### Filling container width
+
+Sometimes you will have a React components or element which uses `width: 100%` or `fill: true` to
+fill its container width. If you wrap this component or element in a `Popover`, it may no longer
+achieve the layout you expect. This is likely because `Popover` injects an inline `<span>` tag wrapper.
+To work around this issue, supply the prop `targetTagName="div"` to get a block layout wrapper
+instead, which should better respect width layout styling.
+
 @## Testing
 
 <div class="@ns-callout @ns-intent-primary @ns-icon-info-sign">

packages/core/src/components/tooltip/tooltip.md

@@ -1,6 +1,6 @@
 @# Tooltip
 
-A tooltip is a lightweight popover for showing additional infromation on hover.
+A tooltip is a lightweight popover for showing additional information during hover interactions.
 
 @reactExample TooltipExample
 

packages/datetime/src/dateFormat.tsx

@@ -25,7 +25,7 @@ export interface IDateFormatProps {
     invalidDateMessage?: string;
 
     /**
-     * The locale name, which is passed to `formatDate`, `parseDate` and the functions in `localeUtils`.
+     * The locale name, which is passed to `formatDate`, `parseDate`, and the functions in `localeUtils`.
      */
     locale?: string;
 

packages/datetime/src/dateinput.md

@@ -73,3 +73,7 @@ import { DateInput } from "@blueprintjs/datetime";
 ```
 
 @interface IDateInputProps
+
+@## Localization
+
+See the [Date picker localization docs](#datetime/datepicker.localization).

packages/datetime/src/datepicker.md

@@ -63,3 +63,25 @@ to the **react-day-picker** library. These passed props are documented in full
 in the [**react-day-picker** documentation](http://www.gpbl.org/react-day-picker/index.html).
 
 @interface IDatePickerProps
+
+@## Localization
+
+`DatePicker`, `DateRangePicker`, `DateInput`, and `DateRangeInput` all support localization using an interface defined in the
+`react-day-picker` module:
+
+```tsx
+import { LocaleUtils } from "react-day-picker/types/utils";
+```
+
+By supplying a `locale: string` and `localeUtils: LocaleUtils` prop to these Blueprint components, you can
+customize how dates are rendered, which day of the week is the first column, etc.
+[See the interface definition for more details](https://github.com/gpbl/react-day-picker/blob/v7.3.0/types/utils.d.ts#L5).
+
+Although `@blueprintjs/datetime` and `react-day-picker` do not explicitly require `moment.js` as a dependency,
+you may wish to use Moment's implementation of localization so that you do not have to write these functions yourself.
+The import from `react-day-picker` shown above gives you a utility object containing functions which do just that; you
+may use it like so:
+
+```tsx
+<DatePicker locale="fr" localeUtils={LocaleUtils} />
+```

packages/datetime/src/daterangeinput.md

@@ -33,3 +33,7 @@ import { DateRangeInput } from "@blueprintjs/datetime";
 ```
 
 @interface IDateRangeInputProps
+
+@## Localization
+
+See the [Date picker localization docs](#datetime/datepicker.localization).

packages/datetime/src/daterangepicker.md

@@ -54,3 +54,7 @@ import { DateRangePicker } from "@blueprintjs/datetime";
 ```
 
 @interface IDateRangePickerProps
+
+@## Localization
+
+See the [Date picker localization docs](#datetime/datepicker.localization).

packages/datetime/src/timepicker.md

@@ -2,7 +2,7 @@
 
 A `TimePicker` allows the user to specify a time.
 
-`TimePicker` has no direct localization support. You should handle localization directly in your
+`TimePicker` has no direct localization support. You should handle localization in your
 application if needed.
 
 @reactExample TimePickerExample