diff --git a/src/addons/ReactComponentWithPureRenderMixin.js b/src/addons/ReactComponentWithPureRenderMixin.js index cf85d9f5f8db..3635ae44a673 100644 --- a/src/addons/ReactComponentWithPureRenderMixin.js +++ b/src/addons/ReactComponentWithPureRenderMixin.js @@ -35,7 +35,7 @@ var shallowEqual = require('shallowEqual'); * mixins: [ReactComponentWithPureRenderMixin], * * render: function() { - * return
foo
; + * return
foo
; * } * }); * diff --git a/src/browser/ReactDOM.js b/src/browser/ReactDOM.js index f5e98a28c97d..b43c6cc2cf03 100644 --- a/src/browser/ReactDOM.js +++ b/src/browser/ReactDOM.js @@ -30,7 +30,7 @@ var objMapKeyVal = require('objMapKeyVal'); * valid according to `DOMProperty`. * * - Event listeners: `onClick`, `onMouseDown`, etc. - * - DOM properties: `className`, `name`, `title`, etc. + * - DOM properties: `class`, `name`, `title`, etc. * * The `style` property functions differently from the DOM API. It accepts an * object mapping of style properties to values. diff --git a/src/browser/ui/__tests__/ReactMountDestruction-test.js b/src/browser/ui/__tests__/ReactMountDestruction-test.js index c73ddb461f61..a55ebc65c1bd 100644 --- a/src/browser/ui/__tests__/ReactMountDestruction-test.js +++ b/src/browser/ui/__tests__/ReactMountDestruction-test.js @@ -27,7 +27,7 @@ describe('ReactMount', function() { document.documentElement.appendChild(mainContainerDiv); var instanceOne = ( -
+
); var firstRootDiv = document.createElement('div'); @@ -35,7 +35,7 @@ describe('ReactMount', function() { React.renderComponent(instanceOne, firstRootDiv); var instanceTwo = ( -
+
); var secondRootDiv = document.createElement('div'); diff --git a/src/browser/ui/dom/DOMProperty.js b/src/browser/ui/dom/DOMProperty.js index 96127c94f2bd..3e6df185fcbf 100644 --- a/src/browser/ui/dom/DOMProperty.js +++ b/src/browser/ui/dom/DOMProperty.js @@ -93,8 +93,13 @@ var DOMPropertyInjection = { DOMProperty.getAttributeName[propName] = attributeName || lowerCased; - DOMProperty.getPropertyName[propName] = - DOMPropertyNames[propName] || propName; + var propertyName = DOMPropertyNames[propName]; + if (propertyName) { + DOMProperty.getPossibleStandardName[propertyName.toLowerCase()] = + propName; + } + + DOMProperty.getPropertyName[propName] = propertyName || propName; var mutationMethod = DOMMutationMethods[propName]; if (mutationMethod) { diff --git a/src/browser/ui/dom/DOMPropertyOperations.js b/src/browser/ui/dom/DOMPropertyOperations.js index ae1e39d63291..29e9fbe255ec 100644 --- a/src/browser/ui/dom/DOMPropertyOperations.js +++ b/src/browser/ui/dom/DOMPropertyOperations.js @@ -162,7 +162,7 @@ var DOMPropertyOperations = { var propName = DOMProperty.getPropertyName[name]; var defaultValue = DOMProperty.getDefaultValueForProperty( node.nodeName, - name + propName ); if (!DOMProperty.hasSideEffects[name] || node[propName] !== defaultValue) { diff --git a/src/browser/ui/dom/DefaultDOMPropertyConfig.js b/src/browser/ui/dom/DefaultDOMPropertyConfig.js index e417d333183e..059b64692f20 100644 --- a/src/browser/ui/dom/DefaultDOMPropertyConfig.js +++ b/src/browser/ui/dom/DefaultDOMPropertyConfig.js @@ -52,7 +52,7 @@ var DefaultDOMPropertyConfig = { cellSpacing: null, charSet: MUST_USE_ATTRIBUTE, checked: MUST_USE_PROPERTY | HAS_BOOLEAN_VALUE, - className: MUST_USE_PROPERTY, + class: MUST_USE_PROPERTY, cols: MUST_USE_ATTRIBUTE | HAS_POSITIVE_NUMERIC_VALUE, colSpan: null, content: null, @@ -68,6 +68,7 @@ var DefaultDOMPropertyConfig = { download: null, draggable: null, encType: null, + for: null, form: MUST_USE_ATTRIBUTE, formNoValidate: HAS_BOOLEAN_VALUE, frameBorder: MUST_USE_ATTRIBUTE, @@ -75,7 +76,6 @@ var DefaultDOMPropertyConfig = { hidden: MUST_USE_ATTRIBUTE | HAS_BOOLEAN_VALUE, href: null, hrefLang: null, - htmlFor: null, httpEquiv: null, icon: null, id: MUST_USE_PROPERTY, @@ -165,10 +165,8 @@ var DefaultDOMPropertyConfig = { y: MUST_USE_ATTRIBUTE }, DOMAttributeNames: { - className: 'class', gradientTransform: 'gradientTransform', gradientUnits: 'gradientUnits', - htmlFor: 'for', spreadMethod: 'spreadMethod', stopColor: 'stop-color', stopOpacity: 'stop-opacity', @@ -182,7 +180,9 @@ var DefaultDOMPropertyConfig = { autoCorrect: 'autocorrect', autoFocus: 'autofocus', autoPlay: 'autoplay', + class: 'className', encType: 'enctype', + for: 'htmlFor', hrefLang: 'hreflang', radioGroup: 'radiogroup', spellCheck: 'spellcheck', diff --git a/src/browser/ui/dom/__tests__/DOMPropertyOperations-test.js b/src/browser/ui/dom/__tests__/DOMPropertyOperations-test.js index b074449e1893..05955add2046 100644 --- a/src/browser/ui/dom/__tests__/DOMPropertyOperations-test.js +++ b/src/browser/ui/dom/__tests__/DOMPropertyOperations-test.js @@ -72,14 +72,14 @@ describe('DOMPropertyOperations', function() { expect(console.warn.argsForCall[0][0]).toContain('tabIndex'); }); - it('should warn about class', function() { + it('should warn about className', function() { spyOn(console, 'warn'); expect(DOMPropertyOperations.createMarkupForProperty( - 'class', + 'className', 'muffins' )).toBe(null); expect(console.warn.argsForCall.length).toBe(1); - expect(console.warn.argsForCall[0][0]).toContain('className'); + expect(console.warn.argsForCall[0][0]).toContain('you mean class?'); }); it('should create markup for boolean properties', function() { @@ -174,17 +174,17 @@ describe('DOMPropertyOperations', function() { expect(foobarSetter.mock.calls[0][1]).toBe('cows say moo'); }); - it('should set className to empty string instead of null', function() { + it('should set class to empty string instead of null', function() { DOMPropertyOperations.setValueForProperty( stubNode, - 'className', + 'class', 'selected' ); expect(stubNode.className).toBe('selected'); DOMPropertyOperations.setValueForProperty( stubNode, - 'className', + 'class', null ); // className should be '', not 'null' or null (which becomes 'null' in diff --git a/src/browser/ui/dom/__tests__/Danger-test.js b/src/browser/ui/dom/__tests__/Danger-test.js index 48e2e5478906..72749c9dcee6 100644 --- a/src/browser/ui/dom/__tests__/Danger-test.js +++ b/src/browser/ui/dom/__tests__/Danger-test.js @@ -44,7 +44,7 @@ describe('Danger', function() { }); it('should render markup with props', function() { - var markup = (
).mountComponent( + var markup = (
).mountComponent( '.rX', transaction, 0 diff --git a/src/core/ReactPropTransferer.js b/src/core/ReactPropTransferer.js index 8761f0ef4c61..662eaae78918 100644 --- a/src/core/ReactPropTransferer.js +++ b/src/core/ReactPropTransferer.js @@ -51,9 +51,9 @@ var TransferStrategies = { */ children: emptyFunction, /** - * Transfer the `className` prop by merging them. + * Transfer the `class` prop by merging them. */ - className: createTransferStrategy(joinClasses), + class: createTransferStrategy(joinClasses), /** * Never transfer the `key` prop. */ diff --git a/src/core/__tests__/ReactCompositeComponent-test.js b/src/core/__tests__/ReactCompositeComponent-test.js index d6141e9d487c..5efb1a3a0173 100644 --- a/src/core/__tests__/ReactCompositeComponent-test.js +++ b/src/core/__tests__/ReactCompositeComponent-test.js @@ -77,7 +77,7 @@ describe('ReactCompositeComponent', function() { render: function() { var className = cx({'anchorClass': this.props.anchorClassOn}); return this.props.renderAnchor ? - : + : ; } }); diff --git a/src/core/__tests__/ReactDOM-test.js b/src/core/__tests__/ReactDOM-test.js index da0fadb6e20e..2ac5dfb359b4 100644 --- a/src/core/__tests__/ReactDOM-test.js +++ b/src/core/__tests__/ReactDOM-test.js @@ -79,35 +79,35 @@ describe('ReactDOM', function() { it("should purge the DOM cache when removing nodes", function() { var myDiv = ReactTestUtils.renderIntoDocument(
{{ - theDog:
, - theBird:
+ theDog:
, + theBird:
}}
); // Warm the cache with theDog myDiv.setProps({ children: { - theDog:
, - theBird:
+ theDog:
, + theBird:
} }); // Remove theDog - this should purge the cache myDiv.setProps({ children: { - theBird:
+ theBird:
} }); // Now, put theDog back. It's now a different DOM node. myDiv.setProps({ children: { - theDog:
, - theBird:
+ theDog:
, + theBird:
} }); - // Change the className of theDog. It will use the same element + // Change the class of theDog. It will use the same element myDiv.setProps({ children: { - theDog:
, - theBird:
+ theDog:
, + theBird:
} }); var root = ReactMount.getNode(myDiv._rootNodeID); diff --git a/src/core/__tests__/ReactDOMComponent-test.js b/src/core/__tests__/ReactDOMComponent-test.js index de94aa62a83d..7cd82054990f 100644 --- a/src/core/__tests__/ReactDOMComponent-test.js +++ b/src/core/__tests__/ReactDOMComponent-test.js @@ -38,14 +38,14 @@ describe('ReactDOMComponent', function() { transaction = new ReactReconcileTransaction(); }); - it("should handle className", function() { + it("should handle class", function() { var stub = ReactTestUtils.renderIntoDocument(
); - stub.receiveComponent({props: { className: 'foo' }}, transaction); + stub.receiveComponent({props: { class: 'foo' }}, transaction); expect(stub.getDOMNode().className).toEqual('foo'); - stub.receiveComponent({props: { className: 'bar' }}, transaction); + stub.receiveComponent({props: { class: 'bar' }}, transaction); expect(stub.getDOMNode().className).toEqual('bar'); - stub.receiveComponent({props: { className: null }}, transaction); + stub.receiveComponent({props: { class: null }}, transaction); expect(stub.getDOMNode().className).toEqual(''); }); @@ -120,7 +120,7 @@ describe('ReactDOMComponent', function() { }); it("should remove properties", function() { - var stub = ReactTestUtils.renderIntoDocument(
); + var stub = ReactTestUtils.renderIntoDocument(
); expect(stub.getDOMNode().className).toEqual('monkey'); stub.receiveComponent({props: {}}, transaction); @@ -247,10 +247,10 @@ describe('ReactDOMComponent', function() { }); }); - it("should generate the correct markup with className", function() { - expect(genMarkup({ className: 'a' })).toHaveAttribute('class', 'a'); - expect(genMarkup({ className: 'a b' })).toHaveAttribute('class', 'a b'); - expect(genMarkup({ className: '' })).toHaveAttribute('class', ''); + it("should generate the correct markup with class", function() { + expect(genMarkup({ class: 'a' })).toHaveAttribute('class', 'a'); + expect(genMarkup({ class: 'a b' })).toHaveAttribute('class', 'a b'); + expect(genMarkup({ class: '' })).toHaveAttribute('class', ''); }); }); diff --git a/src/core/__tests__/ReactPropTransferer-test.js b/src/core/__tests__/ReactPropTransferer-test.js index b840b56352a8..3d0b2797353c 100644 --- a/src/core/__tests__/ReactPropTransferer-test.js +++ b/src/core/__tests__/ReactPropTransferer-test.js @@ -36,7 +36,7 @@ describe('ReactPropTransferer', function() { render: function() { return this.transferPropsTo( ; ReactTestUtils.renderIntoDocument(instance); @@ -83,7 +83,7 @@ describe('ReactPropTransferer', function() { .expectRenderedChild() .toBeComponentOfType(React.DOM.input) .scalarPropsEqual({ - className: 'textinput hidden_elem', + class: 'textinput hidden_elem', style: { display: 'block', width: '100%' diff --git a/src/core/__tests__/refs-test.js b/src/core/__tests__/refs-test.js index ab52347a9755..13092be2dac3 100644 --- a/src/core/__tests__/refs-test.js +++ b/src/core/__tests__/refs-test.js @@ -45,14 +45,14 @@ var ClickCounter = React.createClass({ for (i=0; i < this.state.count; i++) { children.push(
); } return ( - + {children} ); @@ -187,15 +187,15 @@ describe('ref swapping', function() { return (
diff --git a/src/test/ReactTestUtils.js b/src/test/ReactTestUtils.js index 8d34272703b1..d3482910ee9b 100644 --- a/src/test/ReactTestUtils.js +++ b/src/test/ReactTestUtils.js @@ -120,12 +120,12 @@ var ReactTestUtils = { /** * Finds all instance of components in the rendered tree that are DOM - * components with the class name matching `className`. + * components with the class name matching `class`. * @return an array of all the matches. */ scryRenderedDOMComponentsWithClass: function(root, className) { return ReactTestUtils.findAllInRenderedTree(root, function(inst) { - var instClassName = inst.props.className; + var instClassName = inst.props.class; return ReactTestUtils.isDOMComponent(inst) && ( instClassName && (' ' + instClassName + ' ').indexOf(' ' + className + ' ') !== -1 diff --git a/src/utils/__tests__/cloneWithProps-test.js b/src/utils/__tests__/cloneWithProps-test.js index a68ed4e4968c..93d72ad864db 100644 --- a/src/utils/__tests__/cloneWithProps-test.js +++ b/src/utils/__tests__/cloneWithProps-test.js @@ -45,14 +45,14 @@ describe('cloneWithProps', function() { it('should clone a DOM component with new props', function() { var Grandparent = React.createClass({ render: function() { - return
; + return
; } }); var Parent = React.createClass({ render: function() { return ( -
- {cloneWithProps(onlyChild(this.props.children), {className: 'xyz'})} +
+ {cloneWithProps(onlyChild(this.props.children), {class: 'xyz'})}
); } @@ -66,20 +66,20 @@ describe('cloneWithProps', function() { var Child = React.createClass({ render: function() { - return
; + return
; } }); var Grandparent = React.createClass({ render: function() { - return ; + return ; } }); var Parent = React.createClass({ render: function() { return ( -
- {cloneWithProps(onlyChild(this.props.children), {className: 'xyz'})} +
+ {cloneWithProps(onlyChild(this.props.children), {class: 'xyz'})}
); } @@ -99,7 +99,7 @@ describe('cloneWithProps', function() { render: function() { return (
- {cloneWithProps(onlyChild(this.props.children), {className: 'xyz'})} + {cloneWithProps(onlyChild(this.props.children), {class: 'xyz'})}
); }