From 58d12b7d53fdd4403091d256f516f3988a6d22f3 Mon Sep 17 00:00:00 2001
From: Marija Najdova <mnajdova@gmail.com>
Date: Thu, 17 Dec 2020 12:38:26 +0100
Subject: [PATCH] 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 50a737821b3e78..f574ef8948b84f 100644
--- a/packages/material-ui/src/Badge/Badge.js
+++ b/packages/material-ui/src/Badge/Badge.js
@@ -101,6 +101,12 @@ 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' && {
@@ -108,9 +114,9 @@ const BadgeBadge = styled(
       right: 0,
       transform: 'scale(1) translate(50%, -50%)',
       transformOrigin: '100% 0%',
-      [`&.${badgeClasses.invisible}`]: {
+      ...(props.styleProps.invisible && {
         transform: 'scale(0) translate(50%, -50%)',
-      },
+      }),
     }),
   ...(props.styleProps.anchorOrigin.vertical === 'bottom' &&
     props.styleProps.anchorOrigin.horizontal === 'right' &&
@@ -119,9 +125,9 @@ const BadgeBadge = styled(
       right: 0,
       transform: 'scale(1) translate(50%, 50%)',
       transformOrigin: '100% 100%',
-      [`&.${badgeClasses.invisible}`]: {
+      ...(props.styleProps.invisible && {
         transform: 'scale(0) translate(50%, 50%)',
-      },
+      }),
     }),
   ...(props.styleProps.anchorOrigin.vertical === 'top' &&
     props.styleProps.anchorOrigin.horizontal === 'left' &&
@@ -130,9 +136,9 @@ const BadgeBadge = styled(
       left: 0,
       transform: 'scale(1) translate(-50%, -50%)',
       transformOrigin: '0% 0%',
-      [`&.${badgeClasses.invisible}`]: {
+      ...(props.styleProps.invisible && {
         transform: 'scale(0) translate(-50%, -50%)',
-      },
+      }),
     }),
   ...(props.styleProps.anchorOrigin.vertical === 'bottom' &&
     props.styleProps.anchorOrigin.horizontal === 'left' &&
@@ -141,9 +147,9 @@ const BadgeBadge = styled(
       left: 0,
       transform: 'scale(1) translate(-50%, 50%)',
       transformOrigin: '0% 100%',
-      [`&.${badgeClasses.invisible}`]: {
+      ...(props.styleProps.invisible && {
         transform: 'scale(0) translate(-50%, 50%)',
-      },
+      }),
     }),
   ...(props.styleProps.anchorOrigin.vertical === 'top' &&
     props.styleProps.anchorOrigin.horizontal === 'right' &&
@@ -152,9 +158,9 @@ const BadgeBadge = styled(
       right: '14%',
       transform: 'scale(1) translate(50%, -50%)',
       transformOrigin: '100% 0%',
-      [`&.${badgeClasses.invisible}`]: {
+      ...(props.styleProps.invisible && {
         transform: 'scale(0) translate(50%, -50%)',
-      },
+      }),
     }),
   ...(props.styleProps.anchorOrigin.vertical === 'bottom' &&
     props.styleProps.anchorOrigin.horizontal === 'right' &&
@@ -163,9 +169,9 @@ const BadgeBadge = styled(
       right: '14%',
       transform: 'scale(1) translate(50%, 50%)',
       transformOrigin: '100% 100%',
-      [`&.${badgeClasses.invisible}`]: {
+      ...(props.styleProps.invisible && {
         transform: 'scale(0) translate(50%, 50%)',
-      },
+      }),
     }),
   ...(props.styleProps.anchorOrigin.vertical === 'top' &&
     props.styleProps.anchorOrigin.horizontal === 'left' &&
@@ -174,9 +180,9 @@ const BadgeBadge = styled(
       left: '14%',
       transform: 'scale(1) translate(-50%, -50%)',
       transformOrigin: '0% 0%',
-      [`&.${badgeClasses.invisible}`]: {
+      ...(props.styleProps.invisible && {
         transform: 'scale(0) translate(-50%, -50%)',
-      },
+      }),
     }),
   ...(props.styleProps.anchorOrigin.vertical === 'bottom' &&
     props.styleProps.anchorOrigin.horizontal === 'left' &&
@@ -185,16 +191,10 @@ const BadgeBadge = styled(
       left: '14%',
       transform: 'scale(1) translate(-50%, 50%)',
       transformOrigin: '0% 100%',
-      [`&.${badgeClasses.invisible}`]: {
+      ...(props.styleProps.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) => {