[Badge] Add invisible property (mui#13534)

* [Badge] Added hide property
[Badge] Added hide property tests
[docs] Added hide property demo

* [Badge] Changed style to use theme transition helper
[Badge] Merged shown class into root class

* [Badge] Changed hide property to invisible property
[docs] Updated Docs with Badge property change

* [docs] Fixed incorrect import

* let's merge

docs/src/pages/demos/badges/BadgeVisibility.js

@@ -0,0 +1,58 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import Badge from '@material-ui/core/Badge';
+import MailIcon from '@material-ui/icons/Mail';
+import Switch from '@material-ui/core/Switch';
+import FormGroup from '@material-ui/core/FormGroup';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+
+const styles = theme => ({
+  root: {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+  },
+  margin: {
+    margin: theme.spacing.unit,
+  },
+});
+
+class BadgeVisibility extends Component {
+  state = {
+    invisible: false,
+  };
+
+  handleBadgeVisibility = () => {
+    this.setState(prevState => ({ invisible: !prevState.invisible }));
+  };
+
+  render() {
+    const { classes } = this.props;
+    const { invisible } = this.state;
+
+    return (
+      <div className={classes.root}>
+        <div className={classes.margin}>
+          <Badge color="secondary" badgeContent={4} invisible={invisible}>
+            <MailIcon />
+          </Badge>
+        </div>
+        <FormGroup row>
+          <FormControlLabel
+            control={
+              <Switch color="primary" checked={!invisible} onChange={this.handleBadgeVisibility} />
+            }
+            label="Show Badge"
+          />
+        </FormGroup>
+      </div>
+    );
+  }
+}
+
+BadgeVisibility.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(BadgeVisibility);

docs/src/pages/demos/badges/badges.md

@@ -13,6 +13,12 @@ Examples of badges containing text, using primary and secondary colors. The badg
 
 {{"demo": "pages/demos/badges/SimpleBadge.js"}}
 
+## Badge visibility
+
+The visibility of badges can be controlled using the `invisible` property.
+
+{{"demo": "pages/demos/badges/BadgeVisibility.js"}}
+
 ## Customized Badge
 
 {{"demo": "pages/demos/badges/CustomizedBadge.js"}}

packages/material-ui/src/Badge/Badge.d.ts

@@ -7,9 +7,10 @@ export interface BadgeProps
   children: React.ReactNode;
   color?: PropTypes.Color | 'error';
   component?: React.ReactType<BadgeProps>;
+  invisible?: boolean;
 }
 
-export type BadgeClassKey = 'root' | 'badge' | 'colorPrimary' | 'colorSecondary';
+export type BadgeClassKey = 'root' | 'badge' | 'colorPrimary' | 'colorSecondary' | 'invisible';
 
 declare const Badge: React.ComponentType<BadgeProps>;
 

packages/material-ui/src/Badge/Badge.js

@@ -34,6 +34,11 @@ export const styles = theme => ({
     backgroundColor: theme.palette.color,
     color: theme.palette.textColor,
     zIndex: 1, // Render the badge on top of potential ripples.
+    transition: theme.transitions.create('transform', {
+      easing: theme.transitions.easing.easeInOut,
+      duration: theme.transitions.duration.enteringScreen,
+    }),
+    transform: 'scale(1)',
   },
   /* Styles applied to the root element if `color="primary"`. */
   colorPrimary: {
@@ -50,6 +55,14 @@ export const styles = theme => ({
     backgroundColor: theme.palette.error.main,
     color: theme.palette.error.contrastText,
   },
+  /* Styles applied to the badge `span` element if `invisible={true}`. */
+  invisible: {
+    transition: theme.transitions.create('transform', {
+      easing: theme.transitions.easing.easeInOut,
+      duration: theme.transitions.duration.leavingScreen,
+    }),
+    transform: 'scale(0)',
+  },
 });
 
 function Badge(props) {
@@ -60,11 +73,13 @@ function Badge(props) {
     className,
     color,
     component: ComponentProp,
+    invisible,
     ...other
   } = props;
 
   const badgeClassName = classNames(classes.badge, {
     [classes[`color${capitalize(color)}`]]: color !== 'default',
+    [classes.invisible]: invisible,
   });
 
   return (
@@ -102,11 +117,16 @@ Badge.propTypes = {
    * Either a string to use a DOM element or a component.
    */
   component: PropTypes.oneOfType([PropTypes.string, PropTypes.func, PropTypes.object]),
+  /**
+   * If `true`, the badge will be invisible.
+   */
+  invisible: PropTypes.bool,
 };
 
 Badge.defaultProps = {
   color: 'default',
   component: 'span',
+  invisible: false,
 };
 
 export default withStyles(styles, { name: 'MuiBadge' })(Badge);

packages/material-ui/src/Badge/Badge.test.js

@@ -118,4 +118,49 @@ describe('<Badge />', () => {
     assert.strictEqual(wrapper.contains(testChildren), true);
     assert.strictEqual(wrapper.props().style.backgroundColor, style.backgroundColor);
   });
+
+  describe('prop: invisible', () => {
+    it('should default to false', () => {
+      const wrapper = shallow(<Badge badgeContent={10}>{testChildren}</Badge>);
+      assert.strictEqual(
+        wrapper
+          .find('span')
+          .at(1)
+          .hasClass(classes.invisible),
+        false,
+      );
+    });
+
+    it('should render without the invisible class when set to false', () => {
+      const wrapper = shallow(
+        <Badge badgeContent={10} invisible={false}>
+          {testChildren}
+        </Badge>,
+      );
+
+      assert.strictEqual(
+        wrapper
+          .find('span')
+          .at(1)
+          .hasClass(classes.invisible),
+        false,
+      );
+    });
+
+    it('should render with the invisible class when set to true', () => {
+      const wrapper = shallow(
+        <Badge badgeContent={10} invisible>
+          {testChildren}
+        </Badge>,
+      );
+
+      assert.strictEqual(
+        wrapper
+          .find('span')
+          .at(1)
+          .hasClass(classes.invisible),
+        true,
+      );
+    });
+  });
 });

pages/api/badge.md

@@ -24,6 +24,7 @@ import Badge from '@material-ui/core/Badge';
 | <span class="prop-name">classes</span> | <span class="prop-type">object</span> |   | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. |
 | <span class="prop-name">color</span> | <span class="prop-type">enum:&nbsp;'default'&nbsp;&#124;<br>&nbsp;'primary'&nbsp;&#124;<br>&nbsp;'secondary'&nbsp;&#124;<br>&nbsp;'error'<br></span> | <span class="prop-default">'default'</span> | The color of the component. It supports those theme colors that make sense for this component. |
 | <span class="prop-name">component</span> | <span class="prop-type">union:&nbsp;string&nbsp;&#124;<br>&nbsp;func&nbsp;&#124;<br>&nbsp;object<br></span> | <span class="prop-default">'span'</span> | The component used for the root node. Either a string to use a DOM element or a component. |
+| <span class="prop-name">invisible</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, the badge will be invisible. |
 
 Any other properties supplied will be spread to the root element (native element).
 
@@ -40,6 +41,7 @@ This property accepts the following keys:
 | <span class="prop-name">colorPrimary</span> | Styles applied to the root element if `color="primary"`.
 | <span class="prop-name">colorSecondary</span> | Styles applied to the root element if `color="secondary"`.
 | <span class="prop-name">colorError</span> | Styles applied to the root element if `color="error"`.
+| <span class="prop-name">invisible</span> | Styles applied to the badge `span` element if `invisible={true}`.
 
 Have a look at [overriding with classes](/customization/overrides/#overriding-with-classes) section
 and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/Badge/Badge.js)

pages/demos/badges.js

@@ -21,6 +21,13 @@ module.exports = require('fs')
           raw: preval`
 module.exports = require('fs')
   .readFileSync(require.resolve('docs/src/pages/demos/badges/CustomizedBadge'), 'utf8')
+`,
+        },
+        'pages/demos/badges/BadgeVisibility.js': {
+          js: require('docs/src/pages/demos/badges/BadgeVisibility').default,
+          raw: preval`
+module.exports = require('fs')
+  .readFileSync(require.resolve('docs/src/pages/demos/badges/BadgeVisibility'), 'utf8')
 `,
         },
       }}