fix(styles): floating labels should be truncated (#1155)

swisspost · Feb 23, 2023 · 5a73a35 · 5a73a35
1 parent a5f6148
commit 5a73a35
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 6 deletions.
diff --git a/.changeset/happy-scissors-turn.md b/.changeset/happy-scissors-turn.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-styles': patch
+---
+
+Fixed an issue with floating labels on input fields that prevented the label from being truncated correctly if it was overflowing the text box
diff --git a/packages/internet-header/package.json b/packages/internet-header/package.json
@@ -30,7 +30,7 @@
   ],
   "scripts": {
     "start": "stencil build --docs --watch",
-    "dev": "stencil build --watch --serve --docs",
+    "dev": "stencil build --watch --serve --docs --dev",
     "build": "stencil build --docs",
     "test": "npm run unit",
     "unit": "jest",

diff --git a/packages/styles/src/components/floating-label.scss b/packages/styles/src/components/floating-label.scss
@@ -1,4 +1,5 @@
 @use 'sass:color';
+@use 'sass:math';
 
 @forward './../variables/options';
 
@@ -7,17 +8,21 @@
 @use './../mixins/forms' as forms-mx;
 @use './../mixins/utilities' as utilities-mx;
 
+@use './../variables/type';
 @use './../variables/components/forms';
 @use './../variables/components/form-feedback';
 
 .form-floating {
   > label {
-    display: flex;
-    align-items: center;
+    display: block;
     top: forms.$input-border-width;
     left: forms.$input-border-width;
     margin: 0;
-    padding: forms.$form-floating-padding-y forms.$form-floating-padding-x;
+    padding-inline: forms.$form-floating-padding-x;
+    padding-block: calc(
+      #{forms.$input-border-width} + #{forms.$form-floating-label-height * 0.5} - #{forms.$form-floating-label-font-size *
+        type.$line-height-base * 0.5}
+    );
     height: forms.$form-floating-label-height;
     border: 0;
     color: forms.$form-floating-label-color;
@@ -50,7 +55,7 @@
       }
 
       ~ label {
-        padding-top: 0;
+        padding-top: 0.7rem;
         max-width: calc(
           (100% * forms.$form-floating-label-upscale) -
             (forms.$form-floating-label-translate-x * forms.$form-floating-label-upscale * 2) -
@@ -69,7 +74,7 @@
     padding-bottom: forms.$form-floating-input-padding-b;
 
     ~ label {
-      padding-top: 0;
+      padding-top: 0.7rem;
       max-width: calc(
         (100% * forms.$form-floating-label-upscale) -
           (forms.$form-floating-label-translate-x * forms.$form-floating-label-upscale * 2) -