Merge pull request #21 from mnajdova/revert-20-feat/classes-badge-improvements

Revert "badge invisible"

Author: mnajdova

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

@@ -101,22 +101,16 @@ 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' && {
       top: 0,
       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) => {