From e53955dea60c6e759d0367c2fc181ee07f2f1800 Mon Sep 17 00:00:00 2001 From: Zadielerick Date: Thu, 31 Dec 2015 10:50:24 -0600 Subject: [PATCH] Update Documentation for Buttons --- docs/src/app/app-routes.jsx | 8 +- docs/src/app/components/app-left-nav.jsx | 16 +- .../components/FlatButton/ExampleComplex.jsx | 49 ++ .../components/FlatButton/ExampleSimple.jsx | 12 + .../pages/components/FlatButton/Page.jsx | 26 + .../pages/components/FlatButton/README.md | 5 + .../FloatingActionButton/ExampleComplex.jsx | 31 + .../FloatingActionButton/ExampleSimple.jsx | 20 + .../components/FloatingActionButton/Page.jsx | 26 + .../components/FloatingActionButton/README.md | 5 + .../RaisedButton/ExampleComplex.jsx | 54 ++ .../components/RaisedButton/ExampleSimple.jsx | 16 + .../pages/components/RaisedButton/Page.jsx | 26 + .../pages/components/RaisedButton/README.md | 5 + .../components/pages/components/buttons.jsx | 536 ------------------ .../components/raw-code/flat-button-code.txt | 19 - .../raw-code/floating-action-button-code.txt | 16 - .../raw-code/raised-button-code.txt | 19 - src/flat-button.jsx | 62 +- src/floating-action-button.jsx | 71 +++ src/raised-button.jsx | 85 +++ 21 files changed, 513 insertions(+), 594 deletions(-) create mode 100644 docs/src/app/components/pages/components/FlatButton/ExampleComplex.jsx create mode 100644 docs/src/app/components/pages/components/FlatButton/ExampleSimple.jsx create mode 100644 docs/src/app/components/pages/components/FlatButton/Page.jsx create mode 100644 docs/src/app/components/pages/components/FlatButton/README.md create mode 100644 docs/src/app/components/pages/components/FloatingActionButton/ExampleComplex.jsx create mode 100644 docs/src/app/components/pages/components/FloatingActionButton/ExampleSimple.jsx create mode 100644 docs/src/app/components/pages/components/FloatingActionButton/Page.jsx create mode 100644 docs/src/app/components/pages/components/FloatingActionButton/README.md create mode 100644 docs/src/app/components/pages/components/RaisedButton/ExampleComplex.jsx create mode 100644 docs/src/app/components/pages/components/RaisedButton/ExampleSimple.jsx create mode 100644 docs/src/app/components/pages/components/RaisedButton/Page.jsx create mode 100644 docs/src/app/components/pages/components/RaisedButton/README.md delete mode 100644 docs/src/app/components/pages/components/buttons.jsx delete mode 100644 docs/src/app/components/raw-code/flat-button-code.txt delete mode 100644 docs/src/app/components/raw-code/floating-action-button-code.txt delete mode 100644 docs/src/app/components/raw-code/raised-button-code.txt diff --git a/docs/src/app/app-routes.jsx b/docs/src/app/app-routes.jsx index 8fbe82249fe4dc..5ca6b1fd177ce1 100644 --- a/docs/src/app/app-routes.jsx +++ b/docs/src/app/app-routes.jsx @@ -23,12 +23,13 @@ import AppBarPage from './components/pages/components/AppBar/Page'; import AutoComplete from './components/pages/components/auto-complete'; import AvatarPage from './components/pages/components/Avatar/Page'; import BadgePage from './components/pages/components/Badge/Page'; -import Buttons from './components/pages/components/buttons'; import CardPage from './components/pages/components/Card/Page'; import DatePicker from './components/pages/components/DatePicker/Page'; import DialogPage from './components/pages/components/Dialog/Page'; import DividerPage from './components/pages/components/Divider/Page'; import DropDownMenuPage from './components/pages/components/DropDownMenu/Page'; +import FlatButtonPage from './components/pages/components/FlatButton/Page'; +import FloatingActionButtonPage from './components/pages/components/FloatingActionButton/Page'; import GridListPage from './components/pages/components/GridList/Page'; import Icons from './components/pages/components/icons'; import IconButtonPage from './components/pages/components/IconButton/Page'; @@ -39,6 +40,7 @@ import Menus from './components/pages/components/menus'; import Paper from './components/pages/components/paper'; import Popover from './components/pages/components/popover'; import Progress from './components/pages/components/progress'; +import RaisedButtonPage from './components/pages/components/RaisedButton/Page'; import RefreshIndicator from './components/pages/components/refresh-indicator'; import SelectField from './components/pages/components/SelectField/Page'; import Sliders from './components/pages/components/sliders'; @@ -84,12 +86,13 @@ const AppRoutes = ( - + + @@ -100,6 +103,7 @@ const AppRoutes = ( + diff --git a/docs/src/app/components/app-left-nav.jsx b/docs/src/app/components/app-left-nav.jsx index 0ea7b13ff29c77..7f074272436497 100644 --- a/docs/src/app/components/app-left-nav.jsx +++ b/docs/src/app/components/app-left-nav.jsx @@ -156,8 +156,22 @@ const AppLeftNav = React.createClass({ primaryText="Badge" />, , + , + , + ]} />, ( +
+ + + + + + + + + + +
+); + +export default FlatButtonExampleComplex; diff --git a/docs/src/app/components/pages/components/FlatButton/ExampleSimple.jsx b/docs/src/app/components/pages/components/FlatButton/ExampleSimple.jsx new file mode 100644 index 00000000000000..c7a6fd3e79f183 --- /dev/null +++ b/docs/src/app/components/pages/components/FlatButton/ExampleSimple.jsx @@ -0,0 +1,12 @@ +import React from 'react'; +import FlatButton from 'material-ui/lib/flat-button'; + +const FlatButtonExampleSimple = () => ( +
+ + + +
+); + +export default FlatButtonExampleSimple; diff --git a/docs/src/app/components/pages/components/FlatButton/Page.jsx b/docs/src/app/components/pages/components/FlatButton/Page.jsx new file mode 100644 index 00000000000000..6ace72fea39a21 --- /dev/null +++ b/docs/src/app/components/pages/components/FlatButton/Page.jsx @@ -0,0 +1,26 @@ +import React from 'react'; +import CodeExample from '../../../CodeExample'; +import PropTypeDescription from '../../../PropTypeDescription'; +import MarkdownElement from '../../../MarkdownElement'; + +import flatButtonCode from '!raw!material-ui/lib/flat-button'; +import flatButtonReadmeText from './README'; +import flatButtonExampleSimpleCode from '!raw!./ExampleSimple'; +import FlatButtonExampleSimple from './ExampleSimple'; +import flatButtonExampleComplexCode from '!raw!./ExampleComplex'; +import FlatButtonExampleComplex from './ExampleComplex'; + +const FlatButtonPage = () => ( +
+ + + + + + + + +
+); + +export default FlatButtonPage; diff --git a/docs/src/app/components/pages/components/FlatButton/README.md b/docs/src/app/components/pages/components/FlatButton/README.md new file mode 100644 index 00000000000000..e7370c6d370689 --- /dev/null +++ b/docs/src/app/components/pages/components/FlatButton/README.md @@ -0,0 +1,5 @@ +## Flat Button +[Flat Buttons](https://www.google.com/design/spec/components/buttons.html#buttons-flat-raised-buttons) +are used for general functions and reduce the amount of layering on the screen, making it more readable. + +### Examples diff --git a/docs/src/app/components/pages/components/FloatingActionButton/ExampleComplex.jsx b/docs/src/app/components/pages/components/FloatingActionButton/ExampleComplex.jsx new file mode 100644 index 00000000000000..c487691969c238 --- /dev/null +++ b/docs/src/app/components/pages/components/FloatingActionButton/ExampleComplex.jsx @@ -0,0 +1,31 @@ +import React from 'react'; +import FloatingActionButton from 'material-ui/lib/floating-action-button'; +import Add from 'material-ui/lib/svg-icons/content/add'; + +const style = { + marginRight: 20, +}; + +const FloatingButtonExampleComplex = () => ( +
+ + + + + + + + + + + + +
+); + +export default FloatingButtonExampleComplex; diff --git a/docs/src/app/components/pages/components/FloatingActionButton/ExampleSimple.jsx b/docs/src/app/components/pages/components/FloatingActionButton/ExampleSimple.jsx new file mode 100644 index 00000000000000..ff5c555a423200 --- /dev/null +++ b/docs/src/app/components/pages/components/FloatingActionButton/ExampleSimple.jsx @@ -0,0 +1,20 @@ +import React from 'react'; +import FloatingActionButton from 'material-ui/lib/floating-action-button'; +import Add from 'material-ui/lib/svg-icons/content/add'; + +const style = { + marginRight: 20, +}; + +const FloatingActionButtonExampleSimple = () => ( +
+ + + + + + +
+); + +export default FloatingActionButtonExampleSimple; diff --git a/docs/src/app/components/pages/components/FloatingActionButton/Page.jsx b/docs/src/app/components/pages/components/FloatingActionButton/Page.jsx new file mode 100644 index 00000000000000..2c458854694d94 --- /dev/null +++ b/docs/src/app/components/pages/components/FloatingActionButton/Page.jsx @@ -0,0 +1,26 @@ +import React from 'react'; +import CodeExample from '../../../CodeExample'; +import PropTypeDescription from '../../../PropTypeDescription'; +import MarkdownElement from '../../../MarkdownElement'; + +import floatingButtonCode from '!raw!material-ui/lib/floating-action-button'; +import floatingButtonReadmeText from './README'; +import floatingButtonExampleSimpleCode from '!raw!./ExampleSimple'; +import FloatingButtonExampleSimple from './ExampleSimple'; +import floatingButtonExampleComplexCode from '!raw!./ExampleComplex'; +import FloatingButtonExampleComplex from './ExampleComplex'; + +const FloatingActionButtonPage = () => ( +
+ + + + + + + + +
+); + +export default FloatingActionButtonPage; diff --git a/docs/src/app/components/pages/components/FloatingActionButton/README.md b/docs/src/app/components/pages/components/FloatingActionButton/README.md new file mode 100644 index 00000000000000..dfc80b84dacf72 --- /dev/null +++ b/docs/src/app/components/pages/components/FloatingActionButton/README.md @@ -0,0 +1,5 @@ +## Floating Action Button +The [Floating Action Button](https://www.google.com/design/spec/components/buttons-floating-action-button.html) +is used for frequently used functions. + +### Examples diff --git a/docs/src/app/components/pages/components/RaisedButton/ExampleComplex.jsx b/docs/src/app/components/pages/components/RaisedButton/ExampleComplex.jsx new file mode 100644 index 00000000000000..554aec33ab3e14 --- /dev/null +++ b/docs/src/app/components/pages/components/RaisedButton/ExampleComplex.jsx @@ -0,0 +1,54 @@ +import React from 'react'; +import RaisedButton from 'material-ui/lib/raised-button'; +import FontIcon from 'material-ui/lib/font-icon'; +import Typography from 'material-ui/lib/styles/typography'; + +const style = { + buttonLabel: { + padding: '0px 16px 0px 8px', + }, + exampleImageInput: { + cursor: 'pointer', + position: 'absolute', + top: 0, + bottom: 0, + right: 0, + left: 0, + width: '100%', + opacity: 0, + }, + exampleButtonIcon: { + color: Typography.textFullWhite, + }, + button: { + margin: 12, + }, +}; + +const RaisedButtonExampleComplex = () => ( +
+ + + + + + + + + + +
+); + +export default RaisedButtonExampleComplex; diff --git a/docs/src/app/components/pages/components/RaisedButton/ExampleSimple.jsx b/docs/src/app/components/pages/components/RaisedButton/ExampleSimple.jsx new file mode 100644 index 00000000000000..2f85e26e22a97a --- /dev/null +++ b/docs/src/app/components/pages/components/RaisedButton/ExampleSimple.jsx @@ -0,0 +1,16 @@ +import React from 'react'; +import RaisedButton from 'material-ui/lib/raised-button'; + +const style = { + margin: 12, +}; + +const RaisedButtonExampleSimple = () => ( +
+ + + +
+); + +export default RaisedButtonExampleSimple; diff --git a/docs/src/app/components/pages/components/RaisedButton/Page.jsx b/docs/src/app/components/pages/components/RaisedButton/Page.jsx new file mode 100644 index 00000000000000..b46c1bee8fb0b6 --- /dev/null +++ b/docs/src/app/components/pages/components/RaisedButton/Page.jsx @@ -0,0 +1,26 @@ +import React from 'react'; +import CodeExample from '../../../CodeExample'; +import PropTypeDescription from '../../../PropTypeDescription'; +import MarkdownElement from '../../../MarkdownElement'; + +import raisedButtonCode from '!raw!material-ui/lib/raised-button'; +import raisedButtonReadmeText from './README'; +import raisedButtonExampleSimpleCode from '!raw!./ExampleSimple'; +import RaisedButtonExampleSimple from './ExampleSimple'; +import RaisedButtonExampleComplexCode from '!raw!./ExampleComplex'; +import RaisedButtonExampleComplex from './ExampleComplex'; + +const FloatingActionButtonPage = () => ( +
+ + + + + + + + +
+); + +export default FloatingActionButtonPage; diff --git a/docs/src/app/components/pages/components/RaisedButton/README.md b/docs/src/app/components/pages/components/RaisedButton/README.md new file mode 100644 index 00000000000000..1056e17fa00380 --- /dev/null +++ b/docs/src/app/components/pages/components/RaisedButton/README.md @@ -0,0 +1,5 @@ +## Raised Button +This [button](https://www.google.com/design/spec/components/buttons.html#buttons-flat-raised-buttons) +is used to add dimension to mostly flat layouts and emphasizes important functions on your page. + +### Examples diff --git a/docs/src/app/components/pages/components/buttons.jsx b/docs/src/app/components/pages/components/buttons.jsx deleted file mode 100644 index 4dc2923581bdd3..00000000000000 --- a/docs/src/app/components/pages/components/buttons.jsx +++ /dev/null @@ -1,536 +0,0 @@ -import React from 'react'; -import ComponentDoc from '../../component-doc'; -import ToggleStar from 'material-ui/svg-icons/toggle/star'; - -import { - FlatButton, - FloatingActionButton, - FontIcon, - RaisedButton, - Paper, - Styles, - Tab, - Tabs, - Utils, -} from 'material-ui'; -const extend = Utils.Extend; -const {Colors, Typography} = Styles; -import RaisedButtonCode from 'raised-button-code'; -import FloatingActionButtonCode from 'floating-action-button-code'; -import FlatButtonCode from 'flat-button-code'; -import CodeExample from '../../CodeExample'; -import CodeBlock from '../../CodeExample/CodeBlock'; - - -export default class ButtonPage extends React.Component { - - constructor(props) { - super(props); - - this.desc = 'This component generates a button element and all props except for ' + - 'the custom props listed below. Also, ' + - 'focus styles will be applied on tab (and not on click).'; - - this.componentInfo = [ - { - name: 'Flat Button Props', - infoArray: [ - { - name: 'containerElement', - type: 'oneOfType [string, element]', - header: 'default: button', - desc: 'This component will render a button element by default and an anchor element ' + - 'if linkButton is set to true. ' + - 'However, you can override this behavior by passing in a string or another react ' + - 'element into this prop. This is ' + - 'useful for generating link buttons with the react router link element.', - }, - { - name: 'disabled', - type: 'bool', - header: 'optional', - desc: 'Disables the button if set to true.', - }, - { - name: 'hoverColor', - type: 'string', - header: 'optional', - desc: 'Override the inline hover color of the button\'s root element.', - }, - { - name: 'label or children', - type: 'string (label) or HTML/React elements (children)', - header: 'required', - desc: 'This is what will be displayed inside the button. If a label is specified,' + - ' the text within the label prop will be displayed.' + - ' Otherwise, the component will expect children which will then be displayed (in our example, ' + - ' we are nesting an ' + - 'and a span that acts as our label to be displayed.) ' + - 'This only applies to flat and raised buttons.', - }, - { - name: 'labelStyle', - type: 'object', - header: 'optional', - desc: 'Override the inline-styles of the button\'s label element.', - }, - { - name: 'labelPosition', - type: 'oneOf ["before", "after"]', - header: 'default: "before"', - desc: 'Place label before or after the passed children', - }, - { - name: 'linkButton', - type: 'bool', - header: 'default: false', - desc: 'If true, an anchor element will be generated instead of a button element.', - }, - { - name: 'primary', - type: 'bool', - header: 'default: false', - desc: 'If true, the button will use the primary button colors.', - }, - { - name: 'secondary', - type: 'bool', - header: 'default: false', - desc: 'If true, the button will use the secondary button colors.', - }, - { - name: 'rippleColor', - type: 'string', - header: 'optional', - desc: 'Override the inline color of the button\'s ripple element.', - }, - { - name: 'style', - type: 'object', - header: 'optional', - desc: 'Override the inline-styles of the button\'s root element.', - }, - ], - }, - { - name: 'Raised Button Props', - infoArray: [ - { - name: 'containerElement', - type: 'oneOfType [string, element]', - header: 'default: button', - desc: 'This component will render a button element by default and an anchor' + - ' element if linkButton is set to true. ' + - 'However, you can override this behavior by passing in a string or another ' + - 'react element into this prop. This is ' + - 'useful for generating link buttons with the react router link element.', - }, - { - name: 'disabled', - type: 'bool', - header: 'optional', - desc: 'Disables the button if set to true.', - }, - { - name: 'fullWidth', - type: 'bool', - header: 'optional', - desc: 'If true, will change the width of the button to span the full width of the parent.', - }, - { - name: 'label or children', - type: 'string (label) or HTML/React elements (children)', - header: 'required', - desc: 'This is what will be displayed inside the button. If a label is specified, the text' + - ' within the label prop will be displayed.' + - ' Otherwise, the component will expect children which will then be displayed ' + - '(in our example, we are nesting an ' + - 'and a span that acts as our label to be displayed.) ' + - 'This only applies to flat and raised buttons.', - }, - { - name: 'labelPosition', - type: 'oneOf ["before", "after"]', - header: 'default: "before"', - desc: 'Place label before or after the passed children', - }, - { - name: 'labelStyle', - type: 'object', - header: 'optional', - desc: 'Override the inline-styles of the button\'s label element.', - }, - { - name: 'linkButton', - type: 'bool', - header: 'default: false', - desc: 'If true, an anchor element will be generated instead of a button element.', - }, - { - name: 'primary', - type: 'bool', - header: 'default: false', - desc: 'If true, the button will use the primary button colors.', - }, - { - name: 'secondary', - type: 'bool', - header: 'default: false', - desc: 'If true, the button will use the secondary button colors.', - }, - { - name: 'backgroundColor', - type: 'string', - header: 'optional', - desc: 'Override the background color. Always takes precedence unless the button is disabled.', - }, - { - name: 'labelColor', - type: 'string', - header: 'optional', - desc: 'Override the label color. Always takes precedence unless the button is disabled.', - }, - { - name: 'disabledBackgroundColor', - type: 'string', - header: 'optional', - desc: 'Override the background color if the button is disabled.', - }, - { - name: 'disabledLabelColor', - type: 'string', - header: 'optional', - desc: 'Override the label color if the button is disabled.', - }, - { - name: 'style', - type: 'object', - header: 'optional', - desc: 'Override the inline-styles of the button\'s root element.', - }, - ], - }, - { - name: 'Floating Action Button Props', - infoArray: [ - { - name: 'backgroundColor', - type: 'string', - header: 'optional', - desc: `This value will override the default background color for the button. - However it will not override the default disabled background color. - This has to be set separately using the disabledColor attribute.`, - }, - { - name: 'containerElement', - type: 'oneOfType [string, element]', - header: 'default: button', - desc: `This component will render a button element by default and an anchor element - if linkButton is set to true. - However, you can override this behavior by passing in a string or another react element into this prop. - This is useful for generating link buttons with the react router link element.`, - }, - { - name: 'disabled', - type: 'bool', - header: 'optional', - desc: 'Disables the button if set to true.', - }, - { - name: 'disabledColor', - type: 'string', - header: 'optional', - desc: 'This value will override the default background color for the button when it is disabled.', - }, - { - name: 'iconClassName', - type: 'string', - header: 'optional', - desc: 'The icon within the FloatingActionButton is a FontIcon component. This property ' + - 'is the classname of the icon to be displayed inside the button. An alternative ' + - 'to adding an iconClassName would be to manually insert a FontIcon component or ' + - 'custom SvgIcon component or as a child of FloatingActionButton.', - }, - { - name: 'iconStyle', - type: 'object', - header: 'optional', - desc: 'This is the equivalent to iconClassName except that it is used for overriding ' + - 'the inline-styles of the FontIcon component.', - }, - { - name: 'linkButton', - type: 'bool', - header: 'default: false', - desc: 'If true, an anchor element will be generated instead of a button element.', - }, - { - name: 'mini', - type: 'bool', - header: 'default: false', - desc: 'If true, the button will be a small floating action button.', - }, - { - name: 'secondary', - type: 'bool', - header: 'default: false', - desc: 'If true, the button will use the secondary button colors.', - }, - { - name: 'style', - type: 'object', - header: 'optional', - desc: 'Override the inline-styles of the button\'s root element.', - }, - ], - }, - { - name: 'Button Events', - infoArray: [ - { - name: 'onTouchTap', - type: 'function(event)', - header: 'optional', - desc: 'Called when a touch tap event occurs on the button.', - }, - ], - }, - ]; - } - - getStyles() { - let styles = { - container: { - textAlign: 'center', - marginBottom: '16px', - }, - group: { - float: 'left', - width: '50%', - }, - groupFloatingAction: { - float: 'left', - width: '33%', - }, - buttonLabel: { - padding: '0px 16px 0px 8px', - }, - exampleIconButtonLabel: { - padding: '0px 8px', - }, - exampleImageButton: { - whiteSpace: 'pre', - cursor: 'pointer', - position: 'relative', - textAlign: 'center', - lineHeight: '24px', - width: '50%', - top: '0px', - left: '0px', - marginTop: '24px', - marginRight: 'auto', - marginLeft: 'auto', - padding: '0px 8px', - }, - exampleImageInput: { - cursor: 'pointer', - position: 'absolute', - top: '0', - bottom: '0', - right: '0', - left: '0', - width: '100%', - opacity: '0', - }, - exampleFlatButtonIcon: { - height: '100%', - display: 'inline-block', - verticalAlign: 'middle', - paddingLeft: '12px', - lineHeight: '36px', - color: Colors.cyan500, - }, - exampleButtonIcon: { - color: Typography.textFullWhite, - }, - headline: { - //mui-font-style-headline - fontSize: '24px', - lineHeight: '32px', - paddingTop: '16px', - marginBottom: '12px', - letterSpacing: '0', - fontWeight: Typography.fontWeightNormal, - color: Typography.textDarkBlack, - }, - }; - styles.exampleButtonIcon = extend(styles.exampleFlatButtonIcon, styles.exampleButtonIcon); - return styles; - } - - render() { - let styles = this.getStyles(); - return ( -
-

Buttons

- - - - { - '//Import statements:\nimport FlatButton from \'material-ui/lib/flat-button\';\n' + - 'import RaisedButton from \'material-ui/lib/raised-button\';\n' + - 'import FloatingActionButton from \'material-ui/lib/floating-action-button\';\n\n' + - '//See material-ui/lib/index.js for more\n' - } - - - - - - - - -
-
- -
-
- -
-
- -
-
-
-
- - - -
-
- - - -
-
- - - -
-
- -
-
- - - - - - -
-
- -
-
- -
-
- -
-
-
-
- - - -
-
- - - -
-
- - - -
-
- -
-
- - - - - - -
-
- - - -
-
- -
-
-
-
- -
-
- - - -
-
-
-
- - - -
-
- -
-
- - - - - -
- ); - } - -} diff --git a/docs/src/app/components/raw-code/flat-button-code.txt b/docs/src/app/components/raw-code/flat-button-code.txt deleted file mode 100644 index 3bc6aa4d4b760c..00000000000000 --- a/docs/src/app/components/raw-code/flat-button-code.txt +++ /dev/null @@ -1,19 +0,0 @@ - - - - - - - - - - - - - - - - - - - diff --git a/docs/src/app/components/raw-code/floating-action-button-code.txt b/docs/src/app/components/raw-code/floating-action-button-code.txt deleted file mode 100644 index 53f171752b1d1a..00000000000000 --- a/docs/src/app/components/raw-code/floating-action-button-code.txt +++ /dev/null @@ -1,16 +0,0 @@ -//Floating Action Buttons - - - - - - - - - - - - - - diff --git a/docs/src/app/components/raw-code/raised-button-code.txt b/docs/src/app/components/raw-code/raised-button-code.txt deleted file mode 100644 index 93eb6c4509650b..00000000000000 --- a/docs/src/app/components/raw-code/raised-button-code.txt +++ /dev/null @@ -1,19 +0,0 @@ - - - - - - - - - - - - - - - - - - - diff --git a/src/flat-button.jsx b/src/flat-button.jsx index 25fb40a75e0b0d..25476575aec09f 100644 --- a/src/flat-button.jsx +++ b/src/flat-button.jsx @@ -20,22 +20,80 @@ function validateLabel(props, propName, componentName) { const FlatButton = React.createClass({ propTypes: { + /** + * Color of button when mouse is not hovering over it. + */ backgroundColor: React.PropTypes.string, + + /** + * Elements passed into the button. For example, the font + * icon passed into the GitHub button. + */ children: React.PropTypes.node, + + /** + * Disables the button if set to true. + */ disabled: React.PropTypes.bool, + + /** + * Color of button when mouse hovers over. + */ hoverColor: React.PropTypes.string, + + /** + * Label for the button. + */ label: validateLabel, + + /** + * Place label before or after the passed children. + */ labelPosition: React.PropTypes.oneOf([ 'before', 'after', ]), + + /** + * Override the inline-styles of the button's label element. + */ labelStyle: React.PropTypes.object, + + /** + * Called when element is focused by the keyboard. + */ onKeyboardFocus: React.PropTypes.func, + + /** + * Called when the mouse enters the element. + */ onMouseEnter: React.PropTypes.func, + + /** + * Called when the mouse leaves the element. + */ onMouseLeave: React.PropTypes.func, + + /** + * + */ onTouchStart: React.PropTypes.func, + + /** + * If true, colors button according to + * primaryTextColor from the Theme. + */ primary: React.PropTypes.bool, + + /** + * Color for the ripple after button is clicked. + */ rippleColor: React.PropTypes.string, + + /** + * If true, colors button according to secondaryTextColor from the theme. + * The primary prop has precendent if set to true. + */ secondary: React.PropTypes.bool, /** @@ -85,12 +143,15 @@ const FlatButton = React.createClass({ getDefaultProps() { return { + disabled: false, labelStyle: {}, labelPosition: 'before', // Should be after but we keep it like for now (prevent breaking changes) onKeyboardFocus: () => {}, onMouseEnter: () => {}, onMouseLeave: () => {}, onTouchStart: () => {}, + primary: false, + secondary: false, }; }, @@ -226,7 +287,6 @@ const FlatButton = React.createClass({ ); }, - }); export default FlatButton; diff --git a/src/floating-action-button.jsx b/src/floating-action-button.jsx index 56761244acb420..8811d63dc5daba 100644 --- a/src/floating-action-button.jsx +++ b/src/floating-action-button.jsx @@ -2,6 +2,7 @@ import React from 'react'; import ReactDOM from 'react-dom'; import StylePropable from './mixins/style-propable'; import Transitions from './styles/transitions'; +import Colors from './styles/colors'; import ColorManipulator from './utils/color-manipulator'; import EnhancedButton from './enhanced-button'; import FontIcon from './font-icon'; @@ -14,19 +15,80 @@ import warning from 'warning'; const FloatingActionButton = React.createClass({ propTypes: { + /** + * This value will override the default background color for the button. + * However it will not override the default disabled background color. + * This has to be set separately using the disabledColor attribute. + */ backgroundColor: React.PropTypes.string, + + /** + * This is what displayed inside the floating action button; for example, a SVG Icon. + */ children: React.PropTypes.node, + + /** + * Disables the button if set to true. + */ disabled: React.PropTypes.bool, + + /** + * This value will override the default background color for the button when it is disabled. + */ disabledColor: React.PropTypes.string, + + /** + * The icon within the FloatingActionButton is a FontIcon component. + * This property is the classname of the icon to be displayed inside the button. + * An alternative to adding an iconClassName would be to manually insert a + * FontIcon component or custom SvgIcon component or as a child of FloatingActionButton. + */ iconClassName: React.PropTypes.string, + + /** + * This is the equivalent to iconClassName except that it is used for + * overriding the inline-styles of the FontIcon component. + */ iconStyle: React.PropTypes.object, + + /** + * If true, the button will be a small floating action button. + */ mini: React.PropTypes.bool, + + /** + * Called when mouse down event occurs on the button. + */ onMouseDown: React.PropTypes.func, + + /** + * Called when mouse enter event occurs on the button. + */ onMouseEnter: React.PropTypes.func, + + /** + * Called when mouse leave event occurs on the button. + */ onMouseLeave: React.PropTypes.func, + + /** + * Called when mouse up event occurs on the button. + */ onMouseUp: React.PropTypes.func, + + /** + * Called when touch end event occurs on the button. + */ onTouchEnd: React.PropTypes.func, + + /** + * Called when touch start event occurs on the button. + */ onTouchStart: React.PropTypes.func, + + /** + * If true, the button will use the secondary button colors. + */ secondary: React.PropTypes.bool, /** @@ -48,6 +110,15 @@ const FloatingActionButton = React.createClass({ StylePropable, ], + getDefaultProps() { + return { + disabled: false, + disabledColor: Colors.grey300, + mini: false, + secondary: false, + }; + }, + getInitialState() { const zDepth = this.props.disabled ? 0 : 2; diff --git a/src/raised-button.jsx b/src/raised-button.jsx index d489dadd3fcf8a..5fab548462f390 100644 --- a/src/raised-button.jsx +++ b/src/raised-button.jsx @@ -20,31 +20,112 @@ function validateLabel(props, propName, componentName) { const RaisedButton = React.createClass({ propTypes: { + /** + * Override the background color. Always takes precedence unless the button is disabled. + */ backgroundColor: React.PropTypes.string, + + /** + * This is what will be displayed inside the button. + * If a label is specified, the text within the label prop will + * be displayed. Otherwise, the component will expect children + * which will then be displayed (in our example, + * we are nesting an and a span + * that acts as our label to be displayed.) This only + * applies to flat and raised buttons. + */ children: React.PropTypes.node, /** * The css class name of the root element. */ className: React.PropTypes.string, + + /** + * Disables the button if set to true. + */ disabled: React.PropTypes.bool, + + /** + * Override the background color if the button is disabled. + */ disabledBackgroundColor: React.PropTypes.string, + + /** + * Color of the label if disabled is true. + */ disabledLabelColor: React.PropTypes.string, + + /** + * If true, then the button will take up the full + * width of its container. + */ fullWidth: React.PropTypes.bool, + + /** + * The label for the button. + */ label: validateLabel, + + /** + * The color of the label for the button. + */ labelColor: React.PropTypes.string, + + /** + * Place label before or after the passed children. + */ labelPosition: React.PropTypes.oneOf([ 'before', 'after', ]), + + /** + * Override the inline-styles of the button's label element. + */ labelStyle: React.PropTypes.object, + + /** + * Callback function for when the mouse is pressed down inside this element. + */ onMouseDown: React.PropTypes.func, + + /** + * Callback function for when the mouse enters this element. + */ onMouseEnter: React.PropTypes.func, + + /** + * Callback function for when the mouse leaves this element. + */ onMouseLeave: React.PropTypes.func, + + /** + * Callback function for when the mouse is realeased + * above this element. + */ onMouseUp: React.PropTypes.func, + + /** + * Callback function for when a touchTap event ends. + */ onTouchEnd: React.PropTypes.func, + + /** + * Callback function for when a touchTap event starts. + */ onTouchStart: React.PropTypes.func, + + /** + * If true, colors button according to + * primaryTextColor from the Theme. + */ primary: React.PropTypes.bool, + + /** + * If true, colors button according to secondaryTextColor from the theme. + * The primary prop has precendent if set to true. + */ secondary: React.PropTypes.bool, /** @@ -68,7 +149,11 @@ const RaisedButton = React.createClass({ getDefaultProps: function() { return { + disabled: false, labelPosition: 'before', // Should be after but we keep it like for now (prevent breaking changes) + fullWidth: false, + primary: false, + secondary: false, }; },