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

badge invisible
mnajdova · Dec 17, 2020 · de76d7b · de76d7b
2 parents 8d23e70 + 58d12b7
commit de76d7b
Showing 1 changed file with 22 additions and 22 deletions.
diff --git a/packages/material-ui/src/Badge/Badge.js b/packages/material-ui/src/Badge/Badge.js
@@ -101,16 +101,22 @@ 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%',
-      [`&.${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) => {