Skip to content

Commit f00c441

Browse files
eps1loneps1lon
authored
[Badge] Add overlap circular and rectangular (#22076)
1 parent 1acb36c commit f00c441

File tree

9 files changed

+317
-12
lines changed

9 files changed

+317
-12
lines changed

‎docs/pages/api-docs/badge.md‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ The `MuiBadge` name can be used for providing [default props](/customization/glo
3636
| <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. |
3737
| <span class="prop-name">invisible</span> | <span class="prop-type">bool</span> | | If `true`, the badge will be invisible. |
3838
| <span class="prop-name">max</span> | <span class="prop-type">number</span> | <span class="prop-default">99</span> | Max count to show. |
39-
| <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. |
39+
| <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. |
4040
| <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. |
4141
| <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. |
4242

@@ -55,13 +55,21 @@ Any other props supplied will be provided to the root element (native element).
5555
| <span class="prop-name">colorError</span> | <span class="prop-name">.MuiBadge-colorError</span> | Styles applied to the root element if `color="error"`.
5656
| <span class="prop-name">dot</span> | <span class="prop-name">.MuiBadge-dot</span> | Styles applied to the root element if `variant="dot"`.
5757
| <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"`.
58+
| <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"`.
5859
| <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"`.
60+
| <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"`.
5961
| <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"`.
62+
| <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"`.
6063
| <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"`.
64+
| <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"`.
6165
| <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"`.
66+
| <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"`.
6267
| <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"`.
68+
| <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"`.
6369
| <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"`.
70+
| <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"`.
6471
| <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"`.
72+
| <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"`.
6573
| <span class="prop-name">invisible</span> | <span class="prop-name">.MuiBadge-invisible</span> | Pseudo-class to the badge `span` element if `invisible={true}`.
6674

6775
You can override the style of the component thanks to one of these customization points:

‎docs/src/modules/components/ThemeContext.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -203,6 +203,12 @@ export function ThemeProvider(props) {
203203
},
204204
...paletteColors,
205205
},
206+
// v5 migration
207+
props: {
208+
MuiBadge: {
209+
overlap: 'rectangular',
210+
},
211+
},
206212
spacing,
207213
},
208214
dense ? highDensity : null,

‎docs/src/pages/components/avatars/BadgeAvatars.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ export default function BadgeAvatars() {
5555
return (
5656
<div className={classes.root}>
5757
<StyledBadge
58-
overlap="circle"
58+
overlap="circular"
5959
anchorOrigin={{
6060
vertical: 'bottom',
6161
horizontal: 'right',
@@ -65,7 +65,7 @@ export default function BadgeAvatars() {
6565
<Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
6666
</StyledBadge>
6767
<Badge
68-
overlap="circle"
68+
overlap="circular"
6969
anchorOrigin={{
7070
vertical: 'bottom',
7171
horizontal: 'right',

‎docs/src/pages/components/avatars/BadgeAvatars.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@ export default function BadgeAvatars() {
6161
return (
6262
<div className={classes.root}>
6363
<StyledBadge
64-
overlap="circle"
64+
overlap="circular"
6565
anchorOrigin={{
6666
vertical: 'bottom',
6767
horizontal: 'right',
@@ -71,7 +71,7 @@ export default function BadgeAvatars() {
7171
<Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
7272
</StyledBadge>
7373
<Badge
74-
overlap="circle"
74+
overlap="circular"
7575
anchorOrigin={{
7676
vertical: 'bottom',
7777
horizontal: 'right',

‎docs/src/pages/components/badges/BadgeOverlap.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,10 +33,10 @@ export default function BadgeOverlap() {
3333
<Badge color="secondary" badgeContent=" " variant="dot">
3434
{rectangle}
3535
</Badge>
36-
<Badge color="secondary" overlap="circle" badgeContent=" ">
36+
<Badge color="secondary" overlap="circular" badgeContent=" ">
3737
{circle}
3838
</Badge>
39-
<Badge color="secondary" overlap="circle" badgeContent=" " variant="dot">
39+
<Badge color="secondary" overlap="circular" badgeContent=" " variant="dot">
4040
{circle}
4141
</Badge>
4242
</div>

‎docs/src/pages/components/badges/BadgeOverlap.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -35,10 +35,10 @@ export default function BadgeOverlap() {
3535
<Badge color="secondary" badgeContent=" " variant="dot">
3636
{rectangle}
3737
</Badge>
38-
<Badge color="secondary" overlap="circle" badgeContent=" ">
38+
<Badge color="secondary" overlap="circular" badgeContent=" ">
3939
{circle}
4040
</Badge>
41-
<Badge color="secondary" overlap="circle" badgeContent=" " variant="dot">
41+
<Badge color="secondary" overlap="circular" badgeContent=" " variant="dot">
4242
{circle}
4343
</Badge>
4444
</div>

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

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ export interface BadgeTypeMap<P = {}, D extends React.ElementType = 'div'> {
1515
/**
1616
* Wrapped shape the badge should overlap.
1717
*/
18-
overlap?: 'rectangle' | 'circle';
18+
overlap?: 'rectangle' | 'circle' | 'rectangular' | 'circular';
1919
/**
2020
* The content rendered within the badge.
2121
*/
@@ -63,6 +63,13 @@ export type BadgeClassKey =
6363
| 'anchorOriginTopRightCircle'
6464
| 'anchorOriginBottomRightCircle'
6565
| 'anchorOriginTopLeftCircle'
66+
| 'anchorOriginTopRightRectangular'
67+
| 'anchorOriginBottomRightRectangular'
68+
| 'anchorOriginTopLeftRectangular'
69+
| 'anchorOriginBottomLeftRectangular'
70+
| 'anchorOriginTopRightCircular'
71+
| 'anchorOriginBottomRightCircular'
72+
| 'anchorOriginTopLeftCircular'
6673
| 'invisible';
6774
/**
6875
*

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

Lines changed: 129 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import * as React from 'react';
22
import PropTypes from 'prop-types';
33
import clsx from 'clsx';
4+
import { chainPropTypes } from '@material-ui/utils';
45
import withStyles from '../styles/withStyles';
56
import capitalize from '../utils/capitalize';
67

@@ -72,6 +73,16 @@ export const styles = (theme) => ({
7273
transform: 'scale(0) translate(50%, -50%)',
7374
},
7475
},
76+
/* Styles applied to the root element if `anchorOrigin={{ 'top', 'right' }} overlap="rectangular"`. */
77+
anchorOriginTopRightRectangular: {
78+
top: 0,
79+
right: 0,
80+
transform: 'scale(1) translate(50%, -50%)',
81+
transformOrigin: '100% 0%',
82+
'&$invisible': {
83+
transform: 'scale(0) translate(50%, -50%)',
84+
},
85+
},
7586
/* Styles applied to the root element if `anchorOrigin={{ 'bottom', 'right' }} overlap="rectangle"`. */
7687
anchorOriginBottomRightRectangle: {
7788
bottom: 0,
@@ -82,6 +93,16 @@ export const styles = (theme) => ({
8293
transform: 'scale(0) translate(50%, 50%)',
8394
},
8495
},
96+
/* Styles applied to the root element if `anchorOrigin={{ 'bottom', 'right' }} overlap="rectangular"`. */
97+
anchorOriginBottomRightRectangular: {
98+
bottom: 0,
99+
right: 0,
100+
transform: 'scale(1) translate(50%, 50%)',
101+
transformOrigin: '100% 100%',
102+
'&$invisible': {
103+
transform: 'scale(0) translate(50%, 50%)',
104+
},
105+
},
85106
/* Styles applied to the root element if `anchorOrigin={{ 'top', 'left' }} overlap="rectangle"`. */
86107
anchorOriginTopLeftRectangle: {
87108
top: 0,
@@ -92,6 +113,16 @@ export const styles = (theme) => ({
92113
transform: 'scale(0) translate(-50%, -50%)',
93114
},
94115
},
116+
/* Styles applied to the root element if `anchorOrigin={{ 'top', 'left' }} overlap="rectangular"`. */
117+
anchorOriginTopLeftRectangular: {
118+
top: 0,
119+
left: 0,
120+
transform: 'scale(1) translate(-50%, -50%)',
121+
transformOrigin: '0% 0%',
122+
'&$invisible': {
123+
transform: 'scale(0) translate(-50%, -50%)',
124+
},
125+
},
95126
/* Styles applied to the root element if `anchorOrigin={{ 'bottom', 'left' }} overlap="rectangle"`. */
96127
anchorOriginBottomLeftRectangle: {
97128
bottom: 0,
@@ -102,6 +133,16 @@ export const styles = (theme) => ({
102133
transform: 'scale(0) translate(-50%, 50%)',
103134
},
104135
},
136+
/* Styles applied to the root element if `anchorOrigin={{ 'bottom', 'left' }} overlap="rectangular"`. */
137+
anchorOriginBottomLeftRectangular: {
138+
bottom: 0,
139+
left: 0,
140+
transform: 'scale(1) translate(-50%, 50%)',
141+
transformOrigin: '0% 100%',
142+
'&$invisible': {
143+
transform: 'scale(0) translate(-50%, 50%)',
144+
},
145+
},
105146
/* Styles applied to the root element if `anchorOrigin={{ 'top', 'right' }} overlap="circle"`. */
106147
anchorOriginTopRightCircle: {
107148
top: '14%',
@@ -112,6 +153,16 @@ export const styles = (theme) => ({
112153
transform: 'scale(0) translate(50%, -50%)',
113154
},
114155
},
156+
/* Styles applied to the root element if `anchorOrigin={{ 'top', 'right' }} overlap="circular"`. */
157+
anchorOriginTopRightCircular: {
158+
top: '14%',
159+
right: '14%',
160+
transform: 'scale(1) translate(50%, -50%)',
161+
transformOrigin: '100% 0%',
162+
'&$invisible': {
163+
transform: 'scale(0) translate(50%, -50%)',
164+
},
165+
},
115166
/* Styles applied to the root element if `anchorOrigin={{ 'bottom', 'right' }} overlap="circle"`. */
116167
anchorOriginBottomRightCircle: {
117168
bottom: '14%',
@@ -122,6 +173,16 @@ export const styles = (theme) => ({
122173
transform: 'scale(0) translate(50%, 50%)',
123174
},
124175
},
176+
/* Styles applied to the root element if `anchorOrigin={{ 'bottom', 'right' }} overlap="circular"`. */
177+
anchorOriginBottomRightCircular: {
178+
bottom: '14%',
179+
right: '14%',
180+
transform: 'scale(1) translate(50%, 50%)',
181+
transformOrigin: '100% 100%',
182+
'&$invisible': {
183+
transform: 'scale(0) translate(50%, 50%)',
184+
},
185+
},
125186
/* Styles applied to the root element if `anchorOrigin={{ 'top', 'left' }} overlap="circle"`. */
126187
anchorOriginTopLeftCircle: {
127188
top: '14%',
@@ -132,6 +193,16 @@ export const styles = (theme) => ({
132193
transform: 'scale(0) translate(-50%, -50%)',
133194
},
134195
},
196+
/* Styles applied to the root element if `anchorOrigin={{ 'top', 'left' }} overlap="circular"`. */
197+
anchorOriginTopLeftCircular: {
198+
top: '14%',
199+
left: '14%',
200+
transform: 'scale(1) translate(-50%, -50%)',
201+
transformOrigin: '0% 0%',
202+
'&$invisible': {
203+
transform: 'scale(0) translate(-50%, -50%)',
204+
},
205+
},
135206
/* Styles applied to the root element if `anchorOrigin={{ 'bottom', 'left' }} overlap="circle"`. */
136207
anchorOriginBottomLeftCircle: {
137208
bottom: '14%',
@@ -142,6 +213,16 @@ export const styles = (theme) => ({
142213
transform: 'scale(0) translate(-50%, 50%)',
143214
},
144215
},
216+
/* Styles applied to the root element if `anchorOrigin={{ 'bottom', 'left' }} overlap="circular"`. */
217+
anchorOriginBottomLeftCircular: {
218+
bottom: '14%',
219+
left: '14%',
220+
transform: 'scale(1) translate(-50%, 50%)',
221+
transformOrigin: '0% 100%',
222+
'&$invisible': {
223+
transform: 'scale(0) translate(-50%, 50%)',
224+
},
225+
},
145226
/* Pseudo-class to the badge `span` element if `invisible={true}`. */
146227
invisible: {
147228
transition: theme.transitions.create('transform', {
@@ -235,7 +316,34 @@ Badge.propTypes = {
235316
* Override or extend the styles applied to the component.
236317
* See [CSS API](#css) below for more details.
237318
*/
238-
classes: PropTypes.object,
319+
classes: chainPropTypes(PropTypes.object, (props) => {
320+
const { classes } = props;
321+
if (classes == null) {
322+
return null;
323+
}
324+
325+
[
326+
['anchorOriginTopRightRectangle', 'anchorOriginTopRightRectangular'],
327+
['anchorOriginBottomRightRectangle', 'anchorOriginBottomRightRectangular'],
328+
['anchorOriginTopLeftRectangle', 'anchorOriginTopLeftRectangular'],
329+
['anchorOriginBottomLeftRectangle', 'anchorOriginBottomLeftRectangular'],
330+
['anchorOriginTopRightCircle', 'anchorOriginTopRightCircular'],
331+
['anchorOriginBottomRightCircle', 'anchorOriginBottomRightCircular'],
332+
['anchorOriginTopLeftCircle', 'anchorOriginTopLeftCircular'],
333+
].forEach(([deprecatedClassKey, newClassKey]) => {
334+
if (
335+
classes[deprecatedClassKey] != null &&
336+
// 2 classnames? one from withStyles the other must be custom
337+
classes[deprecatedClassKey].split(' ').length > 1
338+
) {
339+
throw new Error(
340+
`Material-UI: The \`${deprecatedClassKey}\` class was deprecated. Use \`${newClassKey}\` instead.`,
341+
);
342+
}
343+
});
344+
345+
return null;
346+
}),
239347
/**
240348
* @ignore
241349
*/
@@ -260,7 +368,26 @@ Badge.propTypes = {
260368
/**
261369
* Wrapped shape the badge should overlap.
262370
*/
263-
overlap: PropTypes.oneOf(['circle', 'rectangle']),
371+
overlap: chainPropTypes(
372+
PropTypes.oneOf(['circle', 'rectangle', 'circular', 'rectangular']),
373+
(props) => {
374+
const { overlap } = props;
375+
376+
if (overlap === 'rectangle') {
377+
throw new Error(
378+
'Material-UI: `overlap="rectangle"` was deprecated. Use `overlap="rectangular"` instead.',
379+
);
380+
}
381+
382+
if (overlap === 'circle') {
383+
throw new Error(
384+
'Material-UI: `overlap="circle"` was deprecated. Use `overlap="circular"` instead.',
385+
);
386+
}
387+
388+
return null;
389+
},
390+
),
264391
/**
265392
* Controls whether the badge is hidden when `badgeContent` is zero.
266393
*/

0 commit comments

Comments
 (0)