[codemod] Fix handling of computed paragraph props (mui#44195)

Co-authored-by: ZeeshanTamboli <[email protected]>
sai6855 · Nov 26, 2024 · 5d1c6ab · 5d1c6ab
1 parent 72823b8
commit 5d1c6ab
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 6 deletions.
diff --git a/packages/mui-codemod/README.md b/packages/mui-codemod/README.md
@@ -1669,6 +1669,13 @@ npx @mui/codemod@latest deprecations/table-sort-label-classes <path>
  />
 ```
 
+```diff
+ <Typography
+-  paragraph={isTypographyParagraph}
++  sx={isTypographyParagraph ? { marginBottom: '16px' } : undefined}
+ />
+```
+
 ```diff
  MuiTypography: {
    defaultProps: {

diff --git a/packages/mui-codemod/src/deprecations/typography-props/test-cases/actual.js b/packages/mui-codemod/src/deprecations/typography-props/test-cases/actual.js
@@ -11,6 +11,8 @@ import { Typography as MyTypography } from '@mui/material';
 <MyTypography paragraph className="my-class" />;
 <Typography paragraph={false} className="my-class" />;
 <MyTypography paragraph={false} className="my-class" />;
+<Typography paragraph={true} className="my-class" />;
+<MyTypography paragraph={true} className="my-class" />;
 <Typography paragraph={paragraph} className="my-class" />;
 <MyTypography paragraph={paragraph} className="my-class" />;
 <Typography paragraph sx={{ marginBottom: "32px" }} />;

diff --git a/packages/mui-codemod/src/deprecations/typography-props/test-cases/expected.js b/packages/mui-codemod/src/deprecations/typography-props/test-cases/expected.js
@@ -25,6 +25,12 @@ import { Typography as MyTypography } from '@mui/material';
 <MyTypography className="my-class" sx={{
   marginBottom: "16px"
 }} />;
+<Typography className="my-class" sx={paragraph ? {
+  marginBottom: "16px"
+} : undefined} />;
+<MyTypography className="my-class" sx={paragraph ? {
+  marginBottom: "16px"
+} : undefined} />;
 <Typography sx={{ marginBottom: "32px" }} />;
 <MyTypography sx={{ marginBottom: "32px" }} />;
 <Typography sx={{ mb: "32px" }} />;

diff --git a/packages/mui-codemod/src/deprecations/typography-props/typography-props.js b/packages/mui-codemod/src/deprecations/typography-props/typography-props.js
@@ -29,22 +29,33 @@ export default function transformer(file, api, options) {
       },
     );
 
-    const isParagraphPropTruthy = paragraphProp.value?.expression.value !== false;
+    const isParagraphPropPresent = paragraphProp.value?.expression.value !== false;
 
-    if (!isParagraphPropTruthy) {
+    if (!isParagraphPropPresent) {
       return;
     }
 
+    const isParagraphPropTrue =
+      paragraphProp.value == null || paragraphProp.value.expression.value === true;
+    const paragraphExpression = (expression) =>
+      isParagraphPropTrue
+        ? expression
+        : j.conditionalExpression(
+            paragraphProp.value.expression,
+            expression,
+            j.identifier('undefined'),
+          );
+
     const sxIndex = elementPath.node.openingElement.attributes.findIndex(
       (attr) => attr.type === 'JSXAttribute' && attr.name.name === 'sx',
     );
     if (sxIndex === -1) {
       appendAttribute(j, {
         target: elementPath.node,
         attributeName: 'sx',
-        expression: j.objectExpression([
-          j.objectProperty(j.identifier('marginBottom'), j.literal('16px')),
-        ]),
+        expression: paragraphExpression(
+          j.objectExpression([j.objectProperty(j.identifier('marginBottom'), j.literal('16px'))]),
+        ),
       });
     } else {
       const hasMarginBottom = elementPath.node.openingElement.attributes[
@@ -57,7 +68,7 @@ export default function transformer(file, api, options) {
         assignObject(j, {
           target: elementPath.node.openingElement.attributes[sxIndex],
           key: 'marginBottom',
-          expression: j.literal('16px'),
+          expression: paragraphExpression(j.literal('16px')),
         });
       }
     }