feat(styles): Update forms styles

swisspost · Dec 13, 2023 · b12e236 · b12e236
1 parent b244e47
commit b12e236
Show file tree

Hide file tree

Showing 7 changed files with 88 additions and 67 deletions.
diff --git a/packages/documentation/src/stories/components/forms/input/input.stories.ts b/packages/documentation/src/stories/components/forms/input/input.stories.ts
@@ -100,10 +100,6 @@ const meta: Meta = {
     size: {
       name: 'Size',
       description: "Sets the size of the component's appearance.",
-      if: {
-        arg: 'floatingLabel',
-        truthy: false,
-      },
       control: {
         type: 'select',
         labels: {

diff --git a/packages/styles/src/components/floating-label.scss b/packages/styles/src/components/floating-label.scss
@@ -51,6 +51,7 @@
       padding-bottom: forms.$form-floating-input-padding-b;
 
       ~ label {
+        color: forms.$form-floating-label-color;
         padding-top: 0.7rem;
         max-width: calc(
           (100% * #{forms.$form-floating-label-upscale}) - #{forms.$form-floating-label-translate-x *
@@ -67,6 +68,29 @@
         padding-top: forms.$form-floating-input-padding-t * 1.33;
       }
     }
+
+    &.form-control-sm {
+      font-size: forms.$form-floating-label-font-size-placeholder-sm;
+      height: forms.$form-floating-label-height-sm;
+      min-height: forms.$form-floating-label-height-sm;
+      padding-inline: forms.$form-floating-padding-x-sm;
+
+      ~ label {
+        font-size: forms.$form-floating-label-font-size-placeholder-sm;
+        padding-top: forms.$form-floating-label-padding-t-sm;
+        padding-inline: calc(#{forms.$form-floating-padding-x-sm} - #{forms.$input-border-width});
+      }
+
+      &:focus,
+      &:not(:placeholder-shown) {
+        padding-top: forms.$form-floating-padding-y-sm * 2;
+
+        ~ label {
+          padding-top: forms.$form-floating-padding-y-sm;
+          font-size: forms.$form-floating-label-font-size-sm;
+        }
+      }
+    }
   }
 
   > .form-select {
@@ -160,7 +184,7 @@
   }
 
   > textarea.form-control {
-    padding-top: forms.$input-padding-y-lg * 1.5;
+    padding-top: forms.$input-padding-y-lg * 2;
     padding-bottom: forms.$input-padding-y-lg;
     height: auto;
 
@@ -173,7 +197,7 @@
 
     &:focus,
     &:not(:placeholder-shown) {
-      padding-top: forms.$input-padding-y-lg * 1.5;
+      padding-top: forms.$input-padding-y-lg * 2;
       padding-bottom: forms.$input-padding-y-lg;
 
       ~ label {

diff --git a/packages/styles/src/components/form-select.scss b/packages/styles/src/components/form-select.scss
@@ -10,17 +10,19 @@
 @use './../variables/components/form-select' as form-select;
 
 .form-select-rg {
-  @include forms-mixins.form-control-rg;
-}
-
-.form-select-lg {
-  background-size: form-select.$form-select-bg-size;
+  @include forms-mixins.form-rg;
 }
 
 .form-select-sm {
+  @include forms-mixins.form-sm;
   background-size: form-select.$form-select-bg-size-sm;
 }
 
+.form-select-lg {
+  @include forms-mixins.form-lg;
+  background-size: form-select.$form-select-bg-size;
+}
+
 .form-select {
   &:not(:disabled) {
     &:hover {

diff --git a/packages/styles/src/components/forms.scss b/packages/styles/src/components/forms.scss
@@ -13,7 +13,15 @@
 @use './../themes/bootstrap/forms/input-group' as bfig;
 
 .form-control-rg {
-  @include form-mixins.form-control-rg;
+  @include form-mixins.form-rg;
+}
+
+.form-control-sm {
+  @include form-mixins.form-sm;
+}
+
+.form-control-lg {
+  @include form-mixins.form-lg;
 }
 
 select.form-control-rg:not([size]):not([multiple]) {
@@ -35,11 +43,6 @@ select.form-control-rg:not([size]):not([multiple]) {
   &[type='file'] {
     position: relative;
 
-    min-height: calc(
-      (1rem * forms.$input-line-height) + (forms.$input-padding-y * 2) +
-        (forms.$input-border-width * 2)
-    );
-
     &::file-selector-button {
       display: block;
       position: absolute;
@@ -108,11 +111,6 @@ select.form-control-rg:not([size]):not([multiple]) {
     }
 
     &.form-control-sm {
-      min-height: calc(
-        (1rem * forms.$input-line-height-sm) + (forms.$input-padding-y-sm * 2) +
-          (forms.$input-border-width * 2)
-      );
-
       &::after {
         padding-inline: forms.$input-padding-y-sm;
       }
@@ -130,11 +128,6 @@ select.form-control-rg:not([size]):not([multiple]) {
     }
 
     &.form-control-lg {
-      min-height: calc(
-        (1rem * forms.$input-line-height-lg) + (forms.$input-padding-y-lg * 2) +
-          (forms.$input-border-width * 2)
-      );
-
       &::after {
         padding-inline: forms.$input-padding-y-lg;
       }

diff --git a/packages/styles/src/components/timepicker.scss b/packages/styles/src/components/timepicker.scss
@@ -76,7 +76,7 @@
   }
 
   .form-control {
-    @include form-mixins.form-control-rg;
+    @include form-mixins.form-rg;
   }
 }
 

diff --git a/packages/styles/src/mixins/_forms.scss b/packages/styles/src/mixins/_forms.scss
@@ -27,12 +27,26 @@
   background-position: calc(100% - #{form-validation.$form-feedback-icon-offset}) center;
 }
 
-@mixin form-control-rg {
+@mixin form-rg {
   padding: forms.$input-padding-y-rg forms.$input-padding-x-rg;
   font-size: type.$font-size-regular;
   line-height: forms.$input-line-height-rg;
 }
 
+@mixin form-sm {
+  font-size: type.$font-size-14;
+  line-height: forms.$input-line-height-sm;
+  height: forms.$input-height-sm;
+  min-height: forms.$input-height-sm;
+}
+
+@mixin form-lg {
+  font-size: type.$font-size-16;
+  line-height: forms.$input-line-height-lg;
+  height: forms.$input-height-lg;
+  min-height: forms.$input-height-lg;
+}
+
 @mixin focus-outline {
   outline: none;
   outline-offset: forms.$input-focus-outline-thickness;

diff --git a/packages/styles/src/variables/components/_forms.scss b/packages/styles/src/variables/components/_forms.scss
@@ -27,7 +27,7 @@ $input-padding-y-rg: button.$input-btn-padding-y-rg !default;
 $input-padding-x-rg: button.$input-btn-padding-x-rg !default;
 $input-line-height-rg: type.$line-height-copy !default;
 
-$input-padding-y-lg: spacing.$size-small-large !default;
+$input-padding-y-lg: sizing.px-to-rem(11) !default;
 $input-padding-x-lg: button.$input-btn-padding-x-lg !default;
 $input-line-height-lg: type.$line-height-copy !default;
 
@@ -60,30 +60,28 @@ $input-height-border: $input-border-width * 2 !default;
 
 $input-height-content: type.$font-size-base * $input-line-height !default;
 $input-height-inner: $input-height-content + ($input-padding-y * 2) !default;
-$input-height: calc(#{$input-height-inner} + #{$input-height-border}) !default;
+$input-height: $input-height-inner + sizing.px-to-rem($input-height-border) !default;
 
-$input-height-content-sm: type.$font-size-tiny * $input-line-height-sm !default;
-$input-height-inner-sm: $input-height-content-sm + ($input-padding-y-sm * 2) !default;
-$input-height-sm: calc(#{$input-height-inner-sm} + #{$input-height-border}) !default;
+$input-height-content-sm: type.$font-size-14 * 1 !default;
+$input-height-inner-sm: $input-height-content-sm + ($input-padding-y-sm * 2) + sizing.px-to-rem(2) !default; // + 2px approximation from Figma mockup
+$input-height-sm: $input-height-inner-sm + sizing.px-to-rem($input-height-border) !default;
 
-$form-floating-input-height-content-sm: type.$font-size-12 * $input-line-height-sm * 2 !default;
+$form-floating-input-height-content-sm: type.$font-size-14 * 1 !default;
 $form-floating-input-height-inner-sm: $form-floating-input-height-content-sm +
-  ($input-padding-y-sm * 2) !default;
-$form-floating-input-height-sm: calc(
-  #{$form-floating-input-height-inner-sm} + #{$input-height-border}
-) !default;
+  (spacing.$size-regular * 2) - sizing.px-to-rem(2) !default; // - 2px approximation from Figma mockup
+$form-floating-input-height-sm: $form-floating-input-height-inner-sm +
+  sizing.px-to-rem($input-height-border) !default;
 
 $input-height-content-rg: type.$font-size-regular * $input-line-height-rg !default;
 $input-height-inner-rg: $input-height-content-rg + ($input-padding-y-rg * 2) !default;
 $input-height-rg: calc(#{$input-height-inner-rg} + #{$input-height-border}) !default;
 
-$input-height-content-lg: type.$font-size-medium * $input-line-height-lg !default;
-$input-height-inner-lg: $input-height-content-lg + ($input-padding-y-lg * 2) !default; // Design System
-$input-height-lg: calc(#{$input-height-inner-lg} + #{$input-height-border}) !default;
+$input-height-content-lg: (type.$font-size-16 * $input-line-height-lg) - sizing.px-to-rem(2) !default; // - 2px and remove approximation in Figma
+$input-height-inner-lg: $input-height-content-lg + ($input-padding-y-lg * 2) !default;
+$input-height-lg: $input-height-inner-lg + sizing.px-to-rem($input-height-border) !default;
 
-$input-transition:
-  border-color 0.15s ease-in-out,
-  box-shadow 0.15s ease-in-out !default;
+$input-transition: border-color 0.15s ease-in-out,
+box-shadow 0.15s ease-in-out !default;
 
 $form-text-color: var(--post-contrast-color);
 $form-text-font-size: type.$font-size-tiny;
@@ -103,9 +101,8 @@ $form-range-thumb-width: 2rem !default;
 $form-range-thumb-height: $form-range-thumb-width !default;
 $form-range-thumb-bg: color.$white !default;
 $form-range-thumb-border: 2px solid color.$black !default;
-$form-range-thumb-focus-box-shadow:
-  0 0 0 1px color.$black,
-  0 0 0 0.2rem rgba(color.$gray-80, 0.25) !default;
+$form-range-thumb-focus-box-shadow: 0 0 0 1px color.$black,
+0 0 0 0.2rem rgba(color.$gray-80, 0.25) !default;
 $form-range-thumb-focus-box-shadow-width: 0.2rem; // For focus box shadow issue in Edge
 $form-range-thumb-active-bg: color.$white !default;
 $form-range-thumb-disabled-bg: $form-range-thumb-bg !default;
@@ -116,42 +113,37 @@ $form-range-input-height-ie: 6rem !default;
 
 $form-file-button-hover-bg: $input-bg;
 
-$form-floating-height: $input-height-lg;
+$form-floating-height: $input-height-lg * $input-line-height-lg;
 $form-floating-padding-x: $input-padding-x-lg;
 $form-floating-padding-y: $input-padding-y-lg;
 $form-floating-line-height: type.$line-height-copy;
 $form-floating-input-padding-t: spacing.$size-large;
 $form-floating-input-padding-b: 0;
 $form-floating-label-opacity: 1;
-$form-floating-label-height: $input-height-inner-lg;
+$form-floating-label-height: $form-floating-height;
 $form-floating-label-color: $input-placeholder-color;
 $form-floating-label-font-size: type.$font-size-bigger-regular;
 $form-floating-label-font-size-small: type.$font-size-tiny;
 $form-floating-label-scale: math.div(
-  $form-floating-label-font-size-small,
-  $form-floating-label-font-size
+    $form-floating-label-font-size-small,
+    $form-floating-label-font-size
 );
 $form-floating-label-upscale: math.div(1, $form-floating-label-scale);
-$form-floating-label-padding-t: calc(
-  #{$input-border-width} + #{$form-floating-label-height * 0.5} - #{$form-floating-label-font-size *
-    type.$line-height-copy * 0.5}
-);
+$form-floating-label-padding-t: $form-floating-label-height * 0.5 - $form-floating-label-font-size *
+  type.$line-height-copy * 0.5;
 $form-floating-label-translate-x: $form-floating-padding-x * (1 - $form-floating-label-scale);
 $form-floating-label-transform: scale($form-floating-label-scale);
 $form-floating-transition: animation.$transition-base;
-$form-floating-transition-in:
-  $form-floating-transition,
-  width 0ms list.nth(animation.$transition-base, 2);
-$form-floating-transition-out:
-  $form-floating-transition,
-  width 0ms linear;
+$form-floating-transition-in: $form-floating-transition,
+width 0ms list.nth(animation.$transition-base, 2);
+$form-floating-transition-out: $form-floating-transition,
+width 0ms linear;
 $form-floating-select-bg-size: 32px 32px;
 
 $form-floating-label-font-size-sm: type.$font-size-12;
-$form-floating-label-font-size-placeholder-sm: type.$font-size-14; // TODO: replace with input font-size after adjustment
+$form-floating-label-font-size-placeholder-sm: type.$font-size-14;
 $form-floating-padding-x-sm: $input-padding-x-sm;
 $form-floating-padding-y-sm: $input-padding-y-sm;
-$form-floating-label-height-sm: $form-floating-input-height-inner-sm;
-$form-floating-label-padding-t-sm: calc(
-  #{$input-border-width} + #{$form-floating-label-height-sm * 0.5} - #{$form-floating-label-font-size-sm}
-);
+$form-floating-label-height-sm: $form-floating-input-height-sm;
+$form-floating-label-padding-t-sm: $form-floating-label-height-sm * 0.5 -
+  $form-floating-label-font-size-sm;