From 9f45d0baf6bead528a50829030c795cc5e2ec585 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Fri, 29 May 2020 11:17:41 +0100
Subject: [PATCH] Remove Gutenberg form control resets and include the styles
 in the components (#22596)

---
 packages/base-styles/_mixins.scss             | 267 ++++++++----------
 .../src/components/inserter/style.scss        |   2 +-
 .../src/components/link-control/style.scss    |  12 +-
 .../src/components/url-input/index.js         |   2 -
 .../src/components/url-input/style.scss       |  11 +-
 .../src/block/edit-panel/editor.scss          |   4 +
 packages/block-library/src/shortcode/edit.js  |   2 +-
 .../block-library/src/shortcode/editor.scss   |   5 +
 .../src/angle-picker-control/style.scss       |   3 +-
 .../src/checkbox-control/style.scss           |   2 +-
 .../src/font-size-picker/style.scss           |   1 +
 .../src/form-token-field/style.scss           |  11 +-
 .../components/src/placeholder/style.scss     |   3 +-
 .../components/src/radio-control/style.scss   |   1 +
 .../components/src/text-control/style.scss    |  17 +-
 .../src/textarea-control/style.scss           |   2 +-
 .../src/components/post-visibility/style.scss |   6 +-
 17 files changed, 167 insertions(+), 184 deletions(-)

diff --git a/packages/base-styles/_mixins.scss b/packages/base-styles/_mixins.scss
index b2902274839e2a..296262b3a09402 100644
--- a/packages/base-styles/_mixins.scss
+++ b/packages/base-styles/_mixins.scss
@@ -238,188 +238,163 @@
 
 }
 
-/**
- * Reset default styles for JavaScript UI based pages.
- * This is a WP-admin agnostic reset
- */
-@mixin reset {
-	box-sizing: border-box;
-
-	*,
-	*::before,
-	*::after {
-		box-sizing: inherit;
-	}
-
-	.input-control, // Upstream name is `.regular-text`.
-	input[type="text"],
-	input[type="search"],
-	input[type="radio"],
-	input[type="tel"],
-	input[type="time"],
-	input[type="url"],
-	input[type="week"],
-	input[type="password"],
-	input[type="checkbox"],
-	input[type="color"],
-	input[type="date"],
-	input[type="datetime"],
-	input[type="datetime-local"],
-	input[type="email"],
-	input[type="month"],
-	input[type="number"],
-	select,
-	textarea {
-		font-family: $default-font;
-		padding: 6px 8px;
-		@include input-style__neutral();
-
-		/* Fonts smaller than 16px causes mobile safari to zoom. */
-		font-size: $mobile-text-min-font-size;
+@mixin input-control {
+	font-family: $default-font;
+	padding: 6px 8px;
+	@include input-style__neutral();
+
+	/* Fonts smaller than 16px causes mobile safari to zoom. */
+	font-size: $mobile-text-min-font-size;
+	/* Override core line-height. To be reviewed. */
+	line-height: normal;
+	@include break-small {
+		font-size: $default-font-size;
 		/* Override core line-height. To be reviewed. */
 		line-height: normal;
-		@include break-small {
-			font-size: $default-font-size;
-			/* Override core line-height. To be reviewed. */
-			line-height: normal;
-		}
-
-		&:focus {
-			@include input-style__focus();
-		}
 	}
 
-	input[type="number"] {
-		padding-left: 4px;
-		padding-right: 4px;
+	&:focus {
+		@include input-style__focus();
 	}
 
-	select {
-		padding: 3px 24px 3px 8px;
-		font-size: $default-font-size;
-		color: $dark-gray-500;
+	// Use opacity to work in various editor styles.
+	&::-webkit-input-placeholder {
+		color: $dark-opacity-300;
+	}
 
-		&:focus {
-			border-color: $blue-medium-600;
-			// Windows High Contrast mode will show this outline
-			outline: 2px solid transparent;
-			outline-offset: 0;
-		}
+	&::-moz-placeholder {
+		opacity: 1; // Necessary because Firefox reduces this from 1.
+		color: $dark-opacity-300;
 	}
 
-	input[type="checkbox"],
-	input[type="radio"] {
-		border: $border-width + 1 solid $medium-gray-text;
-		margin-right: $grid-unit-15;
-		transition: none;
+	&:-ms-input-placeholder {
+		color: $dark-opacity-300;
+	}
 
-		&:focus {
-			border-color: $medium-gray-text;
-			box-shadow: 0 0 0 1px $medium-gray-text;
+	.is-dark-theme & {
+		&::-webkit-input-placeholder {
+			color: $light-opacity-300;
 		}
 
-		&:checked {
-			background: theme(toggle);
-			border-color: theme(toggle);
+		&::-moz-placeholder {
+			opacity: 1; // Necessary because Firefox reduces this from 1.
+			color: $light-opacity-300;
 		}
 
-		&:checked:focus {
-			box-shadow: 0 0 0 $border-width-focus $medium-gray-text;
+		&:-ms-input-placeholder {
+			color: $light-opacity-300;
 		}
 	}
+}
 
-	input[type="checkbox"] {
-		border-radius: $radius-block-ui;
+@mixin checkbox-control {
+	@include input-control;
+	border: $border-width + 1 solid $medium-gray-text;
+	margin-right: $grid-unit-15;
+	transition: none;
+	border-radius: $radius-block-ui;
 
-		&:checked::before,
-		&[aria-checked="mixed"]::before {
-			margin: -3px -5px;
-			color: $white;
+	&:focus {
+		border-color: $medium-gray-text;
+		box-shadow: 0 0 0 1px $medium-gray-text;
+	}
 
-			@include break-medium() {
-				margin: -4px 0 0 -5px;
-			}
-		}
+	&:checked {
+		background: theme(toggle);
+		border-color: theme(toggle);
+	}
 
-		&[aria-checked="mixed"] {
-			background: theme(toggle);
-			border-color: theme(toggle);
-
-			&::before {
-				// Inherited from `forms.css`.
-				// See: https://github.com/WordPress/wordpress-develop/tree/5.1.1/src/wp-admin/css/forms.css#L122-L132
-				content: "\f460";
-				float: left;
-				display: inline-block;
-				vertical-align: middle;
-				width: 16px;
-				/* stylelint-disable */
-				font: normal 30px/1 dashicons;
-				/* stylelint-enable */
-				speak: none;
-				-webkit-font-smoothing: antialiased;
-				-moz-osx-font-smoothing: grayscale;
-
-				@include break-medium() {
-					float: none;
-					font-size: 21px;
-				}
-			}
+	&:checked:focus {
+		box-shadow: 0 0 0 $border-width-focus $medium-gray-text;
+	}
 
-			&:focus {
-				box-shadow: 0 0 0 $border-width-focus $dark-gray-500;
-			}
+
+	&:checked::before,
+	&[aria-checked="mixed"]::before {
+		margin: -3px -5px;
+		color: $white;
+
+		@include break-medium() {
+			margin: -4px 0 0 -5px;
 		}
 	}
 
-	// We provide explicit pixel dimensions to ensure a crisp appearance.
-	// This radio button style should be ported upstream.
-	input[type="radio"] {
-		border-radius: $radius-round;
-
-		&:checked::before {
-			width: 6px;
-			height: 6px;
-			margin: 6px 0 0 6px;
-			background-color: $white;
+	&[aria-checked="mixed"] {
+		background: theme(toggle);
+		border-color: theme(toggle);
+
+		&::before {
+			// Inherited from `forms.css`.
+			// See: https://github.com/WordPress/wordpress-develop/tree/5.1.1/src/wp-admin/css/forms.css#L122-L132
+			content: "\f460";
+			float: left;
+			display: inline-block;
+			vertical-align: middle;
+			width: 16px;
+			/* stylelint-disable */
+			font: normal 30px/1 dashicons;
+			/* stylelint-enable */
+			speak: none;
+			-webkit-font-smoothing: antialiased;
+			-moz-osx-font-smoothing: grayscale;
 
 			@include break-medium() {
-				margin: 3px 0 0 3px;
+				float: none;
+				font-size: 21px;
 			}
 		}
-	}
 
-	// Placeholder colors
-	input,
-	textarea {
-		// Use opacity to work in various editor styles.
-		&::-webkit-input-placeholder {
-			color: $dark-opacity-300;
+		&:focus {
+			box-shadow: 0 0 0 $border-width-focus $dark-gray-500;
 		}
+	}
+}
 
-		&::-moz-placeholder {
-			opacity: 1; // Necessary because Firefox reduces this from 1.
-			color: $dark-opacity-300;
+@mixin radio-control {
+	@include input-control;
+	border: $border-width + 1 solid $medium-gray-text;
+	margin-right: $grid-unit-15;
+	transition: none;
+	border-radius: $radius-round;
+
+	&:checked::before {
+		width: 6px;
+		height: 6px;
+		margin: 6px 0 0 6px;
+		background-color: $white;
+
+		@include break-medium() {
+			margin: 3px 0 0 3px;
 		}
+	}
 
-		&:-ms-input-placeholder {
-			color: $dark-opacity-300;
-		}
+	&:focus {
+		border-color: $medium-gray-text;
+		box-shadow: 0 0 0 1px $medium-gray-text;
+	}
 
-		.is-dark-theme & {
-			&::-webkit-input-placeholder {
-				color: $light-opacity-300;
-			}
+	&:checked {
+		background: theme(toggle);
+		border-color: theme(toggle);
+	}
 
-			&::-moz-placeholder {
-				opacity: 1; // Necessary because Firefox reduces this from 1.
-				color: $light-opacity-300;
-			}
+	&:checked:focus {
+		box-shadow: 0 0 0 $border-width-focus $medium-gray-text;
+	}
 
-			&:-ms-input-placeholder {
-				color: $light-opacity-300;
-			}
-		}
+}
+
+/**
+ * Reset default styles for JavaScript UI based pages.
+ * This is a WP-admin agnostic reset
+ */
+@mixin reset {
+	box-sizing: border-box;
+
+	*,
+	*::before,
+	*::after {
+		box-sizing: inherit;
 	}
 }
 
diff --git a/packages/block-editor/src/components/inserter/style.scss b/packages/block-editor/src/components/inserter/style.scss
index f7557d631f2bda..2725c904073ee7 100644
--- a/packages/block-editor/src/components/inserter/style.scss
+++ b/packages/block-editor/src/components/inserter/style.scss
@@ -70,9 +70,9 @@ $block-inserter-tabs-height: 44px;
 	position: relative;
 
 	input[type="search"].block-editor-inserter__search-input {
+		@include input-control;
 		display: block;
 		padding: $grid-unit-20 $grid-unit-60 $grid-unit-20 $grid-unit-20;
-		border-radius: $radius-block-ui;
 		background: $light-gray-200;
 		border: none;
 		width: 100%;
diff --git a/packages/block-editor/src/components/link-control/style.scss b/packages/block-editor/src/components/link-control/style.scss
index d3b2ecdfc64e04..9b8908a8a9aeee 100644
--- a/packages/block-editor/src/components/link-control/style.scss
+++ b/packages/block-editor/src/components/link-control/style.scss
@@ -21,6 +21,7 @@ $block-editor-link-control-number-of-actions: 1;
 .block-editor-link-control .block-editor-link-control__search-input {
 	// Specificity override.
 	&.block-editor-link-control__search-input input[type="text"] {
+		@include input-control;
 		width: calc(100% - #{$grid-unit-20*2});
 		display: block;
 		padding: 11px $grid-unit-20;
@@ -29,17 +30,6 @@ $block-editor-link-control-number-of-actions: 1;
 		position: relative;
 		border: 1px solid $light-gray-500;
 		border-radius: $radius-round-rectangle;
-
-		/* Fonts smaller than 16px causes mobile safari to zoom. */
-		font-size: $mobile-text-min-font-size;
-
-		@include break-small {
-			font-size: $default-font-size;
-		}
-
-		&:focus {
-			@include input-style__focus();
-		}
 	}
 
 	.components-base-control__field {
diff --git a/packages/block-editor/src/components/url-input/index.js b/packages/block-editor/src/components/url-input/index.js
index 7c2f403d28938e..24a730844fb6ee 100644
--- a/packages/block-editor/src/components/url-input/index.js
+++ b/packages/block-editor/src/components/url-input/index.js
@@ -379,7 +379,6 @@ class URLInput extends Component {
 			instanceId,
 			className,
 			isFullWidth,
-			hasBorder,
 			__experimentalRenderSuggestions: renderSuggestions,
 			placeholder = __( 'Paste URL or type to search' ),
 			value = '',
@@ -422,7 +421,6 @@ class URLInput extends Component {
 				id={ id }
 				className={ classnames( 'block-editor-url-input', className, {
 					'is-full-width': isFullWidth,
-					'has-border': hasBorder,
 				} ) }
 			>
 				<input
diff --git a/packages/block-editor/src/components/url-input/style.scss b/packages/block-editor/src/components/url-input/style.scss
index fc988577744123..884ca5dd7c6fe4 100644
--- a/packages/block-editor/src/components/url-input/style.scss
+++ b/packages/block-editor/src/components/url-input/style.scss
@@ -31,15 +31,10 @@ $input-size: 300px;
 		}
 	}
 
-	&.has-border input[type="text"] {
-		border: 1px solid $dark-gray-500;
-		border-radius: 4px;
-	}
-
 	&.is-full-width {
 		width: 100%;
 
-		input[type="text"] {
+		.block-editor-url-input__input[type="text"] {
 			width: 100%;
 		}
 
@@ -56,6 +51,10 @@ $input-size: 300px;
 	}
 }
 
+.block-editor-url-input__input[type="text"] {
+	@include input-control;
+}
+
 // Suggestions
 .block-editor-url-input__suggestions {
 	max-height: 200px;
diff --git a/packages/block-library/src/block/edit-panel/editor.scss b/packages/block-library/src/block/edit-panel/editor.scss
index 0537c7d0523474..9c538e8ee0b697 100644
--- a/packages/block-library/src/block/edit-panel/editor.scss
+++ b/packages/block-library/src/block/edit-panel/editor.scss
@@ -47,6 +47,10 @@
 	}
 }
 
+.reusable-block-edit-panel__title[type="text"] {
+	@include input-control;
+}
+
 .is-navigate-mode .is-selected .reusable-block-edit-panel {
 	box-shadow: 0 0 0 $border-width $blue-medium-focus;
 
diff --git a/packages/block-library/src/shortcode/edit.js b/packages/block-library/src/shortcode/edit.js
index fc628e971b3488..390b617cd5c87a 100644
--- a/packages/block-library/src/shortcode/edit.js
+++ b/packages/block-library/src/shortcode/edit.js
@@ -20,7 +20,7 @@ export default function ShortcodeEdit( { attributes, setAttributes } ) {
 				{ __( 'Shortcode' ) }
 			</label>
 			<PlainText
-				className="input-control"
+				className="blocks-shortcode__textarea"
 				id={ inputId }
 				value={ attributes.text }
 				placeholder={ __( 'Write shortcode here…' ) }
diff --git a/packages/block-library/src/shortcode/editor.scss b/packages/block-library/src/shortcode/editor.scss
index 4d15b92337d8eb..b8077163c5d73c 100644
--- a/packages/block-library/src/shortcode/editor.scss
+++ b/packages/block-library/src/shortcode/editor.scss
@@ -23,3 +23,8 @@
 		margin-right: $grid-unit-10;
 	}
 }
+
+.block-editor .blocks-shortcode__textarea,
+.blocks-shortcode__textarea {
+	@include input-control;
+}
diff --git a/packages/components/src/angle-picker-control/style.scss b/packages/components/src/angle-picker-control/style.scss
index 6b5c497e9ae882..a581517902da0f 100644
--- a/packages/components/src/angle-picker-control/style.scss
+++ b/packages/components/src/angle-picker-control/style.scss
@@ -5,7 +5,8 @@
 	}
 }
 
-.components-angle-picker-control__input-field {
+.components-angle-picker-control__input-field[type="number"] {
+	@include input-control;
 	width: calc(100% - #{$button-size});
 	max-width: 100px;
 }
diff --git a/packages/components/src/checkbox-control/style.scss b/packages/components/src/checkbox-control/style.scss
index ce25ce96d65bab..64c02a70a80053 100644
--- a/packages/components/src/checkbox-control/style.scss
+++ b/packages/components/src/checkbox-control/style.scss
@@ -2,7 +2,7 @@ $checkbox-input-size: 20px;
 $checkbox-input-size-sm: 24px; // width + height for small viewports
 
 .components-checkbox-control__input[type="checkbox"] {
-	border: 1px solid #b4b9be;
+	@include checkbox-control;
 	background: #fff;
 	color: #555;
 	clear: none;
diff --git a/packages/components/src/font-size-picker/style.scss b/packages/components/src/font-size-picker/style.scss
index ee88ead8871d98..6d5dcafcabdf75 100644
--- a/packages/components/src/font-size-picker/style.scss
+++ b/packages/components/src/font-size-picker/style.scss
@@ -6,6 +6,7 @@
 
 	// Apply the same height as the isSmall Reset button.
 	.components-font-size-picker__number {
+		@include input-control;
 		display: inline-block;
 		font-weight: 500;
 		height: 30px;
diff --git a/packages/components/src/form-token-field/style.scss b/packages/components/src/form-token-field/style.scss
index d7e42d766ef164..cf4315c58ef167 100644
--- a/packages/components/src/form-token-field/style.scss
+++ b/packages/components/src/form-token-field/style.scss
@@ -1,32 +1,25 @@
 .components-form-token-field__input-container {
+	@include input-control();
 	display: flex;
 	flex-wrap: wrap;
 	align-items: flex-start;
 	width: 100%;
 	margin: 0 0 $grid-unit-10 0;
 	padding: $grid-unit-05;
-	background-color: $white;
-	border: $border-width solid $light-gray-700;
-	color: $dark-gray-700;
 	cursor: text;
 
-	@include input-style__neutral();
 
 	&.is-disabled {
 		background: $light-gray-500;
 		border-color: $light-gray-700;
 	}
 
-	&.is-active {
-		@include input-style__focus();
-	}
-
 	// Token input
 	input[type="text"].components-form-token-field__input {
 		display: inline-block;
 		width: 100%;
 		max-width: 100%;
-		margin: 2px 0 2px 8px;
+		margin-left: 4px;
 		padding: 0;
 		min-height: 24px;
 		background: inherit;
diff --git a/packages/components/src/placeholder/style.scss b/packages/components/src/placeholder/style.scss
index 2feaa22804b09b..dddec2d5fe06cd 100644
--- a/packages/components/src/placeholder/style.scss
+++ b/packages/components/src/placeholder/style.scss
@@ -71,7 +71,8 @@
 	flex-direction: column;
 }
 
-.components-placeholder__input {
+.components-placeholder__input[type="url"] {
+	@include input-control;
 	margin: 0 8px 0 0;
 	flex: 1 1 auto;
 }
diff --git a/packages/components/src/radio-control/style.scss b/packages/components/src/radio-control/style.scss
index f63d30b75c7d22..e51109cfbeddf1 100644
--- a/packages/components/src/radio-control/style.scss
+++ b/packages/components/src/radio-control/style.scss
@@ -16,6 +16,7 @@
 }
 
 .components-radio-control__input[type="radio"] {
+	@include radio-control;
 	margin-top: 0;
 	margin-right: 6px;
 }
diff --git a/packages/components/src/text-control/style.scss b/packages/components/src/text-control/style.scss
index 273ee929fbb62f..38c35eec9c8455 100644
--- a/packages/components/src/text-control/style.scss
+++ b/packages/components/src/text-control/style.scss
@@ -1,4 +1,17 @@
-.components-text-control__input {
+.components-text-control__input,
+.components-text-control__input[type="text"],
+.components-text-control__input[type="tel"],
+.components-text-control__input[type="time"],
+.components-text-control__input[type="url"],
+.components-text-control__input[type="week"],
+.components-text-control__input[type="password"],
+.components-text-control__input[type="color"],
+.components-text-control__input[type="date"],
+.components-text-control__input[type="datetime"],
+.components-text-control__input[type="datetime-local"],
+.components-text-control__input[type="email"],
+.components-text-control__input[type="month"],
+.components-text-control__input[type="number"] {
 	width: 100%;
-	padding: 6px 8px;
+	@include input-control;
 }
diff --git a/packages/components/src/textarea-control/style.scss b/packages/components/src/textarea-control/style.scss
index e942a5e8f16550..04d3a096d25811 100644
--- a/packages/components/src/textarea-control/style.scss
+++ b/packages/components/src/textarea-control/style.scss
@@ -1,4 +1,4 @@
 .components-textarea-control__input {
 	width: 100%;
-	padding: 6px 8px;
+	@include input-control;
 }
diff --git a/packages/editor/src/components/post-visibility/style.scss b/packages/editor/src/components/post-visibility/style.scss
index 3f6b4e22b5dc68..78eddc859e6ac2 100644
--- a/packages/editor/src/components/post-visibility/style.scss
+++ b/packages/editor/src/components/post-visibility/style.scss
@@ -10,7 +10,8 @@
 		padding: 0;
 	}
 
-	.editor-post-visibility__dialog-radio {
+	.editor-post-visibility__dialog-radio[type="radio"] {
+		@include radio-control;
 		margin-top: 2px;
 	}
 
@@ -28,7 +29,8 @@
 		margin-bottom: 0;
 	}
 
-	.editor-post-visibility__dialog-password-input {
+	.editor-post-visibility__dialog-password-input[type="text"] {
+		@include input-control;
 		margin-left: 28px;
 	}
 }