From 8d0a5a07969403226263e5b8e786eff2bf0c7c66 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Tue, 31 Dec 2019 15:50:09 +0100 Subject: [PATCH] improve demos --- docs/src/pages/components/badges/BadgeMax.js | 17 +++-- docs/src/pages/components/badges/BadgeMax.tsx | 17 +++-- .../components/badges/BadgeVisibility.js | 62 ++++++++++--------- .../components/badges/BadgeVisibility.tsx | 62 ++++++++++--------- .../components/badges/CustomizedBadges.js | 2 +- .../components/badges/CustomizedBadges.tsx | 2 +- docs/src/pages/components/badges/DotBadge.js | 5 +- docs/src/pages/components/badges/DotBadge.tsx | 5 +- .../pages/components/badges/ShowZeroBadge.js | 27 ++++++++ .../pages/components/badges/ShowZeroBadge.tsx | 33 ++++++++++ .../pages/components/badges/SimpleBadge.js | 11 ++-- .../pages/components/badges/SimpleBadge.tsx | 11 ++-- docs/src/pages/components/badges/badges.md | 10 +-- packages/material-ui/src/Badge/Badge.js | 29 +++------ packages/material-ui/src/Badge/Badge.test.js | 15 ----- 15 files changed, 172 insertions(+), 136 deletions(-) create mode 100644 docs/src/pages/components/badges/ShowZeroBadge.js create mode 100644 docs/src/pages/components/badges/ShowZeroBadge.tsx diff --git a/docs/src/pages/components/badges/BadgeMax.js b/docs/src/pages/components/badges/BadgeMax.js index 7b756a155f6089..319b6c58e80788 100644 --- a/docs/src/pages/components/badges/BadgeMax.js +++ b/docs/src/pages/components/badges/BadgeMax.js @@ -11,20 +11,19 @@ const useStyles = makeStyles(theme => ({ }, })); +const defaultProps = { + color: 'secondary', + children: , +}; + export default function BadgeMax() { const classes = useStyles(); return (
- - - - - - - - - + + +
); } diff --git a/docs/src/pages/components/badges/BadgeMax.tsx b/docs/src/pages/components/badges/BadgeMax.tsx index ae688b01589177..33976f83a71e4b 100644 --- a/docs/src/pages/components/badges/BadgeMax.tsx +++ b/docs/src/pages/components/badges/BadgeMax.tsx @@ -13,20 +13,19 @@ const useStyles = makeStyles((theme: Theme) => }), ); +const defaultProps = { + color: 'secondary', + children: , +}; + export default function BadgeMax() { const classes = useStyles(); return (
- - - - - - - - - + + +
); } diff --git a/docs/src/pages/components/badges/BadgeVisibility.js b/docs/src/pages/components/badges/BadgeVisibility.js index 9c186d663dc1bf..a1c15a76fe650a 100644 --- a/docs/src/pages/components/badges/BadgeVisibility.js +++ b/docs/src/pages/components/badges/BadgeVisibility.js @@ -1,33 +1,30 @@ import React from 'react'; import { makeStyles } from '@material-ui/core/styles'; import Badge from '@material-ui/core/Badge'; +import ButtonGroup from '@material-ui/core/ButtonGroup'; +import Button from '@material-ui/core/Button'; +import AddIcon from '@material-ui/icons/Add'; +import RemoveIcon from '@material-ui/icons/Remove'; 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'; -import Divider from '@material-ui/core/Divider'; const useStyles = makeStyles(theme => ({ root: { display: 'flex', flexDirection: 'column', - alignItems: 'center', - width: '100%', - }, - margin: { - margin: theme.spacing(1), - }, - divider: { - margin: theme.spacing(2, 0), - width: '100%', - }, - row: { - marginTop: theme.spacing(2), + '& > *': { + marginBottom: theme.spacing(2), + }, + '& .MuiBadge-root': { + marginRight: theme.spacing(4), + }, }, })); export default function BadgeVisibility() { const classes = useStyles(); + const [count, setCount] = React.useState(1); const [invisible, setInvisible] = React.useState(false); const handleBadgeVisibility = () => { @@ -36,28 +33,37 @@ export default function BadgeVisibility() { return (
-
- +
+ - + + + + +
+
+ -
- } label="Show Badge" /> - - -
- - - - - -
); diff --git a/docs/src/pages/components/badges/BadgeVisibility.tsx b/docs/src/pages/components/badges/BadgeVisibility.tsx index 4414a4e7b68397..d052321f477a2b 100644 --- a/docs/src/pages/components/badges/BadgeVisibility.tsx +++ b/docs/src/pages/components/badges/BadgeVisibility.tsx @@ -1,35 +1,32 @@ import React from 'react'; import { Theme, createStyles, makeStyles } from '@material-ui/core/styles'; import Badge from '@material-ui/core/Badge'; +import ButtonGroup from '@material-ui/core/ButtonGroup'; +import Button from '@material-ui/core/Button'; +import AddIcon from '@material-ui/icons/Add'; +import RemoveIcon from '@material-ui/icons/Remove'; 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'; -import Divider from '@material-ui/core/Divider'; const useStyles = makeStyles((theme: Theme) => createStyles({ root: { display: 'flex', flexDirection: 'column', - alignItems: 'center', - width: '100%', - }, - margin: { - margin: theme.spacing(1), - }, - divider: { - margin: theme.spacing(2, 0), - width: '100%', - }, - row: { - marginTop: theme.spacing(2), + '& > *': { + marginBottom: theme.spacing(2), + }, + '& .MuiBadge-root': { + marginRight: theme.spacing(4), + }, }, }), ); export default function BadgeVisibility() { const classes = useStyles(); + const [count, setCount] = React.useState(1); const [invisible, setInvisible] = React.useState(false); const handleBadgeVisibility = () => { @@ -38,28 +35,37 @@ export default function BadgeVisibility() { return (
-
- +
+ - + + + + +
+
+ -
- } label="Show Badge" /> - - -
- - - - - -
); diff --git a/docs/src/pages/components/badges/CustomizedBadges.js b/docs/src/pages/components/badges/CustomizedBadges.js index 6071cca81b3589..637b72898875ec 100644 --- a/docs/src/pages/components/badges/CustomizedBadges.js +++ b/docs/src/pages/components/badges/CustomizedBadges.js @@ -16,7 +16,7 @@ const StyledBadge = withStyles(theme => ({ export default function CustomizedBadges() { return ( - + diff --git a/docs/src/pages/components/badges/CustomizedBadges.tsx b/docs/src/pages/components/badges/CustomizedBadges.tsx index 7da7ffe40155e5..da08afb9c5a68a 100644 --- a/docs/src/pages/components/badges/CustomizedBadges.tsx +++ b/docs/src/pages/components/badges/CustomizedBadges.tsx @@ -18,7 +18,7 @@ const StyledBadge = withStyles((theme: Theme) => export default function CustomizedBadges() { return ( - + diff --git a/docs/src/pages/components/badges/DotBadge.js b/docs/src/pages/components/badges/DotBadge.js index bcc6604b2ed4a5..fe2495e927db0e 100644 --- a/docs/src/pages/components/badges/DotBadge.js +++ b/docs/src/pages/components/badges/DotBadge.js @@ -17,13 +17,10 @@ export default function DotBadge() { return (
- - - - + Typography
diff --git a/docs/src/pages/components/badges/DotBadge.tsx b/docs/src/pages/components/badges/DotBadge.tsx index dcc4d242435622..f4b57373e4c1b3 100644 --- a/docs/src/pages/components/badges/DotBadge.tsx +++ b/docs/src/pages/components/badges/DotBadge.tsx @@ -19,13 +19,10 @@ export default function DotBadge() { return (
- - - - + Typography
diff --git a/docs/src/pages/components/badges/ShowZeroBadge.js b/docs/src/pages/components/badges/ShowZeroBadge.js new file mode 100644 index 00000000000000..e39160f5ff93fe --- /dev/null +++ b/docs/src/pages/components/badges/ShowZeroBadge.js @@ -0,0 +1,27 @@ +import React from 'react'; +import { makeStyles } from '@material-ui/core/styles'; +import Badge from '@material-ui/core/Badge'; +import MailIcon from '@material-ui/icons/Mail'; + +const useStyles = makeStyles(theme => ({ + root: { + '& > *': { + margin: theme.spacing(1), + }, + }, +})); + +export default function ShowZeroBadge() { + const classes = useStyles(); + + return ( +
+ + + + + + +
+ ); +} diff --git a/docs/src/pages/components/badges/ShowZeroBadge.tsx b/docs/src/pages/components/badges/ShowZeroBadge.tsx new file mode 100644 index 00000000000000..d7fa6d216339e4 --- /dev/null +++ b/docs/src/pages/components/badges/ShowZeroBadge.tsx @@ -0,0 +1,33 @@ +import React from 'react'; +import { Theme, createStyles, makeStyles } 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'; +import Divider from '@material-ui/core/Divider'; + +const useStyles = makeStyles((theme: Theme) => + createStyles({ + root: { + '& > *': { + margin: theme.spacing(1), + }, + }, + }), +); + +export default function ShowZeroBadge() { + const classes = useStyles(); + + return ( +
+ + + + + + +
+ ); +} diff --git a/docs/src/pages/components/badges/SimpleBadge.js b/docs/src/pages/components/badges/SimpleBadge.js index d0dfad7cd61b9c..72c40fee285321 100644 --- a/docs/src/pages/components/badges/SimpleBadge.js +++ b/docs/src/pages/components/badges/SimpleBadge.js @@ -1,7 +1,6 @@ import React from 'react'; import { makeStyles } from '@material-ui/core/styles'; import Badge from '@material-ui/core/Badge'; -import IconButton from '@material-ui/core/IconButton'; import MailIcon from '@material-ui/icons/Mail'; const useStyles = makeStyles(theme => ({ @@ -20,14 +19,12 @@ export default function SimpleBadge() { - + + + + - - - - -
); } diff --git a/docs/src/pages/components/badges/SimpleBadge.tsx b/docs/src/pages/components/badges/SimpleBadge.tsx index 3ed7f2aed2596f..445101d44f253e 100644 --- a/docs/src/pages/components/badges/SimpleBadge.tsx +++ b/docs/src/pages/components/badges/SimpleBadge.tsx @@ -1,7 +1,6 @@ import React from 'react'; import { makeStyles, Theme, createStyles } from '@material-ui/core/styles'; import Badge from '@material-ui/core/Badge'; -import IconButton from '@material-ui/core/IconButton'; import MailIcon from '@material-ui/icons/Mail'; const useStyles = makeStyles((theme: Theme) => @@ -22,14 +21,12 @@ export default function SimpleBadge() { - + + + + - - - - -
); } diff --git a/docs/src/pages/components/badges/badges.md b/docs/src/pages/components/badges/badges.md index 69a1c6e50712e6..703fe1afa7e24e 100644 --- a/docs/src/pages/components/badges/badges.md +++ b/docs/src/pages/components/badges/badges.md @@ -7,7 +7,7 @@ components: Badge

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..bb4a2e694ceef3 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 (badgeContent === 0 && !showZero && 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();