From cea4ee938a12079d2bf3e1a35facc36bc58d3264 Mon Sep 17 00:00:00 2001
From: Ajit Bohra <ajit@lubus.in>
Date: Wed, 16 May 2018 12:36:49 +0530
Subject: [PATCH] Fix/prevent classname override (#6764)

* Add translators note

* Prevent class override & add classname to BaseControl

* Components: Remove obsolete spaces in parenthesis
---
 components/checkbox-control/index.js | 4 ++--
 components/form-token-field/index.js | 3 ++-
 components/radio-control/index.js    | 5 +++--
 components/range-control/index.js    | 2 +-
 components/select-control/index.js   | 3 ++-
 components/textarea-control/index.js | 4 ++--
 6 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/components/checkbox-control/index.js b/components/checkbox-control/index.js
index c231143f4f88cf..4344db2cacf84f 100644
--- 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
index a81b4bb632a7cf..8bd9ff26eb966e 100644
--- 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
index b665c32122b21b..9a474c4e4d0f73 100644
--- 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
index 52d9309fe77e48..7df0752c633587 100644
--- 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
index 391069a68fe835..ecacc637e6b9fb 100644
--- 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
index bff8d0346ca47b..9de4675e7cdd26 100644
--- 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 }