From 4eb0c1b7499a1ce580283a9714d715b4362865bf Mon Sep 17 00:00:00 2001 From: Javi Velasco Date: Sat, 31 Oct 2015 20:03:49 +0100 Subject: [PATCH] Add documentation for date picker and remove structure section from other docs --- components/app_bar/readme.md | 4 --- components/autocomplete/readme.md | 17 ------------ components/button/readme.md | 12 --------- components/card/readme.md | 18 ------------- components/checkbox/readme.md | 19 +++++++------- components/date_picker/readme.md | 26 ++++++++++--------- .../layout/main/modules/components.js | 4 ++- .../modules/examples/datepicker_example_1.txt | 7 +++++ 8 files changed, 33 insertions(+), 74 deletions(-) create mode 100644 docs/app/components/layout/main/modules/examples/datepicker_example_1.txt diff --git a/components/app_bar/readme.md b/components/app_bar/readme.md index df579a19..edb3d1f6 100644 --- a/components/app_bar/readme.md +++ b/components/app_bar/readme.md @@ -22,7 +22,3 @@ Coming soon, the `AppBar` component will support arbitrary content attributes fo | **className** | String | `''` | Set a class for the root component.| | **flat** | Bool | `false` | If true, the AppBar shows a shadow.| | **fixed** | Bool | `false` | Determine if the bar should have position `fixed` or `relative`.| - -## Structure - -It renders an HTML `header` tag with the given `className` so to style it you just need to use a class and apply CSS over the node. diff --git a/components/autocomplete/readme.md b/components/autocomplete/readme.md index 326b6ec4..2b69607c 100644 --- a/components/autocomplete/readme.md +++ b/components/autocomplete/readme.md @@ -45,20 +45,3 @@ This component has state to control how is it rendered and the values currently - `getValue` is used to retrieve the current value. - `setValue` to force a new value. - -## Structure - -The component has a complex structure that can be customized by giving a custom `className` and targeting `data-role` attributes. The structure is similar to: - -```html -
- - - - -
-``` diff --git a/components/button/readme.md b/components/button/readme.md index b5dba19b..887c9c81 100644 --- a/components/button/readme.md +++ b/components/button/readme.md @@ -34,15 +34,3 @@ const TestButtons = () => ( | ripple | `Boolean` | `true` | If true, component will have a ripple effect on click.| Also, any additional properties will be directly transferred to the `button` tag. - -## Structure - -The inner markup depends on the given properties. It can result in: - -```html - -``` diff --git a/components/card/readme.md b/components/card/readme.md index 8d6fed2b..a94e4687 100644 --- a/components/card/readme.md +++ b/components/card/readme.md @@ -36,21 +36,3 @@ const TestCards = () => ( | text | String | | Sets a complementary text display as a card description.| | title | String | | Sets the title of the card.| | type | String | `default` | Type of the component to display general modifications. It can be `wide` for a larger card, `image` if it's an image card or `event` which shows just a title on top. | - -## Structure - -This can generate different structures depending on the props. A complicated one can be as follows: - -```html -
-
-
Title
- Subtitle -
-

Description

- -
-``` diff --git a/components/checkbox/readme.md b/components/checkbox/readme.md index b90cb3f2..a031ccdb 100644 --- a/components/checkbox/readme.md +++ b/components/checkbox/readme.md @@ -15,16 +15,6 @@ const TestCheckbox = () => ( ); ``` -## Methods - -This component has state to control its value and how is it rendered. It exposes the following instance methods: - -- `getValue` is used to retrieve the current value. -- `setValue` to force a new value. -- `blur` to blur the input. -- `focus` to focus the input. - - ## Properties | Name | Type | Default | Description| @@ -38,6 +28,15 @@ This component has state to control its value and how is it rendered. It exposes | onChange | Function | | Callback called when the checkbox value is changed.| | onFocus | Function | | Callback called when the checkbox is focused | +## Methods + +This component has state to control its value and how is it rendered. It exposes the following instance methods: + +- `getValue` is used to retrieve the current value. +- `setValue` to force a new value. +- `blur` to blur the input. +- `focus` to focus the input. + ## Structure In a checkbox the structure depends on the label option. Apart from it, it's always the same: diff --git a/components/date_picker/readme.md b/components/date_picker/readme.md index 29b8abfc..fffd7c2f 100644 --- a/components/date_picker/readme.md +++ b/components/date_picker/readme.md @@ -1,25 +1,27 @@ -# DatePicker +# Date Picker -```javascript -var DatePicker = require('react-toolbox/components/date_picker'); +A [dialog](https://www.google.com/design/spec/components/pickers.html#pickers-date-pickers) date picker is used to select a single date. The selected day is indicated by a filled circle. The current day is indicated by a different color and type weight. -var date = new Date(1995,11,17); + +```jsx +import DatePicker from 'react-toolbox/date_picker'; -// Initialized date picker - +const selectedDate = new Date(1995, 11, 17); +const DatePickerTest = () => ( + +); ``` ## Properties | Name | Type | Default | Description| | ------------- |:-------:|:--------------- |:---------- | -| **value** | Date | `new Date()` | Date object with currrent date by default | +| className | String | `''` | Sets a class to give customized styles to the checkbox field.| +| value | Date | | Date object with the currently selected date. | ## Methods -#### getValue -Returns the value of the picker. +The DatePicker is a very easy component from the top level API but quite complex inside. It has state to keep the currently viewed date and the currently selected value. -``` -input_instance.getValue(); -``` +- `getValue` is used to retrieve the current value. +- `setValue` to force a new value. diff --git a/docs/app/components/layout/main/modules/components.js b/docs/app/components/layout/main/modules/components.js index fce73316..f728a2e4 100644 --- a/docs/app/components/layout/main/modules/components.js +++ b/docs/app/components/layout/main/modules/components.js @@ -28,6 +28,7 @@ import ButtonExample1 from './examples/button_example_1.txt'; import AutocompleteExample1 from './examples/autocomplete_example_1.txt'; import CardExample1 from './examples/card_example_1.txt'; import CheckboxExample1 from './examples/checkbox_example_1.txt'; +import DatePickerExample1 from './examples/datepicker_example_1.txt'; export default { app_bar: { @@ -62,7 +63,8 @@ export default { date_picker: { name: 'Date Picker', docs: DatePicker, - path: '/components/date_picker' + path: '/components/date_picker', + examples: [DatePickerExample1] }, dialog: { name: 'Dialog', diff --git a/docs/app/components/layout/main/modules/examples/datepicker_example_1.txt b/docs/app/components/layout/main/modules/examples/datepicker_example_1.txt new file mode 100644 index 00000000..018d1115 --- /dev/null +++ b/docs/app/components/layout/main/modules/examples/datepicker_example_1.txt @@ -0,0 +1,7 @@ +const selectedDate = new Date(1995, 11, 17); + +const DatePickerTest = () => ( + +); + +return ;