Badge generates a small badge to the top-right of its child(ren).
-## Simple Badges
+## Simple badges
Examples of badges containing text, using primary and secondary colors. The badge is applied to its children.
@@ -23,17 +23,19 @@ Here is an example of customizing the component. You can learn more about this i
The visibility of badges can be controlled using the `invisible` property.
+{{"demo": "pages/components/badges/BadgeVisibility.js"}}
+
The badge auto hides with badgeContent is zero. You can override this with the `showZero` property.
-{{"demo": "pages/components/badges/BadgeVisibility.js"}}
+{{"demo": "pages/components/badges/ShowZeroBadge.js"}}
-## Maximum Value
+## Maximum value
You can use the `max` property to cap the value of the badge content.
{{"demo": "pages/components/badges/BadgeMax.js"}}
-## Dot Badge
+## Dot badge
The `dot` property changes a badge into a small dot. This can be used as a notification that something has changed without giving a count.
diff --git a/packages/material-ui/src/Badge/Badge.js b/packages/material-ui/src/Badge/Badge.js
index e0cb7bc24884d3..88fc1bfeea2278 100644
--- a/packages/material-ui/src/Badge/Badge.js
+++ b/packages/material-ui/src/Badge/Badge.js
@@ -1,4 +1,4 @@
-import React, { useRef } from 'react';
+import React from 'react';
import PropTypes from 'prop-types';
import clsx from 'clsx';
import withStyles from '../styles/withStyles';
@@ -161,13 +161,13 @@ const Badge = React.forwardRef(function Badge(props, ref) {
children,
classes,
className,
- color: colorProp = 'default',
+ color = 'default',
component: ComponentProp = 'span',
invisible: invisibleProp,
max = 99,
overlap = 'rectangle',
showZero = false,
- variant: variantProp = 'standard',
+ variant = 'standard',
...other
} = props;
@@ -175,29 +175,20 @@ const Badge = React.forwardRef(function Badge(props, ref) {
if (
invisibleProp == null &&
- ((badgeContent === 0 && !showZero) || (badgeContent == null && variantProp !== 'dot'))
+ ((badgeContent === 0 && !showZero) || (badgeContent == null && variant !== 'dot'))
) {
invisible = true;
}
- let nextDisplayValue = '';
+ let displayValue = '';
- if (variantProp !== 'dot') {
- nextDisplayValue = badgeContent > max ? `${max}+` : badgeContent;
+ if (variant !== 'dot') {
+ displayValue = badgeContent > max ? `${max}+` : badgeContent;
}
- // Retain the appearance of badge while invisible, to keep same appearance until disappearing.
- // These should not be an attribute with transitions, or it will cause an undesirable animation at next appearing.
- const nextNotTransitionedAttrs = {
- displayValue: nextDisplayValue,
- color: colorProp,
- variant: variantProp,
- };
-
- const lastNotTransitionedPropsRef = useRef(nextNotTransitionedAttrs);
- const { displayValue, color, variant } = invisible
- ? lastNotTransitionedPropsRef.current
- : nextNotTransitionedAttrs;
+ if (invisible && badgeContent === 0 && variant !== 'dot') {
+ displayValue = '1';
+ }
return (
diff --git a/packages/material-ui/src/Badge/Badge.test.js b/packages/material-ui/src/Badge/Badge.test.js
index 01e8250dc05964..80bcc58c31c770 100644
--- a/packages/material-ui/src/Badge/Badge.test.js
+++ b/packages/material-ui/src/Badge/Badge.test.js
@@ -3,7 +3,6 @@ import { assert } from 'chai';
import { createMount, getClasses } from '@material-ui/core/test-utils';
import describeConformance from '../test-utils/describeConformance';
import Badge from './Badge';
-import { act } from 'react-dom/test-utils';
function findBadge(wrapper) {
return wrapper.find('span').at(1);
@@ -58,20 +57,6 @@ describe('', () => {
assert.strictEqual(wrapper.contains(defaultProps.children), true);
});
- it('retains text, color and variant while invisible for disappearing transition', () => {
- const wrapper = mount();
- act(() => {
- wrapper.setProps({ badgeContent: 0, color: 'secondary', variant: 'standard' });
- });
- assert.strictEqual(findBadge(wrapper).text(), '');
- assert.strictEqual(findBadge(wrapper).hasClass(classes.colorPrimary), true);
- assert.strictEqual(findBadge(wrapper).hasClass(classes.dot), true);
- act(() => {
- wrapper.setProps({ showZero: true });
- });
- assert.strictEqual(findBadge(wrapper).text(), '0');
- });
-
describe('prop: color', () => {
it('should have the colorPrimary class when color="primary"', () => {
const wrapper = mount();