✨ feat(select, input): ajout de la bordure en état erreur / succés / …

…info [DS-3308] (#635) Actuellement la bordure gauche montrant l'état d'erreur/succès/info n'est appliqué que dans le cas d'un groupe de champ en erreur via les modificateur .fr-fieldset--error, .fr-fieldset--valid, .fr-fieldset--info Afin d'être ISO avec l'UI nous rajoutons cet élément visuel sur : - les champs seuls (.fr-input-group) : - `.fr-input-group--error` - `.fr-input-group--valid` - `.fr-input-group--info` - les selects (.fr-select-group) - `.fr-select-group--error` - `.fr-select-group--valid` - `.fr-select-group--info`
GouvernementFR · Jun 26, 2023 · aa6761b · aa6761b
1 parent c9fcec6
commit aa6761b
Show file tree

Hide file tree

Showing 4 changed files with 64 additions and 0 deletions.
diff --git a/src/component/input/input-base/style/_module.scss b/src/component/input/input-base/style/_module.scss
@@ -86,11 +86,25 @@
 }
 
 #{ns(input-group)} {
+  @include relative;
+
   #{ns(message)} {
     &:first-child {
       @include margin-top(2v);
     }
   }
+
+  &--valid,
+  &--error,
+  &--info {
+    @include before('', block) {
+      pointer-events: none;
+      @include absolute(0, -3v, 0, -3v);
+      background-repeat: no-repeat;
+      background-position: 0 0;
+      background-size: spacing.space(0.5v 100%);
+    }
+  }
 }
 
 textarea#{ns(input)} {

diff --git a/src/component/input/input-base/style/_scheme.scss b/src/component/input/input-base/style/_scheme.scss
@@ -48,6 +48,24 @@
     &-group--error & {
       @include color.box-shadow(plain error, (legacy:$legacy), bottom-2-in);
     }
+
+    &-group--error {
+      @include before {
+        @include color.background-image(border plain error, (legacy:$legacy));
+      }
+    }
+
+    &-group--valid {
+      @include before {
+        @include color.background-image(border plain success, (legacy:$legacy));
+      }
+    }
+
+    &-group--info {
+      @include before {
+        @include color.background-image(border plain info, (legacy:$legacy));
+      }
+    }
   }
 
   #{ns(input-wrap--addon)} {

diff --git a/src/component/select/style/_module.scss b/src/component/select/style/_module.scss
@@ -20,9 +20,23 @@
 }
 
 #{ns(select-group)} {
+  @include relative;
+
   #{ns(message)} {
     &:first-child {
       @include margin-top(2v);
     }
   }
+
+  &--valid,
+  &--error,
+  &--info {
+    @include before('', block) {
+      pointer-events: none;
+      @include absolute(0, -3v, 0, -3v);
+      background-repeat: no-repeat;
+      background-position: 0 0;
+      background-size: spacing.space(0.5v 100%);
+    }
+  }
 }
diff --git a/src/component/select/style/_scheme.scss b/src/component/select/style/_scheme.scss
@@ -24,6 +24,24 @@
       @include color.box-shadow(plain error, (legacy:$legacy), bottom-2-in);
     }
 
+    &-group--error {
+      @include before {
+        @include color.background-image(border plain error, (legacy:$legacy));
+      }
+    }
+
+    &-group--valid {
+      @include before {
+        @include color.background-image(border plain success, (legacy:$legacy));
+      }
+    }
+
+    &-group--info {
+      @include before {
+        @include color.background-image(border plain info, (legacy:$legacy));
+      }
+    }
+
     /**
     * Mixin pour gérer l'état disabled
     */