From eec5e463824f55dd5c7144ceede4a11a818877df Mon Sep 17 00:00:00 2001 From: Raphael Ferrand Date: Thu, 4 Apr 2024 16:45:11 +0200 Subject: [PATCH 1/3] swed-2335 input field label line-height --- RELEASE_NOTES.md | 11 ++--------- src/less/components/form.less | 2 +- 2 files changed, 3 insertions(+), 10 deletions(-) diff --git a/RELEASE_NOTES.md b/RELEASE_NOTES.md index 8f024cf23e..e4331aa69f 100644 --- a/RELEASE_NOTES.md +++ b/RELEASE_NOTES.md @@ -4,16 +4,9 @@ ## Component changes -- Cards - - update Cards style & syntax. The update requires code changes from DG consuming devs in HTML. BUT there is silent support for "old" card syntax until next major version release. Please check the documentation for more details. - - the new UI requires the introduction of new classes (.cards-cta, span.arrow, ...). Unless one of these new classes (`.cards-cta`) is present, then the old UI will be used, by checking conditionally `cards:has(.cards-cta)`. If your project does NOT support the :has() selector yet, but requires fallback support for the old UI, then add `.legacy` class to the `.cards` element. - - deprecated cards variants (.primary, .secondary, .tertiary) - - cards title text need to have the `.h4` class +- Input fields + - labels line-hieght increased ## Technical changes -- Dependencies updates (finished GH actions Node -> 20 update & others misc) - ## Design System website - -- update Playbook Profiles content diff --git a/src/less/components/form.less b/src/less/components/form.less index edc61472e9..aa5e810a62 100644 --- a/src/less/components/form.less +++ b/src/less/components/form.less @@ -235,7 +235,7 @@ legend { .form-group { label { font-size: 1.25rem; - line-height: 1.5rem; + line-height: 1.875rem; margin-bottom: 0.5rem; color: var(--brand-secondary); font-family: var(--brand-headline); From d9699e4cf970febc0d90d0e8790f53557c3cc3c0 Mon Sep 17 00:00:00 2001 From: Raphael Ferrand Date: Wed, 10 Apr 2024 10:59:03 +0200 Subject: [PATCH 2/3] SWED-2335 add mobile styles for labels --- src/less/components/form.less | 10 ++++++++-- src/less/core/typography.less | 2 ++ 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/src/less/components/form.less b/src/less/components/form.less index aa5e810a62..358f06d9e8 100644 --- 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.875rem; + 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 index 0576ecd1e2..69da626ed1 100644 --- 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; From 563ebef06b7c8682e7696b793b2b978b0ca4196c Mon Sep 17 00:00:00 2001 From: Raphael Ferrand Date: Wed, 10 Apr 2024 11:45:10 +0200 Subject: [PATCH 3/3] SWED-2335 release notes input field label --- RELEASE_NOTES.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/RELEASE_NOTES.md b/RELEASE_NOTES.md index 4ad29a8e1f..7c8beff554 100644 --- a/RELEASE_NOTES.md +++ b/RELEASE_NOTES.md @@ -6,7 +6,7 @@ - Input fields - - labels line-height increased + - 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)