diff --git a/components/autocomplete/readme.md b/components/autocomplete/readme.md index e14b9a51..b3af4a60 100644 --- a/components/autocomplete/readme.md +++ b/components/autocomplete/readme.md @@ -5,7 +5,6 @@ An input field with a set of predeterminated labeled values. When it's focused i ```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| |:---------|:-----------| diff --git a/components/avatar/readme.md b/components/avatar/readme.md index 3f76decc..a30c5212 100644 --- a/components/avatar/readme.md +++ b/components/avatar/readme.md @@ -5,7 +5,6 @@ Avatars can be used to represent people. This offer users the ability to persona ```jsx import Avatar from 'react-toolbox/lib/avatar'; -import theme from 'react-toolbox/lib/avatar/theme'; const GithubIcon = () => ( @@ -15,15 +14,17 @@ const GithubIcon = () => ( const AvatarTest = () => (
- - } theme={theme} /> - - - + + } /> + + +
); ``` +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.| diff --git a/components/chip/readme.md b/components/chip/readme.md index d9535293..e8ab3a87 100644 --- a/components/chip/readme.md +++ b/components/chip/readme.md @@ -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. ```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.| diff --git a/components/input/readme.md b/components/input/readme.md index b5711138..1189bc84 100644 --- a/components/input/readme.md +++ b/components/input/readme.md @@ -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.|