diff --git a/CHANGELOG.md b/CHANGELOG.md index 73217c863..b6fedbfcb 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,11 @@ 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.2.0] - 2024-04-11 + +### Changed +- Mise à jour des icônes pour les champs de saisie. +- Masquage des icônes pour les erreurs d'input et ajout de l'icône dans le message invalid-feedback. ## [5.1.0] - 2024-03-22 diff --git a/package-lock.json b/package-lock.json index ec68c2c96..e11f42599 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@villedemontreal/hochelaga", - "version": "5.1.0", + "version": "5.2.0", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@villedemontreal/hochelaga", - "version": "5.1.0", + "version": "5.2.0", "license": "MIT", "dependencies": { "bootstrap": "^4.6.2", diff --git a/package.json b/package.json index c6dbe4162..394e5978a 100755 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "@villedemontreal/hochelaga", "description": "La boite à outils web", - "version": "5.1.0", + "version": "5.2.0", "publishConfig": { "access": "public" }, diff --git a/source/_patterns/02-components/entree-de-donnees/01-inputs.json b/source/_patterns/02-components/entree-de-donnees/01-inputs.json index d8ff48208..df3cd7187 100644 --- a/source/_patterns/02-components/entree-de-donnees/01-inputs.json +++ b/source/_patterns/02-components/entree-de-donnees/01-inputs.json @@ -6,6 +6,7 @@ "formGroupInputRequired": true, "formGroupInputLabel": "Libellé", "formGroupPopover": true, + "formGroupBtnClear": true, "formGroupInputPlaceholder": { "text": "Placeholder" }, @@ -19,20 +20,22 @@ } } ], - "inputTextSizeError": [ + "inputTextSizeValidation": [ { "formGroupClass": "required", "formGroupInputID": "form-control-default-error-one", "formGroupInputClass": "is-invalid", "formGroupInputRequired": true, - "formGroupInputLabel": "En erreur", + "formGroupBtnClear": true, + "formGroupInputLabel": "En erreur input vide", "formGroupInputPlaceholder": { "text": "Placeholder" }, "formGroupInputHelpText": false, "formGroupInputError": { "id": "input-text-error-id", - "text": "Texte d'erreur" + "text": "Texte d'erreur", + "formAriaInputError": true } } ], @@ -44,7 +47,8 @@ "formGroupInputRequired": false, "formGroupInputPlaceholder": "désactivé", "formGroupInputHelpText": false, - "formGroupInputState": "disabled" + "formGroupInputState": "disabled", + "formGroupBtnClear": false }, { "formGroupClass": false, @@ -54,7 +58,8 @@ "formGroupInputRequired": false, "formGroupInputPlaceholder": "read-only", "formGroupInputHelpText": false, - "formGroupInputState": "readonly" + "formGroupInputState": "readonly", + "formGroupBtnClear": false } ] } diff --git a/source/_patterns/02-components/entree-de-donnees/01-inputs.mustache b/source/_patterns/02-components/entree-de-donnees/01-inputs.mustache index 3e78bad6e..0c0c0542d 100755 --- a/source/_patterns/02-components/entree-de-donnees/01-inputs.mustache +++ b/source/_patterns/02-components/entree-de-donnees/01-inputs.mustache @@ -9,11 +9,28 @@

Validation

- {{# inputTextSizeError}} + {{# inputTextSizeValidation}}
{{> components-input-text }}
- {{/ inputTextSizeError}} + {{/ inputTextSizeValidation}} +
+
+ +
+ + +
+
+ + Erreur + Texte d'erreur +
+
+

États

@@ -29,8 +46,8 @@
diff --git a/source/_patterns/02-components/entree-de-donnees/01-textareas.json b/source/_patterns/02-components/entree-de-donnees/01-textareas.json index d60d1b2ca..e143cb0e3 100644 --- a/source/_patterns/02-components/entree-de-donnees/01-textareas.json +++ b/source/_patterns/02-components/entree-de-donnees/01-textareas.json @@ -36,7 +36,8 @@ "formGroupTextareaRows": "5", "formGroupInputError": { "id": "form-group-textarea-error-text", - "text": "Texte d'erreur" + "text": "Texte d'erreur", + "formAriaInputError": true } } ], @@ -47,7 +48,7 @@ "formGroupInputClass": false, "formGroupInputRequired": false, "formGroupInputLabel": "Libellé", - "formGroupInputPlaceholder":{ + "formGroupInputPlaceholder": { "text": "Placeholder" }, "formGroupInputHelpText": { diff --git a/source/_patterns/02-components/entree-de-donnees/03-selects.json b/source/_patterns/02-components/entree-de-donnees/03-selects.json index 906e01f96..617b3fe5b 100755 --- a/source/_patterns/02-components/entree-de-donnees/03-selects.json +++ b/source/_patterns/02-components/entree-de-donnees/03-selects.json @@ -9,12 +9,12 @@ "defaultOption": "Option par défaut", "options": [ { - "option-text" : "Option 1", - "option-value" : "option-1" + "option-text": "Option 1", + "option-value": "option-1" }, { - "option-text" : "Option 2", - "option-value" : "option-2" + "option-text": "Option 2", + "option-value": "option-2" } ] }, @@ -35,18 +35,19 @@ "defaultOption": "Option par défaut", "options": [ { - "option-text" : "Option 1", - "option-value" : "option-1" + "option-text": "Option 1", + "option-value": "option-1" }, { - "option-text" : "Option 2", - "option-value" : "option-2" + "option-text": "Option 2", + "option-value": "option-2" } ] }, "formGroupInputError": { "id": "custom-select-error-text", - "text": "Texte d'erreur" + "text": "Texte d'erreur", + "formAriaInputError": true } } ] diff --git a/source/_patterns/02-components/entree-de-donnees/04-fichier.mustache b/source/_patterns/02-components/entree-de-donnees/04-fichier.mustache index eb15832e5..658fab929 100755 --- a/source/_patterns/02-components/entree-de-donnees/04-fichier.mustache +++ b/source/_patterns/02-components/entree-de-donnees/04-fichier.mustache @@ -1 +1,2 @@ {{> components-input-file-item-v2}} + diff --git a/source/_patterns/02-components/entree-de-donnees/04-fichier~apercu-off.json b/source/_patterns/02-components/entree-de-donnees/04-fichier~apercu-off.json index 1953831ac..86eaa3769 100644 --- a/source/_patterns/02-components/entree-de-donnees/04-fichier~apercu-off.json +++ b/source/_patterns/02-components/entree-de-donnees/04-fichier~apercu-off.json @@ -28,7 +28,7 @@ "listUploadedItems": [ { "media": { - "img" : false, + "img": false, "icon": { "icon-name": "icon-md icon-file-pdf" } @@ -38,7 +38,7 @@ }, { "media": { - "img" : false, + "img": false, "icon": { "icon-name": "icon-md icon-file-pdf" } @@ -48,7 +48,7 @@ }, { "media": { - "img" : false, + "img": false, "icon": { "icon-name": "icon-md icon-file" } diff --git a/source/_patterns/02-components/entree-de-donnees/04-fichier~apercu-on.json b/source/_patterns/02-components/entree-de-donnees/04-fichier~apercu-on.json index 87ec0c346..a967039a1 100644 --- a/source/_patterns/02-components/entree-de-donnees/04-fichier~apercu-on.json +++ b/source/_patterns/02-components/entree-de-donnees/04-fichier~apercu-on.json @@ -28,7 +28,7 @@ "listUploadedItems": [ { "media": { - "img" : { + "img": { "src": "https://picsum.photos/id/1062/40/40", "alt": "Alt pour image #1." } @@ -38,7 +38,7 @@ }, { "media": { - "img" : { + "img": { "src": "https://picsum.photos/id/1062/40/40", "alt": "Alt pour image #2." } @@ -48,7 +48,7 @@ }, { "media": { - "img" : { + "img": { "src": "https://picsum.photos/id/1062/40/40", "alt": "Alt pour image #3." } diff --git a/source/_patterns/02-components/entree-de-donnees/04-fichier~error.json b/source/_patterns/02-components/entree-de-donnees/04-fichier~error.json new file mode 100644 index 000000000..52bc3fb6f --- /dev/null +++ b/source/_patterns/02-components/entree-de-donnees/04-fichier~error.json @@ -0,0 +1,36 @@ +{ + "formGroupClass": "required", + "formGroupInputID": "form-control-input-file-v2", + "formGroupInputLabel": "Libellé", + "formGroupInputHelpText": { + "id": "input-file-help-text", + "text": "Texte d'assistance." + }, + "formGroupFileID": "file-droparea-v2", + "formGroupFileDropID": "form-group-file-upload", + "formGroupFileDropLabel": "Parcourir", + "formGroupFileDropHelpText": "ou déposer votre fichier ici", + "formGroupFileClass": "is-invalid", + "formGroupInputError": { + "id": "file-droparea-v2-error", + "text": "Texte d'erreur" + }, + "dropdownMenu": { + "dropdownMenuClass": "dropdown-menu-right", + "dropdownMenuID": "dropdownMoreVertical-1", + "dropdownSection": [ + { + "dropdownItem": [ + { + "url": "#", + "dropdownItemLabel": "Libellé" + }, + { + "url": "#", + "dropdownItemLabel": "Libellé" + } + ] + } + ] + } +} diff --git a/source/_patterns/02-components/entree-de-donnees/05-checkbox-wrapper.md b/source/_patterns/02-components/entree-de-donnees/05-checkbox-wrapper.md deleted file mode 100644 index 8279537c8..000000000 --- a/source/_patterns/02-components/entree-de-donnees/05-checkbox-wrapper.md +++ /dev/null @@ -1,7 +0,0 @@ ---- -title: Case à cocher encadrée ---- - -Dans certains cas où une longue description doit accompagner le libellé, utiliser la case à cocher encadrée. - -Il vaut mieux utiliser une description plutôt que d'avoir un libellé trop long. diff --git a/source/_patterns/02-components/entree-de-donnees/05-checkbox.json b/source/_patterns/02-components/entree-de-donnees/05-checkbox.json index 45eb1d381..138340cec 100755 --- a/source/_patterns/02-components/entree-de-donnees/05-checkbox.json +++ b/source/_patterns/02-components/entree-de-donnees/05-checkbox.json @@ -49,5 +49,95 @@ "state": "disabled" } ] + }, + "formCheckboxesWrapper": { + "formGroupLabel": "Libellé", + "formCheckboxItems": [ + { + "class": "custom-control-card", + "id": "chk-card05-1", + "label": "Libellé

Est est et dolores dolore sed justo ipsum et sit.

", + "state": false + }, + { + "class": "custom-control-card", + "id": "chk-card06-3", + "label": "Libellé

Est est et dolores dolore sed justo ipsum et sit.

", + "state": "checked" + }, + { + "class": "custom-control-card", + "id": "chk-card06-4", + "label": "Libellé

Est est et dolores dolore sed justo ipsum et sit.

", + "state": "disabled" + } + ] + }, + "formCheckboxesValidation": { + "formGroupLabel": "Libellé", + "formGroupClass": "required", + "formGroupInputRequired": true, + "formGroupInputHelpText": { + "id": "checkbox-help-text-id", + "text": "Texte d'assistance" + }, + "formGroupCheckboxesError": { + "id": "form-group-checkboxes-error", + "text": "Texte d'erreur" + }, + "formGroupInputAriaText": { + "id": "form-group-checkboxes-error" + }, + "formCheckboxItems": [ + { + "class": "is-invalid", + "id": "chkv01-2", + "label": "Libellé", + "state": false + }, + { + "class": "is-invalid", + "id": "chkv02-2", + "label": "Libellé", + "state": "checked" + }, + { + "class": "is-invalid", + "id": "chkv03-2", + "label": "Libellé", + "state": "disabled" + } + ] + }, + "formCheckboxesWrapperValidation": { + "formGroupLabel": "Libellé", + "formGroupClass": "required", + "formGroupCheckboxesError": { + "id": "form-group-checkboxes-error", + "text": "Texte d'erreur" + }, + "formGroupInputAriaText": { + "id": "form-group-checkboxes-error" + }, + "formCheckboxItems": [ + { + "class": "custom-control-card is-invalid", + "id": "chkv-card05-1", + "label": "Libellé

Est est et dolores dolore sed justo ipsum et sit.

", + "state": false + }, + { + "class": "custom-control-card is-invalid", + "id": "chkv-card06-3", + "label": "Libellé

Est est et dolores dolore sed justo ipsum et sit.

", + "state": "checked" + }, + { + "class": "custom-control-card", + "id": "chvk-card06-4", + "label": "Libellé

Est est et dolores dolore sed justo ipsum et sit.

", + "state": "disabled" + } + ] } } diff --git a/source/_patterns/02-components/entree-de-donnees/05-checkbox.mustache b/source/_patterns/02-components/entree-de-donnees/05-checkbox.mustache index 99f25f900..fa8d013bc 100644 --- a/source/_patterns/02-components/entree-de-donnees/05-checkbox.mustache +++ b/source/_patterns/02-components/entree-de-donnees/05-checkbox.mustache @@ -1,20 +1,54 @@ -{{# formCheckboxes }} +
-
-
- {{> components-checkbox-item }} -
-
+ {{# formCheckboxes }} +
+
+ {{> components-checkbox-item }} +
+
+ {{/ formCheckboxes }} + + {{# formCheckboxesValidation }} +
+
+ {{> components-checkbox-item }} + {{# formGroupCheckboxesError}} +
+ + Erreur + {{ text }} +
+ {{/ formGroupCheckboxesError}} +
+
+ {{/ formCheckboxesValidation}}
-{{/ formCheckboxes }} -{{# formCheckboxesInline }} -

Position inline

-
-
-
- {{> components-checkbox-item }} -
+{{# formCheckboxesWrapper }} +

Case à cocher encadrée

+
+
+
+ {{> components-checkbox-item }} +
+
-
-{{/ formCheckboxesInline }} +{{/ formCheckboxesWrapper }} + +{{# formCheckboxesWrapperValidation }} +

Validation

+
+
+
+ {{> components-checkbox-item }} + {{# formGroupCheckboxesError}} +
+ + Erreur + {{ text }} +
+ {{/ formGroupCheckboxesError}} +
+
+
+{{/ formCheckboxesWrapperValidation }} diff --git a/source/_patterns/02-components/entree-de-donnees/05-checkbox~wrapper.json b/source/_patterns/02-components/entree-de-donnees/05-checkbox~wrapper.json deleted file mode 100644 index 682a01ebd..000000000 --- a/source/_patterns/02-components/entree-de-donnees/05-checkbox~wrapper.json +++ /dev/null @@ -1,26 +0,0 @@ -{ - "formCheckboxes": { - "formGroupLabel": "Libellé", - "formCheckboxItems": [ - { - "class": "custom-control-card", - "id": "chk-card05-1", - "label": "Libellé

Est est et dolores dolore sed justo ipsum et sit.

", - "state": false - }, - { - "class": "custom-control-card", - "id": "chk-card06-3", - "label": "Libellé

Est est et dolores dolore sed justo ipsum et sit.

", - "state": "checked" - }, - { - "class": "custom-control-card", - "id": "chk-card06-4", - "label": "Libellé

Est est et dolores dolore sed justo ipsum et sit.

", - "state": "disabled" - } - ] - }, - "formCheckboxesInline": false -} diff --git a/source/_patterns/02-components/entree-de-donnees/07-radio-wrapper.md b/source/_patterns/02-components/entree-de-donnees/07-radio-wrapper.md deleted file mode 100644 index 8700db332..000000000 --- a/source/_patterns/02-components/entree-de-donnees/07-radio-wrapper.md +++ /dev/null @@ -1,7 +0,0 @@ ---- -title: Bouton radio encadré ---- - -Dans certains cas où une longue description doit accompagner le libellé, utiliser le bouton radio encadré. - -Il vaut mieux utiliser une description plutôt que d'avoir un libellé trop long. diff --git a/source/_patterns/02-components/entree-de-donnees/07-radio.json b/source/_patterns/02-components/entree-de-donnees/07-radio.json index fa442ac02..ba4d8d615 100755 --- a/source/_patterns/02-components/entree-de-donnees/07-radio.json +++ b/source/_patterns/02-components/entree-de-donnees/07-radio.json @@ -29,6 +29,40 @@ } ] }, + "formRadiosValidation": { + "formGroupLabel": "Libellé", + "formGroupClass": "required", + "formGroupInputHelpText": { + "id": "radios-help-text-id-validation", + "text": "Texte d'assistance" + }, + "formRadioError": { + "id": "radios-form-id-validation", + "text": "Texte d'erreur" + }, + "formRadiosItems": [ + { + "class": "is-invalid", + "id": "rdio01-11", + "label": "Libellé", + "name": "radiosGroupValidation" + }, + { + "class": "is-invalid", + "id": "rdio03-11", + "label": "Libellé", + "state": "checked", + "name": "radiosGroupValidation" + }, + { + "class": "", + "id": "rdio04-11", + "label": "Libellé", + "state": "disabled", + "name": "radiosGroupValidation" + } + ] + }, "formRadiosInline": { "formRadiosItems": [ { @@ -52,5 +86,65 @@ "name": "radiosGroupInline" } ] + }, + "formRadiosWrapper": { + "formGroupLabel": "Libellé", + "formRadiosItems": [ + { + "class": "custom-control-card", + "id": "rdio01-2", + "label": "Libellé
Sadipscing ut ea et dolores et amet duo et dolor est, lorem ea lorem sed kasd et et. Ea diam.
", + "name": "radiosGroup1", + "state": false + }, + { + "class": "custom-control-card", + "id": "rdio3-2", + "label": "Libellé
Sadipscing ut ea et dolores et amet duo et dolor est, lorem ea lorem sed kasd et et. Ea diam.
", + "name": "radiosGroup1", + "state": "checked" + }, + { + "class": "custom-control-card", + "id": "rdio04-2", + "label": "Libellé

Sadipscing ut ea et dolores et amet duo et dolor est, lorem ea lorem sed kasd et et. Ea diam.

", + "name": "radiosGroup1111", + "state": "disabled" + } + ] + }, + "formRadiosWrapperValidation": { + "formGroupLabel": "Libellé", + "formGroupClass": "required", + "formRadioError": { + "id": "radios-form-id-error", + "text": "Texte d'erreur" + }, + "formGroupInputAriaText": { + "id": "radios-form-id-error" + }, + "formRadiosItems": [ + { + "class": "custom-control-card is-invalid", + "id": "rdio01-22", + "label": "Libellé
Sadipscing ut ea et dolores et amet duo et dolor est, lorem ea lorem sed kasd et et. Ea diam.
", + "name": "radiosGroup1Validation", + "state": false + }, + { + "class": "custom-control-card is-invalid", + "id": "rdio3-22", + "label": "Libellé
Sadipscing ut ea et dolores et amet duo et dolor est, lorem ea lorem sed kasd et et. Ea diam.
", + "name": "radiosGroup1Validation", + "state": "checked" + }, + { + "class": "custom-control-card", + "id": "rdio04-22", + "label": "Libellé

Sadipscing ut ea et dolores et amet duo et dolor est, lorem ea lorem sed kasd et et. Ea diam.

", + "name": "radiosGroup1Validation", + "state": "disabled" + } + ] } } diff --git a/source/_patterns/02-components/entree-de-donnees/07-radio.mustache b/source/_patterns/02-components/entree-de-donnees/07-radio.mustache index d69f0791a..49fd7644d 100755 --- a/source/_patterns/02-components/entree-de-donnees/07-radio.mustache +++ b/source/_patterns/02-components/entree-de-donnees/07-radio.mustache @@ -1,20 +1,69 @@ -{{# formRadios}} +
-
-
- {{> components-radio-item }} + + {{# formRadios}} +
+
+ {{> components-radio-item }} +
-
+ {{/ formRadios}} + + + {{# formRadiosValidation}} +
+
+ {{> components-radio-item }} + {{# formRadioError}} +
+ + Erreur + {{ text }} +
+ {{/ formRadioError}} +
+
+ {{/ formRadiosValidation}}
-{{/ formRadios}} + {{# formRadiosInline }} -

Position inline

-
-
+

Position inline

+
+
- {{> components-radio-item }} + {{> components-radio-item }}
-
-
+
+
{{/ formRadiosInline }} + +{{# formRadiosWrapper}} +

Bouton radio encadré

+
+
+
+ {{> components-radio-item }} +
+
+
+{{/ formRadiosWrapper}} + +{{# formRadiosWrapperValidation}} +

Validation

+
+
+
+ {{> components-radio-item }} + {{# formRadioError}} +
+ + Erreur + {{ text }} +
+ {{/ formRadioError}} +
+
+
+{{/ formRadiosWrapperValidation}} + diff --git a/source/_patterns/02-components/entree-de-donnees/07-radio~wrapper.json b/source/_patterns/02-components/entree-de-donnees/07-radio~wrapper.json deleted file mode 100644 index 7f39fef60..000000000 --- a/source/_patterns/02-components/entree-de-donnees/07-radio~wrapper.json +++ /dev/null @@ -1,29 +0,0 @@ -{ - "formRadios": { - "formGroupLabel": "Libellé", - "formRadiosItems": [ - { - "class": "custom-control-card", - "id": "rdio01-2", - "label": "Libellé
Sadipscing ut ea et dolores et amet duo et dolor est, lorem ea lorem sed kasd et et. Ea diam.
", - "name": "radiosGroup1", - "state": false - }, - { - "class": "custom-control-card", - "id": "rdio3-2", - "label": "Libellé
Sadipscing ut ea et dolores et amet duo et dolor est, lorem ea lorem sed kasd et et. Ea diam.
", - "name": "radiosGroup1", - "state": "checked" - }, - { - "class": "custom-control-card", - "id": "rdio04-2", - "label": "Libellé

Sadipscing ut ea et dolores et amet duo et dolor est, lorem ea lorem sed kasd et et. Ea diam.

", - "name": "radiosGroup1111", - "state": "disabled" - } - ] - }, - "formRadiosInline": false -} diff --git a/source/_patterns/02-components/entree-de-donnees/_checkbox-item.mustache b/source/_patterns/02-components/entree-de-donnees/_checkbox-item.mustache index 6d120391e..40a3b7989 100755 --- a/source/_patterns/02-components/entree-de-donnees/_checkbox-item.mustache +++ b/source/_patterns/02-components/entree-de-donnees/_checkbox-item.mustache @@ -6,7 +6,7 @@ {{/ formGroupInputHelpText}} {{# formCheckboxItems}}
- +
{{/ formCheckboxItems}} diff --git a/source/_patterns/02-components/entree-de-donnees/_input-file-item-v2.mustache b/source/_patterns/02-components/entree-de-donnees/_input-file-item-v2.mustache index 063571d1a..202cd11af 100644 --- a/source/_patterns/02-components/entree-de-donnees/_input-file-item-v2.mustache +++ b/source/_patterns/02-components/entree-de-donnees/_input-file-item-v2.mustache @@ -7,13 +7,17 @@ {{/ formGroupInputHelpText}}
- +
{{ formGroupFileDropHelpText }}
{{# formGroupInputError}} -
{{ text }}
+
+ + Erreur + {{ text }} +
{{/ formGroupInputError}} {{# listUploadedFiles}} diff --git a/source/_patterns/02-components/entree-de-donnees/_input-file-item.mustache b/source/_patterns/02-components/entree-de-donnees/_input-file-item.mustache index 7a75c3998..9d1f0cdce 100644 --- a/source/_patterns/02-components/entree-de-donnees/_input-file-item.mustache +++ b/source/_patterns/02-components/entree-de-donnees/_input-file-item.mustache @@ -7,6 +7,10 @@
{{# formGroupInputError}} -
{{ formGroupInputError.text }}
+
+ + Erreur + {{ text }} +
{{/ formGroupInputError}} diff --git a/source/_patterns/02-components/entree-de-donnees/_input-icon.mustache b/source/_patterns/02-components/entree-de-donnees/_input-icon.mustache index 9201acdfb..d3ab866a2 100755 --- a/source/_patterns/02-components/entree-de-donnees/_input-icon.mustache +++ b/source/_patterns/02-components/entree-de-donnees/_input-icon.mustache @@ -10,6 +10,10 @@ {{/ formGroupInputHelpText}} {{/formGroupInputError}} {{# formGroupInputError}} -
{{ formGroupInputError.text }}
+
+ + Erreur + {{ text }} +
{{/ formGroupInputError}} diff --git a/source/_patterns/02-components/entree-de-donnees/_input-text.mustache b/source/_patterns/02-components/entree-de-donnees/_input-text.mustache index 75d5c3080..e292078c6 100644 --- a/source/_patterns/02-components/entree-de-donnees/_input-text.mustache +++ b/source/_patterns/02-components/entree-de-donnees/_input-text.mustache @@ -1,4 +1,4 @@ -
+
{{^ formGroupNoLabel}} {{# formGroupPopover}}
{{/ formGroupPopover}} @@ -7,14 +7,26 @@ {{# formGroupPopover}}
{{/ formGroupPopover}} {{/ formGroupNoLabel}} {{# formGroupInputHelpText}} - {{ text }} + {{ text }} {{/ formGroupInputHelpText}} - + {{# formGroupBtnClear}}
{{/ formGroupBtnClear}} + + {{# formGroupBtnClear}} + {{/ formGroupBtnClear}} + {{# formGroupBtnClear}} +
{{/ formGroupBtnClear}} {{# formGroupInputCounter}} - {{ text }} + {{ text }} {{/ formGroupInputCounter}} {{# formGroupInputError}} -
{{ formGroupInputError.text }}
+
+ + Erreur + {{ text }} +
{{/ formGroupInputError}} {{# formGroupProgress}} {{> components-progress-bar-item}} diff --git a/source/_patterns/02-components/entree-de-donnees/_radio-item.mustache b/source/_patterns/02-components/entree-de-donnees/_radio-item.mustache index 9fde6b37e..285d15bbb 100755 --- a/source/_patterns/02-components/entree-de-donnees/_radio-item.mustache +++ b/source/_patterns/02-components/entree-de-donnees/_radio-item.mustache @@ -6,7 +6,7 @@ {{/ formGroupInputHelpText}} {{# formRadiosItems}}
- +
{{/ formRadiosItems}} diff --git a/source/_patterns/02-components/entree-de-donnees/_select-item.mustache b/source/_patterns/02-components/entree-de-donnees/_select-item.mustache index 2f01ffbc9..fc4a9ba65 100755 --- a/source/_patterns/02-components/entree-de-donnees/_select-item.mustache +++ b/source/_patterns/02-components/entree-de-donnees/_select-item.mustache @@ -5,13 +5,17 @@ {{# formGroupInputHelpText}} {{ text }} {{/ formGroupInputHelpText}} - {{# formGroupSelect.options }} {{> components-option }} {{/ formGroupSelect.options }} {{# formGroupInputError}} -
{{ text }}
+
+ + Erreur + {{ text }} +
{{/ formGroupInputError}}
diff --git a/source/_patterns/02-components/entree-de-donnees/_textarea.mustache b/source/_patterns/02-components/entree-de-donnees/_textarea.mustache index c8a5c0435..6324b5f97 100644 --- a/source/_patterns/02-components/entree-de-donnees/_textarea.mustache +++ b/source/_patterns/02-components/entree-de-donnees/_textarea.mustache @@ -7,11 +7,15 @@ {{# formGroupInputHelpText}} {{ text }} {{/ formGroupInputHelpText}} - + {{# formGroupInputCounter}} {{ text }} {{/ formGroupInputCounter}} {{# formGroupInputError}} -
{{ text }}
+
+ + Erreur + {{ text }} +
{{/ formGroupInputError}}
diff --git a/source/bao-version.json b/source/bao-version.json index 4755d7b7f..13e2f3944 100644 --- a/source/bao-version.json +++ b/source/bao-version.json @@ -1,3 +1,3 @@ { - "version": "5.1.0" + "version": "5.2.0" } diff --git a/source/css/scss/_forms.scss b/source/css/scss/_forms.scss index 75a9eb8e1..1a837c771 100644 --- a/source/css/scss/_forms.scss +++ b/source/css/scss/_forms.scss @@ -123,6 +123,19 @@ 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; + } + } + } } // Required fields @@ -953,4 +966,4 @@ legend, padding-bottom: 0; } } -} +} \ No newline at end of file diff --git a/source/css/scss/_variables.scss b/source/css/scss/_variables.scss index 68c2302a7..2bda4c54b 100755 --- a/source/css/scss/_variables.scss +++ b/source/css/scss/_variables.scss @@ -198,7 +198,7 @@ $icons-size: ( // // Quickly modify global styling by enabling or disabling optional features. -$enable-validation-icons: true; +$enable-validation-icons: false; // Spacing // diff --git a/source/css/scss/mixins/_forms.scss b/source/css/scss/mixins/_forms.scss index 094ef1ee4..d7643c13c 100644 --- a/source/css/scss/mixins/_forms.scss +++ b/source/css/scss/mixins/_forms.scss @@ -75,6 +75,10 @@ @if $state == invalid { color: $negative-dark; + display: flex; + .icon { + @include icon-color($negative-dark); + } } } } @@ -168,6 +172,10 @@ @if $state == invalid { color: $negative-dark; + display: flex; + .icon { + @include icon-color($negative-dark); + } } } } @@ -291,4 +299,4 @@ } } -} +} \ No newline at end of file diff --git a/source/css/scss/utilities/_text.scss b/source/css/scss/utilities/_text.scss index add1e3919..3f58a5189 100644 --- a/source/css/scss/utilities/_text.scss +++ b/source/css/scss/utilities/_text.scss @@ -98,7 +98,7 @@ a { // Utility class for inline link with icon tag. .link-has-icon:not(.link-list-element) { - margin-right: 1.5rem; + margin-right: 1.75rem; .icon { display: inline; @include icon-size($icon-md); diff --git a/source/js/vdm-bao.js b/source/js/vdm-bao.js index 1e2a60ed4..f3e648b57 100755 --- a/source/js/vdm-bao.js +++ b/source/js/vdm-bao.js @@ -233,12 +233,12 @@ $('.btn-clear').on('click', function(e) { e.preventDefault(); - $(this).siblings('input').val('').trigger('propertychange').focus(); + $(this).siblings('input').val('').trigger('propertychange').trigger("focus"); }); $('.js-btn-clear').on('click', function(e) { $(this).parent('.form-control').val(''); - $(this).closest('.form-row').find('.form-control').val('').focus(); + $(this).closest('.form-row').find('.form-control').val('').trigger("focus"); }); @@ -824,4 +824,4 @@ focusableLinks.forEach((focusableLink) => { focusableLink.addEventListener('blur', (ev) => { focusableLink.parentElement.classList.remove('skip-links-focus'); }) -}) +}) \ No newline at end of file