Skip to content

Commit 027ab8a

Browse files
oliviertassinarioliviertassinari
committed
Revert "[Badge] Add overlap circular and rectangular (mui#22076)"
This reverts commit f00c441.
1 parent 0c461df commit 027ab8a

File tree

9 files changed

+12
-320
lines changed

9 files changed

+12
-320
lines changed

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

Lines changed: 1 addition & 9 deletions
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'<br>&#124;&nbsp;'circular'<br>&#124;&nbsp;'rectangular'</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'</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,21 +55,13 @@ 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"`.
5958
| <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"`.
6159
| <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"`.
6360
| <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"`.
6561
| <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"`.
6762
| <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"`.
6963
| <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"`.
7164
| <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"`.
7365
| <span class="prop-name">invisible</span> | <span class="prop-name">.MuiBadge-invisible</span> | Pseudo-class to the badge `span` element if `invisible={true}`.
7466

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

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

Lines changed: 0 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -203,15 +203,6 @@ export function ThemeProvider(props) {
203203
},
204204
...paletteColors,
205205
},
206-
// v5 migration
207-
props: {
208-
MuiBadge: {
209-
overlap: 'rectangular',
210-
},
211-
MuiAvatar: {
212-
variant: 'circular',
213-
},
214-
},
215206
spacing,
216207
},
217208
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="circular"
58+
overlap="circle"
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="circular"
68+
overlap="circle"
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="circular"
64+
overlap="circle"
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="circular"
74+
overlap="circle"
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="circular" badgeContent=" ">
36+
<Badge color="secondary" overlap="circle" badgeContent=" ">
3737
{circle}
3838
</Badge>
39-
<Badge color="secondary" overlap="circular" badgeContent=" " variant="dot">
39+
<Badge color="secondary" overlap="circle" 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="circular" badgeContent=" ">
38+
<Badge color="secondary" overlap="circle" badgeContent=" ">
3939
{circle}
4040
</Badge>
41-
<Badge color="secondary" overlap="circular" badgeContent=" " variant="dot">
41+
<Badge color="secondary" overlap="circle" badgeContent=" " variant="dot">
4242
{circle}
4343
</Badge>
4444
</div>

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

Lines changed: 1 addition & 8 deletions
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' | 'rectangular' | 'circular';
18+
overlap?: 'rectangle' | 'circle';
1919
/**
2020
* The content rendered within the badge.
2121
*/
@@ -63,13 +63,6 @@ export type BadgeClassKey =
6363
| 'anchorOriginTopRightCircle'
6464
| 'anchorOriginBottomRightCircle'
6565
| 'anchorOriginTopLeftCircle'
66-
| 'anchorOriginTopRightRectangular'
67-
| 'anchorOriginBottomRightRectangular'
68-
| 'anchorOriginTopLeftRectangular'
69-
| 'anchorOriginBottomLeftRectangular'
70-
| 'anchorOriginTopRightCircular'
71-
| 'anchorOriginBottomRightCircular'
72-
| 'anchorOriginTopLeftCircular'
7366
| 'invisible';
7467
/**
7568
*

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

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

@@ -73,16 +72,6 @@ export const styles = (theme) => ({
7372
transform: 'scale(0) translate(50%, -50%)',
7473
},
7574
},
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-
},
8675
/* Styles applied to the root element if `anchorOrigin={{ 'bottom', 'right' }} overlap="rectangle"`. */
8776
anchorOriginBottomRightRectangle: {
8877
bottom: 0,
@@ -93,16 +82,6 @@ export const styles = (theme) => ({
9382
transform: 'scale(0) translate(50%, 50%)',
9483
},
9584
},
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-
},
10685
/* Styles applied to the root element if `anchorOrigin={{ 'top', 'left' }} overlap="rectangle"`. */
10786
anchorOriginTopLeftRectangle: {
10887
top: 0,
@@ -113,16 +92,6 @@ export const styles = (theme) => ({
11392
transform: 'scale(0) translate(-50%, -50%)',
11493
},
11594
},
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-
},
12695
/* Styles applied to the root element if `anchorOrigin={{ 'bottom', 'left' }} overlap="rectangle"`. */
12796
anchorOriginBottomLeftRectangle: {
12897
bottom: 0,
@@ -133,16 +102,6 @@ export const styles = (theme) => ({
133102
transform: 'scale(0) translate(-50%, 50%)',
134103
},
135104
},
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-
},
146105
/* Styles applied to the root element if `anchorOrigin={{ 'top', 'right' }} overlap="circle"`. */
147106
anchorOriginTopRightCircle: {
148107
top: '14%',
@@ -153,16 +112,6 @@ export const styles = (theme) => ({
153112
transform: 'scale(0) translate(50%, -50%)',
154113
},
155114
},
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-
},
166115
/* Styles applied to the root element if `anchorOrigin={{ 'bottom', 'right' }} overlap="circle"`. */
167116
anchorOriginBottomRightCircle: {
168117
bottom: '14%',
@@ -173,16 +122,6 @@ export const styles = (theme) => ({
173122
transform: 'scale(0) translate(50%, 50%)',
174123
},
175124
},
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-
},
186125
/* Styles applied to the root element if `anchorOrigin={{ 'top', 'left' }} overlap="circle"`. */
187126
anchorOriginTopLeftCircle: {
188127
top: '14%',
@@ -193,16 +132,6 @@ export const styles = (theme) => ({
193132
transform: 'scale(0) translate(-50%, -50%)',
194133
},
195134
},
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-
},
206135
/* Styles applied to the root element if `anchorOrigin={{ 'bottom', 'left' }} overlap="circle"`. */
207136
anchorOriginBottomLeftCircle: {
208137
bottom: '14%',
@@ -213,16 +142,6 @@ export const styles = (theme) => ({
213142
transform: 'scale(0) translate(-50%, 50%)',
214143
},
215144
},
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-
},
226145
/* Pseudo-class to the badge `span` element if `invisible={true}`. */
227146
invisible: {
228147
transition: theme.transitions.create('transform', {
@@ -316,34 +235,7 @@ Badge.propTypes = {
316235
* Override or extend the styles applied to the component.
317236
* See [CSS API](#css) below for more details.
318237
*/
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-
}),
238+
classes: PropTypes.object,
347239
/**
348240
* @ignore
349241
*/
@@ -368,26 +260,7 @@ Badge.propTypes = {
368260
/**
369261
* Wrapped shape the badge should overlap.
370262
*/
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-
),
263+
overlap: PropTypes.oneOf(['circle', 'rectangle']),
391264
/**
392265
* Controls whether the badge is hidden when `badgeContent` is zero.
393266
*/

0 commit comments

Comments
 (0)