Migrate TextControl styles from SCSS to CSS-in-JS

packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap

@@ -1,19 +1,36 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`ColorPaletteControl matches the snapshot 1`] = `
+.emotion-4 + .emotion-4 {
+  margin-bottom: 8px;
+}
+
+.emotion-2 {
+  margin-bottom: 8px;
+}
+
+.emotion-0 {
+  display: inline-block;
+  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 20px;
+  margin-bottom: 4px;
+}
+
 <div
-  className="components-base-control block-editor-color-gradient-control"
+  className="components-base-control block-editor-color-gradient-control emotion-4 emotion-5"
 >
   <div
-    className="components-base-control__field"
+    className="components-base-control__field emotion-2 emotion-3"
   >
     <fieldset>
       <legend>
         <div
           className="block-editor-color-gradient-control__color-indicator"
         >
           <span
-            className="components-base-control__label"
+            className="components-base-control__label emotion-0 emotion-1"
           >
             Test Color
             <span

packages/block-editor/src/components/link-control/test/__snapshots__/index.js.snap

@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Basic rendering should render 1`] = `"<div tabindex=\\"-1\\" class=\\"block-editor-link-control\\"><form><div class=\\"block-editor-link-control__search-input-wrapper\\"><div class=\\"components-base-control block-editor-url-input block-editor-link-control__search-input\\"><div class=\\"components-base-control__field\\"><input class=\\"block-editor-url-input__input\\" type=\\"text\\" aria-label=\\"URL\\" required=\\"\\" placeholder=\\"Search or type url\\" role=\\"combobox\\" aria-expanded=\\"false\\" aria-autocomplete=\\"list\\" aria-owns=\\"block-editor-url-input-suggestions-0\\" value=\\"\\"></div></div><div class=\\"block-editor-link-control__search-actions\\"><button type=\\"submit\\" class=\\"components-button block-editor-link-control__search-submit has-icon\\" aria-label=\\"Submit\\"><svg width=\\"24\\" height=\\"24\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"-2 -2 24 24\\" role=\\"img\\" aria-hidden=\\"true\\" focusable=\\"false\\"><path d=\\"M16 4h2v9H7v3l-5-4 5-4v3h9V4z\\"></path></svg></button></div></div></form><fieldset class=\\"block-editor-link-control__settings\\"><legend class=\\"screen-reader-text\\">Currently selected link settings</legend><div class=\\"components-base-control components-toggle-control block-editor-link-control__setting\\"><div class=\\"components-base-control__field\\"><span class=\\"components-form-toggle\\"><input class=\\"components-form-toggle__input\\" id=\\"inspector-toggle-control-0\\" type=\\"checkbox\\"><span class=\\"components-form-toggle__track\\"></span><span class=\\"components-form-toggle__thumb\\"></span><svg width=\\"6\\" height=\\"6\\" aria-hidden=\\"true\\" role=\\"img\\" focusable=\\"false\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 6 6\\" class=\\"components-form-toggle__off\\"><path d=\\"M3 1.5c.8 0 1.5.7 1.5 1.5S3.8 4.5 3 4.5 1.5 3.8 1.5 3 2.2 1.5 3 1.5M3 0C1.3 0 0 1.3 0 3s1.3 3 3 3 3-1.3 3-3-1.3-3-3-3z\\"></path></svg></span><label for=\\"inspector-toggle-control-0\\" class=\\"components-toggle-control__label\\">Open in new tab</label></div></div></fieldset></div>"`;
+exports[`Basic rendering should render 1`] = `"<div tabindex=\\"-1\\" class=\\"block-editor-link-control\\"><form><div class=\\"block-editor-link-control__search-input-wrapper\\"><div class=\\"components-base-control block-editor-url-input block-editor-link-control__search-input css-1696y00-Control e1lfhfwj0\\"><div class=\\"components-base-control__field css-4gss7i-Field e1lfhfwj1\\"><input class=\\"block-editor-url-input__input\\" type=\\"text\\" aria-label=\\"URL\\" required=\\"\\" placeholder=\\"Search or type url\\" role=\\"combobox\\" aria-expanded=\\"false\\" aria-autocomplete=\\"list\\" aria-owns=\\"block-editor-url-input-suggestions-0\\" value=\\"\\"></div></div><div class=\\"block-editor-link-control__search-actions\\"><button type=\\"submit\\" class=\\"components-button block-editor-link-control__search-submit has-icon\\" aria-label=\\"Submit\\"><svg width=\\"24\\" height=\\"24\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"-2 -2 24 24\\" role=\\"img\\" aria-hidden=\\"true\\" focusable=\\"false\\"><path d=\\"M16 4h2v9H7v3l-5-4 5-4v3h9V4z\\"></path></svg></button></div></div></form><fieldset class=\\"block-editor-link-control__settings\\"><legend class=\\"screen-reader-text\\">Currently selected link settings</legend><div class=\\"components-base-control components-toggle-control block-editor-link-control__setting css-1696y00-Control e1lfhfwj0\\"><div class=\\"components-base-control__field css-4gss7i-Field e1lfhfwj1\\"><span class=\\"components-form-toggle\\"><input class=\\"components-form-toggle__input\\" id=\\"inspector-toggle-control-0\\" type=\\"checkbox\\"><span class=\\"components-form-toggle__track\\"></span><span class=\\"components-form-toggle__thumb\\"></span><svg width=\\"6\\" height=\\"6\\" aria-hidden=\\"true\\" role=\\"img\\" focusable=\\"false\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 6 6\\" class=\\"components-form-toggle__off\\"><path d=\\"M3 1.5c.8 0 1.5.7 1.5 1.5S3.8 4.5 3 4.5 1.5 3.8 1.5 3 2.2 1.5 3 1.5M3 0C1.3 0 0 1.3 0 3s1.3 3 3 3 3-1.3 3-3-1.3-3-3-3z\\"></path></svg></span><label for=\\"inspector-toggle-control-0\\" class=\\"components-toggle-control__label\\">Open in new tab</label></div></div></fieldset></div>"`;

packages/block-editor/src/components/responsive-block-control/test/__snapshots__/index.js.snap

@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Basic rendering should render with required props 1`] = `"<fieldset class=\\"block-editor-responsive-block-control\\"><legend class=\\"block-editor-responsive-block-control__title\\">Padding</legend><div class=\\"block-editor-responsive-block-control__inner\\"><div class=\\"components-base-control components-toggle-control block-editor-responsive-block-control__toggle\\"><div class=\\"components-base-control__field\\"><span class=\\"components-form-toggle is-checked\\"><input class=\\"components-form-toggle__input\\" id=\\"inspector-toggle-control-0\\" type=\\"checkbox\\" aria-describedby=\\"inspector-toggle-control-0__help\\" checked=\\"\\"><span class=\\"components-form-toggle__track\\"></span><span class=\\"components-form-toggle__thumb\\"></span><svg width=\\"2\\" height=\\"6\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 2 6\\" class=\\"components-form-toggle__on\\" role=\\"img\\" aria-hidden=\\"true\\" focusable=\\"false\\"><path d=\\"M0 0h2v6H0z\\"></path></svg></span><label for=\\"inspector-toggle-control-0\\" class=\\"components-toggle-control__label\\">Use the same padding on all screensizes.</label></div><p id=\\"inspector-toggle-control-0__help\\" class=\\"components-base-control__help\\">Toggle between using the same value for all screen sizes or using a unique value per screen size.</p></div><div class=\\"block-editor-responsive-block-control__group\\"><div class=\\"components-base-control\\"><div class=\\"components-base-control__field\\"><label class=\\"components-base-control__label\\" for=\\"inspector-select-control-0\\"><span aria-describedby=\\"rbc-desc-0\\">All</span><span class=\\"screen-reader-text\\" id=\\"rbc-desc-0\\">Controls the padding property for All viewports.</span></label><select id=\\"inspector-select-control-0\\" class=\\"components-select-control__input\\"><option value=\\"\\">Please select</option><option value=\\"small\\">Small</option><option value=\\"medium\\">Medium</option><option value=\\"large\\">Large</option></select></div></div><p id=\\"all\\">All is used here for testing purposes to ensure we have access to details about the device.</p></div></div></fieldset>"`;
+exports[`Basic rendering should render with required props 1`] = `"<fieldset class=\\"block-editor-responsive-block-control\\"><legend class=\\"block-editor-responsive-block-control__title\\">Padding</legend><div class=\\"block-editor-responsive-block-control__inner\\"><div class=\\"components-base-control components-toggle-control block-editor-responsive-block-control__toggle css-1696y00-Control e1lfhfwj0\\"><div class=\\"components-base-control__field css-4gss7i-Field e1lfhfwj1\\"><span class=\\"components-form-toggle is-checked\\"><input class=\\"components-form-toggle__input\\" id=\\"inspector-toggle-control-0\\" type=\\"checkbox\\" aria-describedby=\\"inspector-toggle-control-0__help\\" checked=\\"\\"><span class=\\"components-form-toggle__track\\"></span><span class=\\"components-form-toggle__thumb\\"></span><svg width=\\"2\\" height=\\"6\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 2 6\\" class=\\"components-form-toggle__on\\" role=\\"img\\" aria-hidden=\\"true\\" focusable=\\"false\\"><path d=\\"M0 0h2v6H0z\\"></path></svg></span><label for=\\"inspector-toggle-control-0\\" class=\\"components-toggle-control__label\\">Use the same padding on all screensizes.</label></div><p id=\\"inspector-toggle-control-0__help\\" class=\\"components-base-control__help css-sokf6o-Help e1lfhfwj3\\">Toggle between using the same value for all screen sizes or using a unique value per screen size.</p></div><div class=\\"block-editor-responsive-block-control__group\\"><div class=\\"components-base-control css-1696y00-Control e1lfhfwj0\\"><div class=\\"components-base-control__field css-4gss7i-Field e1lfhfwj1\\"><label class=\\"components-base-control__label css-16utvge-Label e1lfhfwj2\\" for=\\"inspector-select-control-0\\"><span aria-describedby=\\"rbc-desc-0\\">All</span><span class=\\"screen-reader-text\\" id=\\"rbc-desc-0\\">Controls the padding property for All viewports.</span></label><select id=\\"inspector-select-control-0\\" class=\\"components-select-control__input\\"><option value=\\"\\">Please select</option><option value=\\"small\\">Small</option><option value=\\"medium\\">Medium</option><option value=\\"large\\">Large</option></select></div></div><p id=\\"all\\">All is used here for testing purposes to ensure we have access to details about the device.</p></div></div></fieldset>"`;

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

@@ -7,6 +7,7 @@ import classnames from 'classnames';
  * Internal dependencies
  */
 import VisuallyHidden from '../visually-hidden';
+import { Control, Field, Label, Help } from './styles/index-styles';
 
 function BaseControl( {
 	id,
@@ -17,21 +18,23 @@ function BaseControl( {
 	children,
 } ) {
 	return (
-		<div className={ classnames( 'components-base-control', className ) }>
-			<div className="components-base-control__field">
+		<Control
+			className={ classnames( 'components-base-control', className ) }
+		>
+			<Field className="components-base-control__field">
 				{ label &&
 					id &&
 					( hideLabelFromVision ? (
 						<VisuallyHidden as="label" htmlFor={ id }>
 							{ label }
 						</VisuallyHidden>
 					) : (
-						<label
+						<Label
 							className="components-base-control__label"
 							htmlFor={ id }
 						>
 							{ label }
-						</label>
+						</Label>
 					) ) }
 				{ label &&
 					! id &&
@@ -43,22 +46,26 @@ function BaseControl( {
 						</BaseControl.VisualLabel>
 					) ) }
 				{ children }
-			</div>
+			</Field>
 			{ !! help && (
-				<p
+				<Help
 					id={ id + '__help' }
 					className="components-base-control__help"
 				>
 					{ help }
-				</p>
+				</Help>
 			) }
-		</div>
+		</Control>
 	);
 }
 
 BaseControl.VisualLabel = ( { className, children } ) => {
 	className = classnames( 'components-base-control__label', className );
-	return <span className={ className }>{ children }</span>;
+	return (
+		<Label className={ className } as="span">
+			{ children }
+		</Label>
+	);
 };
 
 export default BaseControl;

packages/components/src/base-control/styles/index-styles.js

@@ -0,0 +1,32 @@
+/**
+ * External dependencies
+ */
+import styled from '@emotion/styled';
+
+/**
+ * Internal dependencies
+ */
+import { marginTop, marginBottom } from '../../utils/style-mixins';
+import { text } from '../../text/mixins';
+
+export const Control = styled.div`
+	& + & {
+		${marginBottom( 2 )}
+	}
+`;
+
+export const Field = styled.div`
+	${marginBottom( 2 )}
+`;
+
+export const Label = styled.label`
+	display: inline-block;
+	${text( { variant: 'body.small' } )}
+	${marginBottom( 1 )}
+`;
+
+export const Help = styled.p`
+	font-style: italic;
+	${text( { variant: 'caption' } )}
+	${marginTop( -2 )}
+`;