ToggleControl allows setting custom classes (#13804)

* ToggleControl allows setting custom classes

Related Issue: #11349 
This pull request fixes the "ToggleControl does not allow setting custom classes" problem. This lets the user to add a custom classname on the element, just like in TextControl.

* Update README of toggle-control

Add property className and its description

* Update packages/components/src/toggle-control/README.md

Formatted style of README

Co-Authored-By: AmartyaU <44530193+AmartyaU@users.noreply.github.com>

packages/components/src/toggle-control/README.md

@@ -55,3 +55,10 @@ A function that receives the checked state (boolean) as input.
 - Type: `function`
 - Required: Yes
 
+### className
+
+The class that will be added with `components-base-control` and `components-toggle-control` to the classes of the wrapper div. If no className is passed only `components-base-control` and `components-toggle-control` are used.
+
+Type: String
+Required: No
+

packages/components/src/toggle-control/index.js

@@ -2,6 +2,7 @@
  * External dependencies
  */
 import { isFunction } from 'lodash';
+import classnames from 'classnames';
 
 /**
  * WordPress dependencies
@@ -29,7 +30,7 @@ class ToggleControl extends Component {
 	}
 
 	render() {
-		const { label, checked, help, instanceId } = this.props;
+		const { label, checked, help, instanceId, className } = this.props;
 		const id = `inspector-toggle-control-${ instanceId }`;
 
 		let describedBy, helpLabel;
@@ -42,7 +43,7 @@ class ToggleControl extends Component {
 			<BaseControl
 				id={ id }
 				help={ helpLabel }
-				className="components-toggle-control"
+				className={ classnames( 'components-toggle-control', className ) }
 			>
 				<FormToggle
 					id={ id }