From 2a41cca527fab99444be950161d2c82c52e40a25 Mon Sep 17 00:00:00 2001 From: dereksmart Date: Mon, 11 Jul 2016 13:51:43 -0400 Subject: [PATCH 1/4] Fix scss @extend errors on compile @extend cannot be used within a media breakpoint without causing errors. --- client/components/notice/style.scss | 2 +- client/scss/calypso-form.scss | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/client/components/notice/style.scss b/client/components/notice/style.scss index aa0af6e..2424ead 100644 --- a/client/components/notice/style.scss +++ b/client/components/notice/style.scss @@ -14,6 +14,7 @@ font-size: 14px; line-height: 1.4285; animation: appear .3s ease-in-out; + @extend %dashicon; .dops-notice__text { flex-grow: 1; @@ -31,7 +32,6 @@ font-size: inherit; &::before { - @extend %dashicon; content: '\f534'; position: absolute; top: 23px; diff --git a/client/scss/calypso-form.scss b/client/scss/calypso-form.scss index 2454e96..1a79d8c 100644 --- a/client/scss/calypso-form.scss +++ b/client/scss/calypso-form.scss @@ -1,5 +1,6 @@ // Below, you can choose from either using global form styles or class-driven // form styles. By default, the global styles are on. +@import 'extends'; %form { ul { From 40d2cf93a49c8a80a68ae9ae829108b1f09f2c44 Mon Sep 17 00:00:00 2001 From: dereksmart Date: Mon, 11 Jul 2016 14:11:49 -0400 Subject: [PATCH 2/4] Notices: Make sure to not override the actual text font --- client/components/notice/style.scss | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/client/components/notice/style.scss b/client/components/notice/style.scss index 2424ead..aaf091e 100644 --- a/client/components/notice/style.scss +++ b/client/components/notice/style.scss @@ -14,7 +14,10 @@ font-size: 14px; line-height: 1.4285; animation: appear .3s ease-in-out; - @extend %dashicon; + + &::before{ + @extend %dashicon; + } .dops-notice__text { flex-grow: 1; From 5a0c283a715c4349e51692fc35f328d1ed513cbc Mon Sep 17 00:00:00 2001 From: Eoin Gallagher Date: Tue, 12 Jul 2016 11:35:01 +0100 Subject: [PATCH 3/4] Fix lodash refs --- client/lib/credit-card-details/validation.js | 2 +- client/lib/wpcom-undocumented/lib/undocumented.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/client/lib/credit-card-details/validation.js b/client/lib/credit-card-details/validation.js index 653e5b2..09e666b 100644 --- a/client/lib/credit-card-details/validation.js +++ b/client/lib/credit-card-details/validation.js @@ -6,7 +6,7 @@ var creditcards = require( 'creditcards' ), isArray = require( 'lodash/isArray' ), isEmpty = require( 'lodash/isEmpty' ), toArray = require( 'lodash/toArray' ), - inRange = require( 'lodash/number/inRange' ), + inRange = require( 'lodash/inRange' ), capitalize = require( 'lodash/capitalize' ); /** diff --git a/client/lib/wpcom-undocumented/lib/undocumented.js b/client/lib/wpcom-undocumented/lib/undocumented.js index ca017a9..69c811f 100644 --- a/client/lib/wpcom-undocumented/lib/undocumented.js +++ b/client/lib/wpcom-undocumented/lib/undocumented.js @@ -4,7 +4,7 @@ var debug = require( 'debug' )( 'calypso:wpcom-undocumented:undocumented' ), isPlainObject = require( 'lodash/isPlainObject' ), clone = require( 'lodash/clone' ), - omit = require( 'lodash/object/omit' ), + omit = require( 'lodash/omit' ), camelCase = require( 'lodash/camelCase' ), snakeCase = require( 'lodash/snakeCase' ); From 6840033695502096b5ad8a923a7267eb3ea05ea8 Mon Sep 17 00:00:00 2001 From: Eoin Gallagher Date: Tue, 12 Jul 2016 11:35:50 +0100 Subject: [PATCH 4/4] React 14 requires use of react-dom to findDOMNode --- client/components/form/input-checkbox-multiple.jsx | 5 +++-- client/components/form/input-text.js | 4 +++- client/components/modal/index.jsx | 3 ++- client/components/my-sites-navigation/picker/index.jsx | 3 ++- .../components/my-sites-navigation/site-selector/index.jsx | 3 ++- 5 files changed, 12 insertions(+), 6 deletions(-) diff --git a/client/components/form/input-checkbox-multiple.jsx b/client/components/form/input-checkbox-multiple.jsx index 4d624ee..a48157a 100644 --- a/client/components/form/input-checkbox-multiple.jsx +++ b/client/components/form/input-checkbox-multiple.jsx @@ -1,5 +1,6 @@ /** External Dependencies **/ var React = require( 'react' ), + ReactDom = require( 'react-dom' ), classNames = require( 'classnames' ), forEach = require( 'lodash/forEach' ), isArray = require( 'lodash/isArray' ), @@ -70,9 +71,9 @@ module.exports = React.createClass( { }, unHighlightAllSites: function( event ) { - var checked = $( React.findDOMNode( this.refs.allItems ) ).prop( 'checked' ); + var checked = $( ReactDom.findDOMNode( this.refs.allItems ) ).prop( 'checked' ); if ( checked && ! event.target.checked ) { - $( React.findDOMNode( this.refs.allItems ) ).prop( 'checked', false ); + $( ReactDom.findDOMNode( this.refs.allItems ) ).prop( 'checked', false ); } }, diff --git a/client/components/form/input-text.js b/client/components/form/input-text.js index f0c5ebb..c3f483a 100644 --- a/client/components/form/input-text.js +++ b/client/components/form/input-text.js @@ -1,5 +1,6 @@ /** External Dependencies **/ var React = require( 'react' ), + ReactDom = require( 'react-dom' ), Formsy = require( 'formsy-react' ), classNames = require( 'classnames' ), Payment = require( 'payment' ); @@ -20,6 +21,7 @@ module.exports = React.createClass( { description: React.PropTypes.string, className: React.PropTypes.any, style: React.PropTypes.any, + style: React.PropTypes.any, floatingLabel: React.PropTypes.any, label: React.PropTypes.any, type: React.PropTypes.string, @@ -60,7 +62,7 @@ module.exports = React.createClass( { }, focus: function() { - React.findDOMNode( this.refs.input ).focus(); + ReactDom.findDOMNode( this.refs.input ).focus(); }, getDefaultProps: function() { diff --git a/client/components/modal/index.jsx b/client/components/modal/index.jsx index 6fe3d63..85bd4a6 100644 --- a/client/components/modal/index.jsx +++ b/client/components/modal/index.jsx @@ -1,4 +1,5 @@ var React = require( 'react' ), + ReactDom = require( 'react-dom' ), Icon = require( '../icon' ), classNames = require( 'classnames' ), assign = require( 'lodash/assign' ); @@ -49,7 +50,7 @@ let Modal = React.createClass( { jQuery( 'body' ).addClass( 'dops-modal-showing' ); jQuery( document ).keyup( this.handleEscapeKey ); try { - focusTrap.activate(this.getDOMNode(), { + focusTrap.activate( ReactDom.findDOMNode( this ), { // onDeactivate: this.maybeClose, initialFocus: this.props.initialFocus, }); diff --git a/client/components/my-sites-navigation/picker/index.jsx b/client/components/my-sites-navigation/picker/index.jsx index 046bbf4..ef5049b 100644 --- a/client/components/my-sites-navigation/picker/index.jsx +++ b/client/components/my-sites-navigation/picker/index.jsx @@ -2,6 +2,7 @@ * External dependencies */ var React = require( 'react' ), + ReactDom = require( 'react-dom' ), noop = require( 'lodash/noop' ); /** @@ -36,7 +37,7 @@ module.exports = React.createClass( { }, closePickerOnOutsideClick: function( event ) { - var pickerNode = React.findDOMNode( this.refs.siteSelector ); + var pickerNode = ReactDom.findDOMNode( this.refs.siteSelector ); // If the picker is open & the user clicks outside of it, let's close it if ( this.props.showingSites && diff --git a/client/components/my-sites-navigation/site-selector/index.jsx b/client/components/my-sites-navigation/site-selector/index.jsx index 1e46984..1e36d53 100644 --- a/client/components/my-sites-navigation/site-selector/index.jsx +++ b/client/components/my-sites-navigation/site-selector/index.jsx @@ -2,6 +2,7 @@ * External dependencies */ var React = require( 'react' ), + ReactDom = require( 'react-dom' ), page = require( 'page' ), noop = require( 'lodash/noop' ), classNames = require( 'classnames' ); @@ -48,7 +49,7 @@ module.exports = React.createClass( { }, doSearch: function() { - this.setState( { search: React.findDOMNode( this.refs.searchInput ).value } ); + this.setState( { search: ReactDom.findDOMNode( this.refs.searchInput ).value } ); }, onSiteSelect: function( event ) {