Skip to content

Commit

Permalink
Support "for", "class", "http-equiv", and "accept-charset"
Browse files Browse the repository at this point in the history
This commit updates the HTML property config and UnknownPropertyHook
developer warnings such that is no longer required to specify
"className" instead of "class", "htmlFor" instead of "for", and so
on.

Both forms are supported. When both are specified within props, React
provides the warning:

"className and class were listed as properties on <div />. Both write
to the same attribute; use one or the other."
  • Loading branch information
nhunzaker committed Jul 13, 2017
1 parent 3b43f31 commit 7400476
Show file tree
Hide file tree
Showing 5 changed files with 254 additions and 66 deletions.
19 changes: 16 additions & 3 deletions scripts/fiber/tests-passing.txt
Original file line number Diff line number Diff line change
Expand Up @@ -761,7 +761,6 @@ src/renderers/dom/shared/__tests__/ReactDOM-test.js
* calls focus() on autoFocus elements after they have been mounted to the DOM

src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js
* should handle className
* should gracefully handle various style value types
* should not update styles when mutating a proxy style object
* should throw when mutating style objects
Expand Down Expand Up @@ -844,8 +843,6 @@ src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js
* should warn about incorrect casing on event handlers (ssr)
* should warn about incorrect casing on properties
* should warn about incorrect casing on event handlers
* should warn about class
* should warn about class (ssr)
* should warn about props that are no longer supported
* should warn about props that are no longer supported (ssr)
* gives source code refs for unknown prop warning
Expand All @@ -855,6 +852,22 @@ src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js
* should suggest property name if available
* renders innerHTML and preserves whitespace
* render and then updates innerHTML and preserves whitespace
* should correctly assign the class attribute
* should correctly assign the className attribute
* supports the class attribute with string rendering
* removes className when set to null
* removes class when set to null
* switches from class to className
* switches from className to class
* warns when className and class are added to an element
* should correctly assign the for attribute
* should correctly assign the htmlFor attribute
* supports the for attribute with string rendering
* removes htmlFor when set to null
* removes for when set to null
* switches from for to htmlFor
* switches from htmlFor to for
* warns when htmlFor and for are added to an element

src/renderers/dom/shared/__tests__/ReactDOMComponentTree-test.js
* finds nodes for instances
Expand Down
3 changes: 0 additions & 3 deletions src/renderers/dom/shared/DOMProperty.js
Original file line number Diff line number Diff line change
Expand Up @@ -118,9 +118,6 @@ var DOMPropertyInjection = {
if (DOMAttributeNames.hasOwnProperty(propName)) {
var attributeName = DOMAttributeNames[propName];
propertyInfo.attributeName = attributeName;
if (__DEV__) {
DOMProperty.getPossibleStandardName[attributeName] = propName;
}
}

if (DOMAttributeNamespaces.hasOwnProperty(propName)) {
Expand Down
11 changes: 10 additions & 1 deletion src/renderers/dom/shared/HTMLDOMPropertyConfig.js
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ var HTMLDOMPropertyConfig = {
*/
accept: 0,
acceptCharset: 0,
'accept-charset': 0,
accessKey: 0,
action: 0,
allowFullScreen: HAS_BOOLEAN_VALUE,
Expand All @@ -51,6 +52,7 @@ var HTMLDOMPropertyConfig = {
checked: MUST_USE_PROPERTY | HAS_BOOLEAN_VALUE,
cite: 0,
classID: 0,
class: 0,
className: 0,
cols: HAS_POSITIVE_NUMERIC_VALUE,
colSpan: 0,
Expand Down Expand Up @@ -83,8 +85,10 @@ var HTMLDOMPropertyConfig = {
high: 0,
href: 0,
hrefLang: 0,
for: 0,
htmlFor: 0,
httpEquiv: 0,
'http-equiv': 0,
id: 0,
inputMode: 0,
integrity: 0,
Expand Down Expand Up @@ -212,7 +216,12 @@ var HTMLDOMPropertyConfig = {
htmlFor: 'for',
httpEquiv: 'http-equiv',
},
DOMPropertyNames: {},
DOMPropertyNames: {
'accept-charset': 'acceptCharset',
class: 'className',
for: 'htmlFor',
'http-equiv': 'httpEquiv',
},
DOMMutationMethods: {
value: function(node, value) {
if (value == null) {
Expand Down
Loading

0 comments on commit 7400476

Please sign in to comment.