Ajustement espacement input + message d'erreur pour validation (#109)

Signed-off-by: Alexis Boulerice <[email protected]>
VilledeMontreal · May 14, 2024 · b68e2ec · b68e2ec
1 parent 45b428a
commit b68e2ec
Show file tree

Hide file tree

Showing 8 changed files with 130 additions and 184 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,7 +4,15 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
-## [5.3.0] - Unreleased
+## [5.4.0] - Unreleased
+
+### Changed
+- Components - Entree de données: Ajustement espacement input + message d'erreur.
+
+### Fixed
+- PL: Exemple de validation de formulaire client-side avec .was-validated
+
+## [5.3.0] - 2024-04-08
 
 ### Changed
 - Components Tuile: Modification Tuile en vedette (Espacement, breakpoint)

diff --git a/...s/entree-de-donnees/04-fichier~error.json → .../entree-de-donnees/04-fichier~erreur.json b/...s/entree-de-donnees/04-fichier~error.json → .../entree-de-donnees/04-fichier~erreur.json
diff --git a/source/_patterns/02-components/entree-de-donnees/_input-text.mustache b/source/_patterns/02-components/entree-de-donnees/_input-text.mustache
@@ -22,10 +22,10 @@
     <span id="{{id}}" class="form-text">{{ text }}</span>
   {{/ formGroupInputCounter}}
   {{# formGroupInputError}}
-    <div class="invalid-feedback" id={{id}}>
+    <div class="invalid-feedback" id={{formGroupInputError.id}}>
         <span class="icon icon-exclamation icon-xs" aria-hidden="true"></span>
         <span class="sr-only">Erreur</span>
-        {{ text }}
+        {{ formGroupInputError.text }}
     </div>
   {{/ formGroupInputError}}
   {{# formGroupProgress}}

diff --git a/source/_patterns/02-components/messages/20-feedback-form.mustache b/source/_patterns/02-components/messages/20-feedback-form.mustache
@@ -23,8 +23,10 @@
       <div class="form-group d-none">
         <label for="feedback-comment">Avez-vous des commentaires à nous partager?</label>
         <div id="feedback-comment-help" class="form-text">Évitez d’inscrire des renseignements personnels. Nous n’envoyons aucune réponse, mais nous prenons vos commentaires en considération.</div>
-        <textarea class="form-control" name="Field14" id="feedback-comment" aria-described-by="feedback-comment-help"></textarea>
-        <div class="invalid-feedback">
+        <textarea class="form-control" name="Field14" id="feedback-comment" aria-described-by="feedback-comment-help feedback-comment-error"></textarea>
+        <div class="invalid-feedback" id="feedback-comment-error">
+          <span class="icon icon-exclamation icon-xs" aria-hidden="true"></span>
+          <span class="sr-only">Erreur</span>
           Message d'erreur personnalisé
         </div>
       </div>

diff --git a/source/_patterns/03-patterns/04-form/20-validation-feedback.mustache b/source/_patterns/03-patterns/04-form/20-validation-feedback.mustache
@@ -7,8 +7,8 @@
         "formGroupInputPlaceholder": true,
         "formGroupInputPlaceholder.text": "Prénom",
         "formGroupInputRequired": true,
-        "formGroupFeedbackIcon": true,
         "formGroupInputError": true,
+        "formGroupInputError.id": "validationFeedbackPrenom",
         "formGroupInputError.text": "Veuillez saisir un prénom valide.")
       }}
     </div>
@@ -19,8 +19,8 @@
         "formGroupInputPlaceholder": true,
         "formGroupInputPlaceholder.text": "Nom",
         "formGroupInputRequired": true,
-        "formGroupFeedbackIcon": true,
         "formGroupInputError": true,
+        "formGroupInputError.id": "validationFeedbackNom",
         "formGroupInputError.text": "Veuillez saisir un nom valide.")
       }}
     </div>
@@ -31,8 +31,8 @@
         "formGroupInputPlaceholder": true,
         "formGroupInputPlaceholder.text": "Username",
         "formGroupInputRequired": true,
-        "formGroupFeedbackIcon": true,
         "formGroupInputError": true,
+        "formGroupInputError.id": "validationFeedbackUsername",
         "formGroupInputError.text": "Veuillez saisir un username valide.")
       }}
     </div>
@@ -45,8 +45,8 @@
         "formGroupInputPlaceholder": true,
         "formGroupInputPlaceholder.text": "Montréal",
         "formGroupInputRequired": true,
-        "formGroupFeedbackIcon": true,
         "formGroupInputError": true,
+        "formGroupInputError.id": "validationFeedbackVille",
         "formGroupInputError.text": "Veuillez saisir une ville valide.")
       }}
     </div>
@@ -57,8 +57,8 @@
         "formGroupInputPlaceholder": true,
         "formGroupInputPlaceholder.text": "Québec",
         "formGroupInputRequired": true,
-        "formGroupFeedbackIcon": true,
         "formGroupInputError": true,
+        "formGroupInputError.id": "validationFeedbackProvince",
         "formGroupInputError.text": "Veuillez saisir une province valide.")
       }}
     </div>
@@ -69,8 +69,8 @@
         "formGroupInputPlaceholder": true,
         "formGroupInputPlaceholder.text": "H1X 1X0",
         "formGroupInputRequired": true,
-        "formGroupFeedbackIcon": true,
         "formGroupInputError": true,
+        "formGroupInputError.id": "validationFeedbackPostalCode",
         "formGroupInputError.text": "Veuillez saisir un code postale valide.")
       }}
     </div>
@@ -79,9 +79,11 @@
     <div class="custom-control custom-checkbox">
       <input type="checkbox" class="custom-control-input" id="confirmation-vld-chk-card01" value="confirmation-vld-chk-card01" required>
       <label class="custom-control-label" for="confirmation-vld-chk-card01">Accepter les termes et conditions</label>
-      <div class="invalid-feedback">
-        Message d'erreur personnalisé.
-      </div>
+    </div>
+    <div class="invalid-feedback" id="validationfeedbackAccepTerm">
+      <span class="icon icon-exclamation icon-xs" aria-hidden="true"></span>
+      <span class="sr-only">Erreur</span>
+      Message d'erreur personnalisé.
     </div>
   </div>
 

diff --git a/source/css/scss/_forms.scss b/source/css/scss/_forms.scss
@@ -73,20 +73,6 @@ legend,
     }
   }
 }
-.valid-feedback,
-.invalid-feedback {
-  font-weight: $font-weight-bold;
-  line-height: $line-height-sm;
-  font-size: $font-size-sm;
-  margin-top: .5rem;
-  color: $neutral-primary;
-
-  // DEPRECATED
-  // We now conform to bootstrap validation
-  &.feedback-icon {
-    display: none;
-  }
-}
 
 .form-control-sm {
   height: $input-height-sm;
@@ -123,18 +109,14 @@ legend,
     margin-top: 0;
     margin-bottom: 0;
   }
-  &:has(.is-invalid) {
-      .invalid-feedback {
-        display: flex;
-        color: $negative-dark;
-        align-items: start;
-        margin-top: 0.5rem;
-        .icon {
-          @include icon-color($negative-dark);
-          margin-top: .125rem;
-          margin-right: .25rem;
-        }
-      }
+
+  // Handle spacing for invadid-feedback for custom-control
+  .custom-control ~ .invalid-feedback {
+    margin-top: .5rem;
+  }
+  // Handle spacing for invalid-feedback for custom-control-card
+  .custom-control-card ~ .invalid-feedback {
+    margin-top: -.5rem;
   }
 }
 
@@ -966,4 +948,4 @@ legend,
       padding-bottom: 0;
     }
   }
-}
+}