feat(styles, docs): Update select styles (#2312)

.changeset/curvy-toys-stare.md

@@ -0,0 +1,7 @@
+---
+'@swisspost/design-system-documentation': patch
+'@swisspost/design-system-styles': patch
+---
+
+- Updated select styles to match design.
+- Added small variant to floating label select.

packages/documentation/src/stories/components/forms/select/select.docs.mdx

@@ -60,7 +60,7 @@ The size can be adjusted, by simply adding one of the following four classes:
 
 ### Validation
 
-Simply add the classes `is-valid` or `is-invalid` to the `<select>` element to show it in the expected state.<br/>
+Simply add the classes `is-valid` (with or without `success` class) or `is-invalid` to the `<select>` element to show it in the expected state.<br/>
 When the component has been validated, don't forget to add a `<p className="valid-feedback">...</p>` or `<p className="invalid-feedback">...</p>` element after the `select` element to explain what went wrong. This enables the user to correct the mistake.
 
 <Canvas of={SelectStories.Validation} />

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

@@ -30,10 +30,17 @@ export const Select: Story = {
         disabled: [false, true],
         validation: context.argTypes.validation.options,
       }),
+      ...bombArgs({
+        size: context.argTypes.size.options,
+        success: [false, true],
+        validation: context.argTypes.validation.options.filter((option: string) => option !== 'is-invalid'),
+      }),
     ]
       // remove disabled & validated examples
       .filter((args: Args) => !(args.disabled && args.validation !== 'null'));
 
+    console.log('bombArg', bombArgsGeneratedDefault);
+
     //Arguments for Multiple Version
     const bombArgsGeneratedMultiple = [
       ...bombArgs({

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

@@ -27,6 +27,7 @@ const meta: Meta = {
     hint: 'Hintus textus elare volare cantare hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.',
     disabled: false,
     validation: 'null',
+    success: false,
   },
   argTypes: {
     label: {
@@ -77,10 +78,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: {
@@ -166,11 +163,29 @@ const meta: Meta = {
           'is-invalid': 'Invalid',
         },
       },
+      if: {
+        arg: 'disabled',
+        truthy: false,
+      },
       options: ['null', 'is-valid', 'is-invalid'],
       table: {
         category: 'States',
       },
     },
+    success: {
+      name: 'Success',
+      description: 'Controls the success state appearance of the component.',
+      control: {
+        type: 'boolean',
+      },
+      if: {
+        arg: 'validation',
+        neq: 'is-invalid',
+      },
+      table: {
+        category: 'States',
+      },
+    },
   },
 };
 
@@ -187,6 +202,7 @@ const Template: Story = {
       args.size,
       args.validation,
       args.floatingLabelPlaceholder && !args.value ? 'form-select-empty' : null,
+      args.success && 'success',
     ]
       .filter(c => c && c !== 'null')
       .join(' ');
@@ -247,7 +263,7 @@ const Template: Story = {
           options[0],
           options.slice(1).map(
             (option, index) => html`
-              <option value="valoro_${index + 1}" ?selected=${index === args.selectedOption - 2}>
+              <option value="valoro_${index + 1}" ?selected="${index === args.selectedOption - 2}">
                 Opcion ${index + 2}
               </option>
             `,

packages/documentation/src/utils/inputComponentsGetCombinations.ts

@@ -24,10 +24,19 @@ export const COMBINATIONS = [
     label: `${SHORT_LABEL} - Disabled`,
     disabled: true,
   },
+  {
+    label: `${SHORT_LABEL} - Success`,
+    success: true,
+  },
   {
     label: `${SHORT_LABEL} - Valid`,
     validation: 'is-valid',
   },
+  {
+    label: `${SHORT_LABEL} - Valid with success`,
+    validation: 'is-valid',
+    success: true,
+  },
   {
     label: `${SHORT_LABEL} - Invalid`,
     validation: 'is-invalid',
@@ -37,7 +46,10 @@ export const COMBINATIONS = [
 export function getCombinations(
   argumentName: string,
   argumentValues: Array<unknown>,
-  combinations: Array<{ label: string; [propName: string]: any }>,
+  combinations: Array<{
+    label: string;
+    [propName: string]: any;
+  }>,
 ) {
   let result: Array<Object> = [];
   for (const argumentValue of argumentValues) {

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

@@ -75,9 +75,9 @@
 
     padding-top: forms.$form-floating-input-padding-t;
     padding-bottom: forms.$form-floating-input-padding-b;
-    background-size: forms.$form-floating-select-bg-size;
 
     ~ 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 *
@@ -87,14 +87,19 @@
       transition: forms.$form-floating-transition-in;
     }
 
+    &:disabled {
+      ~ label {
+        color: forms.$input-disabled-color;
+      }
+    }
+
     // TODO: replace with :has
     &:empty,
     &.form-select-empty {
       padding-top: forms.$form-floating-input-padding-t;
       padding-bottom: forms.$form-floating-input-padding-b;
 
       ~ label {
-        color: forms.$form-floating-label-color;
         padding-top: forms.$form-floating-label-padding-t;
         max-width: calc(100% - (#{forms.$input-border-width * 2}));
         transform: none;
@@ -129,6 +134,29 @@
         }
       }
     }
+
+    &.form-select-sm {
+      padding-inline: forms.$form-floating-padding-x-sm;
+      padding-top: forms.$form-floating-padding-y-sm * 2;
+      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;
+
+      ~ label {
+        padding-top: forms.$form-floating-padding-y-sm;
+        font-size: forms.$form-floating-label-font-size-sm;
+        padding-inline: calc(#{forms.$form-floating-padding-x-sm} - #{forms.$input-border-width});
+      }
+
+      // TODO: replace with :has
+      &:empty,
+      &.form-select-empty {
+        ~ label {
+          padding-top: forms.$form-floating-label-padding-t-sm;
+          font-size: forms.$form-floating-label-font-size-placeholder-sm;
+        }
+      }
+    }
   }
 
   > textarea.form-control {

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

@@ -1,20 +1,64 @@
 @forward './../variables/options';
 
 @use './../lic/bootstrap-license';
-@use './../themes/bootstrap/core' as *;
+@use './../themes/bootstrap/core' as b;
 @use './../themes/bootstrap/forms/form-select' as bffs;
 @use './../mixins/forms' as forms-mixins;
 @use './../mixins/utilities';
 
 @use './../variables/components/forms';
+@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;
+}
+
+.form-select-sm {
+  background-size: form-select.$form-select-bg-size-sm;
+}
+
 .form-select {
+  &:not(:disabled) {
+    &:hover {
+      border-color: var(--post-contrast-color);
+    }
+  }
+
+  &.success,
+  &.is-invalid {
+    background-position:
+      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);
+  }
+
+  &.success {
+    border-color: var(--post-success-green);
+    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);
+  }
+
   @include utilities.high-contrast-mode() {
-    background-image: escape-svg($form-select-indicator-hcm);
+    background-image: b.escape-svg(form-select.$form-select-indicator-hcm);
     background-color: Field;
     border-color: FieldText;
     color: FieldText;

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

@@ -7,7 +7,17 @@ $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: 24px 24px !default;
+$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(
+  '2113',
+  $form-select-disabled-color
+)) !default;
+$form-select-indicator-success: url(icons.get-colored-svg-url(
+  '2105',
+  color.$success-green
+)) !default;
+$form-select-indicator-error: url(icons.get-colored-svg-url('2104', color.$error-red)) !default;
 $form-select-indicator-hcm: url(icons.get-colored-svg-url('2113', color.$white)) !default;

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

@@ -13,7 +13,7 @@
 // Forms
 
 $form-label-margin-bottom: 0.5rem !default;
-$form-label-color: rgba(var(--post-contrast-color-rgb), 0.8) !default;
+$form-label-color: var(--post-contrast-color) !default;
 
 $input-padding-y: button.$input-btn-padding-y !default;
 $input-padding-x: button.$input-btn-padding-x !default;
@@ -33,8 +33,8 @@ $input-line-height-lg: type.$line-height-copy !default;
 
 $input-bg: color.$white !default;
 $input-disabled-bg: rgba(var(--post-contrast-color-inverted-rgb), 0.6) !default;
-$input-disabled-color: color.$gray-60; // Design System only
-$input-disabled-border-color: color.$gray-20; // Design System only
+$input-disabled-color: color.$gray-40; // Design System only
+$input-disabled-border-color: color.$gray-40; // Design System only
 
 $input-color: color.$black !default;
 $input-border-color: color.$gray-60 !default;
@@ -66,6 +66,13 @@ $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;
 
+$form-floating-input-height-content-sm: type.$font-size-12 * $input-line-height-sm * 2 !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;
+
 $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;
@@ -74,7 +81,9 @@ $input-height-content-lg: type.$font-size-medium * $input-line-height-lg !defaul
 $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-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;
@@ -94,7 +103,9 @@ $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;
@@ -128,7 +139,19 @@ $form-floating-label-padding-t: calc(
 $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,
+$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-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-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}
+);