From fde4df785327132906eef60d76200d4ea66dfcaf Mon Sep 17 00:00:00 2001
From: Utkarsh Patel <itismeutkarsh@gmail.com>
Date: Fri, 24 Jun 2022 17:13:16 +0530
Subject: [PATCH] Revert "Merge pull request #363 from
 material-components/revert-359-m3/typography-feedback"

This reverts commit 9a453deed39c98c98e157e3a9a3726706bd8b14f, reversing
changes made to a8728a1ab43f6a7a1a2264db9a3be21fb3e10f3e.
---
 .../components/google-fonts-control/item.js   | 42 +++++++++----------
 .../components/google-fonts-control/style.css |  4 ++
 .../__snapshots__/item.test.js.snap           | 30 ++++++-------
 3 files changed, 40 insertions(+), 36 deletions(-)

diff --git a/plugin/assets/src/customizer/components/google-fonts-control/item.js b/plugin/assets/src/customizer/components/google-fonts-control/item.js
index cb25cd5c6..0efa74feb 100644
--- a/plugin/assets/src/customizer/components/google-fonts-control/item.js
+++ b/plugin/assets/src/customizer/components/google-fonts-control/item.js
@@ -59,28 +59,27 @@ const Item = props => {
 					<div className="components-base-control__field">
 						<label
 							className="components-base-control__label"
-							htmlFor={ `inspector-line-height-control-${ id }` }
-							id={ `inspector-line-height-label-${ id }` }
+							htmlFor={ `inspector-size-control-${ id }` }
+							id={ `inspector-size-label-${ id }` }
 						>
-							{ lineHeight.label }
+							{ size.label }
 						</label>
 						<input
-							id={ `inspector-line-height-control-${ id }` }
+							id={ `inspector-size-control-${ id }` }
 							className="components-google-fonts-control__number"
 							type="number"
-							value={ lineHeight.value || lineHeight.default }
-							min={ lineHeight.min }
-							max={ lineHeight.max }
-							step="0.01"
+							value={ size.value || size.default }
+							min={ size.min }
+							max={ size.max }
 							onChange={ event => {
-								const lineHeightValue = event.target.value;
+								const sizeValue = event.target.value;
 
 								onChange( {
 									id,
-									lineHeightValue,
+									sizeValue,
 									trackingValue: tracking.value,
-									sizeValue: size.value,
 									weightValue: weight.value,
+									lineHeightValue: lineHeight.value,
 								} );
 							} }
 						/>
@@ -90,27 +89,28 @@ const Item = props => {
 					<div className="components-base-control__field">
 						<label
 							className="components-base-control__label"
-							htmlFor={ `inspector-size-control-${ id }` }
-							id={ `inspector-size-label-${ id }` }
+							htmlFor={ `inspector-line-height-control-${ id }` }
+							id={ `inspector-line-height-label-${ id }` }
 						>
-							{ size.label }
+							{ lineHeight.label }
 						</label>
 						<input
-							id={ `inspector-size-control-${ id }` }
+							id={ `inspector-line-height-control-${ id }` }
 							className="components-google-fonts-control__number"
 							type="number"
-							value={ size.value || size.default }
-							min={ size.min }
-							max={ size.max }
+							value={ lineHeight.value || lineHeight.default }
+							min={ lineHeight.min }
+							max={ lineHeight.max }
+							step="0.01"
 							onChange={ event => {
-								const sizeValue = event.target.value;
+								const lineHeightValue = event.target.value;
 
 								onChange( {
 									id,
-									sizeValue,
+									lineHeightValue,
 									trackingValue: tracking.value,
+									sizeValue: size.value,
 									weightValue: weight.value,
-									lineHeightValue: lineHeight.value,
 								} );
 							} }
 						/>
diff --git a/plugin/assets/src/customizer/components/google-fonts-control/style.css b/plugin/assets/src/customizer/components/google-fonts-control/style.css
index a80e2b4f8..2cb266261 100644
--- a/plugin/assets/src/customizer/components/google-fonts-control/style.css
+++ b/plugin/assets/src/customizer/components/google-fonts-control/style.css
@@ -59,6 +59,10 @@
 		padding: 8px 0 8px 8px;
 	}
 
+	.google-fonts-control-child + .google-fonts-control-child {
+		margin-top: 20px;
+	}
+
 	.components-google-fonts-control__select {
 		flex-direction: row;
 		align-items: center;
diff --git a/plugin/tests/js/customizer/components/google-fonts-control/__snapshots__/item.test.js.snap b/plugin/tests/js/customizer/components/google-fonts-control/__snapshots__/item.test.js.snap
index 1ffeb8f49..9cb9c2ad0 100644
--- a/plugin/tests/js/customizer/components/google-fonts-control/__snapshots__/item.test.js.snap
+++ b/plugin/tests/js/customizer/components/google-fonts-control/__snapshots__/item.test.js.snap
@@ -20,20 +20,19 @@ exports[`GoogleFontsControl/Item matches snapshot 1`] = `
       >
         <label
           className="components-base-control__label"
-          htmlFor="inspector-line-height-control-headline-large"
-          id="inspector-line-height-label-headline-large"
+          htmlFor="inspector-size-control-headline-large"
+          id="inspector-size-label-headline-large"
         >
-          Line height
+          Size
         </label>
         <input
           className="components-google-fonts-control__number"
-          id="inspector-line-height-control-headline-large"
-          max={64}
-          min={0}
+          id="inspector-size-control-headline-large"
+          max={96}
+          min={2}
           onChange={[Function]}
-          step="0.01"
           type="number"
-          value={0}
+          value={96}
         />
       </div>
     </div>
@@ -45,19 +44,20 @@ exports[`GoogleFontsControl/Item matches snapshot 1`] = `
       >
         <label
           className="components-base-control__label"
-          htmlFor="inspector-size-control-headline-large"
-          id="inspector-size-label-headline-large"
+          htmlFor="inspector-line-height-control-headline-large"
+          id="inspector-line-height-label-headline-large"
         >
-          Size
+          Line height
         </label>
         <input
           className="components-google-fonts-control__number"
-          id="inspector-size-control-headline-large"
-          max={96}
-          min={2}
+          id="inspector-line-height-control-headline-large"
+          max={64}
+          min={0}
           onChange={[Function]}
+          step="0.01"
           type="number"
-          value={96}
+          value={0}
         />
       </div>
     </div>