feat(styles, documentation): styles update text input

.changeset/gold-rabbits-train.md

@@ -0,0 +1,6 @@
+---
+'@swisspost/design-system-documentation': patch
+'@swisspost/design-system-styles': patch
+---
+
+Removed the icon from inside form-controls (`input`, `select`, `textarea`).

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

@@ -189,19 +189,19 @@ function renderTextarea(args: Args, context: StoryContext) {
     : null;
   const contextual = [
     args.validation === 'is-valid'
-      ? html` <div class="valid-feedback">Ggranda sukceso!</div> `
+      ? html`<div class="valid-feedback">Ggranda sukceso!</div>`
       : null,
     args.validation === 'is-invalid'
-      ? html` <div class="invalid-feedback">Eraro okazis!</div> `
+      ? html`<div class="invalid-feedback">Eraro okazis!</div>`
       : null,
-    args.hint !== '' ? html` <div class="form-text">${args.hint}</div> ` : null,
+    args.hint !== '' ? html`<div class="form-text">${args.hint}</div>` : null,
   ];
   const control = html`
     <textarea
       id=${context.id}
       class=${classes}
       defaultValue=${args.value ?? nothing}
-      placeholder=${useAriaLabel ? args.label : ' '}
+      placeholder=${useAriaLabel ? args.label : ''}
       rows=${args.rows}
       ?disabled=${args.disabled}
       aria-label=${useAriaLabel ? args.label : nothing}

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

@@ -16,6 +16,8 @@
 @use './../variables/spacing';
 @use './../variables/components/forms';
 @use './../variables/components/form-validation';
+@use './../variables/animation';
+@use './../variables/color' as c;
 
 .form-floating {
   > label {
@@ -43,9 +45,15 @@
     // disable stylelint here, because the classes are coming from bs5
     @extend .form-control-lg; /* stylelint-disable-line */
 
+    @include forms-mx.placeholder {
+      opacity: 0;
+    }
+
     &:focus {
       @include forms-mx.placeholder {
         color: rgba(var(--post-contrast-color-rgb), 0.6);
+        opacity: 1;
+        transition: opacity animation.$transition-base-timing;
       }
     }
 
@@ -72,6 +80,12 @@
       }
     }
 
+    &:hover {
+      ~ label {
+        color: c.$black;
+      }
+    }
+
     &[type='file'] {
       &:focus,
       &:not(:placeholder-shown) {
@@ -98,7 +112,7 @@
       ~ 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});
+        padding-inline: forms.$form-floating-padding-x-sm;
       }
 
       &:focus,

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

@@ -26,8 +26,6 @@
 
 .form-select {
   --form-select-indicator: #{form-select.$form-select-indicator};
-  --form-select-indicator-success: #{b.escape-svg(form-select.$form-select-indicator-success)};
-  --form-select-indicator-error: #{b.escape-svg(form-select.$form-select-indicator-error)};
 
   &:focus {
     box-shadow: none; // Override bootstrap
@@ -63,62 +61,14 @@
       background-image: b.escape-svg(form-select.$form-select-indicator-disabled),
         var(--form-select-indicator), var(--bs-form-select-bg-icon, none);
     }
-
-    &.is-valid,
-    &.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;
-      }
-    }
-
-    &.is-valid {
-      background-image: var(--form-select-indicator-success), var(--form-select-indicator),
-        var(--bs-form-select-bg-icon, none);
-    }
-
-    &.is-invalid {
-      background-image: var(--form-select-indicator-error), var(--form-select-indicator),
-        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: var(--form-select-indicator-success), var(--bs-form-select-bg-icon, none);
-    }
-
-    &.is-invalid {
-      background-image: var(--form-select-indicator-error), var(--bs-form-select-bg-icon, none);
-    }
   }
 
   @include utilities.high-contrast-mode() {
     --form-select-indicator: #{b.escape-svg(form-select.$form-select-indicator-hcm-dark)};
-    --form-select-indicator-success: #{b.escape-svg(
-        form-select.$form-select-indicator-success-hcm-dark
-      )};
-    --form-select-indicator-error: #{b.escape-svg(form-select.$form-select-indicator-error-hcm-dark)};
     background-image: b.escape-svg(form-select.$form-select-indicator-hcm-dark);
 
     @media (prefers-color-scheme: light) {
       --form-select-indicator: #{b.escape-svg(form-select.$form-select-indicator-hcm-light)};
-      --form-select-indicator-success: #{b.escape-svg(
-          form-select.$form-select-indicator-success-hcm-light
-        )};
-      --form-select-indicator-error: #{b.escape-svg(
-          form-select.$form-select-indicator-error-hcm-light
-        )};
       background-image: b.escape-svg(form-select.$form-select-indicator-hcm-light);
     }
 

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

@@ -71,30 +71,6 @@
     }
   }
 
-  .form-control {
-    @include b.form-validation-state-selector($state) {
-      padding-right: b.$input-height-inner;
-      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;
-      }
-    }
-  }
-
-  textarea.form-control {
-    @include b.form-validation-state-selector($state) {
-      padding-right: b.$input-height-inner;
-      background-position: top b.$input-height-inner-quarter right b.$input-height-inner-quarter;
-    }
-  }
-
   .input-group {
     > .form-control:not(:focus),
     > .form-select:not(:focus),
@@ -145,63 +121,6 @@ post-card-control ~ .invalid-feedback {
       padding: form-validation.$form-feedback-padding-y-sm form-validation.$form-feedback-padding-x;
     }
   }
-
-  &.is-invalid,
-  &.is-valid {
-    padding-right: spacing.$size-small-huge; // For deprecated form-control-rg
-    background-repeat: no-repeat;
-    background-size: forms.$form-bg-size; // Duplicated rule in form-select for arrow size.
-    background-position: right b.$input-height-inner-quarter center;
-
-    &.form-select-sm,
-    &.form-control-sm {
-      padding-right: spacing.$size-bigger-big; // Included in bootstrap and prevent native icon (e.g. with input[type=date]) to stack over success icon
-      background-size: forms.$form-bg-size-sm; // Add space between background icons (ours and the one from bootstrap). Duplicated rule in form-select for arrow size.
-    }
-
-    &.form-select-lg,
-    &.form-control-lg {
-      padding-right: spacing.$size-small-huge; // Included in bootstrap and prevent native icon (e.g. with input[type=date]) to stack over success icon
-      background-size: forms.$form-bg-size; // Add space between background icons (ours and the one from bootstrap). Duplicated rule in form-select for arrow size.
-    }
-  }
-}
-
-textarea.form-control {
-  &.is-invalid,
-  &.is-valid {
-    background-position: right spacing.$size-micro top spacing.$size-mini;
-
-    &.form-control-sm {
-      background-position: right spacing.$size-micro top spacing.$size-mini;
-    }
-  }
-}
-
-.form-control:not([type='file']) {
-  &.is-invalid {
-    background-image: b.escape-svg(form-validation.$form-feedback-icon-invalid);
-
-    @include utilities-mx.high-contrast-mode() {
-      background-image: b.escape-svg(form-validation.$form-feedback-icon-invalid-hcm-dark);
-
-      @media (prefers-color-scheme: light) {
-        background-image: b.escape-svg(form-validation.$form-feedback-icon-invalid-hcm-light);
-      }
-    }
-  }
-
-  &.is-valid {
-    background-image: b.escape-svg(form-validation.$form-feedback-icon-valid);
-
-    @include utilities-mx.high-contrast-mode() {
-      background-image: b.escape-svg(form-validation.$form-feedback-icon-valid-hcm-dark);
-
-      @media (prefers-color-scheme: light) {
-        background-image: b.escape-svg(form-validation.$form-feedback-icon-valid-hcm-light);
-      }
-    }
-  }
 }
 
 .form-check-input {

packages/styles/src/components/forms.scss

@@ -6,6 +6,7 @@
 @use './../variables/components/forms';
 @use './../variables/type';
 @use './../variables/spacing';
+@use './../variables/color';
 
 @use './../functions/sizing';
 
@@ -85,25 +86,17 @@ select.form-control-rg:not([size]):not([multiple]) {
     }
 
     &:hover {
+      border-color: color.$black;
       @include utilities.high-contrast-mode {
         border-color: Highlight;
       }
     }
   }
 
-  &:disabled {
-    color: forms.$input-disabled-border-color;
-    border: forms.$input-disabled-border-style;
-
+  @include utilities.disabled-style {
     ~ .form-text {
       color: var(--post-gray-60);
     }
-
-    @include utilities.high-contrast-mode {
-      border-color: GrayText !important;
-      background-color: Field !important;
-      color: GrayText;
-    }
   }
 
   &[readonly]:not(:disabled) {

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

@@ -11,11 +11,3 @@ $form-select-indicator: url('#{icons.get-colored-svg-url('2113', $form-select-in
 $form-select-indicator-disabled: url('#{icons.get-colored-svg-url('2113', $form-select-disabled-border-color)}') !default;
 $form-select-indicator-hcm-dark: url('#{icons.get-colored-svg-url('2113', color.$white)}') !default;
 $form-select-indicator-hcm-light: url('#{icons.get-colored-svg-url('2113', color.$black)}') !default;
-
-$form-select-indicator-success: url('#{icons.get-colored-svg-url('2105', color.$success)}') !default;
-$form-select-indicator-success-hcm-dark: url('#{icons.get-colored-svg-url('2105', color.$white)}') !default;
-$form-select-indicator-success-hcm-light: url('#{icons.get-colored-svg-url('2105', color.$black)}') !default;
-
-$form-select-indicator-error: url('#{icons.get-colored-svg-url('2104', color.$error)}') !default;
-$form-select-indicator-error-hcm-dark: url('#{icons.get-colored-svg-url('2104', color.$white)}') !default;
-$form-select-indicator-error-hcm-light: url('#{icons.get-colored-svg-url('2104', color.$black)}') !default;