Skip to content

Commit

Permalink
Merge pull request #318 from mmrtnz/font-icon-components
Browse files Browse the repository at this point in the history
Replaced Icon component with FontIcon and SvgIcon - Fixes #125 #148
  • Loading branch information
Hai Nguyen committed Feb 9, 2015
2 parents b4dc09a + 6f83c33 commit e6e43c1
Show file tree
Hide file tree
Showing 65 changed files with 1,389 additions and 4,651 deletions.
10 changes: 3 additions & 7 deletions docs/gulp/config.js
Original file line number Diff line number Diff line change
Expand Up @@ -25,13 +25,9 @@ module.exports = {
src: src + "/www/**",
dest: dest
},
fonts: {
src: mui + '/less/material-design-fonticons/fonts/**',
dest: dest + '/fonts/mdfonticon'
},
muiFonts: {
src: mui + '/less/material-ui-icons/fonts/**',
dest: dest + '/fonts'
fontIcons: {
src: src + "/less/font-icons/**",
dest: dest + '/font-icons'
},
browserify: {
// Enable source maps
Expand Down
2 changes: 1 addition & 1 deletion docs/gulp/tasks/build.js
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
var gulp = require('gulp');

gulp.task('build', ['browserify', 'markup', 'less', 'fonts', 'muiFonts']);
gulp.task('build', ['browserify', 'markup', 'less', 'fontIcons']);
4 changes: 2 additions & 2 deletions docs/gulp/tasks/fonts.js → docs/gulp/tasks/fontIcons.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
var gulp = require('gulp');
var config = require('../config').fonts;
var config = require('../config').fontIcons;

gulp.task('fonts', function() {
gulp.task('fontIcons', function() {
return gulp.src(config.src)
.pipe(gulp.dest(config.dest));
});
7 changes: 0 additions & 7 deletions docs/gulp/tasks/mui-fonts.js

This file was deleted.

4 changes: 2 additions & 2 deletions docs/src/app/app-routes.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -19,8 +19,8 @@ var Buttons = require('./components/pages/components/buttons.jsx');
var DatePicker = require('./components/pages/components/date-picker.jsx');
var Dialog = require('./components/pages/components/dialog.jsx');
var DropDownMenu = require('./components/pages/components/drop-down-menu.jsx');
var IconButtons = require('./components/pages/components/icon-buttons.jsx');
var Icons = require('./components/pages/components/icons.jsx');
var IconButtons = require('./components/pages/components/icon-buttons.jsx');
var LeftNav = require('./components/pages/components/left-nav.jsx');
var Menus = require('./components/pages/components/menus.jsx');
var Paper = require('./components/pages/components/paper.jsx');
Expand Down Expand Up @@ -56,8 +56,8 @@ var AppRoutes = (
<Route name="date-picker" handler={DatePicker} />
<Route name="dialog" handler={Dialog} />
<Route name="dropdown-menu" handler={DropDownMenu} />
<Route name="icon-buttons" handler={IconButtons} />
<Route name="icons" handler={Icons} />
<Route name="icon-buttons" handler={IconButtons} />
<Route name="left-nav" handler={LeftNav} />
<Route name="menus" handler={Menus} />
<Route name="paper" handler={Paper} />
Expand Down
20 changes: 16 additions & 4 deletions docs/src/app/components/component-doc.jsx
Original file line number Diff line number Diff line change
@@ -1,9 +1,13 @@
var React = require('react');
var mui = require('mui');
var Classable = mui.Mixins.Classable;
var CodeExample = require('./code-example/code-example.jsx');
var ComponentInfo = require('./component-info.jsx');

var ComponentDoc = React.createClass({

mixins: [Classable],

propTypes: {
code: React.PropTypes.string.isRequired,
desc: React.PropTypes.string,
Expand All @@ -12,6 +16,8 @@ var ComponentDoc = React.createClass({
},

render: function() {
var classes = this.getClasses("component-doc");

var componentInfo = this.props.componentInfo.map(function(info, i) {
return (
<ComponentInfo
Expand All @@ -21,12 +27,18 @@ var ComponentDoc = React.createClass({
);
});

var desc = this.props.desc ? (
<p className="mui-font-style-subhead-1 component-doc-desc">{this.props.desc}</p>
) : null;
var desc = null;

if (this.props.desc) {
if ((typeof this.props.desc) == "string") {
desc = <p className="mui-font-style-subhead-1 component-doc-desc">{this.props.desc}</p>
} else {
desc = <div className="mui-font-style-subhead-1 component-doc-desc">{this.props.desc}</div>
}
}

return (
<div className="component-doc">
<div className={classes}>

<h2 className="mui-font-style-headline">{this.props.name}</h2>

Expand Down
2 changes: 1 addition & 1 deletion docs/src/app/components/master.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ var Master = React.createClass({
var githubButton = (
<IconButton
className="github-icon-button"
icon="mui-icon-github"
iconClassName="muidocs-icon-custom-github"
href="https://github.com/callemall/material-ui"
linkButton={true} />
);
Expand Down
2 changes: 1 addition & 1 deletion docs/src/app/components/pages/components.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,8 @@ var Components = React.createClass({
{ route: 'date-picker', text: 'Date Picker'},
{ route: 'dialog', text: 'Dialog'},
{ route: 'dropdown-menu', text: 'Dropdown Menu'},
{ route: 'icon-buttons', text: 'Icon Buttons'},
{ route: 'icons', text: 'Icons'},
{ route: 'icon-buttons', text: 'Icon Buttons'},
{ route: 'left-nav', text: 'Left Nav'},
{ route: 'menus', text: 'Menus'},
{ route: 'paper', text: 'Paper'},
Expand Down
33 changes: 17 additions & 16 deletions docs/src/app/components/pages/components/buttons.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -21,12 +21,12 @@ var ButtonPage = React.createClass({
'<RaisedButton label="Secondary" secondary={true} />\n' +
'<RaisedButton label="Disabled" disabled={true} />\n\n' +
'//Floating Action Buttons\n' +
'<FloatingActionButton icon="action-grade" />\n' +
'<FloatingActionButton icon="action-grade" mini={true} />\n' +
'<FloatingActionButton icon="action-grade" disabled={true} />\n' +
'<FloatingActionButton icon="action-grade" mini={true} disabled={true} />\n' +
'<FloatingActionButton icon="action-grade" secondary={true} />\n' +
'<FloatingActionButton icon="action-grade" mini={true} secondary={true} />';
'<FloatingActionButton iconClassName="muidocs-icon-action-grade" />\n' +
'<FloatingActionButton iconClassName="muidocs-icon-action-grade" mini={true} />\n' +
'<FloatingActionButton iconClassName="muidocs-icon-action-grade" disabled={true} />\n' +
'<FloatingActionButton iconClassName="muidocs-icon-action-grade" mini={true} disabled={true} />\n' +
'<FloatingActionButton iconClassName="muidocs-icon-action-grade" secondary={true} />\n' +
'<FloatingActionButton iconClassName="muidocs-icon-action-grade" mini={true} secondary={true} />';

var desc = 'This component generates a button element and all props except for ' +
'the custom props below will be passed down to the button element. Also, ' +
Expand Down Expand Up @@ -97,11 +97,12 @@ var ButtonPage = React.createClass({
name: 'Floating Action Button',
infoArray: [
{
name: 'icon',
name: 'iconClassName',
type: 'string',
header: 'required',
desc: 'This is the name of the icon to display inside the button. This only applies to ' +
'floating action buttons.'
header: 'optional',
desc: 'This is the classname of the icon to display inside the button. This only applies to ' +
'floating action buttons. An alternative to adding an icon would be to insert a custom svg ' +
'component or FontIcon as a child.'
},
{
name: 'linkButton',
Expand Down Expand Up @@ -166,25 +167,25 @@ var ButtonPage = React.createClass({

<div className="button-example-group">
<div className="button-example-container">
<FloatingActionButton icon="action-grade" />
<FloatingActionButton iconClassName="muidocs-icon-action-grade" />
</div>
<div className="button-example-container">
<FloatingActionButton icon="action-grade" mini={true} />
<FloatingActionButton iconClassName="muidocs-icon-action-grade" mini={true} />
</div>
<div className="button-example-container">
<FloatingActionButton icon="action-grade" disabled={true} />
<FloatingActionButton iconClassName="muidocs-icon-action-grade" disabled={true} />
</div>
<div className="button-example-container">
<FloatingActionButton icon="action-grade" mini={true} disabled={true} />
<FloatingActionButton iconClassName="muidocs-icon-action-grade" mini={true} disabled={true} />
</div>
</div>

<div className="button-example-group">
<div className="button-example-container">
<FloatingActionButton icon="action-grade" secondary={true} />
<FloatingActionButton iconClassName="muidocs-icon-action-grade" secondary={true} />
</div>
<div className="button-example-container">
<FloatingActionButton icon="action-grade" mini={true} secondary={true} />
<FloatingActionButton iconClassName="muidocs-icon-action-grade" mini={true} secondary={true} />
</div>
</div>

Expand Down
66 changes: 54 additions & 12 deletions docs/src/app/components/pages/components/icon-buttons.jsx
Original file line number Diff line number Diff line change
@@ -1,30 +1,66 @@
var React = require('react');
var mui = require('mui');
var IconButton = mui.IconButton;
var NavigationMenu = mui.Icons.NavigationMenu;
var ComponentDoc = require('../../component-doc.jsx');
var ActionGrade = require('../../svg-icons/action-grade.jsx');
var ActionHome = require('../../svg-icons/action-home.jsx');
var FontIcon = mui.FontIcon;

var IconButtonsPage = React.createClass({

render: function() {

var code =
'<IconButton icon="action-grade" tooltip="star" />\n' +
'<IconButton icon="action-grade" tooltip="star" touch={true} />\n' +
'<IconButton icon="action-grade" tooltip="star" disabled={true} />';
'//Method 1: muidocs-icon-github is defined in a style sheet.\n' +
'<IconButton iconClassName="muidocs-icon-custom-github" tooltip="GitHub"/>\n\n' +
'//Method 2: ActionGrade is a component created using mui.SvgIcon.\n' +
'<IconButton tooltip="Star" touch={true}>\n' +
' <ActionGrade/>\n' +
'</IconButton>\n\n' +
'//Method 3: Manually creating a mui.FontIcon component within ' +
'IconButton\n' +
'<IconButton tooltip="Sort" disabled={true}>\n' +
' <FontIcon className="muidocs-icon-custom-sort"/>\n' +
'</IconButton>';

var desc = 'This component generates a button element and all props except for ' +
'"icon" will be passed down to the button element. Also, focus styles ' +
'will happen on tab but not on click.';
var desc = <p>
This component generates a button element and all props.
Also, focus styles will happen on tab but not on click.
There are three ways to add an icon:
<br/>
<ol>
<li>
For stylesheets: Set the prop "iconClassName" to the
classname for you icon.
</li>
<li>
For svg icons: Insert the svg component as a child of icon
buttons. This is the method we are using. <a title="Source
code for ActionGrade" href="https://github.com/mmrtnz/material-ui/blob/font-icon-components/docs/src/app/components/svg-icons/action-grade.jsx">
View our source</a> to see how ActionGrade was created
using mui.SvgIcon.
</li>
<li>
Alternative: You can also insert a <a title="Redirect to
Material UI's FontIcon component" href="#/components/icons">
FontIcon</a> component as a child of IconButton. This is
similiar to how the iconClassName prop from method 1 is
handled.
</li>
</ol>
</p>;

var componentInfo = [
{
name: 'Props',
infoArray: [
{
name: 'icon',
name: 'iconClassName',
type: 'string',
header: 'required',
desc: 'The name of the icon to use.'
header: 'optional',
desc: 'If you are using a stylesheet for your icons, enter the ' +
'class name for the icon to be used here.'
},
{
name: 'tooltip',
Expand All @@ -49,9 +85,15 @@ var IconButtonsPage = React.createClass({
desc={desc}
componentInfo={componentInfo}>

<IconButton icon="action-grade" tooltip="Star" />
<IconButton icon="action-grade" tooltip="Star" touch={true} />
<IconButton icon="action-grade" tooltip="Star" disabled={true} />
<IconButton iconClassName="muidocs-icon-custom-github" tooltip="GitHub"/>

<IconButton tooltip="Star" touch={true}>
<ActionGrade/>
</IconButton>

<IconButton tooltip="Sort" disabled={true}>
<FontIcon className="muidocs-icon-custom-sort"/>
</IconButton>

</ComponentDoc>
);
Expand Down
Loading

0 comments on commit e6e43c1

Please sign in to comment.