From 9ea55ba5c2d035796e4e005e2cd1234468c0c651 Mon Sep 17 00:00:00 2001
From: Nicole Levy <n.levy@raceroster.com>
Date: Tue, 3 Apr 2018 19:34:39 -0400
Subject: [PATCH 1/6] update warning text

---
 .../src/__tests__/ReactDOMComponent-test.js      | 16 +++++++++++++---
 .../ReactServerRendering-test.internal.js        | 10 ++++++----
 2 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMComponent-test.js b/packages/react-dom/src/__tests__/ReactDOMComponent-test.js
index 2df33293fae3f..00c917300cbc6 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 letters and dashes for HTML.',
+      );
       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 letters and dashes for HTML.',
+      );
     });
 
     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 letters and dashes for HTML.',
           '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..c208b28a4be44 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 letters and dashes for HTML.',
       // 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 letters and dashes for HTML.',
     ]);
   });
 

From 2917053c6338121137ba1cfd85c56e2d0a8b5896 Mon Sep 17 00:00:00 2001
From: Nicole Levy <n.levy@raceroster.com>
Date: Tue, 3 Apr 2018 19:34:48 -0400
Subject: [PATCH 2/6] update tests to match

---
 packages/react-dom/src/client/ReactDOMFiberComponent.js | 5 +++--
 packages/react-dom/src/server/ReactPartialRenderer.js   | 5 +++--
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/packages/react-dom/src/client/ReactDOMFiberComponent.js b/packages/react-dom/src/client/ReactDOMFiberComponent.js
index 733432cd26e7d..f4766f8394520 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 letters and dashes for HTML.',
         type,
       );
     }
diff --git a/packages/react-dom/src/server/ReactPartialRenderer.js b/packages/react-dom/src/server/ReactPartialRenderer.js
index cdb8ff1923587..fd1bd0e6aca7b 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 letters and dashes for HTML.',
           element.type,
         );
       }

From da8a4136845ef22da192e1d990f91695fbfb288a Mon Sep 17 00:00:00 2001
From: Nicole Levy <n.levy@raceroster.com>
Date: Tue, 3 Apr 2018 19:41:55 -0400
Subject: [PATCH 3/6] `yarn prettier`

---
 .../react-dom/src/__tests__/ReactDOMComponent-test.js     | 8 ++++----
 .../src/__tests__/ReactServerRendering-test.internal.js   | 8 ++++----
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMComponent-test.js b/packages/react-dom/src/__tests__/ReactDOMComponent-test.js
index 00c917300cbc6..c4903825cd39a 100644
--- a/packages/react-dom/src/__tests__/ReactDOMComponent-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMComponent-test.js
@@ -1001,7 +1001,7 @@ describe('ReactDOMComponent', () => {
       expect(() => {
         returnedValue = ReactDOMServer.renderToString(<Container />);
       }).toWarnDev(
-          '<BR /> is using incorrect casing. ' +
+        '<BR /> is using incorrect casing. ' +
           'Use PascalCase for React components, ' +
           'or lowercase letters and dashes for HTML.',
       );
@@ -1017,7 +1017,7 @@ describe('ReactDOMComponent', () => {
       expect(() =>
         ReactTestUtils.renderIntoDocument(React.createElement('IMG')),
       ).toWarnDev(
-          '<IMG /> is using incorrect casing. ' +
+        '<IMG /> is using incorrect casing. ' +
           'Use PascalCase for React components, ' +
           'or lowercase letters and dashes for HTML.',
       );
@@ -1068,8 +1068,8 @@ describe('ReactDOMComponent', () => {
           ReactTestUtils.renderIntoDocument(<hasOwnProperty />),
         ).toWarnDev([
           '<hasOwnProperty /> is using incorrect casing. ' +
-          'Use PascalCase for React components, ' +
-          'or lowercase letters and dashes for HTML.',
+            'Use PascalCase for React components, ' +
+            'or lowercase letters and dashes for HTML.',
           '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 c208b28a4be44..09de8cf13b935 100644
--- a/packages/react-dom/src/__tests__/ReactServerRendering-test.internal.js
+++ b/packages/react-dom/src/__tests__/ReactServerRendering-test.internal.js
@@ -603,12 +603,12 @@ describe('ReactDOMServer', () => {
       ),
     ).toWarnDev([
       'Warning: <inPUT /> is using incorrect casing. ' +
-      'Use PascalCase for React components, ' +
-      'or lowercase letters and dashes for HTML.',
+        'Use PascalCase for React components, ' +
+        'or lowercase letters and dashes for HTML.',
       // linearGradient doesn't warn
       'Warning: <iFrame /> is using incorrect casing. ' +
-      'Use PascalCase for React components, ' +
-      'or lowercase letters and dashes for HTML.',
+        'Use PascalCase for React components, ' +
+        'or lowercase letters and dashes for HTML.',
     ]);
   });
 

From 9f735c72989972c83032e6a847e5fe0a40ce6eee Mon Sep 17 00:00:00 2001
From: Nicole Levy <n.levy@raceroster.com>
Date: Wed, 4 Apr 2018 00:38:12 -0400
Subject: [PATCH 4/6] include note on HTML5 custom elements

---
 .../react-dom/src/__tests__/ReactDOMComponent-test.js    | 9 ++++++---
 .../src/__tests__/ReactServerRendering-test.internal.js  | 6 ++++--
 packages/react-dom/src/client/ReactDOMFiberComponent.js  | 3 ++-
 packages/react-dom/src/server/ReactPartialRenderer.js    | 3 ++-
 4 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMComponent-test.js b/packages/react-dom/src/__tests__/ReactDOMComponent-test.js
index c4903825cd39a..4177866625001 100644
--- a/packages/react-dom/src/__tests__/ReactDOMComponent-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMComponent-test.js
@@ -1003,7 +1003,8 @@ describe('ReactDOMComponent', () => {
       }).toWarnDev(
         '<BR /> is using incorrect casing. ' +
           'Use PascalCase for React components, ' +
-          'or lowercase letters and dashes for HTML.',
+          'or lowercase letters and dashes for HTML ' +
+          'and HTML5 custom elements',
       );
       expect(returnedValue).not.toContain('</BR>');
     });
@@ -1019,7 +1020,8 @@ describe('ReactDOMComponent', () => {
       ).toWarnDev(
         '<IMG /> is using incorrect casing. ' +
           'Use PascalCase for React components, ' +
-          'or lowercase letters and dashes for HTML.',
+          'or lowercase letters and dashes for HTML ' +
+          'and HTML5 custom elements',
       );
     });
 
@@ -1069,7 +1071,8 @@ describe('ReactDOMComponent', () => {
         ).toWarnDev([
           '<hasOwnProperty /> is using incorrect casing. ' +
             'Use PascalCase for React components, ' +
-            'or lowercase letters and dashes for HTML.',
+            'or lowercase letters and dashes for HTML ' +
+            'and HTML5 custom 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 09de8cf13b935..1cd0759064330 100644
--- a/packages/react-dom/src/__tests__/ReactServerRendering-test.internal.js
+++ b/packages/react-dom/src/__tests__/ReactServerRendering-test.internal.js
@@ -604,11 +604,13 @@ describe('ReactDOMServer', () => {
     ).toWarnDev([
       'Warning: <inPUT /> is using incorrect casing. ' +
         'Use PascalCase for React components, ' +
-        'or lowercase letters and dashes for HTML.',
+        'or lowercase letters and dashes for HTML ' +
+        'and HTML5 custom elements',
       // linearGradient doesn't warn
       'Warning: <iFrame /> is using incorrect casing. ' +
         'Use PascalCase for React components, ' +
-        'or lowercase letters and dashes for HTML.',
+        'or lowercase letters and dashes for HTML ' +
+        'and HTML5 custom elements',
     ]);
   });
 
diff --git a/packages/react-dom/src/client/ReactDOMFiberComponent.js b/packages/react-dom/src/client/ReactDOMFiberComponent.js
index f4766f8394520..c4bd82160287d 100644
--- a/packages/react-dom/src/client/ReactDOMFiberComponent.js
+++ b/packages/react-dom/src/client/ReactDOMFiberComponent.js
@@ -357,7 +357,8 @@ export function createElement(
         isCustomComponentTag || type === type.toLowerCase(),
         '<%s /> is using incorrect casing. ' +
           'Use PascalCase for React components, ' +
-          'or lowercase letters and dashes for HTML.',
+          'or lowercase letters and dashes for HTML ' +
+          'and HTML5 custom elements',
         type,
       );
     }
diff --git a/packages/react-dom/src/server/ReactPartialRenderer.js b/packages/react-dom/src/server/ReactPartialRenderer.js
index fd1bd0e6aca7b..fd52deebc5e0c 100644
--- a/packages/react-dom/src/server/ReactPartialRenderer.js
+++ b/packages/react-dom/src/server/ReactPartialRenderer.js
@@ -957,7 +957,8 @@ class ReactDOMServerRenderer {
           tag === element.type,
           '<%s /> is using incorrect casing. ' +
             'Use PascalCase for React components, ' +
-            'or lowercase letters and dashes for HTML.',
+            'or lowercase letters and dashes for HTML ' +
+            'and HTML5 custom elements',
           element.type,
         );
       }

From 08c1571175239649b8ac77a5683684a5cb3f43a6 Mon Sep 17 00:00:00 2001
From: Nicole Levy <n.levy@raceroster.com>
Date: Wed, 4 Apr 2018 12:58:54 -0400
Subject: [PATCH 5/6] =?UTF-8?q?dan=E2=80=99s=20copy=20suggestion?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../react-dom/src/__tests__/ReactDOMComponent-test.js    | 9 +++------
 .../src/__tests__/ReactServerRendering-test.internal.js  | 6 ++----
 packages/react-dom/src/client/ReactDOMFiberComponent.js  | 3 +--
 packages/react-dom/src/server/ReactPartialRenderer.js    | 3 +--
 4 files changed, 7 insertions(+), 14 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMComponent-test.js b/packages/react-dom/src/__tests__/ReactDOMComponent-test.js
index 4177866625001..c772189ac0dd9 100644
--- a/packages/react-dom/src/__tests__/ReactDOMComponent-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMComponent-test.js
@@ -1003,8 +1003,7 @@ describe('ReactDOMComponent', () => {
       }).toWarnDev(
         '<BR /> is using incorrect casing. ' +
           'Use PascalCase for React components, ' +
-          'or lowercase letters and dashes for HTML ' +
-          'and HTML5 custom elements',
+          'or lowercase letters for HTML elements.',
       );
       expect(returnedValue).not.toContain('</BR>');
     });
@@ -1020,8 +1019,7 @@ describe('ReactDOMComponent', () => {
       ).toWarnDev(
         '<IMG /> is using incorrect casing. ' +
           'Use PascalCase for React components, ' +
-          'or lowercase letters and dashes for HTML ' +
-          'and HTML5 custom elements',
+          'or lowercase letters for HTML elements.',
       );
     });
 
@@ -1071,8 +1069,7 @@ describe('ReactDOMComponent', () => {
         ).toWarnDev([
           '<hasOwnProperty /> is using incorrect casing. ' +
             'Use PascalCase for React components, ' +
-            'or lowercase letters and dashes for HTML ' +
-            'and HTML5 custom elements',
+            'or lowercase letters 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 1cd0759064330..7626c03729d9f 100644
--- a/packages/react-dom/src/__tests__/ReactServerRendering-test.internal.js
+++ b/packages/react-dom/src/__tests__/ReactServerRendering-test.internal.js
@@ -604,13 +604,11 @@ describe('ReactDOMServer', () => {
     ).toWarnDev([
       'Warning: <inPUT /> is using incorrect casing. ' +
         'Use PascalCase for React components, ' +
-        'or lowercase letters and dashes for HTML ' +
-        'and HTML5 custom elements',
+        'or lowercase letters for HTML elements.',
       // linearGradient doesn't warn
       'Warning: <iFrame /> is using incorrect casing. ' +
         'Use PascalCase for React components, ' +
-        'or lowercase letters and dashes for HTML ' +
-        'and HTML5 custom elements',
+        'or lowercase letters for HTML elements.',
     ]);
   });
 
diff --git a/packages/react-dom/src/client/ReactDOMFiberComponent.js b/packages/react-dom/src/client/ReactDOMFiberComponent.js
index c4bd82160287d..20c64dbb607e4 100644
--- a/packages/react-dom/src/client/ReactDOMFiberComponent.js
+++ b/packages/react-dom/src/client/ReactDOMFiberComponent.js
@@ -357,8 +357,7 @@ export function createElement(
         isCustomComponentTag || type === type.toLowerCase(),
         '<%s /> is using incorrect casing. ' +
           'Use PascalCase for React components, ' +
-          'or lowercase letters and dashes for HTML ' +
-          'and HTML5 custom elements',
+          'or lowercase letters for HTML elements.',
         type,
       );
     }
diff --git a/packages/react-dom/src/server/ReactPartialRenderer.js b/packages/react-dom/src/server/ReactPartialRenderer.js
index fd52deebc5e0c..75810ea21c0d7 100644
--- a/packages/react-dom/src/server/ReactPartialRenderer.js
+++ b/packages/react-dom/src/server/ReactPartialRenderer.js
@@ -957,8 +957,7 @@ class ReactDOMServerRenderer {
           tag === element.type,
           '<%s /> is using incorrect casing. ' +
             'Use PascalCase for React components, ' +
-            'or lowercase letters and dashes for HTML ' +
-            'and HTML5 custom elements',
+            'or lowercase letters for HTML elements.',
           element.type,
         );
       }

From a221e1ebc96c58c88cff3d3bb214f851a85485c1 Mon Sep 17 00:00:00 2001
From: Nicole Levy <n.levy@raceroster.com>
Date: Wed, 4 Apr 2018 17:10:17 -0400
Subject: [PATCH 6/6] =?UTF-8?q?remove=20=E2=80=98letters=E2=80=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/react-dom/src/__tests__/ReactDOMComponent-test.js  | 6 +++---
 .../src/__tests__/ReactServerRendering-test.internal.js     | 4 ++--
 packages/react-dom/src/client/ReactDOMFiberComponent.js     | 2 +-
 packages/react-dom/src/server/ReactPartialRenderer.js       | 2 +-
 4 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMComponent-test.js b/packages/react-dom/src/__tests__/ReactDOMComponent-test.js
index c772189ac0dd9..0e2986a1f5d34 100644
--- a/packages/react-dom/src/__tests__/ReactDOMComponent-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMComponent-test.js
@@ -1003,7 +1003,7 @@ describe('ReactDOMComponent', () => {
       }).toWarnDev(
         '<BR /> is using incorrect casing. ' +
           'Use PascalCase for React components, ' +
-          'or lowercase letters for HTML elements.',
+          'or lowercase for HTML elements.',
       );
       expect(returnedValue).not.toContain('</BR>');
     });
@@ -1019,7 +1019,7 @@ describe('ReactDOMComponent', () => {
       ).toWarnDev(
         '<IMG /> is using incorrect casing. ' +
           'Use PascalCase for React components, ' +
-          'or lowercase letters for HTML elements.',
+          'or lowercase for HTML elements.',
       );
     });
 
@@ -1069,7 +1069,7 @@ describe('ReactDOMComponent', () => {
         ).toWarnDev([
           '<hasOwnProperty /> is using incorrect casing. ' +
             'Use PascalCase for React components, ' +
-            'or lowercase letters for HTML elements.',
+            '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 7626c03729d9f..05eb32ba037a8 100644
--- a/packages/react-dom/src/__tests__/ReactServerRendering-test.internal.js
+++ b/packages/react-dom/src/__tests__/ReactServerRendering-test.internal.js
@@ -604,11 +604,11 @@ describe('ReactDOMServer', () => {
     ).toWarnDev([
       'Warning: <inPUT /> is using incorrect casing. ' +
         'Use PascalCase for React components, ' +
-        'or lowercase letters for HTML elements.',
+        'or lowercase for HTML elements.',
       // linearGradient doesn't warn
       'Warning: <iFrame /> is using incorrect casing. ' +
         'Use PascalCase for React components, ' +
-        'or lowercase letters for HTML elements.',
+        'or lowercase for HTML elements.',
     ]);
   });
 
diff --git a/packages/react-dom/src/client/ReactDOMFiberComponent.js b/packages/react-dom/src/client/ReactDOMFiberComponent.js
index 20c64dbb607e4..ceb20873c2af2 100644
--- a/packages/react-dom/src/client/ReactDOMFiberComponent.js
+++ b/packages/react-dom/src/client/ReactDOMFiberComponent.js
@@ -357,7 +357,7 @@ export function createElement(
         isCustomComponentTag || type === type.toLowerCase(),
         '<%s /> is using incorrect casing. ' +
           'Use PascalCase for React components, ' +
-          'or lowercase letters for HTML elements.',
+          '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 75810ea21c0d7..ec26eba2c1d27 100644
--- a/packages/react-dom/src/server/ReactPartialRenderer.js
+++ b/packages/react-dom/src/server/ReactPartialRenderer.js
@@ -957,7 +957,7 @@ class ReactDOMServerRenderer {
           tag === element.type,
           '<%s /> is using incorrect casing. ' +
             'Use PascalCase for React components, ' +
-            'or lowercase letters for HTML elements.',
+            'or lowercase for HTML elements.',
           element.type,
         );
       }