Fixed help text position on toggle control and range control. (#5731)

Help text appeared in the line instead of bellow the control as in all the other controls.
WordPress · Mar 22, 2018 · 8d77d9e · 8d77d9e
1 parent fe5274f
commit 8d77d9e
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 8 deletions.
diff --git a/components/base-control/index.js b/components/base-control/index.js
@@ -11,8 +11,10 @@ import './style.scss';
 function BaseControl( { id, label, help, className, children } ) {
 	return (
 		<div className={ classnames( 'components-base-control', className ) }>
-			{ label && <label className="components-base-control__label" htmlFor={ id }>{ label }</label> }
-			{ children }
+			<div className="components-base-control__field">
+				{ label && <label className="components-base-control__label" htmlFor={ id }>{ label }</label> }
+				{ children }
+			</div>
 			{ !! help && <p id={ id + '__help' } className="components-base-control__help">{ help }</p> }
 		</div>
 	);

diff --git a/components/range-control/style.scss b/components/range-control/style.scss
@@ -1,8 +1,11 @@
+
 .components-range-control {
-	display: flex;
-	justify-content: center;
-	flex-wrap: wrap;
-	align-items: center;
+	.components-base-control__field {
+		display: flex;
+		justify-content: center;
+		flex-wrap: wrap;
+		align-items: center;
+	}
 
 	.dashicon {
 		flex-shrink: 0;

diff --git a/components/toggle-control/style.scss b/components/toggle-control/style.scss
@@ -1,4 +1,4 @@
-.components-toggle-control {
+.components-toggle-control .components-base-control__field {
 	display: flex;
 	justify-content: space-between;
-}
+}