removal of transition duration from tests

mui · Mar 6, 2024 · cd51367 · cd51367
1 parent dfe5e0d
commit cd51367
Show file tree

Hide file tree

Showing 7 changed files with 10 additions and 70 deletions.
diff --git a/packages/mui-codemod/README.md b/packages/mui-codemod/README.md
@@ -125,9 +125,7 @@ npx @mui/codemod@latest deprecations/divider-props <path>
 ```diff
  <Backdrop
 -    TransitionComponent={CustomTransition}
--    TransitionProps={{ unmountOnExit: true }}
 +    slots={{ transition: CustomTransition }}
-+    slotProps={{ transition: { unmountOnExit: true } }}
  />
 ```
 

diff --git a/packages/mui-codemod/src/deprecations/backdrop-props/backdrop-props.js b/packages/mui-codemod/src/deprecations/backdrop-props/backdrop-props.js
@@ -12,7 +12,7 @@ export default function transformer(file, api, options) {
   const printOptions = options.printOptions;
 
   findComponentJSX(j, { root, componentName: 'Backdrop' }, (elementPath) => {
-    let index = elementPath.node.openingElement.attributes.findIndex(
+    const index = elementPath.node.openingElement.attributes.findIndex(
       (attr) => attr.type === 'JSXAttribute' && attr.name.name === 'TransitionComponent',
     );
     if (index !== -1) {
@@ -38,41 +38,6 @@ export default function transformer(file, api, options) {
         });
       }
     }
-
-    index = elementPath.node.openingElement.attributes.findIndex(
-      (attr) => attr.type === 'JSXAttribute' && attr.name.name === 'transitionDuration',
-    );
-
-    if (index !== -1) {
-      const removed = elementPath.node.openingElement.attributes.splice(index, 1);
-      const updated = j.objectExpression([
-        j.objectProperty(
-          j.identifier('transition'),
-          j.objectExpression([
-            j.objectProperty(j.identifier('timeout'), removed[0].value.expression),
-          ]),
-        ),
-      ]);
-
-      let hasNode = false;
-      elementPath.node.openingElement.attributes.forEach((attr) => {
-        if (attr.name?.name === 'slotProps') {
-          hasNode = true;
-          assignObject(j, {
-            target: attr,
-            key: 'transition',
-            expression: updated,
-          });
-        }
-      });
-      if (!hasNode) {
-        appendAttribute(j, {
-          target: elementPath.node,
-          attributeName: 'slotProps',
-          expression: updated,
-        });
-      }
-    }
   });
 
   root.find(j.ObjectProperty, { key: { name: 'TransitionComponent' } }).forEach((path) => {

diff --git a/packages/mui-codemod/src/deprecations/backdrop-props/test-cases/actual.js b/packages/mui-codemod/src/deprecations/backdrop-props/test-cases/actual.js
@@ -1,11 +1,10 @@
 import Backdrop from '@mui/material/Backdrop';
 import { Backdrop as MyBackdrop } from '@mui/material';
 
-<Backdrop TransitionComponent={CustomTransition} transitionDuration={100} />;
-<MyBackdrop TransitionComponent={CustomTransition} transitionDuration={100} />;
+<Backdrop TransitionComponent={CustomTransition} />;
+<MyBackdrop TransitionComponent={CustomTransition} />;
 <Backdrop
   TransitionComponent={CustomTransition}
-  transitionDuration={100}
   slots={{
     root: 'div',
   }}
@@ -15,7 +14,6 @@ import { Backdrop as MyBackdrop } from '@mui/material';
 />;
 <MyBackdrop
   TransitionComponent={CustomTransition}
-  transitionDuration={100}
   slots={{
     ...outerSlots,
   }}
@@ -24,4 +22,4 @@ import { Backdrop as MyBackdrop } from '@mui/material';
   }}
 />;
 // should skip non MUI components
-<NonMuiBackdrop TransitionComponent={CustomTransition} transitionDuration={100} />;
+<NonMuiBackdrop TransitionComponent={CustomTransition} />;
diff --git a/packages/mui-codemod/src/deprecations/backdrop-props/test-cases/expected.js b/packages/mui-codemod/src/deprecations/backdrop-props/test-cases/expected.js
@@ -3,17 +3,9 @@ import { Backdrop as MyBackdrop } from '@mui/material';
 
 <Backdrop slots={{
   transition: CustomTransition
-}} slotProps={{
-  transition: {
-    timeout: 100
-  }
 }} />;
 <MyBackdrop slots={{
   transition: CustomTransition
-}} slotProps={{
-  transition: {
-    timeout: 100
-  }
 }} />;
 <Backdrop
   slots={{
@@ -22,12 +14,6 @@ import { Backdrop as MyBackdrop } from '@mui/material';
   }}
   slotProps={{
     root: { className: 'foo' },
-
-    transition: {
-      transition: {
-        timeout: 100
-      }
-    }
   }} />;
 <MyBackdrop
   slots={{
@@ -36,12 +22,6 @@ import { Backdrop as MyBackdrop } from '@mui/material';
   }}
   slotProps={{
     ...outerSlotProps,
-
-    transition: {
-      transition: {
-        timeout: 100
-      }
-    }
   }} />;
 // should skip non MUI components
-<NonMuiBackdrop TransitionComponent={CustomTransition} transitionDuration={100} />;
+<NonMuiBackdrop TransitionComponent={CustomTransition} />;
diff --git a/packages/mui-codemod/src/deprecations/backdrop-props/test-cases/theme.actual.js b/packages/mui-codemod/src/deprecations/backdrop-props/test-cases/theme.actual.js
@@ -2,7 +2,6 @@ fn({
   MuiBackdrop: {
     defaultProps: {
       TransitionComponent: CustomTransition,
-      TransitionProps: { unmountOnExit: true },
     },
   },
 });
diff --git a/packages/mui-codemod/src/deprecations/backdrop-props/test-cases/theme.expected.js b/packages/mui-codemod/src/deprecations/backdrop-props/test-cases/theme.expected.js
@@ -3,9 +3,7 @@ fn({
     defaultProps: {
       slots: {
         transition: CustomTransition
-      },
-
-      TransitionProps: { unmountOnExit: true }
+      }
     },
   },
 });
diff --git a/packages/mui-material/src/Backdrop/Backdrop.d.ts b/packages/mui-material/src/Backdrop/Backdrop.d.ts
@@ -42,7 +42,9 @@ export type BackdropSlotsAndSlotProps = CreateSlotsAndSlotProps<
   }
 >;
 
-export interface BackdropOwnProps extends Partial<Omit<FadeProps, 'children'>> {
+export interface BackdropOwnProps
+  extends Partial<Omit<FadeProps, 'children'>>,
+    BackdropSlotsAndSlotProps {
   /**
    * The content of the component.
    */
@@ -110,7 +112,7 @@ export interface BackdropTypeMap<
   AdditionalProps = {},
   RootComponent extends React.ElementType = 'div',
 > {
-  props: AdditionalProps & BackdropOwnProps & BackdropSlotsAndSlotProps;
+  props: AdditionalProps & BackdropOwnProps;
   defaultComponent: RootComponent;
 }