From 27535e7bfcb63e8a4d65f273311e380b4ca12eff Mon Sep 17 00:00:00 2001
From: Nicole Levy <seriff@protonmail.com>
Date: Wed, 4 Apr 2018 17:21:06 -0400
Subject: [PATCH] Clarify ReactDOM's case warning for html tags (#12533)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* update warning text

* update tests to match

* `yarn prettier`

* include note on HTML5 custom elements

* dan’s copy suggestion

* remove ‘letters’
---
 .../src/__tests__/ReactDOMComponent-test.js      | 16 +++++++++++++---
 .../ReactServerRendering-test.internal.js        | 10 ++++++----
 .../src/client/ReactDOMFiberComponent.js         |  5 +++--
 .../react-dom/src/server/ReactPartialRenderer.js |  5 +++--
 4 files changed, 25 insertions(+), 11 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMComponent-test.js b/packages/react-dom/src/__tests__/ReactDOMComponent-test.js
index 2df33293fae3f..0e2986a1f5d34 100644
--- a/packages/react-dom/src/__tests__/ReactDOMComponent-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMComponent-test.js
@@ -1000,7 +1000,11 @@ describe('ReactDOMComponent', () => {
 
       expect(() => {
         returnedValue = ReactDOMServer.renderToString(<Container />);
-      }).toWarnDev('<BR /> is using uppercase HTML.');
+      }).toWarnDev(
+        '<BR /> is using incorrect casing. ' +
+          'Use PascalCase for React components, ' +
+          'or lowercase for HTML elements.',
+      );
       expect(returnedValue).not.toContain('</BR>');
     });
 
@@ -1012,7 +1016,11 @@ describe('ReactDOMComponent', () => {
 
       expect(() =>
         ReactTestUtils.renderIntoDocument(React.createElement('IMG')),
-      ).toWarnDev('<IMG /> is using uppercase HTML.');
+      ).toWarnDev(
+        '<IMG /> is using incorrect casing. ' +
+          'Use PascalCase for React components, ' +
+          'or lowercase for HTML elements.',
+      );
     });
 
     it('should warn on props reserved for future use', () => {
@@ -1059,7 +1067,9 @@ describe('ReactDOMComponent', () => {
         expect(() =>
           ReactTestUtils.renderIntoDocument(<hasOwnProperty />),
         ).toWarnDev([
-          '<hasOwnProperty /> is using uppercase HTML',
+          '<hasOwnProperty /> is using incorrect casing. ' +
+            'Use PascalCase for React components, ' +
+            'or lowercase for HTML elements.',
           'The tag <hasOwnProperty> is unrecognized in this browser',
         ]);
       } finally {
diff --git a/packages/react-dom/src/__tests__/ReactServerRendering-test.internal.js b/packages/react-dom/src/__tests__/ReactServerRendering-test.internal.js
index 45fca606342f4..05eb32ba037a8 100644
--- a/packages/react-dom/src/__tests__/ReactServerRendering-test.internal.js
+++ b/packages/react-dom/src/__tests__/ReactServerRendering-test.internal.js
@@ -602,11 +602,13 @@ describe('ReactDOMServer', () => {
         </div>,
       ),
     ).toWarnDev([
-      'Warning: <inPUT /> is using uppercase HTML. Always use lowercase ' +
-        'HTML tags in React.',
+      'Warning: <inPUT /> is using incorrect casing. ' +
+        'Use PascalCase for React components, ' +
+        'or lowercase for HTML elements.',
       // linearGradient doesn't warn
-      'Warning: <iFrame /> is using uppercase HTML. Always use lowercase ' +
-        'HTML tags in React.',
+      'Warning: <iFrame /> is using incorrect casing. ' +
+        'Use PascalCase for React components, ' +
+        'or lowercase for HTML elements.',
     ]);
   });
 
diff --git a/packages/react-dom/src/client/ReactDOMFiberComponent.js b/packages/react-dom/src/client/ReactDOMFiberComponent.js
index 733432cd26e7d..ceb20873c2af2 100644
--- a/packages/react-dom/src/client/ReactDOMFiberComponent.js
+++ b/packages/react-dom/src/client/ReactDOMFiberComponent.js
@@ -355,8 +355,9 @@ export function createElement(
       // allow <SVG> or <mATH>.
       warning(
         isCustomComponentTag || type === type.toLowerCase(),
-        '<%s /> is using uppercase HTML. Always use lowercase HTML tags ' +
-          'in React.',
+        '<%s /> is using incorrect casing. ' +
+          'Use PascalCase for React components, ' +
+          'or lowercase for HTML elements.',
         type,
       );
     }
diff --git a/packages/react-dom/src/server/ReactPartialRenderer.js b/packages/react-dom/src/server/ReactPartialRenderer.js
index cdb8ff1923587..ec26eba2c1d27 100644
--- a/packages/react-dom/src/server/ReactPartialRenderer.js
+++ b/packages/react-dom/src/server/ReactPartialRenderer.js
@@ -955,8 +955,9 @@ class ReactDOMServerRenderer {
         // allow <SVG> or <mATH>.
         warning(
           tag === element.type,
-          '<%s /> is using uppercase HTML. Always use lowercase HTML tags ' +
-            'in React.',
+          '<%s /> is using incorrect casing. ' +
+            'Use PascalCase for React components, ' +
+            'or lowercase for HTML elements.',
           element.type,
         );
       }