Skip to content

Commit ccf88af

Browse files
KerenChandranKerenChandran
committedApr 7, 2016
Changed Icon Prop type to String or Element instead of Any. Also fixed an inappropriate example for checkbox.
1 parent cdd6ee5 commit ccf88af

16 files changed

+116
-91
lines changed
 

‎components/autocomplete/Autocomplete.jsx

+1-6
Original file line numberDiff line numberDiff line change
@@ -12,21 +12,16 @@ const POSITION = {
1212
UP: 'up'
1313
};
1414

15-
const SELECTEDPOSITION = {
16-
ABOVE: 'above',
17-
BELOW: 'below'
18-
};
19-
2015
class Autocomplete extends React.Component {
2116
static propTypes = {
2217
className: React.PropTypes.string,
2318
direction: React.PropTypes.oneOf(['auto', 'up', 'down']),
24-
selectedPosition: React.PropTypes.oneOf(['above', 'below']),
2519
disabled: React.PropTypes.bool,
2620
error: React.PropTypes.string,
2721
label: React.PropTypes.string,
2822
multiple: React.PropTypes.bool,
2923
onChange: React.PropTypes.func,
24+
selectedPosition: React.PropTypes.oneOf(['above', 'below']),
3025
source: React.PropTypes.any,
3126
value: React.PropTypes.any
3227
};

‎components/button/Button.jsx

+4-1
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,10 @@ class Button extends React.Component {
1313
flat: React.PropTypes.bool,
1414
floating: React.PropTypes.bool,
1515
href: React.PropTypes.string,
16-
icon: React.PropTypes.any,
16+
icon: React.PropTypes.oneOfType([
17+
React.PropTypes.string,
18+
React.PropTypes.element
19+
]),
1720
inverse: React.PropTypes.bool,
1821
label: React.PropTypes.string,
1922
mini: React.PropTypes.bool,

‎components/button/IconButton.jsx

+4-1
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,10 @@ class IconButton extends React.Component {
1111
className: React.PropTypes.string,
1212
disabled: React.PropTypes.bool,
1313
href: React.PropTypes.string,
14-
icon: React.PropTypes.any,
14+
icon: React.PropTypes.oneOfType([
15+
React.PropTypes.string,
16+
React.PropTypes.element
17+
]),
1518
inverse: React.PropTypes.bool,
1619
neutral: React.PropTypes.bool,
1720
onMouseLeave: React.PropTypes.func,

‎components/button/readme.md

+17-17
Original file line numberDiff line numberDiff line change
@@ -32,24 +32,24 @@ const TestButtons = () => (
3232

3333
## Properties
3434

35-
| Name | Type | Default | Description|
35+
| Name | Type | Default | Description|
3636
|:-----|:-----|:-----|:-----|
37-
| `accent` | `Boolean` | `false` | Indicates if the button should have accent color.|
38-
| `className` | `String` | `''` | Set a class to style the Component.|
39-
| `disabled` | `Boolean` | `false` | If true, component will be disabled.|
40-
| `flat` | `Boolean` | `false` | If true, the button will have a flat look. |
41-
| `floating` | `Boolean` | `false` | If true, the button will have a floating look. |
42-
| `href` | `String` | | Creates a link for the button. |
43-
| `icon` | `Any` | | Value of the icon (See Font Icon Component). |
44-
| `inverse` | `Boolean` | | If true, the neutral colors are inverted. Useful to put a button over a dark background. |
45-
| `label` | `String` | | The text string to use for the name of the button.|
46-
| `mini` | `Boolean` | `false` | To be used with floating button. If true, the button will be smaller.|
47-
| `neutral` | `Boolean` | `true` | Set it to `false` if you don't want the neutral styles to be included.|
48-
| `onMouseLeave` | `Function` | | Fires after the mouse leaves the Component.|
49-
| `onMouseUp` | `Function` | | Fires after the mouse is released from the Component.|
50-
| `primary` | `Boolean` | `false` | Indicates if the button should have primary color.|
51-
| `raised` | `Boolean` | `false` | If true, the button will have a raised look. |
52-
| `ripple` | `Boolean` | `true` | If true, component will have a ripple effect on click.|
37+
| `accent` | `Boolean` | `false` | Indicates if the button should have accent color.|
38+
| `className` | `String` | `''` | Set a class to style the Component.|
39+
| `disabled` | `Boolean` | `false` | If true, component will be disabled.|
40+
| `flat` | `Boolean` | `false` | If true, the button will have a flat look. |
41+
| `floating` | `Boolean` | `false` | If true, the button will have a floating look. |
42+
| `href` | `String` | | Creates a link for the button. |
43+
| `icon` | `String` or `Element` | | Value of the icon (See Font Icon Component). |
44+
| `inverse` | `Boolean` | | If true, the neutral colors are inverted. Useful to put a button over a dark background. |
45+
| `label` | `String` | | The text string to use for the name of the button.|
46+
| `mini` | `Boolean` | `false` | To be used with floating button. If true, the button will be smaller.|
47+
| `neutral` | `Boolean` | `true` | Set it to `false` if you don't want the neutral styles to be included.|
48+
| `onMouseLeave` | `Function` | | Fires after the mouse leaves the Component.|
49+
| `onMouseUp` | `Function` | | Fires after the mouse is released from the Component.|
50+
| `primary` | `Boolean` | `false` | Indicates if the button should have primary color.|
51+
| `raised` | `Boolean` | `false` | If true, the button will have a raised look. |
52+
| `ripple` | `Boolean` | `true` | If true, component will have a ripple effect on click.|
5353

5454
By default it will have neutral colors and a flat aspect even though the `flat` property is `false` by default. Also, some properties exclude others, for example a button cannot be `flat` and `raised` at the same time.
5555

‎components/input/Input.jsx

+5-2
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,13 @@ class Input extends React.Component {
88
children: React.PropTypes.any,
99
className: React.PropTypes.string,
1010
disabled: React.PropTypes.bool,
11-
error: React.PropTypes.node,
11+
error: React.PropTypes.string,
1212
floating: React.PropTypes.bool,
1313
hint: React.PropTypes.string,
14-
icon: React.PropTypes.any,
14+
icon: React.PropTypes.oneOfType([
15+
React.PropTypes.string,
16+
React.PropTypes.element
17+
]),
1518
label: React.PropTypes.string,
1619
maxLength: React.PropTypes.number,
1720
multiline: React.PropTypes.bool,

‎components/input/readme.md

+17-17
Original file line numberDiff line numberDiff line change
@@ -29,24 +29,24 @@ class InputTest extends React.Component {
2929

3030
## Properties
3131

32-
| Name | Type | Default | Description|
32+
| Name | Type | Default | Description|
3333
|:-----|:-----|:-----|:-----|
34-
| `className` | `String` | `''` | Sets a class name to give custom styles.|
35-
| `disabled` | `Boolean` | `false` | If true, component will be disabled.|
36-
| `error` | `String` | | Give an error node to display under the field.|
37-
| `floating` | `Boolean` | `true` | Indicates if the label is floating in the input field or not.|
38-
| `hint` | `String` | `''` | The text string to use for hint text element.|
39-
| `icon` | `Any` | | Name of an icon to use as a label for the input.|
40-
| `label` | `String` | | The text string to use for the floating label element.|
41-
| `maxLength` | `Number` | |Specifies the maximum number of characters allowed in the component.|
42-
| `multiline` | `Boolean` | `false` | If true, a textarea element will be rendered. The textarea also grows and shrinks according to the number of lines.|
43-
| `onBlur` | `Function` | | Callback function that is fired when component is blurred.|
44-
| `onChange` | `Function` | | Callback function that is fired when the component's value changes.|
45-
| `onFocus` | `Function` | | Callback function that is fired when component is focused.|
46-
| `onKeyPress` | `Function` | | Callback function that is fired when a key is pressed.|
47-
| `required` | `Boolean` | `false` | If true, the html input has a required attribute.|
48-
| `type` | `String` | `text` | Type of the input element. It can be a valid HTML5 input type|
49-
| `value` | `Any` | | Current value of the input element.|
34+
| `className` | `String` | `''` | Sets a class name to give custom styles.|
35+
| `disabled` | `Boolean` | `false` | If true, component will be disabled.|
36+
| `error` | `String` | | Give an error node to display under the field.|
37+
| `floating` | `Boolean` | `true` | Indicates if the label is floating in the input field or not.|
38+
| `hint` | `String` | `''` | The text string to use for hint text element.|
39+
| `icon` | `String` or `Element` | | Name of an icon to use as a label for the input.|
40+
| `label` | `String` | | The text string to use for the floating label element.|
41+
| `maxLength` | `Number` | |Specifies the maximum number of characters allowed in the component.|
42+
| `multiline` | `Boolean` | `false` | If true, a textarea element will be rendered. The textarea also grows and shrinks according to the number of lines.|
43+
| `onBlur` | `Function` | | Callback function that is fired when component is blurred.|
44+
| `onChange` | `Function` | | Callback function that is fired when the component's value changes.|
45+
| `onFocus` | `Function` | | Callback function that is fired when component is focused.|
46+
| `onKeyPress` | `Function` | | Callback function that is fired when a key is pressed.|
47+
| `required` | `Boolean` | `false` | If true, the html input has a required attribute.|
48+
| `type` | `String` | `text` | Type of the input element. It can be a valid HTML5 input type|
49+
| `value` | `Any` | | Current value of the input element.|
5050

5151
## Methods
5252

‎components/link/Link.jsx

+4-1
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,10 @@ Link.propTypes = {
2323
children: React.PropTypes.node,
2424
className: React.PropTypes.string,
2525
count: React.PropTypes.number,
26-
icon: React.PropTypes.any,
26+
icon: React.PropTypes.oneOfType([
27+
React.PropTypes.string,
28+
React.PropTypes.element
29+
]),
2730
label: React.PropTypes.string
2831
};
2932

‎components/link/readme.md

+6-6
Original file line numberDiff line numberDiff line change
@@ -19,10 +19,10 @@ const LinksTest = () => (
1919

2020
You can add as many properties as you want to be directly transferred to the output anchor element. Apart from them you have the following properties:
2121

22-
| Name | Type | Default | Description|
22+
| Name | Type | Default | Description|
2323
|:-----|:-----|:-----|:-----|
24-
| `active` | `Boolean` | `false` | If true, adds active style to link.|
25-
| `className` | `String` | `''` | Sets a custom class name to add styles to the link.|
26-
| `count` | `Number` | | Sets a count number.|
27-
| `icon` | `Any` | | An icon key string to include a `FontIcon` component in front of the text.|
28-
| `label` | `String` | | The text string used for the text content of the link.|
24+
| `active` | `Boolean` | `false` | If true, adds active style to link.|
25+
| `className` | `String` | `''` | Sets a custom class name to add styles to the link.|
26+
| `count` | `Number` | | Sets a count number.|
27+
| `icon` | `String` or `Element` | | An icon key string to include a `FontIcon` component in front of the text.|
28+
| `label` | `String` | | The text string used for the text content of the link.|

‎components/list/ListItemLayout.jsx

+12-3
Original file line numberDiff line numberDiff line change
@@ -33,17 +33,26 @@ const ListItemLayout = (props) => {
3333
};
3434

3535
ListItemLayout.propTypes = {
36-
avatar: React.PropTypes.string,
36+
avatar: React.PropTypes.oneOfType([
37+
React.PropTypes.string,
38+
React.PropTypes.element
39+
]),
3740
caption: React.PropTypes.string,
3841
children: React.PropTypes.any,
3942
className: React.PropTypes.string,
4043
disabled: React.PropTypes.bool,
4144
itemContent: React.PropTypes.element,
4245
leftActions: React.PropTypes.array,
43-
leftIcon: React.PropTypes.any,
46+
leftIcon: React.PropTypes.oneOfType([
47+
React.PropTypes.string,
48+
React.PropTypes.element
49+
]),
4450
legend: React.PropTypes.string,
4551
rightActions: React.PropTypes.array,
46-
rightIcon: React.PropTypes.any,
52+
rightIcon: React.PropTypes.oneOfType([
53+
React.PropTypes.string,
54+
React.PropTypes.element
55+
]),
4756
selectable: React.PropTypes.bool,
4857
to: React.PropTypes.string
4958
};

‎components/list/readme.md

+3-3
Original file line numberDiff line numberDiff line change
@@ -54,16 +54,16 @@ Represents a list item that can have avatar, icons, title, subtitle, etc. Note:
5454

5555
| Name | Type | Default | Description|
5656
|:-----|:-----|:-----|:-----|
57-
| `avatar` | `String` | | A string URL to specify an avatar in the left side of the item.|
57+
| `avatar` | `String` or `Element` | | A string URL to specify an avatar in the left side of the item.|
5858
| `caption` | `String` | | Main text of the item.|
5959
| `className` | `String` | `''` | Set a class to give custom styles to the list item.|
6060
| `disabled` | `String` | `false` | If true, the item is displayed as disabled and is not clickable.|
6161
| `itemContent` | `Element` | | An element that will be displayed as the item. If set, this will override `caption` and `legend`.|
6262
| `leftActions` | `Array of Elements` | | A list of elements that are placed on the left side of the item and after the avatar attribute.|
63-
| `leftIcon` | `Any` | | A string key of a font icon or element to display an icon in the left side of the item. |
63+
| `leftIcon` | `String` or `Element` | | A string key of a font icon or element to display an icon in the left side of the item. |
6464
| `legend` | `String` | | Secondary text to display under the caption.|
6565
| `onClick` | `Function` | | Callback the is invoked when the item is clicked if it's not disabled. |
66-
| `rightIcon` | `Any` | | The same as the `leftIcon` but in this case the icon is displayed in the right side.|
66+
| `rightIcon` | `String` or `Element` | | The same as the `leftIcon` but in this case the icon is displayed in the right side.|
6767
| `rightActions` | `Array of Elements` | | A list of elements that are placed on the right side of the item and after the rightIcon attribute.|
6868
| `ripple` | `Boolean` | `false` | If true, the item displays a ripple effect on click. By default it's inherited from the parent element.|
6969
| `selectable` | `Boolean` | `false` | If true, the elements in the list will display a hover effect and a pointer cursor. Inherited from the parent.|

‎components/menu/IconMenu.jsx

+4-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,10 @@ class IconMenu extends React.Component {
77
static propTypes = {
88
children: React.PropTypes.node,
99
className: React.PropTypes.string,
10-
icon: React.PropTypes.any,
10+
icon: React.PropTypes.oneOfType([
11+
React.PropTypes.string,
12+
React.PropTypes.element
13+
]),
1114
iconRipple: React.PropTypes.bool,
1215
menuRipple: React.PropTypes.bool,
1316
onClick: React.PropTypes.func,

‎components/menu/MenuItem.jsx

+4-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,10 @@ class MenuItem extends React.Component {
1010
children: React.PropTypes.any,
1111
className: React.PropTypes.string,
1212
disabled: React.PropTypes.bool,
13-
icon: React.PropTypes.any,
13+
icon: React.PropTypes.oneOfType([
14+
React.PropTypes.string,
15+
React.PropTypes.element
16+
]),
1417
onClick: React.PropTypes.func,
1518
selected: React.PropTypes.bool,
1619
shortcut: React.PropTypes.string

‎components/menu/readme.md

+20-20
Original file line numberDiff line numberDiff line change
@@ -45,33 +45,33 @@ The menu has state to keep a value with the currently selected item. It also exp
4545

4646
As the most usual scenario will be to open the menu from a click in an Icon, we provide this subcomponent implementing this behavior. The `IconMenu` shows an icon and implements a `Menu` under the covers that is shown when is clicked. Some of its properties are transferred to the menu, others to the children:
4747

48-
| Name | Type | Default | Description|
48+
| Name | Type | Default | Description|
4949
|:-----|:-----|:-----|:-----|
50-
| `className` | `String` | `''` | Set a class to give custom styles to the icon wrapper.|
51-
| `icon` | `Any` | `more_vert` | Icon font key string or Element to display the opener icon. |
52-
| `iconRipple` | `Boolean` | `true` | If true, the icon will show a ripple when is clicked. |
53-
| `menuRipple` | `Boolean` | `true` | Transferred to the `Menu` component. |
54-
| `onClick` | `Function` | | Callback that will be called when the icon is clicked. |
55-
| `onHide` | `Function` | | Callback that will be called when the menu is being hidden. |
56-
| `onSelect` | `Function` | | Callback that will be invoked when a menu item is selected. |
57-
| `onShow` | `Function` | | Callback that will be invoked when the menu is being shown. |
58-
| `position` | `String` | `auto` | Determines the position of the menu. This property is transferred to the inner `Menu` component. |
59-
| `selectable` | `Boolean` | `false` | If true, the menu will keep a value to highlight the active child item. |
60-
| `selected` | `Any` | | Used for selectable menus. Indicates the current selected value so the child item with this value can be highlighted. |
50+
| `className` | `String` | `''` | Set a class to give custom styles to the icon wrapper.|
51+
| `icon` | `String` or `Element` | `more_vert` | Icon font key string or Element to display the opener icon. |
52+
| `iconRipple` | `Boolean` | `true` | If true, the icon will show a ripple when is clicked. |
53+
| `menuRipple` | `Boolean` | `true` | Transferred to the `Menu` component. |
54+
| `onClick` | `Function` | | Callback that will be called when the icon is clicked. |
55+
| `onHide` | `Function` | | Callback that will be called when the menu is being hidden. |
56+
| `onSelect` | `Function` | | Callback that will be invoked when a menu item is selected. |
57+
| `onShow` | `Function` | | Callback that will be invoked when the menu is being shown. |
58+
| `position` | `String` | `auto` | Determines the position of the menu. This property is transferred to the inner `Menu` component. |
59+
| `selectable` | `Boolean` | `false` | If true, the menu will keep a value to highlight the active child item. |
60+
| `selected` | `Any` | | Used for selectable menus. Indicates the current selected value so the child item with this value can be highlighted. |
6161

6262
## Menu Item
6363

6464
The inner component for menus and describes the content of each option. It behaves in a similar way to List Items but simpler.
6565

66-
| Name | Type | Default | Description|
66+
| Name | Type | Default | Description|
6767
|:-----|:-----|:-----|:-----|
68-
| `caption` | `String` | | The text to include in the menu item. Required.|
69-
| `className` | `String` | `''` | Set a class to give custom styles to the item.|
70-
| `disabled` | `Boolean` | `false` | If true, the item will be displayed as disabled and is not selectable.|
71-
| `icon` | `Any` | | Icon font key string or Element to display in the right side of the option. |
72-
| `onClick` | `Function` | | Callback that will be called when Component is clicked. |
73-
| `selected` | `Boolean` | `false` | Transferred from the `Menu` component for selectable menus. Indicates if it's the current active option. |
74-
| `shortcut` | `String` | `''` | Displays shortcut text on the right side of the `caption` attribute. |
68+
| `caption` | `String` | | The text to include in the menu item. Required.|
69+
| `className` | `String` | `''` | Set a class to give custom styles to the item.|
70+
| `disabled` | `Boolean` | `false` | If true, the item will be displayed as disabled and is not selectable.|
71+
| `icon` | `String` or `Element` | | Icon font key string or Element to display in the right side of the option. |
72+
| `onClick` | `Function` | | Callback that will be called when Component is clicked. |
73+
| `selected` | `Boolean` | `false` | Transferred from the `Menu` component for selectable menus. Indicates if it's the current active option. |
74+
| `shortcut` | `String` | `''` | Displays shortcut text on the right side of the `caption` attribute. |
7575

7676
## Menu Divider
7777

‎components/snackbar/Snackbar.jsx

+4-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,10 @@ class Snackbar extends React.Component {
1010
action: React.PropTypes.string,
1111
active: React.PropTypes.bool,
1212
className: React.PropTypes.string,
13-
icon: React.PropTypes.any,
13+
icon: React.PropTypes.oneOfType([
14+
React.PropTypes.string,
15+
React.PropTypes.element
16+
]),
1417
label: React.PropTypes.string.isRequired,
1518
onClick: React.PropTypes.func,
1619
onTimeout: React.PropTypes.func,

‎components/snackbar/readme.md

+10-10
Original file line numberDiff line numberDiff line change
@@ -35,14 +35,14 @@ class SnackbarTest extends React.Component {
3535

3636
## Properties
3737

38-
| Name | Type | Default | Description|
38+
| Name | Type | Default | Description|
3939
|:-----|:-----|:-----|:-----|
40-
| `action` | `String` | | Label for the action component inside the Snackbar.|
41-
| `active` | `Boolean` | `false` | If true, the snackbar will be active.|
42-
| `className` | `String` | `''` | Additional class name to provide custom styling.|
43-
| `icon` | `Any` | | String key for an icon or Element which will be displayed in left side of the snackbar.|
44-
| `label` | `String` | | Text to display in the content. Required.|
45-
| `onClick` | `Function` | | Callback function that will be called when the button action is clicked.|
46-
| `onTimeout` | `Function` | | Callback function when finish the set timeout.|
47-
| `timeout` | `Number` | | Amount of time in milliseconds after the Snackbar will be automatically hidden.|
48-
| `type` | `String` | | Indicates the action type. Can be `accept`, `warning` or `cancel`|
40+
| `action` | `String` | | Label for the action component inside the Snackbar.|
41+
| `active` | `Boolean` | `false` | If true, the snackbar will be active.|
42+
| `className` | `String` | `''` | Additional class name to provide custom styling.|
43+
| `icon` | `String` or `Element` | | String key for an icon or Element which will be displayed in left side of the snackbar.|
44+
| `label` | `String` | | Text to display in the content. Required.|
45+
| `onClick` | `Function` | | Callback function that will be called when the button action is clicked.|
46+
| `onTimeout` | `Function` | | Callback function when finish the set timeout.|
47+
| `timeout` | `Number` | | Amount of time in milliseconds after the Snackbar will be automatically hidden.|
48+
| `type` | `String` | | Indicates the action type. Can be `accept`, `warning` or `cancel`|

‎spec/components/checkbox.jsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ class CheckboxTest extends React.Component {
3535
/>
3636
<Checkbox
3737
checked={this.state.checkbox_2}
38-
label="Not checked biatch"
38+
label="Not checked checkbox"
3939
onChange={this.handleChange.bind(this, 'checkbox_2')}
4040
onFocus={this.handleFocus}
4141
onBlur={this.handleBlur}

0 commit comments

Comments
 (0)
Please sign in to comment.