From f8969424d89740d4a0190c4555ccebbffa707079 Mon Sep 17 00:00:00 2001
From: Marija Najdova <mnajdova@gmail.com>
Date: Thu, 17 Dec 2020 12:59:24 +0100
Subject: [PATCH] Revert "badge invisible"

---
 packages/material-ui/src/Badge/Badge.js | 44 ++++++++++++-------------
 1 file changed, 22 insertions(+), 22 deletions(-)

diff --git a/packages/material-ui/src/Badge/Badge.js b/packages/material-ui/src/Badge/Badge.js
index f574ef8948b84f..50a737821b3e78 100644
--- a/packages/material-ui/src/Badge/Badge.js
+++ b/packages/material-ui/src/Badge/Badge.js
@@ -101,12 +101,6 @@ const BadgeBadge = styled(
     minWidth: RADIUS_DOT * 2,
     padding: 0,
   }),
-  ...(props.styleProps.invisible && {
-    transition: props.theme.transitions.create('transform', {
-      easing: props.theme.transitions.easing.easeInOut,
-      duration: props.theme.transitions.duration.leavingScreen,
-    }),
-  }),
   ...(props.styleProps.anchorOrigin.vertical === 'top' &&
     props.styleProps.anchorOrigin.horizontal === 'right' &&
     props.styleProps.overlap === 'rectangular' && {
@@ -114,9 +108,9 @@ const BadgeBadge = styled(
       right: 0,
       transform: 'scale(1) translate(50%, -50%)',
       transformOrigin: '100% 0%',
-      ...(props.styleProps.invisible && {
+      [`&.${badgeClasses.invisible}`]: {
         transform: 'scale(0) translate(50%, -50%)',
-      }),
+      },
     }),
   ...(props.styleProps.anchorOrigin.vertical === 'bottom' &&
     props.styleProps.anchorOrigin.horizontal === 'right' &&
@@ -125,9 +119,9 @@ const BadgeBadge = styled(
       right: 0,
       transform: 'scale(1) translate(50%, 50%)',
       transformOrigin: '100% 100%',
-      ...(props.styleProps.invisible && {
+      [`&.${badgeClasses.invisible}`]: {
         transform: 'scale(0) translate(50%, 50%)',
-      }),
+      },
     }),
   ...(props.styleProps.anchorOrigin.vertical === 'top' &&
     props.styleProps.anchorOrigin.horizontal === 'left' &&
@@ -136,9 +130,9 @@ const BadgeBadge = styled(
       left: 0,
       transform: 'scale(1) translate(-50%, -50%)',
       transformOrigin: '0% 0%',
-      ...(props.styleProps.invisible && {
+      [`&.${badgeClasses.invisible}`]: {
         transform: 'scale(0) translate(-50%, -50%)',
-      }),
+      },
     }),
   ...(props.styleProps.anchorOrigin.vertical === 'bottom' &&
     props.styleProps.anchorOrigin.horizontal === 'left' &&
@@ -147,9 +141,9 @@ const BadgeBadge = styled(
       left: 0,
       transform: 'scale(1) translate(-50%, 50%)',
       transformOrigin: '0% 100%',
-      ...(props.styleProps.invisible && {
+      [`&.${badgeClasses.invisible}`]: {
         transform: 'scale(0) translate(-50%, 50%)',
-      }),
+      },
     }),
   ...(props.styleProps.anchorOrigin.vertical === 'top' &&
     props.styleProps.anchorOrigin.horizontal === 'right' &&
@@ -158,9 +152,9 @@ const BadgeBadge = styled(
       right: '14%',
       transform: 'scale(1) translate(50%, -50%)',
       transformOrigin: '100% 0%',
-      ...(props.styleProps.invisible && {
+      [`&.${badgeClasses.invisible}`]: {
         transform: 'scale(0) translate(50%, -50%)',
-      }),
+      },
     }),
   ...(props.styleProps.anchorOrigin.vertical === 'bottom' &&
     props.styleProps.anchorOrigin.horizontal === 'right' &&
@@ -169,9 +163,9 @@ const BadgeBadge = styled(
       right: '14%',
       transform: 'scale(1) translate(50%, 50%)',
       transformOrigin: '100% 100%',
-      ...(props.styleProps.invisible && {
+      [`&.${badgeClasses.invisible}`]: {
         transform: 'scale(0) translate(50%, 50%)',
-      }),
+      },
     }),
   ...(props.styleProps.anchorOrigin.vertical === 'top' &&
     props.styleProps.anchorOrigin.horizontal === 'left' &&
@@ -180,9 +174,9 @@ const BadgeBadge = styled(
       left: '14%',
       transform: 'scale(1) translate(-50%, -50%)',
       transformOrigin: '0% 0%',
-      ...(props.styleProps.invisible && {
+      [`&.${badgeClasses.invisible}`]: {
         transform: 'scale(0) translate(-50%, -50%)',
-      }),
+      },
     }),
   ...(props.styleProps.anchorOrigin.vertical === 'bottom' &&
     props.styleProps.anchorOrigin.horizontal === 'left' &&
@@ -191,10 +185,16 @@ const BadgeBadge = styled(
       left: '14%',
       transform: 'scale(1) translate(-50%, 50%)',
       transformOrigin: '0% 100%',
-      ...(props.styleProps.invisible && {
+      [`&.${badgeClasses.invisible}`]: {
         transform: 'scale(0) translate(-50%, 50%)',
-      }),
+      },
     }),
+  ...(props.styleProps.invisible && {
+    transition: props.theme.transitions.create('transform', {
+      easing: props.theme.transitions.easing.easeInOut,
+      duration: props.theme.transitions.duration.leavingScreen,
+    }),
+  }),
 }));
 
 const extendBadgeClasses = (props) => {