[Badge] Add overlap circular and rectangular (#22076)

mui · Jan 25, 2021 · 3225656 · 3225656
1 parent ad1b3c8
commit 3225656
Show file tree

Hide file tree

Showing 9 changed files with 317 additions and 12 deletions.
diff --git a/docs/pages/api-docs/badge.md b/docs/pages/api-docs/badge.md
@@ -36,7 +36,7 @@ The `MuiBadge` name can be used for providing [default props](/customization/glo
 | <span class="prop-name">component</span> | <span class="prop-type">elementType</span> | <span class="prop-default">'span'</span> | The component used for the root node. Either a string to use a HTML element or a component. |
 | <span class="prop-name">invisible</span> | <span class="prop-type">bool</span> | | If `true`, the badge will be invisible. |
 | <span class="prop-name">max</span> | <span class="prop-type">number</span> | <span class="prop-default">99</span> | Max count to show. |
-| <span class="prop-name">overlap</span> | <span class="prop-type">'circle'<br>&#124;&nbsp;'rectangle'</span> | <span class="prop-default">'rectangle'</span> | Wrapped shape the badge should overlap. |
+| <span class="prop-name">overlap</span> | <span class="prop-type">'circle'<br>&#124;&nbsp;'rectangle'<br>&#124;&nbsp;'circular'<br>&#124;&nbsp;'rectangular'</span> | <span class="prop-default">'rectangle'</span> | Wrapped shape the badge should overlap. |
 | <span class="prop-name">showZero</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | Controls whether the badge is hidden when `badgeContent` is zero. |
 | <span class="prop-name">variant</span> | <span class="prop-type">'dot'<br>&#124;&nbsp;'standard'</span> | <span class="prop-default">'standard'</span> | The variant to use. |
 
@@ -55,13 +55,21 @@ Any other props supplied will be provided to the root element (native element).
 | <span class="prop-name">colorError</span> | <span class="prop-name">.MuiBadge-colorError</span> | Styles applied to the root element if `color="error"`.
 | <span class="prop-name">dot</span> | <span class="prop-name">.MuiBadge-dot</span> | Styles applied to the root element if `variant="dot"`.
 | <span class="prop-name">anchorOriginTopRightRectangle</span> | <span class="prop-name">.MuiBadge-anchorOriginTopRightRectangle</span> | Styles applied to the root element if `anchorOrigin={{ 'top', 'right' }} overlap="rectangle"`.
+| <span class="prop-name">anchorOriginTopRightRectangular</span> | <span class="prop-name">.MuiBadge-anchorOriginTopRightRectangular</span> | Styles applied to the root element if `anchorOrigin={{ 'top', 'right' }} overlap="rectangular"`.
 | <span class="prop-name">anchorOriginBottomRightRectangle</span> | <span class="prop-name">.MuiBadge-anchorOriginBottomRightRectangle</span> | Styles applied to the root element if `anchorOrigin={{ 'bottom', 'right' }} overlap="rectangle"`.
+| <span class="prop-name">anchorOriginBottomRightRectangular</span> | <span class="prop-name">.MuiBadge-anchorOriginBottomRightRectangular</span> | Styles applied to the root element if `anchorOrigin={{ 'bottom', 'right' }} overlap="rectangular"`.
 | <span class="prop-name">anchorOriginTopLeftRectangle</span> | <span class="prop-name">.MuiBadge-anchorOriginTopLeftRectangle</span> | Styles applied to the root element if `anchorOrigin={{ 'top', 'left' }} overlap="rectangle"`.
+| <span class="prop-name">anchorOriginTopLeftRectangular</span> | <span class="prop-name">.MuiBadge-anchorOriginTopLeftRectangular</span> | Styles applied to the root element if `anchorOrigin={{ 'top', 'left' }} overlap="rectangular"`.
 | <span class="prop-name">anchorOriginBottomLeftRectangle</span> | <span class="prop-name">.MuiBadge-anchorOriginBottomLeftRectangle</span> | Styles applied to the root element if `anchorOrigin={{ 'bottom', 'left' }} overlap="rectangle"`.
+| <span class="prop-name">anchorOriginBottomLeftRectangular</span> | <span class="prop-name">.MuiBadge-anchorOriginBottomLeftRectangular</span> | Styles applied to the root element if `anchorOrigin={{ 'bottom', 'left' }} overlap="rectangular"`.
 | <span class="prop-name">anchorOriginTopRightCircle</span> | <span class="prop-name">.MuiBadge-anchorOriginTopRightCircle</span> | Styles applied to the root element if `anchorOrigin={{ 'top', 'right' }} overlap="circle"`.
+| <span class="prop-name">anchorOriginTopRightCircular</span> | <span class="prop-name">.MuiBadge-anchorOriginTopRightCircular</span> | Styles applied to the root element if `anchorOrigin={{ 'top', 'right' }} overlap="circular"`.
 | <span class="prop-name">anchorOriginBottomRightCircle</span> | <span class="prop-name">.MuiBadge-anchorOriginBottomRightCircle</span> | Styles applied to the root element if `anchorOrigin={{ 'bottom', 'right' }} overlap="circle"`.
+| <span class="prop-name">anchorOriginBottomRightCircular</span> | <span class="prop-name">.MuiBadge-anchorOriginBottomRightCircular</span> | Styles applied to the root element if `anchorOrigin={{ 'bottom', 'right' }} overlap="circular"`.
 | <span class="prop-name">anchorOriginTopLeftCircle</span> | <span class="prop-name">.MuiBadge-anchorOriginTopLeftCircle</span> | Styles applied to the root element if `anchorOrigin={{ 'top', 'left' }} overlap="circle"`.
+| <span class="prop-name">anchorOriginTopLeftCircular</span> | <span class="prop-name">.MuiBadge-anchorOriginTopLeftCircular</span> | Styles applied to the root element if `anchorOrigin={{ 'top', 'left' }} overlap="circular"`.
 | <span class="prop-name">anchorOriginBottomLeftCircle</span> | <span class="prop-name">.MuiBadge-anchorOriginBottomLeftCircle</span> | Styles applied to the root element if `anchorOrigin={{ 'bottom', 'left' }} overlap="circle"`.
+| <span class="prop-name">anchorOriginBottomLeftCircular</span> | <span class="prop-name">.MuiBadge-anchorOriginBottomLeftCircular</span> | Styles applied to the root element if `anchorOrigin={{ 'bottom', 'left' }} overlap="circular"`.
 | <span class="prop-name">invisible</span> | <span class="prop-name">.MuiBadge-invisible</span> | Pseudo-class to the badge `span` element if `invisible={true}`.
 
 You can override the style of the component thanks to one of these customization points:

diff --git a/docs/src/modules/components/ThemeContext.js b/docs/src/modules/components/ThemeContext.js
@@ -203,6 +203,12 @@ export function ThemeProvider(props) {
  },
  ...paletteColors,
  },
+ // v5 migration
+ props: {
+ MuiBadge: {
+ overlap: 'rectangular',
+ },
+ },
  spacing,
  },
  dense ? highDensity : null,

diff --git a/docs/src/pages/components/avatars/BadgeAvatars.js b/docs/src/pages/components/avatars/BadgeAvatars.js
@@ -55,7 +55,7 @@ export default function BadgeAvatars() {
  return (
  <div className={classes.root}>
  <StyledBadge
- overlap="circle"
+ overlap="circular"
  anchorOrigin={{
  vertical: 'bottom',
  horizontal: 'right',
@@ -65,7 +65,7 @@ export default function BadgeAvatars() {
  <Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
  </StyledBadge>
  <Badge
- overlap="circle"
+ overlap="circular"
  anchorOrigin={{
  vertical: 'bottom',
  horizontal: 'right',

diff --git a/docs/src/pages/components/avatars/BadgeAvatars.tsx b/docs/src/pages/components/avatars/BadgeAvatars.tsx
@@ -61,7 +61,7 @@ export default function BadgeAvatars() {
  return (
  <div className={classes.root}>
  <StyledBadge
- overlap="circle"
+ overlap="circular"
  anchorOrigin={{
  vertical: 'bottom',
  horizontal: 'right',
@@ -71,7 +71,7 @@ export default function BadgeAvatars() {
  <Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
  </StyledBadge>
  <Badge
- overlap="circle"
+ overlap="circular"
  anchorOrigin={{
  vertical: 'bottom',
  horizontal: 'right',

diff --git a/docs/src/pages/components/badges/BadgeOverlap.js b/docs/src/pages/components/badges/BadgeOverlap.js
@@ -33,10 +33,10 @@ export default function BadgeOverlap() {
  <Badge color="secondary" badgeContent=" " variant="dot">
  {rectangle}
  </Badge>
- <Badge color="secondary" overlap="circle" badgeContent=" ">
+ <Badge color="secondary" overlap="circular" badgeContent=" ">
  {circle}
  </Badge>
- <Badge color="secondary" overlap="circle" badgeContent=" " variant="dot">
+ <Badge color="secondary" overlap="circular" badgeContent=" " variant="dot">
  {circle}
  </Badge>
  </div>

diff --git a/docs/src/pages/components/badges/BadgeOverlap.tsx b/docs/src/pages/components/badges/BadgeOverlap.tsx
@@ -35,10 +35,10 @@ export default function BadgeOverlap() {
  <Badge color="secondary" badgeContent=" " variant="dot">
  {rectangle}
  </Badge>
- <Badge color="secondary" overlap="circle" badgeContent=" ">
+ <Badge color="secondary" overlap="circular" badgeContent=" ">
  {circle}
  </Badge>
- <Badge color="secondary" overlap="circle" badgeContent=" " variant="dot">
+ <Badge color="secondary" overlap="circular" badgeContent=" " variant="dot">
  {circle}
  </Badge>
  </div>

diff --git a/packages/material-ui/src/Badge/Badge.d.ts b/packages/material-ui/src/Badge/Badge.d.ts
@@ -15,7 +15,7 @@ export interface BadgeTypeMap<P = {}, D extends React.ElementType = 'div'> {
  /**
  * Wrapped shape the badge should overlap.
  */
- overlap?: 'rectangle' | 'circle';
+ overlap?: 'rectangle' | 'circle' | 'rectangular' | 'circular';
  /**
  * The content rendered within the badge.
  */
@@ -63,6 +63,13 @@ export type BadgeClassKey =
  | 'anchorOriginTopRightCircle'
  | 'anchorOriginBottomRightCircle'
  | 'anchorOriginTopLeftCircle'
+ | 'anchorOriginTopRightRectangular'
+ | 'anchorOriginBottomRightRectangular'
+ | 'anchorOriginTopLeftRectangular'
+ | 'anchorOriginBottomLeftRectangular'
+ | 'anchorOriginTopRightCircular'
+ | 'anchorOriginBottomRightCircular'
+ | 'anchorOriginTopLeftCircular'
  | 'invisible';
 /**
  *

diff --git a/packages/material-ui/src/Badge/Badge.js b/packages/material-ui/src/Badge/Badge.js
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
+import { chainPropTypes } from '@material-ui/utils';
 import withStyles from '../styles/withStyles';
 import capitalize from '../utils/capitalize';
 
@@ -72,6 +73,16 @@ export const styles = (theme) => ({
  transform: 'scale(0) translate(50%, -50%)',
  },
  },
+ /* Styles applied to the root element if `anchorOrigin={{ 'top', 'right' }} overlap="rectangular"`. */
+ anchorOriginTopRightRectangular: {
+ top: 0,
+ right: 0,
+ transform: 'scale(1) translate(50%, -50%)',
+ transformOrigin: '100% 0%',
+ '&$invisible': {
+ transform: 'scale(0) translate(50%, -50%)',
+ },
+ },
  /* Styles applied to the root element if `anchorOrigin={{ 'bottom', 'right' }} overlap="rectangle"`. */
  anchorOriginBottomRightRectangle: {
  bottom: 0,
@@ -82,6 +93,16 @@ export const styles = (theme) => ({
  transform: 'scale(0) translate(50%, 50%)',
  },
  },
+ /* Styles applied to the root element if `anchorOrigin={{ 'bottom', 'right' }} overlap="rectangular"`. */
+ anchorOriginBottomRightRectangular: {
+ bottom: 0,
+ right: 0,
+ transform: 'scale(1) translate(50%, 50%)',
+ transformOrigin: '100% 100%',
+ '&$invisible': {
+ transform: 'scale(0) translate(50%, 50%)',
+ },
+ },
  /* Styles applied to the root element if `anchorOrigin={{ 'top', 'left' }} overlap="rectangle"`. */
  anchorOriginTopLeftRectangle: {
  top: 0,
@@ -92,6 +113,16 @@ export const styles = (theme) => ({
  transform: 'scale(0) translate(-50%, -50%)',
  },
  },
+ /* Styles applied to the root element if `anchorOrigin={{ 'top', 'left' }} overlap="rectangular"`. */
+ anchorOriginTopLeftRectangular: {
+ top: 0,
+ left: 0,
+ transform: 'scale(1) translate(-50%, -50%)',
+ transformOrigin: '0% 0%',
+ '&$invisible': {
+ transform: 'scale(0) translate(-50%, -50%)',
+ },
+ },
  /* Styles applied to the root element if `anchorOrigin={{ 'bottom', 'left' }} overlap="rectangle"`. */
  anchorOriginBottomLeftRectangle: {
  bottom: 0,
@@ -102,6 +133,16 @@ export const styles = (theme) => ({
  transform: 'scale(0) translate(-50%, 50%)',
  },
  },
+ /* Styles applied to the root element if `anchorOrigin={{ 'bottom', 'left' }} overlap="rectangular"`. */
+ anchorOriginBottomLeftRectangular: {
+ bottom: 0,
+ left: 0,
+ transform: 'scale(1) translate(-50%, 50%)',
+ transformOrigin: '0% 100%',
+ '&$invisible': {
+ transform: 'scale(0) translate(-50%, 50%)',
+ },
+ },
  /* Styles applied to the root element if `anchorOrigin={{ 'top', 'right' }} overlap="circle"`. */
  anchorOriginTopRightCircle: {
  top: '14%',
@@ -112,6 +153,16 @@ export const styles = (theme) => ({
  transform: 'scale(0) translate(50%, -50%)',
  },
  },
+ /* Styles applied to the root element if `anchorOrigin={{ 'top', 'right' }} overlap="circular"`. */
+ anchorOriginTopRightCircular: {
+ top: '14%',
+ right: '14%',
+ transform: 'scale(1) translate(50%, -50%)',
+ transformOrigin: '100% 0%',
+ '&$invisible': {
+ transform: 'scale(0) translate(50%, -50%)',
+ },
+ },
  /* Styles applied to the root element if `anchorOrigin={{ 'bottom', 'right' }} overlap="circle"`. */
  anchorOriginBottomRightCircle: {
  bottom: '14%',
@@ -122,6 +173,16 @@ export const styles = (theme) => ({
  transform: 'scale(0) translate(50%, 50%)',
  },
  },
+ /* Styles applied to the root element if `anchorOrigin={{ 'bottom', 'right' }} overlap="circular"`. */
+ anchorOriginBottomRightCircular: {
+ bottom: '14%',
+ right: '14%',
+ transform: 'scale(1) translate(50%, 50%)',
+ transformOrigin: '100% 100%',
+ '&$invisible': {
+ transform: 'scale(0) translate(50%, 50%)',
+ },
+ },
  /* Styles applied to the root element if `anchorOrigin={{ 'top', 'left' }} overlap="circle"`. */
  anchorOriginTopLeftCircle: {
  top: '14%',
@@ -132,6 +193,16 @@ export const styles = (theme) => ({
  transform: 'scale(0) translate(-50%, -50%)',
  },
  },
+ /* Styles applied to the root element if `anchorOrigin={{ 'top', 'left' }} overlap="circular"`. */
+ anchorOriginTopLeftCircular: {
+ top: '14%',
+ left: '14%',
+ transform: 'scale(1) translate(-50%, -50%)',
+ transformOrigin: '0% 0%',
+ '&$invisible': {
+ transform: 'scale(0) translate(-50%, -50%)',
+ },
+ },
  /* Styles applied to the root element if `anchorOrigin={{ 'bottom', 'left' }} overlap="circle"`. */
  anchorOriginBottomLeftCircle: {
  bottom: '14%',
@@ -142,6 +213,16 @@ export const styles = (theme) => ({
  transform: 'scale(0) translate(-50%, 50%)',
  },
  },
+ /* Styles applied to the root element if `anchorOrigin={{ 'bottom', 'left' }} overlap="circular"`. */
+ anchorOriginBottomLeftCircular: {
+ bottom: '14%',
+ left: '14%',
+ transform: 'scale(1) translate(-50%, 50%)',
+ transformOrigin: '0% 100%',
+ '&$invisible': {
+ transform: 'scale(0) translate(-50%, 50%)',
+ },
+ },
  /* Pseudo-class to the badge `span` element if `invisible={true}`. */
  invisible: {
  transition: theme.transitions.create('transform', {
@@ -235,7 +316,34 @@ Badge.propTypes = {
  * Override or extend the styles applied to the component.
  * See [CSS API](#css) below for more details.
  */
- classes: PropTypes.object,
+ classes: chainPropTypes(PropTypes.object, (props) => {
+ const { classes } = props;
+ if (classes == null) {
+ return null;
+ }
+
+ [
+ ['anchorOriginTopRightRectangle', 'anchorOriginTopRightRectangular'],
+ ['anchorOriginBottomRightRectangle', 'anchorOriginBottomRightRectangular'],
+ ['anchorOriginTopLeftRectangle', 'anchorOriginTopLeftRectangular'],
+ ['anchorOriginBottomLeftRectangle', 'anchorOriginBottomLeftRectangular'],
+ ['anchorOriginTopRightCircle', 'anchorOriginTopRightCircular'],
+ ['anchorOriginBottomRightCircle', 'anchorOriginBottomRightCircular'],
+ ['anchorOriginTopLeftCircle', 'anchorOriginTopLeftCircular'],
+ ].forEach(([deprecatedClassKey, newClassKey]) => {
+ if (
+ classes[deprecatedClassKey] != null &&
+ // 2 classnames? one from withStyles the other must be custom
+ classes[deprecatedClassKey].split(' ').length > 1
+ ) {
+ throw new Error(
+ `Material-UI: The \`${deprecatedClassKey}\` class was deprecated. Use \`${newClassKey}\` instead.`,
+ );
+ }
+ });
+
+ return null;
+ }),
  /**
  * @ignore
  */
@@ -260,7 +368,26 @@ Badge.propTypes = {
  /**
  * Wrapped shape the badge should overlap.
  */
- overlap: PropTypes.oneOf(['circle', 'rectangle']),
+ overlap: chainPropTypes(
+ PropTypes.oneOf(['circle', 'rectangle', 'circular', 'rectangular']),
+ (props) => {
+ const { overlap } = props;
+
+ if (overlap === 'rectangle') {
+ throw new Error(
+ 'Material-UI: `overlap="rectangle"` was deprecated. Use `overlap="rectangular"` instead.',
+ );
+ }
+
+ if (overlap === 'circle') {
+ throw new Error(
+ 'Material-UI: `overlap="circle"` was deprecated. Use `overlap="circular"` instead.',
+ );
+ }
+
+ return null;
+ },
+ ),
  /**
  * Controls whether the badge is hidden when `badgeContent` is zero.
  */