From 7c33661f611ac87b52238e537868d75eaed9e67e Mon Sep 17 00:00:00 2001
From: JR Tashjian <jrtashjian@gmail.com>
Date: Wed, 6 Feb 2019 04:17:49 -0500
Subject: [PATCH] FormToggle: component styles for external use (#12385)

* FormToggle wrapper class needs inline-block styling.

Necessary for proper positioning of elements within .components-form-toggle.

* Elements within FormToggle component need to have border-box box-sizing.

This styling occurs within the block-editor on the post edit screen but does not exist outside of it. Moving this box-sizing value to the component resolves #8871.
---
 packages/components/src/form-toggle/style.scss | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/components/src/form-toggle/style.scss b/packages/components/src/form-toggle/style.scss
index 0def01e03beaa6..51280da0ac8da9 100644
--- a/packages/components/src/form-toggle/style.scss
+++ b/packages/components/src/form-toggle/style.scss
@@ -4,12 +4,14 @@ $toggle-border-width: 2px;
 
 .components-form-toggle {
 	position: relative;
+	display: inline-block;
 
 	// On/Off icon indicators.
 	.components-form-toggle__on,
 	.components-form-toggle__off {
 		position: absolute;
 		top: $toggle-border-width * 3;
+		box-sizing: border-box;
 	}
 
 	.components-form-toggle__off {
@@ -26,6 +28,7 @@ $toggle-border-width: 2px;
 	.components-form-toggle__track {
 		content: "";
 		display: inline-block;
+		box-sizing: border-box;
 		vertical-align: top;
 		background-color: $white;
 		border: $toggle-border-width solid $dark-gray-300;
@@ -38,6 +41,7 @@ $toggle-border-width: 2px;
 	.components-form-toggle__thumb {
 		display: block;
 		position: absolute;
+		box-sizing: border-box;
 		top: $toggle-border-width * 2;
 		left: $toggle-border-width * 2;
 		width: $toggle-height - ($toggle-border-width * 4);