Framework: Upgrade to React 15.1.0

client/components/accordion/docs/example.jsx

@@ -41,7 +41,7 @@ module.exports = React.createClass( {
 							checked={ this.state.showSubtitles }
 							onChange={ this._toggleShowSubtitles }
 						/>
-						Show subtitles
+						<span>Show subtitles</span>
 					</label>
 				</div>
 

client/components/bulk-select/docs/example.jsx

@@ -44,7 +44,7 @@ module.exports = React.createClass( {
 			return (
 				<label key={ index }>
 					<input type="checkbox" onClick={ onClick } checked={ element.selected } readOnly />
-					{ element.title }
+					<span>{ element.title }</span>
 				</label>
 			);
 		} );

client/components/forms/multi-checkbox/README.md

@@ -20,8 +20,8 @@ This code snippet will generate the following output:
 
 ```html
 <div>
-	<label><input type="checkbox" name="favorite_numbers[]" value="1" checked="checked"> One</label>
-	<label><input type="checkbox" name="favorite_numbers[]" value="2"> Two</label>
+	<label><input type="checkbox" name="favorite_numbers[]" value="1" checked="checked"><span>One</span></label>
+	<label><input type="checkbox" name="favorite_numbers[]" value="2"><span>Two</span></label>
 </div>
 ```
 

client/components/forms/multi-checkbox/index.jsx

@@ -54,7 +54,7 @@ var MultiCheckbox = module.exports = React.createClass({
 			return (
 				<label key={ option.value }>
 					<input name={ this.props.name + '[]' } type="checkbox" value={ option.value } checked={ isChecked } onChange={ this.handleChange } disabled={ this.props.disabled } />
-					{ option.label }
+					<span>{ option.label }</span>
 				</label>
 			);
 		}, this );
@@ -63,4 +63,4 @@ var MultiCheckbox = module.exports = React.createClass({
 	render: function() {
 		return <div className="form-checkbox-group" { ...omit( this.props, Object.keys( MultiCheckbox.propTypes ) ) }>{ this.getCheckboxElements() }</div>;
 	}
-});
+} );

client/components/global-notices/docs/example.jsx

@@ -50,7 +50,7 @@ class GlobalNotices extends Component {
 					<FormCheckbox
 						onChange={ this.toggleUseState }
 						checked={ this.state.useState } />
-					Use global application state
+					<span>Use global application state</span>
 				</label>
 				<ButtonGroup>
 					<Button onClick={ this.showSuccessNotice }>Show success notice</Button>

client/components/notice/index.jsx

@@ -51,15 +51,21 @@ export default React.createClass( {
 	},
 
 	renderChildren() {
-		let content;
+		let content, text;
 
 		if ( typeof this.props.children === 'string' ) {
-			return <span className="notice__text">{ this.props.children }</span>;
+			return <span className="notice__text"><span>{ this.props.children }</span></span>;
 		}
 
 		if ( this.props.text ) {
+			if ( typeof this.props.text === 'string' ) {
+				text = <span>{ this.props.text }</span>;
+			} else {
+				text = this.props.text;
+			}
+
 			content = [ this.props.children ];
-			content.unshift( <span key="notice_text" className="notice__text">{ this.props.text }</span> );
+			content.unshift( <span key="notice_text" className="notice__text">{ text }</span> );
 		} else {
 			content = <span key="notice_text" className="notice__text">{ this.props.children }</span>;
 		}

client/components/section-header/index.jsx

@@ -29,7 +29,7 @@ export default React.createClass( {
 		return (
 			<CompactCard className={ classes } href={ this.props.href }>
 				<div className="section-header__label">
-					{ this.props.label }
+					<span>{ this.props.label }</span>
 					{
 						'number' === typeof this.props.count &&
 						<Count count={ this.props.count } />

client/components/tinymce/plugins/contact-form/dialog/field.jsx

@@ -106,7 +106,7 @@ export default React.createClass( {
 						<FormCheckbox
 							checked={ this.props.required }
 							onChange={ () => this.props.onUpdate( { required: ! this.props.required } ) } />
-						{ this.translate( 'Required' ) }
+						<span>{ this.translate( 'Required' ) }</span>
 					</FormLabel>
 				</FormFieldset>
 

client/components/token-field/test/index.jsx

@@ -2,6 +2,7 @@
  * External dependencies
  */
 import map from 'lodash/map';
+import filter from 'lodash/filter';
 import { expect } from 'chai';
 import React from 'react';
 import { test } from 'sinon';
@@ -65,28 +66,34 @@ describe( 'TokenField', function() {
 		return textNodes.map( getNodeInnerHtml );
 	}
 
-	function getSuggestionsHTML( selector ) {
+	function getSuggestionsText( selector ) {
 		const suggestionNodes = tokenFieldNode.find( selector || '.token-field__suggestion' );
 
-		return suggestionNodes.map( getSuggestionNodeHTML );
+		return suggestionNodes.map( getSuggestionNodeText );
 	}
 
-	function getSuggestionNodeHTML( node ) {
+	function getSuggestionNodeText( node ) {
 		if ( ! node.find( 'span' ).length ) {
 			return getNodeInnerHtml( node );
 		}
 
-		// This suggestion is part of a partial match; return the three
+		// This suggestion is part of a partial match; return up to three
 		// sections of the suggestion (before match, match, and after
 		// match)
 		const div = document.createElement( 'div' );
 		div.innerHTML = node.find( 'span' ).html();
 
-		return map( div.firstChild.childNodes, childNode => childNode.innerHTML );
+		return map(
+			filter(
+				div.firstChild.childNodes,
+				childNode => childNode.nodeType !== window.Node.COMMENT_NODE
+			),
+			childNode => childNode.textContent
+		);
 	}
 
 	function getSelectedSuggestion() {
-		var selectedSuggestions = getSuggestionsHTML( '.token-field__suggestion.is-selected' );
+		var selectedSuggestions = getSuggestionsText( '.token-field__suggestion.is-selected' );
 
 		return selectedSuggestions[ 0 ] || null;
 	}
@@ -135,91 +142,91 @@ describe( 'TokenField', function() {
 	describe( 'suggestions', function() {
 		it( 'should render default suggestions', function() {
 			// limited by maxSuggestions (default 100 so doesn't matter here)
-			expect( getSuggestionsHTML() ).to.deep.equal( wrapper.state( 'tokenSuggestions' ) );
+			expect( getSuggestionsText() ).to.deep.equal( wrapper.state( 'tokenSuggestions' ) );
 		} );
 
 		it( 'should remove already added tags from suggestions', function() {
 			wrapper.setState( {
 				tokens: Object.freeze( [ 'of', 'and' ] )
 			} );
-			expect( getSuggestionsHTML() ).to.not.include.members( getTokensHTML() );
+			expect( getSuggestionsText() ).to.not.include.members( getTokensHTML() );
 		} );
 
 		it( 'should suggest partial matches', function() {
 			setText( 't' );
-			expect( getSuggestionsHTML() ).to.deep.equal( fixtures.matchingSuggestions.t );
+			expect( getSuggestionsText() ).to.deep.equal( fixtures.matchingSuggestions.t );
 		} );
 
 		it( 'suggestions that begin with match are boosted', function() {
 			setText( 's' );
-			expect( getSuggestionsHTML() ).to.deep.equal( fixtures.matchingSuggestions.s );
+			expect( getSuggestionsText() ).to.deep.equal( fixtures.matchingSuggestions.s );
 		} );
 
 		it( 'should display suggestions with escaped special characters properly', function() {
 			wrapper.setState( {
 				tokenSuggestions: fixtures.specialSuggestions.textEscaped
 			} );
-			expect( getSuggestionsHTML() ).to.deep.equal( fixtures.specialSuggestions.htmlEscaped );
+			expect( getSuggestionsText() ).to.deep.equal( fixtures.specialSuggestions.htmlEscaped );
 		} );
 
 		it( 'should display suggestions with special characters properly', function() {
 			wrapper.setState( {
 				tokenSuggestions: fixtures.specialSuggestions.textUnescaped
 			} );
-			expect( getSuggestionsHTML() ).to.deep.equal( fixtures.specialSuggestions.htmlUnescaped );
+			expect( getSuggestionsText() ).to.deep.equal( fixtures.specialSuggestions.htmlUnescaped );
 		} );
 
 		it( 'should match against the unescaped values of suggestions with special characters', function() {
 			setText( '&' );
 			wrapper.setState( {
 				tokenSuggestions: fixtures.specialSuggestions.textUnescaped
 			} );
-			expect( getSuggestionsHTML() ).to.deep.equal( fixtures.specialSuggestions.matchAmpersandUnescaped );
+			expect( getSuggestionsText() ).to.deep.equal( fixtures.specialSuggestions.matchAmpersandUnescaped );
 		} );
 
 		it( 'should match against the unescaped values of suggestions with special characters (including spaces)', function() {
 			setText( 's &' );
 			wrapper.setState( {
 				tokenSuggestions: fixtures.specialSuggestions.textUnescaped
 			} );
-			expect( getSuggestionsHTML() ).to.deep.equal( fixtures.specialSuggestions.matchAmpersandSequence );
+			expect( getSuggestionsText() ).to.deep.equal( fixtures.specialSuggestions.matchAmpersandSequence );
 		} );
 
 		it( 'should not match against the escaped values of suggestions with special characters', function() {
 			setText( 'amp' );
 			wrapper.setState( {
 				tokenSuggestions: fixtures.specialSuggestions.textUnescaped
 			} );
-			expect( getSuggestionsHTML() ).to.deep.equal( fixtures.specialSuggestions.matchAmpersandEscaped );
+			expect( getSuggestionsText() ).to.deep.equal( fixtures.specialSuggestions.matchAmpersandEscaped );
 		} );
 
 		it( 'should match suggestions even with trailing spaces', function() {
 			setText( '  at  ' );
-			expect( getSuggestionsHTML() ).to.deep.equal( fixtures.matchingSuggestions.at );
+			expect( getSuggestionsText() ).to.deep.equal( fixtures.matchingSuggestions.at );
 		} );
 
 		it( 'should manage the selected suggestion based on both keyboard and mouse events', test( function() {
 			setText( 't' );
-			expect( getSuggestionsHTML() ).to.deep.equal( fixtures.matchingSuggestions.t );
+			expect( getSuggestionsText() ).to.deep.equal( fixtures.matchingSuggestions.t );
 			expect( getSelectedSuggestion() ).to.equal( null );
 			sendKeyDown( keyCodes.downArrow ); // 'the'
-			expect( getSelectedSuggestion() ).to.deep.equal( [ '', 't', 'he' ] );
+			expect( getSelectedSuggestion() ).to.deep.equal( [ 't', 'he' ] );
 			sendKeyDown( keyCodes.downArrow ); // 'to'
-			expect( getSelectedSuggestion() ).to.deep.equal( [ '', 't', 'o' ] );
+			expect( getSelectedSuggestion() ).to.deep.equal( [ 't', 'o' ] );
 
 			const hoverSuggestion = tokenFieldNode.find( '.token-field__suggestion' ).at( 5 ); // 'it'
-			expect( getSuggestionNodeHTML( hoverSuggestion ) ).to.deep.equal( [ 'i', 't', '' ] );
+			expect( getSuggestionNodeText( hoverSuggestion ) ).to.deep.equal( [ 'i', 't' ] );
 
 			// before sending a hover event, we need to wait for
 			// SuggestionList#_scrollingIntoView to become false
 			this.clock.tick( 100 );
 
 			hoverSuggestion.simulate( 'mouseEnter' );
-			expect( getSelectedSuggestion() ).to.deep.equal( [ 'i', 't', '' ] );
+			expect( getSelectedSuggestion() ).to.deep.equal( [ 'i', 't' ] );
 			sendKeyDown( keyCodes.upArrow );
 			expect( getSelectedSuggestion() ).to.deep.equal( [ 'wi', 't', 'h' ] );
 			sendKeyDown( keyCodes.upArrow );
-			expect( getSelectedSuggestion() ).to.deep.equal( [ '', 't', 'his' ] );
+			expect( getSelectedSuggestion() ).to.deep.equal( [ 't', 'his' ] );
 			hoverSuggestion.simulate( 'click' );
 			expect( getSelectedSuggestion() ).to.equal( null );
 			expect( getTokensHTML() ).to.deep.equal( [ 'foo', 'bar', 'it' ] );
@@ -329,7 +336,7 @@ describe( 'TokenField', function() {
 			testOnBlur(
 				't',                    // initialText
 				true,                   // selectSuggestion
-				[ '', 't', 'o' ],       // expectedSuggestion
+				[ 't', 'o' ],       // expectedSuggestion
 				[ 'foo', 'bar', 'to' ], // expectedTokens
 				this.clock
 			);
@@ -396,9 +403,9 @@ describe( 'TokenField', function() {
 			setText( 't' );
 			expect( getSelectedSuggestion() ).to.equal( null );
 			sendKeyDown( keyCodes.downArrow ); // 'the'
-			expect( getSelectedSuggestion() ).to.deep.equal( [ '', 't', 'he' ] );
+			expect( getSelectedSuggestion() ).to.deep.equal( [ 't', 'he' ] );
 			sendKeyDown( keyCodes.downArrow ); // 'to'
-			expect( getSelectedSuggestion() ).to.deep.equal( [ '', 't', 'o' ] );
+			expect( getSelectedSuggestion() ).to.deep.equal( [ 't', 'o' ] );
 			sendKeyDown( keyCodes.tab );
 			expect( wrapper.state( 'tokens' ) ).to.deep.equal( [ 'foo', 'bar', 'to' ] );
 			expect( getSelectedSuggestion() ).to.equal( null );
@@ -408,9 +415,9 @@ describe( 'TokenField', function() {
 			setText( 't' );
 			expect( getSelectedSuggestion() ).to.equal( null );
 			sendKeyDown( keyCodes.downArrow ); // 'the'
-			expect( getSelectedSuggestion() ).to.deep.equal( [ '', 't', 'he' ] );
+			expect( getSelectedSuggestion() ).to.deep.equal( [ 't', 'he' ] );
 			sendKeyDown( keyCodes.downArrow ); // 'to'
-			expect( getSelectedSuggestion() ).to.deep.equal( [ '', 't', 'o' ] );
+			expect( getSelectedSuggestion() ).to.deep.equal( [ 't', 'o' ] );
 			sendKeyDown( keyCodes.enter );
 			expect( wrapper.state( 'tokens' ) ).to.deep.equal( [ 'foo', 'bar', 'to' ] );
 			expect( getSelectedSuggestion() ).to.equal( null );

client/components/token-field/test/lib/fixtures.js

@@ -11,39 +11,39 @@ module.exports = {
 		textUnescaped: [ '<3', 'Stuff & Things', 'Tags & Stuff', 'Tags & Stuff 2' ],
 		htmlUnescaped: [ '&lt;3', 'Stuff&nbsp;&amp;&nbsp;Things', 'Tags&nbsp;&amp;&nbsp;Stuff', 'Tags&nbsp;&amp;&nbsp;Stuff&nbsp;2' ],
 		matchAmpersandUnescaped: [
-			[ 'Stuff&nbsp;', '&amp;', '&nbsp;Things' ],
-			[ 'Tags&nbsp;', '&amp;', '&nbsp;Stuff' ],
-			[ 'Tags&nbsp;', '&amp;', '&nbsp;Stuff&nbsp;2' ]
+			[ 'Stuff ', '&', ' Things' ],
+			[ 'Tags ', '&', ' Stuff' ],
+			[ 'Tags ', '&', ' Stuff 2' ]
 		],
 		matchAmpersandSequence: [
-			[ 'Tag', 's&nbsp;&amp;', '&nbsp;Stuff' ],
-			[ 'Tag', 's&nbsp;&amp;', '&nbsp;Stuff&nbsp;2' ]
+			[ 'Tag', 's &', ' Stuff' ],
+			[ 'Tag', 's &', ' Stuff 2' ]
 		],
 		matchAmpersandEscaped: []
 	},
 	matchingSuggestions: {
-		't': [
-			[ '', 't', 'he' ],
-			[ '', 't', 'o' ],
-			[ '', 't', 'hat' ],
-			[ '', 't', 'his' ],
+		t: [
+			[ 't', 'he' ],
+			[ 't', 'o' ],
+			[ 't', 'hat' ],
+			[ 't', 'his' ],
 			[ 'wi', 't', 'h' ],
-			[ 'i', 't', '' ],
-			[ 'no', 't', '' ],
-			[ 'a', 't', '' ]
+			[ 'i', 't' ],
+			[ 'no', 't' ],
+			[ 'a', 't' ]
 		],
-		's': [
-			[ '', 's', 'nake' ],
-			[ '', 's', 'ound' ],
-			[ 'i', 's', '' ],
-			[ 'thi', 's', '' ],
-			[ 'a', 's', '' ],
-			[ 'wa', 's', '' ],
-			[ 'pipe', 's', '']
+		s: [
+			[ 's', 'nake' ],
+			[ 's', 'ound' ],
+			[ 'i', 's' ],
+			[ 'thi', 's' ],
+			[ 'a', 's' ],
+			[ 'wa', 's' ],
+			[ 'pipe', 's']
 		],
-		'at': [
-			[ '', 'at', '' ],
-			[ 'th', 'at', '' ]
+		at: [
+			[ 'at' ],
+			[ 'th', 'at' ]
 		]
 	}
 };

client/components/track-input-changes/test/index.jsx

@@ -3,7 +3,7 @@
  */
 import ReactDom from 'react-dom';
 import React from 'react';
-import TestUtils from 'react-addons-test-utils'
+import TestUtils from 'react-addons-test-utils';
 import { expect } from 'chai';
 import sinon from 'sinon';
 import useFakeDom from 'test/helpers/use-fake-dom';
@@ -120,6 +120,6 @@ describe( 'TrackInputChanges#onNewValue', function() {
 				/>
 			</TrackInputChanges>,
 			container
-		) ).to.throw( 'Invariant Violation' );
+		) ).to.throw( 'onlyChild must be passed a children with exactly one child.' );
 	} );
 } );