vitalif
/
react-toolbox
1
0
Fork 0
Code Issues Pull Requests Releases 12 Wiki Activity

Better readmes for autocomplete avatar chip and input

old
Javi Velasco 2016-05-28 17:58:43 +02:00
parent 85e248c0c4
commit d04c181fdf
4 changed files with 24 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
components/autocomplete/readme.md
View File

@ -5,7 +5,6 @@ An input field with a set of predeterminated labeled values. When it's focused i
<!-- example -->
```jsx
import Autocomplete from 'react-toolbox/lib/autocomplete';
import theme from 'react-toolbox/lib/autocomplete/theme';
const source = {
'ES-es': 'Spain',
@ -31,7 +30,6 @@ class AutocompleteTest extends React.Component {
label="Choose countries"
onChange={this.handleChange}
source={source}
theme={theme}
value={this.state.countries}
/>
);
@ -39,6 +37,8 @@ class AutocompleteTest extends React.Component {
}
```
If you want to provide a theme via context, the component key is `RTAutocomplete`.
## Properties
| Name | Type | Default | Description|
@ -57,9 +57,7 @@ class AutocompleteTest extends React.Component {
Additional properties will be passed to the Input Component so you can use `hint`, `name` ... etc.
## Theming
You can take a look to the `_config.scss` variables. The themed key for this component is `ToolboxAutocomplete`, it should implement the following interface:
## Theme
| Name | Description|
|:---------|:-----------|

23
components/avatar/readme.md
View File

@ -5,7 +5,6 @@ Avatars can be used to represent people. This offer users the ability to persona
<!-- example -->
```jsx
import Avatar from 'react-toolbox/lib/avatar';
import theme from 'react-toolbox/lib/avatar/theme';
const GithubIcon = () => (
<svg viewBox="0 0 284 277">
@ -15,15 +14,17 @@ const GithubIcon = () => (
const AvatarTest = () => (
<div>
<Avatar style={{backgroundColor: 'deepskyblue'}} icon="folder" theme={theme} />
<Avatar icon={<GithubIcon />} theme={theme} />
<Avatar theme={theme}><img src="https://placeimg.com/80/80/animals"/></Avatar>
<Avatar title="Javier" image="https://placeimg.com/80/80/animals" theme={theme} />
<Avatar style={{backgroundColor: 'yellowgreen'}} theme={theme}><GithubIcon /></Avatar>
<Avatar style={{backgroundColor: 'deepskyblue'}} icon="folder" />
<Avatar icon={<GithubIcon />} />
<Avatar><img src="https://placeimg.com/80/80/animals"/></Avatar>
<Avatar title="Javier" image="https://placeimg.com/80/80/animals" />
<Avatar style={{backgroundColor: 'yellowgreen'}}><GithubIcon /></Avatar>
</div>
);
```
If you want to provide a theme via context, the component key is `RTAvatar`.
## Properties
| Name | Type | Default | Description|
@ -35,12 +36,10 @@ const AvatarTest = () => (
| `title` | `String` | `''` | A title for the image. If no image is provided, the first letter will be displayed as the avatar. |
| `theme` | `Object` | `null` | Classnames object defining the component style.|
## Theming
You can take a look to the `_config.scss` variables. The themed key for this component is `ToolboxAvatar`, it should implement the following interface:
## Theme
| Name | Description|
|:---------|:-----------|
| `avatar` | Root class.|
| `image` | Used for the image if the avatar has image.|
| `letter` | Used for the letter in case the avatar has no image.|
| `avatar` | Used for the root class of the element.|
| `image` | Added to the root element when the component has image.|
| `letter` | Used for the root element if the component shows the letter.|

19
components/chip/readme.md
View File

@ -1,12 +1,9 @@
# Chip
Chips represent complex entities in small blocks, such as a contact. Chips can be used for various types of entities, including free form text, predefined text, rules, or contacts. Chips may also contain icons.
To add an icon or contact image to a chip, include an `Avatar` element as the first child.
Chips represent complex entities in small blocks, such as a contact. Chips can be used for various types of entities, including free form text, predefined text, rules, or contacts. Chips may also contain icons. To add an icon or contact image to a chip, include an `Avatar` element as the first child.
<!-- example -->
```jsx
// Import theme using `ThemeProvider`
import Avatar from 'react-toolbox/lib/avatar';
import Chip from 'react-toolbox/lib/chip';
@ -37,6 +34,8 @@ const ChipTest = () => (
);
```
If you want to provide a theme via context, the component key is `RTChip`.
## Properties
| Name | Type | Default | Description|
@ -46,15 +45,13 @@ const ChipTest = () => (
| `deletable` | `Boolean` | `false` | If true, the chip will be rendered with a delete icon.|
| `onDeleteClick` | `Function` | | Callback to be invoked when the delete icon is clicked. |
## Theming
You can take a look to the configuration variables at the `_config.scss` file. The component implements the following class interface:
## Theme
| Name | Description|
|:-----------|:-----------|
| `avatar` | Used in the root when the component includes an avatar.|
| `chip` | Root class.|
| `deletable` | Used in the root when the component is deletable.|
| `avatar` | Added to the root element when the component includes an avatar.|
| `chip` | Used for the root element.|
| `deletable` | Added to the root element when the component is deletable.|
| `delete` | Used for the delete element wrapper.|
| `deleteIcon` | Used for the delete icon wrapper.|
| `deleteIcon` | Used for the delete icon.|
| `deleteX` | Used for the delete svg inner layer.|

4
components/input/readme.md
View File

@ -27,6 +27,8 @@ class InputTest extends React.Component {
}
```
If you want to provide a theme via context, the component key is `RTInput`.
## Properties
| Name | Type | Default | Description|
@ -50,8 +52,6 @@ class InputTest extends React.Component {
## Theming
The input component uses `ToolboxInput` as theme context id and the configuration is available in the `_config.scss` as usual. Here is the class interface:
| Name | Description|
|:-----------|:-----------|
| `bar` | Used for the bar under the input.|