From 18c3ab89af8917de3cd5a5a73b6f5500e7bb7f9e Mon Sep 17 00:00:00 2001 From: WJH Date: Tue, 31 Oct 2017 17:40:59 +0800 Subject: [PATCH 1/3] Added demo for buttons with label and icon --- .../pages/demos/buttons/IconLabelButtons.js | 64 +++++++++++++++++++ docs/src/pages/demos/buttons/buttons.md | 5 ++ pages/demos/buttons.js | 7 ++ 3 files changed, 76 insertions(+) create mode 100644 docs/src/pages/demos/buttons/IconLabelButtons.js diff --git a/docs/src/pages/demos/buttons/IconLabelButtons.js b/docs/src/pages/demos/buttons/IconLabelButtons.js new file mode 100644 index 00000000000000..18c8e57573b91d --- /dev/null +++ b/docs/src/pages/demos/buttons/IconLabelButtons.js @@ -0,0 +1,64 @@ +import React, {Component} from "react"; +import PropTypes from "prop-types"; +import Button from "material-ui/Button"; +import {withStyles} from "material-ui/styles"; +import Delete from "material-ui-icons/Delete"; +import Done from "material-ui-icons/Done"; +import FileUpload from "material-ui-icons/FileUpload"; +import KeyboardVoice from "material-ui-icons/KeyboardVoice"; +import Save from "material-ui-icons/Save"; +import Send from "material-ui-icons/Send"; + +const styles = theme => ({ + button: { + margin: theme.spacing.unit + }, + leftIcon: { + marginRight: theme.spacing.unit + }, + rightIcon: { + marginLeft: theme.spacing.unit + } +}); + +function IconLabelButtons(props) { + const {classes} = props; + return ( +
+
+ + + +
+
+ + + +
+
+ ); +} + +IconLabelButtons.propTypes = { + classes: PropTypes.object.isRequired +}; + +export default withStyles(styles)(IconLabelButtons); \ No newline at end of file diff --git a/docs/src/pages/demos/buttons/buttons.md b/docs/src/pages/demos/buttons/buttons.md index 3554407e56d6fa..b88c1201e868cc 100644 --- a/docs/src/pages/demos/buttons/buttons.md +++ b/docs/src/pages/demos/buttons/buttons.md @@ -43,6 +43,11 @@ Icons are also appropriate for toggle buttons that allow a single choice to be s {{demo='pages/demos/buttons/IconButtons.js'}} +### Buttons with icons and label +Sometimes you might want to have icons for certain button to enhance the UX of the application as humans recognize logos more than plain text. For example, if you have a delete button you can label it with a dustbin icon. + +{{demo='pages/demos/buttons/IconLabelButtons.js'}} + ## Complex Buttons The Flat Buttons, Raised Buttons, Floating Action Buttons and Icon Buttons are built on top of the same component: the `ButtonBase`. diff --git a/pages/demos/buttons.js b/pages/demos/buttons.js index 18d042d816f884..f82a552405ee62 100644 --- a/pages/demos/buttons.js +++ b/pages/demos/buttons.js @@ -36,6 +36,13 @@ module.exports = require('fs') raw: preval` module.exports = require('fs') .readFileSync(require.resolve('docs/src/pages/demos/buttons/IconButtons'), 'utf8') +`, + }, + 'pages/demos/buttons/IconLabelButtons.js': { + js: require('docs/src/pages/demos/buttons/IconLabelButtons').default, + raw: preval` +module.exports = require('fs') + .readFileSync(require.resolve('docs/src/pages/demos/buttons/IconLabelButtons'), 'utf8') `, }, 'pages/demos/buttons/ButtonBases.js': { From 4cfaacf1abdddb10ec4bfd5dbf146fa97a0ac6c5 Mon Sep 17 00:00:00 2001 From: WJH Date: Tue, 31 Oct 2017 17:47:20 +0800 Subject: [PATCH 2/3] Fix ESLint issue --- .../pages/demos/buttons/IconLabelButtons.js | 46 +++++++++---------- 1 file changed, 23 insertions(+), 23 deletions(-) diff --git a/docs/src/pages/demos/buttons/IconLabelButtons.js b/docs/src/pages/demos/buttons/IconLabelButtons.js index 18c8e57573b91d..36270fb98ad496 100644 --- a/docs/src/pages/demos/buttons/IconLabelButtons.js +++ b/docs/src/pages/demos/buttons/IconLabelButtons.js @@ -1,55 +1,55 @@ -import React, {Component} from "react"; -import PropTypes from "prop-types"; -import Button from "material-ui/Button"; -import {withStyles} from "material-ui/styles"; -import Delete from "material-ui-icons/Delete"; -import Done from "material-ui-icons/Done"; -import FileUpload from "material-ui-icons/FileUpload"; -import KeyboardVoice from "material-ui-icons/KeyboardVoice"; -import Save from "material-ui-icons/Save"; -import Send from "material-ui-icons/Send"; +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; +import Button from 'material-ui/Button'; +import { withStyles } from 'material-ui/styles'; +import Delete from 'material-ui-icons/Delete'; +import Done from 'material-ui-icons/Done'; +import FileUpload from 'material-ui-icons/FileUpload'; +import KeyboardVoice from 'material-ui-icons/KeyboardVoice'; +import Save from 'material-ui-icons/Save'; +import Send from 'material-ui-icons/Send'; const styles = theme => ({ button: { - margin: theme.spacing.unit + margin: theme.spacing.unit, }, leftIcon: { - marginRight: theme.spacing.unit + marginRight: theme.spacing.unit, }, rightIcon: { - marginLeft: theme.spacing.unit - } + marginLeft: theme.spacing.unit, + }, }); function IconLabelButtons(props) { - const {classes} = props; + const { classes } = props; return (
@@ -58,7 +58,7 @@ function IconLabelButtons(props) { } IconLabelButtons.propTypes = { - classes: PropTypes.object.isRequired + classes: PropTypes.object.isRequired, }; -export default withStyles(styles)(IconLabelButtons); \ No newline at end of file +export default withStyles(styles)(IconLabelButtons); From 26b32d99ab53a3a99c1087512a167ff0476b9b5d Mon Sep 17 00:00:00 2001 From: WJH Date: Tue, 31 Oct 2017 17:52:12 +0800 Subject: [PATCH 3/3] Fix some ESLint error : - missing flow annotation - no-unused-var --- docs/src/pages/demos/buttons/IconLabelButtons.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/docs/src/pages/demos/buttons/IconLabelButtons.js b/docs/src/pages/demos/buttons/IconLabelButtons.js index 36270fb98ad496..760dd0db9691e1 100644 --- a/docs/src/pages/demos/buttons/IconLabelButtons.js +++ b/docs/src/pages/demos/buttons/IconLabelButtons.js @@ -1,4 +1,6 @@ -import React, { Component } from 'react'; +// @flow weak + +import React from 'react'; import PropTypes from 'prop-types'; import Button from 'material-ui/Button'; import { withStyles } from 'material-ui/styles';