Merge pull request #969 from SwedbankPay/feature/SWED-2335-input_fiel…

…d_ui_update swed-2335 input field label line-height
SwedbankPay · Apr 10, 2024 · 9bed79b · 9bed79b
2 parents a2a7b7f + 563ebef
commit 9bed79b
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 2 deletions.
diff --git a/RELEASE_NOTES.md b/RELEASE_NOTES.md
@@ -4,6 +4,10 @@
 
 ## Component changes
 
+- Input fields
+
+  - labels line-height increased & mobile values adjusted, so values are in sync with `h4` typography style
+
 - Buttons
   - add Danish MitId button style (you can use either `i.bank-id-dk` OR `i.mitid-dk`, both are supported)
 

diff --git a/src/less/components/form.less b/src/less/components/form.less
@@ -232,14 +232,20 @@ legend {
 	}
 }
 
+// typography here comes from typography `h4, .h4` (in typography.less)
 .form-group {
 	label {
-		font-size: 1.25rem;
-		line-height: 1.5rem;
+		font-size: 1.125rem;
+		line-height: 1.625rem;
 		margin-bottom: 0.5rem;
 		color: var(--brand-secondary);
 		font-family: var(--brand-headline);
 		font-weight: var(--font-weight-header, 400);
+
+		@media screen and (min-width: @screen-sm-min) {
+			font-size: 1.25rem;
+			line-height: 1.875rem;
+		}
 	}
 
 	&.small {

diff --git a/src/less/core/typography.less b/src/less/core/typography.less
@@ -118,6 +118,7 @@ h3,
 	}
 }
 
+// any change here should also be applied to `.form-group label` (in form.less)
 h4,
 .h4 {
 	font-family: var(--brand-headline);
@@ -319,6 +320,7 @@ blockquote,
 		}
 	}
 
+	// any change here should also be applied to `.form-group label` (in form.less)
 	h4,
 	.h4 {
 		font-size: 1.25rem;
-Original file line number
+Diff line change
@@ Expand Up / @@ -118,6 +118,7 @@ h3, @@
     	}
     }
+    // any change here should also be applied to `.form-group label` (in form.less)
     h4,
     .h4 {
     	font-family: var(--brand-headline);
@@ Expand Down Expand Up / @@ -319,6 +320,7 @@ blockquote, @@
     		}
     	}
+    	// any change here should also be applied to `.form-group label` (in form.less)
     	h4,
     	.h4 {
     		font-size: 1.25rem;
@@ Expand Down @@