Fix/prevent classname override (#6764)

* Add translators note * Prevent class override & add classname to BaseControl * Components: Remove obsolete spaces in parenthesis
WordPress · May 16, 2018 · cea4ee9 · cea4ee9
1 parent 51fd914
commit cea4ee9
Show file tree

Hide file tree

Showing 6 changed files with 12 additions and 9 deletions.
diff --git a/components/checkbox-control/index.js b/components/checkbox-control/index.js
@@ -5,12 +5,12 @@ import BaseControl from '../base-control';
 import withInstanceId from '../higher-order/with-instance-id';
 import './style.scss';
 
-function CheckboxControl( { label, heading, checked, help, instanceId, onChange, ...props } ) {
+function CheckboxControl( { label, className, heading, checked, help, instanceId, onChange, ...props } ) {
 	const id = `inspector-checkbox-control-${ instanceId }`;
 	const onChangeValue = ( event ) => onChange( event.target.checked );
 
 	return (
-		<BaseControl label={ heading } id={ id } help={ help }>
+		<BaseControl label={ heading } id={ id } help={ help } className={ className }>
 			<input
 				id={ id }
 				className="components-checkbox-control__input"

diff --git a/components/form-token-field/index.js b/components/form-token-field/index.js
@@ -507,8 +507,9 @@ class FormTokenField extends Component {
 			disabled,
 			placeholder = __( 'Add item.' ),
 			instanceId,
+			className,
 		} = this.props;
-		const classes = classnames( 'components-form-token-field', {
+		const classes = classnames( className, 'components-form-token-field', {
 			'is-active': this.state.isActive,
 			'is-disabled': disabled,
 		} );

diff --git a/components/radio-control/index.js b/components/radio-control/index.js
@@ -2,6 +2,7 @@
  * External dependencies
  */
 import { isEmpty } from 'lodash';
+import classnames from 'classnames';
 
 /**
  * Internal dependencies
@@ -10,12 +11,12 @@ import BaseControl from '../base-control';
 import withInstanceId from '../higher-order/with-instance-id';
 import './style.scss';
 
-function RadioControl( { label, selected, help, instanceId, onChange, options = [] } ) {
+function RadioControl( { label, className, selected, help, instanceId, onChange, options = [] } ) {
 	const id = `inspector-radio-control-${ instanceId }`;
 	const onChangeValue = ( event ) => onChange( event.target.value );
 
 	return ! isEmpty( options ) && (
-		<BaseControl label={ label } id={ id } help={ help } className="components-radio-control">
+		<BaseControl label={ label } id={ id } help={ help } className={ classnames( className, 'components-radio-control' ) }>
 			{ options.map( ( option, index ) =>
 				<div
 					key={ `${ id }-${ index }` }

diff --git a/components/range-control/index.js b/components/range-control/index.js
@@ -2,11 +2,11 @@
  * External dependencies
  */
 import { isFinite } from 'lodash';
+import classnames from 'classnames';
 
 /**
  * WordPress dependencies
  */
-import classnames from 'classnames';
 import { __ } from '@wordpress/i18n';
 
 /**

diff --git a/components/select-control/index.js b/components/select-control/index.js
@@ -17,6 +17,7 @@ function SelectControl( {
 	multiple = false,
 	onChange,
 	options = [],
+	className,
 	...props
 } ) {
 	const id = `inspector-select-control-${ instanceId }`;
@@ -34,7 +35,7 @@ function SelectControl( {
 
 	/* eslint-disable jsx-a11y/no-onchange */
 	return ! isEmpty( options ) && (
-		<BaseControl label={ label } id={ id } help={ help }>
+		<BaseControl label={ label } id={ id } help={ help } className={ className }>
 			<select
 				id={ id }
 				className="components-select-control__input"

diff --git a/components/textarea-control/index.js b/components/textarea-control/index.js
@@ -5,12 +5,12 @@ import BaseControl from '../base-control';
 import withInstanceId from '../higher-order/with-instance-id';
 import './style.scss';
 
-function TextareaControl( { label, value, help, instanceId, onChange, rows = 4, ...props } ) {
+function TextareaControl( { label, value, help, instanceId, onChange, rows = 4, className, ...props } ) {
 	const id = `inspector-textarea-control-${ instanceId }`;
 	const onChangeValue = ( event ) => onChange( event.target.value );
 
 	return (
-		<BaseControl label={ label } id={ id } help={ help }>
+		<BaseControl label={ label } id={ id } help={ help } className={ className }>
 			<textarea
 				className="components-textarea-control__input"
 				id={ id }