From 9f62a97bd7aca7002af85ce5a9b271432ca79f46 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Sat, 12 Dec 2015 00:35:41 +0100 Subject: [PATCH 1/2] [Doc] Migrate Badge to the new format --- .../app/components/Badge/ExampleContent.jsx | 24 ++++ .../app/components/Badge/ExampleSimple.jsx | 26 ++++ docs/src/app/components/Badge/README.md | 5 + .../app/components/pages/components/badge.jsx | 129 ++++-------------- .../app/components/raw-code/badge-code.txt | 19 --- src/badge.jsx | 52 +++++-- 6 files changed, 123 insertions(+), 132 deletions(-) create mode 100644 docs/src/app/components/Badge/ExampleContent.jsx create mode 100644 docs/src/app/components/Badge/ExampleSimple.jsx create mode 100644 docs/src/app/components/Badge/README.md delete mode 100644 docs/src/app/components/raw-code/badge-code.txt diff --git a/docs/src/app/components/Badge/ExampleContent.jsx b/docs/src/app/components/Badge/ExampleContent.jsx new file mode 100644 index 00000000000000..6a27ebf4ebfb0c --- /dev/null +++ b/docs/src/app/components/Badge/ExampleContent.jsx @@ -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 = () => ( +
+ } + backgroundColor="#d8d8d8" + > + + + + Company Name + +
+); + +export default BadgeExampleContent; diff --git a/docs/src/app/components/Badge/ExampleSimple.jsx b/docs/src/app/components/Badge/ExampleSimple.jsx new file mode 100644 index 00000000000000..36e60adb1c09eb --- /dev/null +++ b/docs/src/app/components/Badge/ExampleSimple.jsx @@ -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 = () => ( +
+ + + + + + + + +
+); + +export default BadgeExampleSimple; diff --git a/docs/src/app/components/Badge/README.md b/docs/src/app/components/Badge/README.md new file mode 100644 index 00000000000000..f6cd9ee0778e82 --- /dev/null +++ b/docs/src/app/components/Badge/README.md @@ -0,0 +1,5 @@ +## Badge + +This component generates a small badge to the top-right of it's child(ren). + +### Examples diff --git a/docs/src/app/components/pages/components/badge.jsx b/docs/src/app/components/pages/components/badge.jsx index 855ab04b48671b..7202a6ff5b1182 100644 --- a/docs/src/app/components/pages/components/badge.jsx +++ b/docs/src/app/components/pages/components/badge.jsx @@ -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 ( - - - - - { - `//Import statement: -import Badge from 'material-ui/lib/badge'; - -//See material-ui/lib/index.js for more - ` - } - - - - - - - - - - - - - - - - }> - - - - -

Company Name

- - - - - ); - } - -} +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 ( +
+ + + + + + + + +
+ ); +}; + +export default BadgePage; diff --git a/docs/src/app/components/raw-code/badge-code.txt b/docs/src/app/components/raw-code/badge-code.txt deleted file mode 100644 index b81afb780a8e95..00000000000000 --- a/docs/src/app/components/raw-code/badge-code.txt +++ /dev/null @@ -1,19 +0,0 @@ - - - - -//override badgeStyle to account for padding of child element - - - - - - -}> - - - - -

Company Name

- \ No newline at end of file diff --git a/src/badge.jsx b/src/badge.jsx index fa43fa13b3e0bd..0bdbf3832ccc92 100644 --- a/src/badge.jsx +++ b/src/badge.jsx @@ -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, @@ -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, + + /** + * Applied to 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. + */ style: React.PropTypes.object, }, getInitialState() { @@ -36,11 +62,8 @@ export default React.createClass({ }, getDefaultProps() { return { - className: '', primary: false, secondary: false, - style: {}, - badgeStyle: {}, }; }, componentWillReceiveProps(nextProps, nextContext) { @@ -94,14 +117,25 @@ export default React.createClass({ }; }, render() { + const { + style, + children, + badgeContent, + badgeStyle, + ...other, + } = this.props; + const styles = this.getStyles(); + return ( -
- {this.props.children} - - {this.props.badgeContent} +
+ {children} + + {badgeContent}
); }, }); + +export default Badge; From daa7b15d1183ef7ce49cb426f05eee6f3581ff3a Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Mon, 14 Dec 2015 00:01:32 +0100 Subject: [PATCH 2/2] [Doc] Improve transition CodeBlock --- docs/src/app/components/code-example/code-block.jsx | 4 ++-- src/badge.jsx | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/src/app/components/code-example/code-block.jsx b/docs/src/app/components/code-example/code-block.jsx index 74d423c1a37e4e..769d3844e272d2 100644 --- a/docs/src/app/components/code-example/code-block.jsx +++ b/docs/src/app/components/code-example/code-block.jsx @@ -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, diff --git a/src/badge.jsx b/src/badge.jsx index 0bdbf3832ccc92..d665c0cb2ced3a 100644 --- a/src/badge.jsx +++ b/src/badge.jsx @@ -36,7 +36,7 @@ const Badge = React.createClass({ children: React.PropTypes.node, /** - * Applied to the root element. + * The css class name of the root element. */ className: React.PropTypes.string,