Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

markdownify docs #714

Merged
merged 14 commits into from
Mar 1, 2017
Merged

markdownify docs #714

Changes from 1 commit
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
e88ad4d
script to convert scss docs to md files
Feb 15, 2017
c54abe4
initial conversion of md files
Feb 15, 2017
66e32b4
forms subsection
Feb 15, 2017
023f577
fix markdown forms nesting
Feb 16, 2017
ba32022
remove Weights, convert to `@#+`
Feb 21, 2017
0686da2
add pages for common files
Feb 21, 2017
76e6936
add `@page` roots
Feb 21, 2017
f46fd31
4-space md files (mostly for source)
Feb 21, 2017
bb94f4b
remove some `parent` front matters
Feb 21, 2017
0410cb4
Clean up .scss and .md files
Feb 22, 2017
a76f857
Remove collapsible list from components index scss
Feb 22, 2017
440af4a
Convert datetime package
Feb 22, 2017
0c5d582
Move table docs to markdown
themadcreator Feb 23, 2017
249b925
Remove copyright header from table.md
llorca Feb 24, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
160 changes: 29 additions & 131 deletions packages/table/src/_docs.scss → packages/table/src/docs.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,12 @@
---
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Are we putting the copyright header in the .md files? I omitted it from core and datetime

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nah, let's not, feels like overkill.

// Copyright 2016 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
id: table-js
---

// NOTE: This file is not included in the dist for this library. It is only used
// for documentation.

/*
Table (React)
@# Table (React)

A highly interactive table React component.

Expand All @@ -25,23 +24,13 @@ A highly interactive table React component.
* Editable headers and cells
* Integrated header and context menus

Styleguide components.table-js
*/

/*
Installation
@# Installation

```sh
npm install --save @blueprintjs/core @blueprintjs/table
```

Weight: 0

Styleguide components.table-js.usage
*/

/*
Making a table
@# Making a table

To create a table, you must define the rows and columns. Add children to the `Table` to create columns,
and change the `numRows` prop on the `Table` to set the number of rows.
Expand Down Expand Up @@ -72,15 +61,9 @@ const renderCell = (rowIndex: number) => {
</Table>
```

@react-example TableDollarExample
@reactExample TableDollarExample

Weight: 1

Styleguide components.table-js.example-dollars
*/

/*
Sortable content
@# Sortable content

Because the table is **data-agnostic**, you can display complex data in the
table and perform arbitrary operations on it.
Expand All @@ -93,15 +76,9 @@ In the table below, try:
* Sorting with the menu in each column header
* Selecting cells and copying with the right-click context menu

@react-example TableSortableExample

Weight: 2

Styleguide components.table-js.example-sortable
*/
@reactExample TableSortableExample

/*
Editable content
@# Editable content

To make your table editable, use the `EditableCell` and
`EditableName` components to create editable table cells and column names.
Expand All @@ -116,15 +93,9 @@ this example, the editable values are validated against an alpha character-only
regular expression (`[a-zA-Z]`). If the content is invalid, a
`Intent.DANGER` style is applied to the cell.

@react-example TableEditableExample
@reactExample TableEditableExample

Weight: 3

Styleguide components.table-js.example-editable
*/

/*
Loading states
@# Loading states

When fetching or updating data, it may be desirable to show a loading state. The table components
provide fine-grain loading control of loading row headers, column headers, or individual cells.
Expand All @@ -135,51 +106,29 @@ it belongs has a `loadingOptions` value of `[ ColumnLoadingOption.CELLS ]`. The
display a table of the largest potentially hazardous asteroid (based on absolute magnitude)
discovered in a given year.

Weight: 4

Styleguide components.table-js.loading
*/

/*
Table
## Table loading states

`Table` exposes a `loadingOptions` prop that allows you to control the loading state behavior of all
column header, row header, and body cells. Try toggling the different options.

@react-example TableLoadingExample
@reactExample TableLoadingExample

Styleguide components.table-js.loading.table
*/

/*
Columns
## Column loading states

`Column` exposes a `loadingOptions` prop that allows you to control the loading state behavior of an
individual column's header and body cells. Try selecting a different column in the dropdown below.

@react-example ColumnLoadingExample

Weight: 1

Styleguide components.table-js.loading.column
*/
@reactExample ColumnLoadingExample

/*
Cells
@# Cells

`Cell`, `EditableCell`, `ColumnHeaderCell`, and `RowHeaderCell` expose a `loading` prop for granular
control of which cells should show a loading state. Try selecting a different preset loading
configuration.

@react-example CellLoadingExample
@reactExample CellLoadingExample

Weight: 2

Styleguide components.table-js.loading.cell
*/

/*
Formatted content
@# Formatted content

To display long strings or native JavaScript objects, we provide
`<TruncatedFormat>` and `<JSONFormat>` components, which are designed to be used
Expand All @@ -189,39 +138,23 @@ Below is a table of timezones including the local time when this page was
rendered. It uses a `<TruncatedFormat>` component to show the long date string
and a `<JSONFormat>` component to show the timezone info object.

@react-example TableFormatsExample

Weight: 5

Styleguide components.table-js.formatted
*/
@reactExample TableFormatsExample

/*
JavaScript API
@# JavaScript API

The `Table`, `Column`, `Cell`, `ColumnHeaderCell`, `EditableName`, and `EditableCell`
components are available in the __@blueprintjs/table__ package.

Weight: 100

Styleguide components.table-js.api
*/

/*
Table
@## Table

The top-level component of the table is `Table`. You must at least define the
number of rows (`numRows` prop) as well as a set of `Column` children.

@interface ITableProps

Weight: 0

Styleguide components.table-js.api.table
*/

/*
Column
@## Column

`Column` contains props for defining how the header and cells of that column
are rendered.
Expand All @@ -234,26 +167,16 @@ Use the `renderRowHeaderCell` prop of `Table` to define row headers.

@interface IColumnProps

Weight: 1

Styleguide components.table-js.api.column
*/

/*
Cell
@## Cell

The `Cell` component renders content in the table body. `Cell`s should be
returned from the `renderCell` method of each `Column`.

@interface ICellProps

Weight: 2

Styleguide components.table-js.api.cell
*/

/*
ColumnHeaderCell
@## ColumnHeaderCell

Customize how each column header is displayed.

Expand All @@ -264,40 +187,25 @@ name, you can supply a `renderName` prop to the `ColumnHeaderCell`.

@interface IColumnHeaderCellProps

Weight: 3

Styleguide components.table-js.api.column-header-cell
*/

/*
EditableName
@## EditableName

Return a `EditableName` component from the `renderName` prop on a
`ColumnHeaderCell` to enable click-to-edit functionality in the column
header.

@interface IEditableNameProps

Weight: 4

Styleguide components.table-js.api.editable-name
*/

/*
EditableCell
@## EditableCell

Return a `EditableCell` component from the `renderCell` prop on a
`Column` to enable double-click-to-edit functionality in the table body.

@interface IEditableCellProps

Weight: 5

Styleguide components.table-js.api.editable-cell
*/

/*
TruncatedFormat
@## TruncatedFormat

Wrap your cell contents with a `TruncatedFormat` component like so:

Expand All @@ -308,13 +216,8 @@ return <Cell><TruncatedFormat>{content}</TruncatedFormat></Cell>

@interface ITruncatedFormatProps

Weight: 6

Styleguide components.table-js.api.truncated-format
*/

/*
JSONFormat
@## JSONFormat

Wrap your JavaScript object cell contents with a `JSONFormat` component like so:

Expand All @@ -324,8 +227,3 @@ return <Cell><JSONFormat>{content}</JSONFormat></Cell>
```

@interface IJSONFormatProps

Weight: 7

Styleguide components.table-js.api.json-format
*/