Clarify ReactDOM's case warning for html tags (#12533)

* update warning text * update tests to match * `yarn prettier` * include note on HTML5 custom elements * dan’s copy suggestion * remove ‘letters’
facebook · Apr 4, 2018 · 27535e7 · 27535e7
1 parent 8ec0e4a
commit 27535e7
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 11 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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,
         );
       }