From b2746729122a5aae2a72c36a4f4c13eb4a81543d Mon Sep 17 00:00:00 2001
From: AmartyaU <44530193+AmartyaU@users.noreply.github.com>
Date: Mon, 11 Mar 2019 04:59:06 -0400
Subject: [PATCH] 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 | 7 +++++++
 packages/components/src/toggle-control/index.js  | 5 +++--
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/packages/components/src/toggle-control/README.md b/packages/components/src/toggle-control/README.md
index c41bb464a44f3c..a55c0f30df8bbd 100644
--- a/packages/components/src/toggle-control/README.md
+++ b/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
+
diff --git a/packages/components/src/toggle-control/index.js b/packages/components/src/toggle-control/index.js
index 29d558d6b80c69..39f4a7f372715b 100644
--- a/packages/components/src/toggle-control/index.js
+++ b/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 }