Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Doc] Migrate Badge to the new format #2489

Merged
merged 2 commits into from
Dec 13, 2015
Merged

[Doc] Migrate Badge to the new format #2489

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9f62a97
[Doc] Migrate Badge to the new format
oliviertassinari Dec 11, 2015
daa7b15
[Doc] Improve transition CodeBlock
oliviertassinari Dec 13, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 24 additions & 0 deletions docs/src/app/components/Badge/ExampleContent.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
import React from 'react';
import Badge from 'material-ui/lib/badge';
import IconButton from 'material-ui/lib/icon-button';
import UploadIcon from 'material-ui/lib/svg-icons/file/cloud-upload';
import FolderIcon from 'material-ui/lib/svg-icons/file/folder-open';

const BadgeExampleContent = () => (
<div>
<Badge
badgeContent={<IconButton tooltip="Backup"><UploadIcon/></IconButton>}
backgroundColor="#d8d8d8"
>
<FolderIcon />
</Badge>
<Badge
badgeContent="&copy;"
badgeStyle={{fontSize: 20}}
>
Company Name
</Badge>
</div>
);

export default BadgeExampleContent;
26 changes: 26 additions & 0 deletions docs/src/app/components/Badge/ExampleSimple.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
import React from 'react';
import Badge from 'material-ui/lib/badge';
import IconButton from 'material-ui/lib/icon-button';
import NotificationsIcon from 'material-ui/lib/svg-icons/social/notifications';

const BadgeExampleSimple = () => (
<div>
<Badge
badgeContent={4}
primary={true}
>
<NotificationsIcon />
</Badge>
<Badge
badgeContent={10}
secondary={true}
badgeStyle={{top: 12, right: 12}}
>
<IconButton tooltip="Notifications">
<NotificationsIcon/>
</IconButton>
</Badge>
</div>
);

export default BadgeExampleSimple;
5 changes: 5 additions & 0 deletions docs/src/app/components/Badge/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
## Badge

This component generates a small badge to the top-right of it's child(ren).

### Examples
4 changes: 2 additions & 2 deletions docs/src/app/components/code-example/code-block.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,8 @@ const styles = {
},
markdown: {
overflow: 'auto',
maxHeight: 2000,
transition: Transitions.easeOut('1s', 'max-height'),
maxHeight: 1400,
transition: Transitions.create('max-height', '800ms', '0ms', 'ease-in-out'),
},
markdownRetracted: {
maxHeight: LINE_MAX * 18,
Expand Down
129 changes: 25 additions & 104 deletions docs/src/app/components/pages/components/badge.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,106 +1,27 @@
import React from 'react';
import {
IconButton,
Badge,
Paper,
} from 'material-ui';
import ComponentDoc from '../../component-doc';
import Code from 'badge-code';
import badgeCode from '!raw!material-ui/lib/badge';
import CodeExample from '../../code-example/code-example';
import NotificationsIcon from 'material-ui/svg-icons/social/notifications';
import ShoppingCartIcon from 'material-ui/svg-icons/action/shopping-cart';
import FolderIcon from 'material-ui/svg-icons/file/folder-open';
import UploadIcon from 'material-ui/svg-icons/file/cloud-upload';
import CodeBlock from '../../code-example/code-block';

export default class BadgePage extends React.Component {
constructor(props) {
super(props);

this.desc = 'This component generates a small badge to the top-right of it\'s child(ren)';

this.componentInfo = [
{
name: 'Props',
infoArray: [
{
name: 'badgeContent',
type: 'node',
header: 'required',
desc: 'This is the content rendered within the badge.',
},
{
name: 'primary',
type: 'bool',
header: 'default: false',
desc: 'If true, the badge will use the primary badge colors.',
},
{
name: 'secondary',
type: 'bool',
header: 'default: false',
desc: 'If true, the badge will use the secondary badge colors.',
},
{
name: 'style',
type: 'object',
header: 'optional',
desc: 'Override the inline-styles of the root element.',
},
{
name: 'badgeStyle',
type: 'object',
header: 'optional',
desc: 'Override the inline-styles of the badge element.',
},
],
},
];
}

render() {
return (
<ComponentDoc
name="Badge"
desc={this.desc}
componentInfo={this.componentInfo}>

<Paper style = {{marginBottom: '22px'}}>
<CodeBlock>
{
`//Import statement:
import Badge from 'material-ui/lib/badge';
//See material-ui/lib/index.js for more
`
}
</CodeBlock>
</Paper>

<CodeExample code={Code}>

<Badge badgeContent={4} primary={true}>
<NotificationsIcon />
</Badge>

<Badge badgeContent={10} secondary={true} badgeStyle={{top:12, right:12}}>
<IconButton tooltip="Go To Cart">
<ShoppingCartIcon/>
</IconButton>
</Badge>

<Badge backgroundColor="#d8d8d8"
badgeContent={<IconButton tooltip="Backup"><UploadIcon/></IconButton>}>
<FolderIcon />
</Badge>

<Badge badgeContent="&copy;" badgeStyle={{fontSize:20}}>
<h3>Company Name</h3>
</Badge>

</CodeExample>
</ComponentDoc>
);
}

}
import PropTypeDescription from '../../PropTypeDescription';
import MarkdownElement from '../../MarkdownElement';
import badgeReadmeText from '../../Badge/README';
import BadgeExampleSimple from '../../Badge/ExampleSimple';
import badgeExampleSimpleCode from '!raw!../../Badge/ExampleSimple';
import BadgeExampleContent from '../../Badge/ExampleContent';
import badgeExampleContentCode from '!raw!../../Badge/ExampleContent';

const BadgePage = () => {
return (
<div>
<MarkdownElement text={badgeReadmeText} />
<CodeExample code={badgeExampleSimpleCode}>
<BadgeExampleSimple />
</CodeExample>
<CodeExample code={badgeExampleContentCode}>
<BadgeExampleContent />
</CodeExample>
<PropTypeDescription code={badgeCode}/>
</div>
);
};

export default BadgePage;
19 changes: 0 additions & 19 deletions docs/src/app/components/raw-code/badge-code.txt
View file
Open in desktop

This file was deleted.

52 changes: 43 additions & 9 deletions src/badge.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,7 @@ import ThemeManager from './styles/theme-manager';
import StylePropable from './mixins/style-propable';

// Badge
export default React.createClass({
displayName: 'Badge',
const Badge = React.createClass({
mixins: [StylePropable],
contextTypes: {
muiTheme: React.PropTypes.object,
Expand All @@ -21,12 +20,39 @@ export default React.createClass({
};
},
propTypes: {
/**
* This is the content rendered within the badge.
*/
badgeContent: React.PropTypes.node.isRequired,

/**
* Override the inline-styles of the badge element.
*/
badgeStyle: React.PropTypes.object,

/**
* The badge will be added relativelty to this node.
*/
children: React.PropTypes.node,

/**
* The css class name of the root element.
*/
className: React.PropTypes.string,

/**
* If true, the badge will use the primary badge colors.
*/
primary: React.PropTypes.bool,

/**
* If true, the badge will use the secondary badge colors.
*/
secondary: React.PropTypes.bool,

/**
* Override the inline-styles of the root element.
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm proposing this standard description. I don't think that we need to say that it's for the Badge component.
I have done the same for the className.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I like your approach. be sure to remind me when I make this mistake again 👍 👍

*/
style: React.PropTypes.object,
},
getInitialState() {
Expand All @@ -36,11 +62,8 @@ export default React.createClass({
},
getDefaultProps() {
return {
className: '',
primary: false,
secondary: false,
style: {},
badgeStyle: {},
};
},
componentWillReceiveProps(nextProps, nextContext) {
Expand Down Expand Up @@ -94,14 +117,25 @@ export default React.createClass({
};
},
render() {
const {
style,
children,
badgeContent,
badgeStyle,
...other,
} = this.props;

const styles = this.getStyles();

return (
<div style={this.prepareStyles(styles.root, this.props.style)} className={this.props.className}>
{this.props.children}
<span style={this.prepareStyles(styles.badge, this.props.badgeStyle)}>
{this.props.badgeContent}
<div {...other} style={this.prepareStyles(styles.root, style)}>
{children}
<span style={this.prepareStyles(styles.badge, badgeStyle)}>
{badgeContent}
</span>
</div>
);
},
});

export default Badge;