Skip to content

Commit

Permalink
[DM] update docs files and links (#927)
Browse files Browse the repository at this point in the history
* markdownify Text and DateRangeInput docs

* fix all the links i could find
  • Loading branch information
giladgray authored and themadcreator committed Mar 31, 2017
1 parent 260de5a commit d1d9ae0
Show file tree
Hide file tree
Showing 46 changed files with 158 additions and 186 deletions.
1 change: 0 additions & 1 deletion packages/core/src/components/_index.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down
4 changes: 2 additions & 2 deletions packages/core/src/components/alert/alert.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.

Expand All @@ -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
8 changes: 4 additions & 4 deletions packages/core/src/components/breadcrumbs/breadcrumbs.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
4 changes: 2 additions & 2 deletions packages/core/src/components/button/button.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion packages/core/src/components/collapse/collapse.md
Original file line number Diff line number Diff line change
Expand Up @@ -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).
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
1 change: 1 addition & 0 deletions packages/core/src/components/components.md
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@
@page tabs
@page tabs2
@page tag
@page text
@page toast
@page tooltip
@page tree
14 changes: 7 additions & 7 deletions packages/core/src/components/context-menu/context-menu.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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.
Expand Down
16 changes: 8 additions & 8 deletions packages/core/src/components/dialog/dialog.md
Original file line number Diff line number Diff line change
Expand Up @@ -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:

Expand Down Expand Up @@ -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.
Expand Down
11 changes: 6 additions & 5 deletions packages/core/src/components/editable-text/editable-text.md
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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
Expand All @@ -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

Expand Down
2 changes: 1 addition & 1 deletion packages/core/src/components/forms/checkbox.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
4 changes: 2 additions & 2 deletions packages/core/src/components/forms/form-group.md
Original file line number Diff line number Diff line change
@@ -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
Expand Down
14 changes: 7 additions & 7 deletions packages/core/src/components/forms/input-group.md
Original file line number Diff line number Diff line change
Expand Up @@ -17,22 +17,22 @@ 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

@## 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
Expand Down
6 changes: 3 additions & 3 deletions packages/core/src/components/forms/input.md
Original file line number Diff line number Diff line change
@@ -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

Expand Down
4 changes: 2 additions & 2 deletions packages/core/src/components/forms/numeric-input.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.

Expand Down
2 changes: 1 addition & 1 deletion packages/core/src/components/forms/radio.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
4 changes: 2 additions & 2 deletions packages/core/src/components/forms/select.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
4 changes: 2 additions & 2 deletions packages/core/src/components/forms/switch.md
Original file line number Diff line number Diff line change
@@ -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
Expand All @@ -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} />
Expand Down
20 changes: 10 additions & 10 deletions packages/core/src/components/menu/menu.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down Expand Up @@ -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
Expand All @@ -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.
Expand All @@ -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.

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -18,15 +18,15 @@ 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

@## 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.
Expand Down
Loading

0 comments on commit d1d9ae0

Please sign in to comment.