feat(styles): Update form-control and form-select sizes

.changeset/grumpy-pianos-dress.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-styles': patch
+---
+
+Updated `form-control` and `form-select` sizes and added support for floating label small size variant.

packages/documentation/src/stories/components/forms/input/input.snapshot.stories.ts

@@ -20,6 +20,10 @@ function renderInputSnapshot(_args: Args, context: StoryContext) {
       label: `Label - with Value`,
       value: 'Lorem Ipsum',
     },
+    {
+      label: `Label - Floating label`,
+      floatingLabel: true,
+    },
   ];
   return html`
     <div class="d-flex flex-wrap align-items-start gap-regular">

packages/documentation/src/stories/components/forms/input/input.stories.ts

@@ -20,7 +20,7 @@ const meta: Meta = {
     hiddenLabel: false,
     placeholder: 'Placeholder',
     type: 'text',
-    size: 'null',
+    size: 'form-control-lg',
     hint: 'Hintus textus elare volare cantare hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.',
     disabled: false,
     validation: 'null',
@@ -103,10 +103,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: {

packages/styles/src/components/floating-label.scss

@@ -52,6 +52,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 *
@@ -68,6 +69,38 @@
         padding-top: forms.$form-floating-input-padding-t * 1.33;
       }
     }
+
+    &.form-control-sm {
+      &[type='date']::-webkit-calendar-picker-indicator {
+        margin-top: -(spacing.$size-small-regular);
+      }
+      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-control-lg {
+      &[type='date']::-webkit-calendar-picker-indicator {
+        margin-top: -(spacing.$size-small-large);
+      }
+    }
   }
 
   > .form-select {
@@ -121,7 +154,12 @@
             2} - #{forms.$form-floating-padding-x * forms.$form-floating-label-upscale}
         );
         height: auto;
-        background: forms.$input-bg;
+      }
+
+      &:not(:disabled) {
+        ~ label {
+          background: forms.$input-bg;
+        }
       }
 
       &:empty {
@@ -161,7 +199,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;
 
@@ -174,7 +212,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 {

packages/styles/src/components/form-select.scss

@@ -10,50 +10,74 @@
 @use './../variables/components/form-select' as form-select;
 
 .form-select-rg {
-  @include forms-mixins.form-control-rg;
+  @include forms-mixins.form-rg;
+  background-size: forms.$form-bg-size;
 }
 
-.form-select-lg {
-  background-size: form-select.$form-select-bg-size;
+.form-select-sm {
+  @include forms-mixins.form-sm;
+  background-size: forms.$form-bg-size-sm;
 }
 
-.form-select-sm {
-  background-size: form-select.$form-select-bg-size-sm;
+.form-select-lg {
+  @include forms-mixins.form-lg;
+  background-size: forms.$form-bg-size;
 }
 
 .form-select {
+  background-size: forms.$form-bg-size; // Support deprecated medium size
+
   &:not(:disabled) {
     &:hover {
       border-color: var(--post-contrast-color);
     }
   }
 
-  &.is-valid,
-  &.is-invalid {
-    background-position:
-      right b.$form-select-padding-x * 2.5 center,
-      b.$form-select-bg-position;
+  &:not([multiple]) {
+    &:disabled {
+      background-image: b.escape-svg(form-select.$form-select-indicator-disabled),
+        var(--bs-form-select-bg-img), var(--bs-form-select-bg-icon, none);
+    }
 
-    &.form-select-lg {
+    &.is-valid,
+    &.is-invalid {
       background-position:
-        right b.$form-select-padding-x * 3 center,
+        right b.$form-select-padding-x * 2.5 center,
         b.$form-select-bg-position;
+
+      &.form-select-lg {
+        background-position:
+          right b.$form-select-padding-x * 3 center,
+          b.$form-select-bg-position;
+      }
     }
-  }
 
-  &:disabled {
-    background-image: b.escape-svg(form-select.$form-select-indicator-disabled),
-      var(--bs-form-select-bg-img), var(--bs-form-select-bg-icon, none);
-  }
+    &.is-valid {
+      background-image: b.escape-svg(form-select.$form-select-indicator-success),
+        var(--bs-form-select-bg-img), var(--bs-form-select-bg-icon, none);
+    }
 
-  &.is-valid {
-    background-image: b.escape-svg(form-select.$form-select-indicator-success),
-      var(--bs-form-select-bg-img), var(--bs-form-select-bg-icon, none);
+    &.is-invalid {
+      background-image: b.escape-svg(form-select.$form-select-indicator-error),
+        var(--bs-form-select-bg-img), var(--bs-form-select-bg-icon, none);
+    }
   }
 
-  &.is-invalid {
-    background-image: b.escape-svg(form-select.$form-select-indicator-error),
-      var(--bs-form-select-bg-img), var(--bs-form-select-bg-icon, none);
+  &[multiple] {
+    &.is-valid,
+    &.is-invalid {
+      background-position: right b.$form-select-padding-x * 1.5 center;
+    }
+
+    &.is-valid {
+      background-image: b.escape-svg(form-select.$form-select-indicator-success),
+        var(--bs-form-select-bg-icon, none);
+    }
+
+    &.is-invalid {
+      background-image: b.escape-svg(form-select.$form-select-indicator-error),
+        var(--bs-form-select-bg-icon, none);
+    }
   }
 
   @include utilities.high-contrast-mode() {

packages/styles/src/components/form-validation.scss

@@ -61,6 +61,14 @@
       background-repeat: no-repeat;
       background-position: right b.$input-height-inner-quarter center;
       background-size: form-validation.$form-feedback-icon-size;
+
+      &.form-control-sm {
+        background-size: forms.$form-bg-size-sm;
+      }
+
+      &.form-control-lg {
+        background-size: forms.$form-bg-size;
+      }
     }
   }
 

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;
       }

packages/styles/src/components/timepicker.scss

@@ -76,7 +76,7 @@
   }
 
   .form-control {
-    @include form-mixins.form-control-rg;
+    @include form-mixins.form-rg;
   }
 }
 

packages/styles/src/mixins/_forms.scss

@@ -27,12 +27,28 @@
   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;
+  padding-block: forms.$input-padding-y-sm;
+  padding-inline: forms.$input-padding-x-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;

packages/styles/src/variables/_type.scss

@@ -41,6 +41,7 @@ $font-size-40: sizing.px-to-rem(40px);
 $font-size-48: sizing.px-to-rem(48px);
 $font-size-56: sizing.px-to-rem(56px);
 
+$line-height-sm: 1;
 $line-height-copy: 1.5;
 $line-height-heading: 1.2;
 

packages/styles/src/variables/components/_button.scss

@@ -19,7 +19,7 @@ $input-btn-padding-x: spacing.$size-small-large - $input-btn-border-width-rem !d
 $input-btn-line-height: type.$line-height-copy !default;
 
 $input-btn-padding-y-sm: spacing.$size-mini - $input-btn-border-width-rem !default;
-$input-btn-padding-x-sm: spacing.$size-regular - $input-btn-border-width-rem !default;
+$input-btn-padding-x-sm: spacing.$size-small-regular !default;
 $input-btn-line-height-sm: type.$line-height-copy !default;
 
 $input-btn-padding-y-rg: spacing.$size-small-regular - $input-btn-border-width-rem !default;

packages/styles/src/variables/components/_form-select.scss

@@ -7,8 +7,6 @@ $form-select-disabled-color: forms.$input-disabled-color;
 $form-select-disabled-bg: forms.$input-disabled-bg;
 $form-select-disabled-border-color: forms.$input-disabled-border-color;
 $form-select-indicator-color: color.$black;
-$form-select-bg-size: 32px 32px !default;
-$form-select-bg-size-sm: 24px 24px !default;
 $_form-select-indicator-icon: icons.get-colored-svg-url('2113', $form-select-indicator-color);
 $form-select-indicator: url($_form-select-indicator-icon) !default;
 $form-select-indicator-disabled: url(icons.get-colored-svg-url(