Merge pull request #363 from material-components/revert-359-m3/typogr…

…aphy-feedback Revert "Add spacing; Move font size as first"
material-components · Jun 14, 2022 · 9a453de · 9a453de
2 parents a8728a1 + 8ce7a1d
commit 9a453de
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 40 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
@@ -59,27 +59,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,
 								} );
 							} }
 						/>
@@ -89,28 +90,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,
 								} );
 							} }
 						/>

diff --git a/plugin/assets/src/customizer/components/google-fonts-control/style.css b/plugin/assets/src/customizer/components/google-fonts-control/style.css
@@ -59,10 +59,6 @@
 		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
@@ -20,19 +20,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>
@@ -44,20 +45,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>