Don't add parens to undefined in ConditionalExpression with jsx (#7504)

* Add failed test

* Don't add parens to Literal and Identifier

* Update snap shot

* Move test to `jsx`

* Only undefined

* Add changelog

changelog_unreleased/javascript/pr-7504.md

@@ -0,0 +1,38 @@
+#### Don't add parens to `undefined` in `ConditionalExpression` with `jsx` ([#7504](https://github.com/prettier/prettier/pull/7504) by [@fisker](https://github.com/fisker))
+
+Previously, we add parens to any value except `null` in `ConditionalExpression` with `jsx`, now `undefined` is excluded too.
+
+<!-- prettier-ignore -->
+```js
+// Input
+foo ? <span>loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong jsx</span> :
+undefined
+foo ? <span>loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong jsx</span> :
+null
+
+// Prettier stable
+foo ? (
+  <span>
+    loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong jsx
+  </span>
+) : (
+  undefined
+);
+foo ? (
+  <span>
+    loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong jsx
+  </span>
+) : null;
+
+// Prettier master
+foo ? (
+  <span>
+    loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong jsx
+  </span>
+) : undefined;
+foo ? (
+  <span>
+    loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong jsx
+  </span>
+) : null;
+```

src/language-js/printer-estree.js

@@ -334,18 +334,20 @@ function printTernaryOperator(path, options, print, operatorOptions) {
     // The only things we don't wrap are:
     // * Nested conditional expressions in alternates
     // * null
-    const isNull = node =>
+    // * undefined
+    const isNil = node =>
       node.type === "NullLiteral" ||
-      (node.type === "Literal" && node.value === null);
+      (node.type === "Literal" && node.value === null) ||
+      (node.type === "Identifier" && node.name === "undefined");
 
     parts.push(
       " ? ",
-      isNull(consequentNode)
+      isNil(consequentNode)
         ? path.call(print, operatorOptions.consequentNodePropertyName)
         : wrap(path.call(print, operatorOptions.consequentNodePropertyName)),
       " : ",
       alternateNode.type === operatorOptions.conditionalNodeType ||
-        isNull(alternateNode)
+        isNil(alternateNode)
         ? path.call(print, operatorOptions.alternateNodePropertyName)
         : wrap(path.call(print, operatorOptions.alternateNodePropertyName))
     );

tests/jsx/__snapshots__/jsfmt.spec.js.snap

@@ -756,6 +756,10 @@ cable ? (
   ) : null}
 </div>;
 
+// #3552
+foo ? <span>loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong jsx</span> :
+undefined
+
 =====================================output=====================================
 // There are two ways to print ConditionalExpressions: "normal mode" and
 // "JSX mode". This is normal mode (when breaking):
@@ -901,6 +905,13 @@ cable ? (
   ) : null}
 </div>;
 
+// #3552
+foo ? (
+  <span>
+    loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong jsx
+  </span>
+) : undefined;
+
 ================================================================================
 `;
 
@@ -1044,6 +1055,10 @@ cable ? (
   ) : null}
 </div>;
 
+// #3552
+foo ? <span>loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong jsx</span> :
+undefined
+
 =====================================output=====================================
 // There are two ways to print ConditionalExpressions: "normal mode" and
 // "JSX mode". This is normal mode (when breaking):
@@ -1189,6 +1204,13 @@ cable ? (
   ) : null}
 </div>;
 
+// #3552
+foo ? (
+  <span>
+    loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong jsx
+  </span>
+) : undefined;
+
 ================================================================================
 `;
 
@@ -1332,6 +1354,10 @@ cable ? (
   ) : null}
 </div>;
 
+// #3552
+foo ? <span>loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong jsx</span> :
+undefined
+
 =====================================output=====================================
 // There are two ways to print ConditionalExpressions: "normal mode" and
 // "JSX mode". This is normal mode (when breaking):
@@ -1477,6 +1503,13 @@ cable ? (
   ) : null}
 </div>;
 
+// #3552
+foo ? (
+  <span>
+    loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong jsx
+  </span>
+) : undefined;
+
 ================================================================================
 `;
 
@@ -1620,6 +1653,10 @@ cable ? (
   ) : null}
 </div>;
 
+// #3552
+foo ? <span>loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong jsx</span> :
+undefined
+
 =====================================output=====================================
 // There are two ways to print ConditionalExpressions: "normal mode" and
 // "JSX mode". This is normal mode (when breaking):
@@ -1765,6 +1802,13 @@ cable ? (
   ) : null}
 </div>;
 
+// #3552
+foo ? (
+  <span>
+    loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong jsx
+  </span>
+) : undefined;
+
 ================================================================================
 `;
 

tests/jsx/conditional-expression.js

@@ -129,3 +129,7 @@ cable ? (
     )
   ) : null}
 </div>;
+
+// #3552
+foo ? <span>loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong jsx</span> :
+undefined