diff --git a/CHANGELOG.md b/CHANGELOG.md index d78e8bf67..b739f5052 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -12,9 +12,211 @@ Pour plus d’informations : [Voir la documentation](https://www.systeme-de-desi ## v1.10 -### [1.10.0](https://github.com/GouvernementFR/dsfr/compare/v1.9.3...1.10.0) - 26 Juin 2023 +### [1.10.0-rc.2](https://github.com/GouvernementFR/dsfr/compare/v1.9.3...1.10.0-rc.2) - 11 Juillet 2023 -#### fix(1.10): corrige erreurs de lint +#### 🐛 fix(tooltip,modal): interaction globale et focus iOS [(#691)](https://github.com/GouvernementFR/dsfr/pull/691) +- Correctif Ă  la pression de la touche Escape sur la modale : si l'Ă©lĂ©ment actif (focus) est un Ă©lĂ©ment de formulaire ou un mĂ©dia, la modale n'est pas refermĂ©e pas pour permettre l'interaction native de l'Ă©lĂ©ment actif +- Correctif iOS de la prise de focus au clic +- Fermeture des tooltips dĂ©s au clic sur n'importe quel endroit +- Fermeture des tooltip Ă  la pression sur la touche escape, oĂč que soit le focus + + +#### 🐛 fix(tooltip) : a11y tooltip hover [(#686)](https://github.com/GouvernementFR/dsfr/pull/686) +- autorise le survol sur l'information contextuelle +- ajoute un `tabindex="0"` sur l'example dans un texte +- arrondi la valeur de placements de la flĂšche verticale Ă  2 dĂ©cimales +- retire le `aria-hidden="true"` et ajoute `display="none"` + + +#### 🐛 fix(transcription): a11y retour audit [(#684)](https://github.com/GouvernementFR/dsfr/pull/684) +- place le bouton d’agrandissement avant la modale et inverse les Ă©lements via css +- ajoute `aria-label=”Agrandir la transcription”` sur le bouton d’agrandissement +- remplace la balise dialog par une balise div +- systĂšme d'activation / dĂ©sactivation de la modale avec ajout / retrait dynamique de `role="dialog"` Ă  l'ouverture / fermeture de la modale +- systĂšme de vĂ©rification et de correction pour l'**accessible name** de la modale, avec warning explicatifs + + +#### ✹ feat(tile): ajouts de variations de tuiles [(#685)](https://github.com/GouvernementFR/dsfr/pull/685) +Ajouts des mĂȘmes variations que la carte : +- `.fr-tile--no-border` sans le bordure encadrant la tuile (mais la barre Ă©paisse basse reste) +- `.fr-tile--shadow` avec Ă©lĂ©vation +- `.fr-tile--grey` en gris contrast +- `.fr-tile--no-background` couleur de fond transparente + + +#### 🐛 fix(card,tile): corrige erreur de syntaxe ejs + lint [(#687)](https://github.com/GouvernementFR/dsfr/pull/687) + + +#### 🐛 fix(card, tile): correctif lien externe et dĂ©sactivĂ© [(#683)](https://github.com/GouvernementFR/dsfr/pull/683) +- sur les exemples avec lien externe, ajout de title="[IntitulĂ©] - nouvelle fenĂȘtre" +- sur les exemples avec liens dĂ©sactivĂ©s, ajout de role="link" et aria-disabled="true" + + +#### 🐛 fix(card, tile): correctif token title [(#682)](https://github.com/GouvernementFR/dsfr/pull/682) +- le titre des cartes et tuiles doivent utiliser le token de couleur text-title-grey + + +#### ✹ feat(navigation, header, sidemenu): homogĂ©nĂ©isation des espacements et indentation [(#678)](https://github.com/GouvernementFR/dsfr/pull/678) +- Uniformisation du menu latĂ©ral, navigation, et accordĂ©on + - ajout d'un fond open-blue-france et du texte en blue-france sur les boutons d'ouverture en Ă©tat ouvert + - ajout de marge pour indenter les sous menus + - ajustement des espacements +- Ajustement de la navigation du header en mobile +- Ajustement de la taille max de la navigation dans le header en desktop + + +#### 🐛 fix(input): ajustement champs particuliers [(#679)](https://github.com/GouvernementFR/dsfr/pull/679) +- Ajuste la largeur des champs de code postal, annĂ©e et nombre Ă  des multiples de 8v + + +#### 🐛 fix(civility): correctif taille des boutons radio [(#676)](https://github.com/GouvernementFR/dsfr/pull/676) +- Corrige la taille des boutons radio du titre d'appel en sm au lieu de md + + +#### 🐛 fix(follow): ajoute d'exemple [(#675)](https://github.com/GouvernementFR/dsfr/pull/675) +- Ajout de l'exemple de succĂšs Ă  l'abonnement Ă  la lettre d'information + + +#### 🐛 fix(analytics): correctif page.date [(#681)](https://github.com/GouvernementFR/dsfr/pull/681) +- la collecte de donnĂ©e page.date gĂ©nĂ©re une erreur -> correctif +- mise en conformitĂ© avec le standard de date calendaire ISO 8601 [YYYY-MM-DD] + + +#### 🐛 fix(transcription): dĂ©placement bouton modale [(#680)](https://github.com/GouvernementFR/dsfr/pull/680) +- Pour dĂ©terminer le bouton primaire qui sert Ă  l’ouverture, un disclosure filtre parmi les boutons qui lui sont reliĂ©s et retire ceux qui se trouve Ă  l’intĂ©rieur du contenu du disclosure (ce sont les boutons de fermeture) +- Actuellement, la transcription a le bouton d'ouverture de modale Ă  l'intĂ©rieur de son contenu, ce qui bloque le fonctionnement, le bouton n'Ă©tant pas reconnu comme primaire. +- Le correctif dĂ©place le bouton aprĂšs la dialog de la modal et restitue le fonctionnement de la transcription + + +#### 🐛 fix(form): met a jour les libelles des indications [(#674)](https://github.com/GouvernementFR/dsfr/pull/674) +- retrait de la capitalisation des mentions d'indication + + +#### 🐛 fix(date): ajustement exemples [(#671)](https://github.com/GouvernementFR/dsfr/pull/671) +- mise en place de date cohĂ©rentes avec les erreurs affichĂ©es dans les exemples + + +#### 🐛 fix(form): correctif alignement icĂŽne des messages [(#670)](https://github.com/GouvernementFR/dsfr/pull/670) +- l'icĂŽne Ă  gauche des messages d'erreur/succĂšs sur plusieurs lignes doit ĂȘtre accrochĂ©e en haut et non pas centrĂ©e + + +#### 🐛 fix(password): retrait du bouton natif sur edge [(#669)](https://github.com/GouvernementFR/dsfr/pull/669) +- Sur edge une icĂŽne oeil apparaĂźt au focus d'un champ de type "password" +- Retrait de l'icone native + + +#### 🐛 fix(name): a11y - gestion du focus [(#664)](https://github.com/GouvernementFR/dsfr/pull/664) +Ajoute dans la page d’exemple le dĂ©placement du focus : +- au click sur la checkbox de dĂ©sactivation pour activer, le premier champ ou bouton prend le focus +- au click sur l’ajout d’un prĂ©nom, le champs ajoutĂ© prend le focus +- au click sur la suppression, le champ ou bouton suivant prend le focus + + +#### 🐛 fix(footer): retrait de CSS obsolĂšte [(#668)](https://github.com/GouvernementFR/dsfr/pull/668) +- retrait de CSS rĂ©siduel de prĂ©cĂ©dentes versions dans le footer-bottom__list + + +#### 🐛 fix(password): correctif Ă©tats de la case Ă  cocher [(#667)](https://github.com/GouvernementFR/dsfr/pull/667) +- force l'Ă©tat de la checkbox Ă  l'Ă©tat par dĂ©faut, pour Ă©viter qu'elle ne passe en erreur/succĂšs si elle hĂ©rite de cet Ă©tat sur le composant. + + +#### 🐛 fix(tooltip): mise a jour exemple [(#666)](https://github.com/GouvernementFR/dsfr/pull/666) +- Dans l'exemple "Information contextuelle dans un tableau", remplacement de l'information contextuelle par une infobulle (interaction au clic plutĂŽt qu'au survol) + + +#### 🐛 fix(input): fix groupe attributes & multiple hint text [(#665)](https://github.com/GouvernementFR/dsfr/pull/665) +- Correction attribut en trop sur les input-group +- multiple texte additionnel sur le modĂšle de champs d'adresse Ă©lectronique +- Correction des textes additionnels + + +#### 🐛 fix(modal): suppression exemple des liens dans la zone d'action [(#663)](https://github.com/GouvernementFR/dsfr/pull/663) +- Ce cas n'est pas recommandĂ©, la zone d'action Ă©tant plutĂŽt prĂ©vue pour des boutons + + +#### 🐛 fix(consent): correctif espacement et couleur [(#662)](https://github.com/GouvernementFR/dsfr/pull/662) +- Corrige description d'une finalitĂ© de 3v Ă  2v en margin-bottom +- HomogĂ©nĂ©itĂ© avec accordion, nav et sidemenu sur le bouton de la modale de consentement “voir plus de dĂ©tails” : + - enlever le soulignement + - mettre en bleu le lien “voir plus de dĂ©tail” + + +#### 🐛 fix(card, tile): ajout version sans liens, target blank, et mise Ă  jour des exemples [(#657)](https://github.com/GouvernementFR/dsfr/pull/657) +- Ajout de version carte et tuile sans lien (en noir) +- Ajout de l'icone target blank sur les cartes avec lien non Ă©largi en target="_blank" +- Ajout d'exemples de carte et tuile de tĂ©lĂ©chargement avec remplissage automatique des dĂ©tails (en Octet ou en Bytes) +- Ajout d'exemple de carte et tuile de tĂ©lĂ©chargement avec fichier en langue Ă©trangĂšre +- SĂ©paration des exemples de tuile de tĂ©lĂ©chargement +- Changement des pictogrammes des tuiles de tĂ©lĂ©chargement +- Ajustement de la grille dans les exemples de tuiles + + +#### 🐛 fix(pagination): correctif rĂ©gression href des exemples [(#661)](https://github.com/GouvernementFR/dsfr/pull/661) +- Corrige la rĂ©gression qui a supprimĂ© les liens des Ă©lĂ©ments de pagination + + +#### 🐛 fix(sidemenu): suppression variante et correctif style bouton mobile [(#660)](https://github.com/GouvernementFR/dsfr/pull/660) +- Suppression de la variante avec bordure +- Corrige le style du bouton mobile en action-high-blue-france (cohĂ©rence navigation/accordion) + + +#### 🐛 fix(company): retrait des pluriels [(#659)](https://github.com/GouvernementFR/dsfr/pull/659) +- Correction du langage dans la demande d'un reprĂ©sentant moral, suppression des pluriels optionnels + + +#### 🐛 fix(link): corrige graisse lien de tĂ©lĂ©chargement [(#658)](https://github.com/GouvernementFR/dsfr/pull/658) +- retire le font-weight bold sur le lien de tĂ©lĂ©chargement + + +#### 🐛 fix(password): bug icĂŽne [(#648)](https://github.com/GouvernementFR/dsfr/pull/648) +- conditionne l'ajout de la classe utile `fr-icon` Ă  l'utilisation d'une string en paramĂštre `icon` + + +#### 🐛 feat(company): accessibilitĂ© lien externe [(#656)](https://github.com/GouvernementFR/dsfr/pull/656) +- corrige l'accessibilitĂ© du lien en `target="_blank"` par l'ajout d'un attribut `title` : "Annuaire des entreprises – nouvelle fenĂȘtre" + + +#### 🐛 fix(unexpected): corrige groupe de bouton vide [(#655)](https://github.com/GouvernementFR/dsfr/pull/655) +- ajoute une condition sur l'ajout du wrapper `.fr-btns-group` dans la template `ejs` + + +#### 🐛 fix(*): accessibilitĂ© aria-live [(#654)](https://github.com/GouvernementFR/dsfr/pull/654) +- remplace la valeur aria-live `assertive` par `polite` + + +#### 🐛 fix(account): accessibilitĂ© champs obligatoires [(#652)](https://github.com/GouvernementFR/dsfr/pull/652) +- La mention de "champs obligatoires" doit ĂȘtre mise dans un Ă©lĂ©ment `

` sur les pages de connexion et crĂ©ation de compte + + +#### 🐛 fix(pattern): dĂ©nomination des blocs fonctionnels [(#649)](https://github.com/GouvernementFR/dsfr/pull/649) +- Mise Ă  jour et harmonisation de la dĂ©nomination des blocs fonctionnels + + +#### 🐛 fix(core): correctif padding nĂ©gatif [(#650)](https://github.com/GouvernementFR/dsfr/pull/650) +- ajoute une condition pour Ă©viter le padding nĂ©gatif actuellement prĂ©sent dans les classes utiles + + +#### âŹ†ïž chore(*): montĂ©e de version NodeJS 18 [(#644)](https://github.com/GouvernementFR/dsfr/pull/644) +- Monte la version minimale de NodeJS en 18.16.1 + + +#### 🐛 fix(core): correctif bug proxy Toggle [(#646)](https://github.com/GouvernementFR/dsfr/pull/646) +- Dans la class Toggle, le proxy appelle la fonction toggle qui a Ă©tĂ© remplacĂ©e par la fonction gĂ©nĂ©rique handleClick : +- Ce correctif restaure la fonction toggle et implĂ©mente son appel dans handleClick + + +#### 📝 docs(analytics): correction doc analytics & readme [(#643)](https://github.com/GouvernementFR/dsfr/pull/643) +- mise Ă  jour du readme +- corrections diverses documentation analytics + + +#### 🐛 fix(analytics): correctif hiĂ©rarchie [(#647)](https://github.com/GouvernementFR/dsfr/pull/647) +- l'analyse de hiĂ©rarchie ignorait les headings prĂ©sents dans un composant. +- ce correctif permet de les inclure dans l'analyse. + + +#### 🐛 fix(changelog): correctif inclusion des html [(#642)](https://github.com/GouvernementFR/dsfr/pull/642) +- inclusion des caractĂšres spĂ©ciaux html pour que les snippets soient affichĂ©s correctement #### âŹ†ïž chore(dependencies): met a jour les dĂ©pendances Node [(#638)](https://github.com/GouvernementFR/dsfr/pull/638) @@ -27,15 +229,15 @@ Pour plus d’informations : [Voir la documentation](https://www.systeme-de-desi #### 🐛 fix(header): duplication des id gĂ©nĂ©ralisĂ©e pour les quick access [(#637)](https://github.com/GouvernementFR/dsfr/pull/637) -- L'ensemble des id prĂ©sents dans les accĂšs rapides du header doivent ĂȘtre suffixĂ©s par -mobile Ă  la duplication +- L'ensemble des id prĂ©sents dans les accĂšs rapides du header doivent ĂȘtre suffixĂ©s par -mobile Ă  la duplication #### 🐛 fix(analytics): correctifs divers et ajouts de propriĂ©tĂ©s de page [(#612)](https://github.com/GouvernementFR/dsfr/pull/612) - liens cassĂ©s de la documentation -- retrait du patch js des pages d'exemple -- correctif du collect manuel au changement d'url +- retrait du patch js des pages d'exemple +- correctif du collect manuel au changement d'url - correctif du taux de clic dĂ©sactivĂ© sur certains composants -- ajustements pages d'exemple +- ajustements pages d'exemple - retrait des limitation de valeurs sur la propriĂ©tĂ©`user.profile` - ajouts de propriĂ©tĂ©s dans la configuration de page - page_id @@ -47,13 +249,13 @@ Pour plus d’informations : [Voir la documentation](https://www.systeme-de-desi #### 🐛 fix(search): hauteur du champ trop grande de 1px sur ios [(#632)](https://github.com/GouvernementFR/dsfr/pull/632) Sur ios le champ dĂ©passe de 1px par rapport au bouton. --> Correction du max-height +-> Correction du max-height #### ✹ feat(select, input): ajout de la bordure en Ă©tat erreur / succĂ©s / info [(#635)](https://github.com/GouvernementFR/dsfr/pull/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 +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 : +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` @@ -70,8 +272,8 @@ Afin d'ĂȘtre ISO avec l'UI nous rajoutons cet Ă©lĂ©ment visuel sur : - correction syntax error selecteur Collapse -#### 🐛 fix(example): retire les attributs file des <link> [(#631)](https://github.com/GouvernementFR/dsfr/pull/631) -- l'attribut file n'est pas un attribut possible pour les Ă©lĂ©ments <link> +#### 🐛 fix(example): retire les attributs file des [(#631)](https://github.com/GouvernementFR/dsfr/pull/631) +- l'attribut file n'est pas un attribut possible pour les Ă©lĂ©ments #### 🐛 fix(link, button, tag, badge): retrait du z-index [(#630)](https://github.com/GouvernementFR/dsfr/pull/630) @@ -86,70 +288,70 @@ Le composant `Infobulle` (ou `bulle d’aide`, `aide contextuelle`) permet d’a - Gestion de la Promise retournĂ©e par `navigator.clipboard.writeText()` -#### ✹ feat(address): met a jour les message d'aide des champs de formulaire [(#624)](https://github.com/GouvernementFR/dsfr/pull/624) -- ajout d'indication et de description du format attendu +#### ✹ feat(address): met a jour les message d'aide des champs de formulaire [(#624)](https://github.com/GouvernementFR/dsfr/pull/624) +- ajout d'indication et de description du format attendu #### 🐛 fix(account): met a jour la hiĂ©rarchie html des modĂšles de page [(#618)](https://github.com/GouvernementFR/dsfr/pull/618) -- Mise en place d'une hiĂ©rarchie sans saut de niveau de titre, plus cohĂ©rente +- Mise en place d'une hiĂ©rarchie sans saut de niveau de titre, plus cohĂ©rente - Correctif typo sur la classe `fr-grid-row--gutters` -#### 🐛 fix(accordion, transcription, translate, sidemenu): Ajustement sur l'Ă©tat dĂ©faut et actif [(#564)](https://github.com/GouvernementFR/dsfr/pull/564) +#### 🐛 fix(accordion, transcription, translate, sidemenu): Ajustement sur l'Ă©tat dĂ©faut et actif [(#564)](https://github.com/GouvernementFR/dsfr/pull/564) Harmonisation avec la navigation sur Accordion, Sidemenu, Translate et Transcription : - Passage icĂŽne et intitulĂ© en action-high-blue-france -- Ajout background-open-blue-france sur le bouton lorsque l'Ă©lĂ©ment est ouvert +- Ajout background-open-blue-france sur le bouton lorsque l'Ă©lĂ©ment est ouvert - IcĂŽne “arrow-down-s-ligne” (la mĂȘme que sur navigation) -- Accordion, Translate : Retrait changement de graisse (normal -> bold) Ă  l'ouverture et graisse constante en medium +- Accordion, Translate : Retrait changement de graisse (normal -> bold) Ă  l'ouverture et graisse constante en medium -#### 🐛 fix(tab, core): correctif tab legacy & margin top des headings [(#621)](https://github.com/GouvernementFR/dsfr/pull/621) -- Corrige la taille de l'icĂŽne -- Corrige l'alignement du contenu du tab_panel +#### 🐛 fix(tab, core): correctif tab legacy & margin top des headings [(#621)](https://github.com/GouvernementFR/dsfr/pull/621) +- Corrige la taille de l'icĂŽne +- Corrige l'alignement du contenu du tab_panel - Ajustement du padding de la tab__list -- Retire les margin-top des headings (h1 -> h6) +- Retire les margin-top des headings (h1 -> h6) #### 📝 doc(core): ajoute des exemples liens bruts et resets [(#613)](https://github.com/GouvernementFR/dsfr/pull/613) -Par dĂ©faut, le dsfr stylise les liens natifs, ce qui peut poser problĂšme dans l'utilisation de librairie tierce. +Par dĂ©faut, le dsfr stylise les liens natifs, ce qui peut poser problĂšme dans l'utilisation de librairie tierce. 2 classes utilitaires sont mise Ă  disposition pour contrecarrer le style fort du lien : - `.fr-raw-link` retire toute stylisation sur les liens natifs - `.fr-reset-link` remet le soulignement natif du navigateur (`text-decoration: underline;`) -Des pages d'exemples en illustrant l'utilisation ont Ă©tĂ© ajoutĂ©es dans les pages d'exemples des fondamentaux. +Des pages d'exemples en illustrant l'utilisation ont Ă©tĂ© ajoutĂ©es dans les pages d'exemples des fondamentaux. -#### ✹ feat(radio): radio rich sans images & pictogram Ă  la place d'img [(#540)](https://github.com/GouvernementFR/dsfr/pull/540) +#### ✹ feat(radio): radio rich sans images & pictogram Ă  la place d'img [(#540)](https://github.com/GouvernementFR/dsfr/pull/540) Les radios riches doivent utiliser des pictogrammes et non des images : - Retrait des images - Ajout de pictogramme Le snippet : ```html -<div class="fr-radio-group fr-radio-rich"> - <input value="1" type="radio" id="radio-rich-1" name="radio-rich"> - <label class="fr-label" for="radio-rich-1"> +

+ + +
+ [À MODIFIER - vide ou texte alternatif de l’image] +
+
``` DEVIENT : ```html -<div class="fr-radio-group fr-radio-rich"> - <input value="1" type="radio" id="radio-rich-1" name="radio-rich"> - <label class="fr-label" for="radio-rich-1"> +
+ + +
+ +
+
``` Remplacer buildings/city-hall par la catĂ©gorie et le nom du pictogramme dĂ©sirĂ© @@ -165,30 +367,30 @@ BREAKING CHANGE : `fr-radio-rich__img` devient `fr-radio-rich__pictogram` #### ✹ feat(card): image des cartes de tĂ©lĂ©chargement format a4 [(#620)](https://github.com/GouvernementFR/dsfr/pull/620) -- Ajout d'une image de placeholder au format a4 (21x29.7) +- Ajout d'une image de placeholder au format a4 (21x29.7) #### 🐛 fix(core): corrige liens pour retro-compat sur firefox [(#615)](https://github.com/GouvernementFR/dsfr/pull/615) -- La fonction css max(), mise en place pour corriger le bug d'affichage d'un soulignement d'une Ă©paisseur infĂ©rieure Ă  1px, est supportĂ©e Ă  partir de la version 78 de firefox, ce qui est insuffisant. +- La fonction css max(), mise en place pour corriger le bug d'affichage d'un soulignement d'une Ă©paisseur infĂ©rieure Ă  1px, est supportĂ©e Ă  partir de la version 78 de firefox, ce qui est insuffisant. - Le prĂ©cĂ©dent bug est maintenant corrigĂ© avec un lĂ©ger Ă©paississement du trait sur firefox (0.25px) -#### 🐛 fix(header, navigation): focus des nav-items mobile & ajustements [(#609)](https://github.com/GouvernementFR/dsfr/pull/609) -- L'outline de focus est maintenant entiĂšrement visible sur les liens des sous menu en mobile -- Ajustement de l'alignement du bouton fermĂ© en desktop +#### 🐛 fix(header, navigation): focus des nav-items mobile & ajustements [(#609)](https://github.com/GouvernementFR/dsfr/pull/609) +- L'outline de focus est maintenant entiĂšrement visible sur les liens des sous menu en mobile +- Ajustement de l'alignement du bouton fermĂ© en desktop - Retrait du mega-menu__leader vide dans les examples #### ✹ feat(pagination): Ă©volution taille et Ă©cart des boutons [(#549)](https://github.com/GouvernementFR/dsfr/pull/549) -Harmonisation de l'espacement entre les boutons de pagination : -- L'espacement passe Ă  16px entre tous les boutons +Harmonisation de l'espacement entre les boutons de pagination : +- L'espacement passe Ă  16px entre tous les boutons - Les boutons passent en taille SM -#### 🐛 fix(core, modal): dĂ©calage scrollbar Ă  l'ouverture/fermeture modale & fix scroll behavior [(#519)](https://github.com/GouvernementFR/dsfr/pull/519) -Lorsque la page est scrollable, un dĂ©calage se produit Ă  l'ouverture d'une modal (la page Ă©tant figĂ© elle n'est plus scrollable). +#### 🐛 fix(core, modal): dĂ©calage scrollbar Ă  l'ouverture/fermeture modale & fix scroll behavior [(#519)](https://github.com/GouvernementFR/dsfr/pull/519) +Lorsque la page est scrollable, un dĂ©calage se produit Ă  l'ouverture d'une modal (la page Ă©tant figĂ© elle n'est plus scrollable). -Une marge est donc appliquĂ©e Ă  l'ouverture de la modale pour simuler la barre de scroll et ainsi Ă©viter le mouvement du contenu en arriĂšre plan. +Une marge est donc appliquĂ©e Ă  l'ouverture de la modale pour simuler la barre de scroll et ainsi Ă©viter le mouvement du contenu en arriĂšre plan. #### ♻ refactor(radio,checkbox,toggle): passage input en bleu et refactorisation [(#502)](https://github.com/GouvernementFR/dsfr/pull/502) @@ -206,44 +408,44 @@ radio: - input dĂ©ssinĂ© en background image radio-rich: -- L'outline au focus englobe tout le radio-riche, plus l'input +- L'outline au focus englobe tout le radio-riche, plus l'input checkbox: - Le contour devient bleu -- correction changement d'Ă©tat au mouse-down (:active), maintenant au mouse up +- correction changement d'Ă©tat au mouse-down (:active), maintenant au mouse up Form: - les hint-text des champs dĂ©sactivĂ©s passent en couleur `--text-disabled-grey` #### ✹ feat(core): ouverture des disclosures Ă  partir des ancres, Ă©tat disabled dĂ©sactive disclosure [(#532)](https://github.com/GouvernementFR/dsfr/pull/532) -- Correctif de l'Ă©tat disabled sur les boutons associĂ©s Ă  une modale, un onglet ou un accordĂ©on. La fonctionnalitĂ© d'ouverture est dĂ©sactivĂ©e si les boutons primaires sont dĂ©sactivĂ©s. -- Ajout de la fonctionnalitĂ© d'ouverture d'une modale, d'un onglet ou d'un accordĂ©on si la partie ancre de l'url correspond Ă  l'id de l'Ă©lĂ©ment -> les liens d'Ă©vitements peuvent ouvrir le menu et la recherche en mobile. +- Correctif de l'Ă©tat disabled sur les boutons associĂ©s Ă  une modale, un onglet ou un accordĂ©on. La fonctionnalitĂ© d'ouverture est dĂ©sactivĂ©e si les boutons primaires sont dĂ©sactivĂ©s. +- Ajout de la fonctionnalitĂ© d'ouverture d'une modale, d'un onglet ou d'un accordĂ©on si la partie ancre de l'url correspond Ă  l'id de l'Ă©lĂ©ment -> les liens d'Ă©vitements peuvent ouvrir le menu et la recherche en mobile. -#### 🐛 fix(tab): Ă©coute des Ă©vĂ©nements de clavier dĂ©placĂ© sur la liste d'onglets [(#531)](https://github.com/GouvernementFR/dsfr/pull/531) -L'Ă©coute des Ă©vĂ©nements de clavier se faisant sur le composant, il est impossible d'interagir avec des Ă©lĂ©ments de formulaire dans le contenu de l'onglet -> l'Ă©coute est dĂ©placĂ©e au niveau de la liste des onglets, ce qui en exclut le contenu +#### 🐛 fix(tab): Ă©coute des Ă©vĂ©nements de clavier dĂ©placĂ© sur la liste d'onglets [(#531)](https://github.com/GouvernementFR/dsfr/pull/531) +L'Ă©coute des Ă©vĂ©nements de clavier se faisant sur le composant, il est impossible d'interagir avec des Ă©lĂ©ments de formulaire dans le contenu de l'onglet -> l'Ă©coute est dĂ©placĂ©e au niveau de la liste des onglets, ce qui en exclut le contenu #### ✹ feat(name): ajout bouton de suppression de prĂ©nom [(#493)](https://github.com/GouvernementFR/dsfr/pull/493) -Dans le modĂšle de de bloc nom/prĂ©nom, un bouton permet d'ajouter des champs de saisie pour les prĂ©noms secondaires -> ajout d'un bouton permettant de supprimer ces champs ajoutĂ©s +Dans le modĂšle de de bloc nom/prĂ©nom, un bouton permet d'ajouter des champs de saisie pour les prĂ©noms secondaires -> ajout d'un bouton permettant de supprimer ces champs ajoutĂ©s #### ✹ feat(tile): Ajout icĂŽne flĂšche, Ă©tat dĂ©sactivĂ©, icone lien externe, tuile de tĂ©lĂ©chargement [(#602)](https://github.com/GouvernementFR/dsfr/pull/602) Les tuiles peuvent maintenant ĂȘtre de type tĂ©lĂ©chargement (comme les cartes) - Les tuiles de tĂ©lĂ©chargement sont par dĂ©faut horizontales - - Le dĂ©tail de la tuile de tĂ©lĂ©chargement est obligatoire et il peut ĂȘtre rempli automatiquement en fonction du fichier Ă  tĂ©lĂ©charger en plaçant Ă  l'attribut "data-fr-assess-file" sur le lien (comme pour carte) + - Le dĂ©tail de la tuile de tĂ©lĂ©chargement est obligatoire et il peut ĂȘtre rempli automatiquement en fonction du fichier Ă  tĂ©lĂ©charger en plaçant Ă  l'attribut "data-fr-assess-file" sur le lien (comme pour carte) Les tuiles ont maintenant par dĂ©faut une icone. - arrow-right (par dĂ©faut) - - external-link (en target="_blank") + - external-link (en target="_blank") - download (avec la classe fr-tile--download) Les tuiles dĂ©sactivĂ©es (a sans href) ont Ă  prĂ©sent: - la bordure bottom en grise - - l'icone et le titre en gris + - l'icone et le titre en gris -Ajout des classes "fr-tile--vertical@md" et "fr-tile--vertical@lg" pour passer une tuile horizontale, ou download, en vertical Ă  partir des breakpoints md et lg +Ajout des classes "fr-tile--vertical@md" et "fr-tile--vertical@lg" pour passer une tuile horizontale, ou download, en vertical Ă  partir des breakpoints md et lg #### 🎉 feat(tile): Ă©volution des tuiles [(#534)](https://github.com/GouvernementFR/dsfr/pull/534) @@ -251,112 +453,112 @@ Ajout des classes "fr-tile--vertical@md" et "fr-tile--vertical@lg&# Nous souhaitons revoir la structure html de la tuile pour Ă©tendre les variations de contenu (avec dĂ©tails, badge, etc), et uniformiser avec les comportements de la Carte (card). Changements apportĂ©s : -- Ajout d'un niveau d'encapsulation dans la structure html - - Ajout d'un wrapper "fr-tile__content" pour englober le contenu - - Ajout d'un wrapper "fr-tile__header" pour englober l'image -- L'image des tuiles est remplacĂ©e par un pictogramme - - La classe "fr-tile__img" devient "fr-tile__pictogram" - - Son contenu est maintenant un svg "fr-artwork" +- Ajout d'un niveau d'encapsulation dans la structure html + - Ajout d'un wrapper "fr-tile__content" pour englober le contenu + - Ajout d'un wrapper "fr-tile__header" pour englober l'image +- L'image des tuiles est remplacĂ©e par un pictogramme + - La classe "fr-tile__img" devient "fr-tile__pictogram" + - Son contenu est maintenant un svg "fr-artwork" - Ajout de la possibilitĂ© de placer un badge, un tag, un texte de dĂ©tail, dans le contenu de la tuile -- Ajout d'une taille de tuile SM : "fr-tile--sm" +- Ajout d'une taille de tuile SM : "fr-tile--sm" **⚠ Breaking Change** -Le snippet de code d'une tuile : +Le snippet de code d'une tuile : ```html -<div class="fr-tile fr-enlarge-link"> - <div class="fr-tile__body"> - <h4 class="fr-tile__title"> - <a class="fr-tile__link" href>Titre M bold</a> - </h4> - <p class="fr-tile__desc">Texte M regular 2 lignes max</p> - </div> - <div class="fr-tile__img"> - <img class="fr-responsive-img" src="../../../example/img/placeholder.1x1.png" alt="" /> - <!-- L’alternative de l’image (attribut alt) doit rester vide car l’image est illustrative et ne doit pas ĂȘtre restituĂ©e aux technologies d’assistance --> - </div> -</div> +
+
+

+ Titre M bold +

+

Texte M regular 2 lignes max

+
+
+ + +
+
``` Devient : ```html -<div class="fr-tile fr-enlarge-link" id="tile-6584"> - <div class="fr-tile__body"> - <div class="fr-tile__content"> - <h3 class="fr-tile__title"> - <a href="#">IntitulĂ© de la tuile</a> - </h3> - <p class="fr-tile__desc">Lorem [...] elit ut.</p> - </div> - </div> - <div class="fr-tile__header"> - <div class="fr-tile__pictogram"> - <svg aria-hidden="true" class="fr-artwork" viewBox="0 0 80 80" width="80px" height="80px"> - <use class="fr-artwork-decorative" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-decorative"></use> - <use class="fr-artwork-minor" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-minor"></use> - <use class="fr-artwork-major" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-major"></use> - </svg> - </div> - </div> -</div> + ``` #### 🚚 refactor(download): sĂ©paration du download en carte et lien [(#487)](https://github.com/GouvernementFR/dsfr/pull/487) -Pour mutualiser les comportements de la carte et du lien au composant download, celui-ci doit devenir une variante de ces composants et non pas l'inverse. +Pour mutualiser les comportements de la carte et du lien au composant download, celui-ci doit devenir une variante de ces composants et non pas l'inverse. -Retrait du composant : tĂ©lĂ©chargement de fichier - Download -> dĂ©prĂ©ciĂ© +Retrait du composant : tĂ©lĂ©chargement de fichier - Download -> dĂ©prĂ©ciĂ© Ajout de la variante de carte : fr-card--download Ajout de la variante de lien : fr-link--download Le lien de tĂ©lĂ©chargement : ```html -<div class="fr-download"> - <h3> - <a href="[À MODIFIER - /example/img/image.jpg]" download class="fr-download__link">TĂ©lĂ©charger le document lorem ipsum sit dolores amet - <span class="fr-download__detail"> +
+

+ TĂ©lĂ©charger le document lorem ipsum sit dolores amet + JPG – 61,88 ko - </span> - </a> - </h3> -</div> + + +

+
``` DEVIENT : ```html -<a class="fr-link fr-link--download" download href="[À MODIFIER - example/img/image.jpg]"> - TĂ©lĂ©charger le document lorem ipsum sit dolores amet <span class="fr-link__detail">JPG – 61,88 ko</span> -</a> + + TĂ©lĂ©charger le document lorem ipsum sit dolores amet JPG – 61,88 ko + ``` et la carte de tĂ©lĂ©chargement : ```html -<div class="fr-download fr-enlarge-link fr-download--card"> - <h3> - <a href="[À MODIFIER - example/img/image.jpg]" download class="fr-download__link">TĂ©lĂ©charger le document lorem ipsum sit dolores amet - <span class="fr-download__detail"> +
+

+ TĂ©lĂ©charger le document lorem ipsum sit dolores amet + JPG – 61,88 ko - </span> - </a> - </h3> - <p class="fr-download__desc">Texte de description<</p> -</div> + + +

+

Texte de description<

+
``` DEVIENT : ```html -<div class="fr-card fr-enlarge-link fr-card--download"> - <div class="fr-card__body"> - <div class="fr-card__content"> - <h3 class="fr-card__title"> - <a download href="[À MODIFIER - example/img/image.jpg]"> +
+
+
+

+ TĂ©lĂ©charger le document lorem ipsum sit dolores amet - </a> - </h3> - <p class="fr-card__desc">Texte de description</p> - <div class="fr-card__end"> - <p class="fr-card__detail">JPG – 61,88 ko</p> - </div> - </div> - </div> -</div> + +

+

Texte de description

+
+

JPG – 61,88 ko

+
+
+
+
``` BREAKING CHANGE : Remplacer le composant fr-download par la variante de link fr-link--download et remplacer le composant fr-download--card par une carte fr-card--download @@ -369,8 +571,8 @@ BREAKING CHANGE : Remplacer le composant fr-download par la variante de link fr- ### [v1.9.3](https://github.com/GouvernementFR/dsfr/compare/v1.9.2...v1.9.3) - 17 Mai 2023 #### 🐛 fix(breadcrumb): ajoute une page exemple alternative [(#600)](https://github.com/GouvernementFR/dsfr/pull/600) -- Ă©tiquette d'Ă©lĂ©ment span rendue possible sur l'Ă©lĂ©ment courant du fil d'ariane -- ajout d'une page d'exemple avec boutons +- Ă©tiquette d'Ă©lĂ©ment span rendue possible sur l'Ă©lĂ©ment courant du fil d'ariane +- ajout d'une page d'exemple avec boutons #### 📝 doc(analytics): doc analytics en markdown [(#599)](https://github.com/GouvernementFR/dsfr/pull/599) @@ -402,61 +604,61 @@ partial-fix de #593 #### 🐛 fix(button, theme): retrait propriĂ©tĂ© css :where [(#597)](https://github.com/GouvernementFR/dsfr/pull/597) La propriĂ©tĂ© CSS :where est encore trop rĂ©cente (chrome 88). --> retrait de cette propriĂ©tĂ© +-> retrait de cette propriĂ©tĂ© #### 🐛 fix(modal): correction ombre modal footer [(#572)](https://github.com/GouvernementFR/dsfr/pull/572) -L'ombre du footer de la modal scrollable est mal placĂ©e et trop forte. +L'ombre du footer de la modal scrollable est mal placĂ©e et trop forte. -- Remplacement de l'ombre par une bordure d'1px en defaut-grey en haut du footer +- Remplacement de l'ombre par une bordure d'1px en defaut-grey en haut du footer - remplacement du token de background-color du footer par background-lifted-grey -- ajout d'un texte plus long dans l'exemple modal + footer pour faire apparaĂźtre le scroll +- ajout d'un texte plus long dans l'exemple modal + footer pour faire apparaĂźtre le scroll #### 🐛 fix(password, account): correction capslock safari [(#503)](https://github.com/GouvernementFR/dsfr/pull/503) - Correction erreur js sur le champ password au clic sur le trousseau (safari) - Retrait icone native capslock safari -- Ajout attribut `autocapitalize='off'` sur les champs password et email pour dĂ©sactiver la majuscule au dĂ©but (mobile) +- Ajout attribut `autocapitalize='off'` sur les champs password et email pour dĂ©sactiver la majuscule au dĂ©but (mobile) - Ajout attribut `autocorrect` sur les champs password et email pour dĂ©sactiver la correction orthographique #### ✹ feat(*): nouvelle version interne changelog [(#590)](https://github.com/GouvernementFR/dsfr/pull/590) -Outil en ligne de commande pour gĂ©nĂ©rer un journal des modifications CHANGELOG.md Ă  partir des balises git et de l'historique des commits. +Outil en ligne de commande pour gĂ©nĂ©rer un journal des modifications CHANGELOG.md Ă  partir des balises git et de l'historique des commits. -Commande Ă  exĂ©cuter Ă  la racine du projet, git log est exĂ©cutĂ© en arriĂšre-plan afin d'analyser l'historique des commits, en lançant : +Commande Ă  exĂ©cuter Ă  la racine du projet, git log est exĂ©cutĂ© en arriĂšre-plan afin d'analyser l'historique des commits, en lançant : ``` yarn changelog ``` -Pour ajouter les commits d'une nouvelle version en prĂ©paration, renseigner le futur tag : +Pour ajouter les commits d'une nouvelle version en prĂ©paration, renseigner le futur tag : ``` yarn changelog -t X.X.X ``` -La gestion de l'affichage du changelog est prĂ©sente dans le template EJS `tools/classes/changelog/changelog.ejs` +La gestion de l'affichage du changelog est prĂ©sente dans le template EJS `tools/classes/changelog/changelog.ejs` ### [v1.9.2](https://github.com/GouvernementFR/dsfr/compare/v1.9.1...v1.9.2) - 18 Avril 2023 -#### 🐛 fix(analytics): correctifs analytics & page test spa [(#587)](https://github.com/GouvernementFR/dsfr/pull/587) +#### 🐛 fix(analytics): correctifs analytics & page test spa [(#587)](https://github.com/GouvernementFR/dsfr/pull/587) * AmĂ©lioration de la qualitĂ© des labels envoyĂ©s Ă  Eulerian * Maximum 50 caractĂšres, couper avec [
] au delĂ  * RĂ©cupĂšre uniquement le premier texte * Retrait des espaces en trop -* Ajout de la propriĂ©tĂ© `isDebugging` dans `dsfr.analytics` permettant d'activer/dĂ©sactiver le debug Eulerian +* Ajout de la propriĂ©tĂ© `isDebugging` dans `dsfr.analytics` permettant d'activer/dĂ©sactiver le debug Eulerian * Mise en conformitĂ© avec les SPA (Single-page application - Angular, React, Vue) -* Ajout d’exemples de SPA (Vue & React) +* Ajout d’exemples de SPA (Vue & React) #### ✹ feat(analytics): polyfill legacy [(#588)](https://github.com/GouvernementFR/dsfr/pull/588) -Ajout des polyfills et correctifs nĂ©cessaires au support d'IE11 +Ajout des polyfills et correctifs nĂ©cessaires au support d'IE11 #### ✹ feat(changelog): ajoute changelog auto-gĂ©nĂ©rĂ© [(#561)](https://github.com/GouvernementFR/dsfr/pull/561) -Outil en ligne de commande pour gĂ©nĂ©rer un journal des modifications `CHANGELOG.md` Ă  partir des balises git et de l'historique des commits, nous utilisons [Auto-changelog](https://github.com/cookpete/auto-changelog). +Outil en ligne de commande pour gĂ©nĂ©rer un journal des modifications `CHANGELOG.md` Ă  partir des balises git et de l'historique des commits, nous utilisons [Auto-changelog](https://github.com/cookpete/auto-changelog). -Commande Ă  executer Ă  la racine du projet, `git log` est exĂ©cutĂ© en arriĂšre-plan afin d'analyser l'historique des commits, en lançant : +Commande Ă  executer Ă  la racine du projet, `git log` est exĂ©cutĂ© en arriĂšre-plan afin d'analyser l'historique des commits, en lançant : ``` yarn version @@ -470,19 +672,19 @@ question New version: [X.X.X] La configuration est prĂ©sente dans le fichier `.auto-changelog`. -La gestion de l'affichage du changelog est prĂ©sente dans le template [Handlebars](https://handlebarsjs.com/) `changelog-template.hbs`. +La gestion de l'affichage du changelog est prĂ©sente dans le template [Handlebars](https://handlebarsjs.com/) `changelog-template.hbs`. ### [v1.9.1](https://github.com/GouvernementFR/dsfr/compare/v1.9.0...v1.9.1) - 11 Avril 2023 #### fix(input): correction bug icone date-picker firefox version 109+ [(#585)](https://github.com/GouvernementFR/dsfr/pull/585) -Depuis la version 109 de Firefox, l'icone date-picker est en double sur les champs type date -- Ajout de l'icone date-picker si le navigateur le supporte uniquement +Depuis la version 109 de Firefox, l'icone date-picker est en double sur les champs type date +- Ajout de l'icone date-picker si le navigateur le supporte uniquement #### ✹ feat(analytics): Ă©volution et ajout de nouveaux composants [(#560)](https://github.com/GouvernementFR/dsfr/pull/560) -- Ajout d’un attribut id sur tous les Ă©lĂ©ments marquĂ©s. Les Ă©lĂ©ments oĂč l'id manque sont recensĂ©s en warning dans la console. +- Ajout d’un attribut id sur tous les Ă©lĂ©ments marquĂ©s. Les Ă©lĂ©ments oĂč l'id manque sont recensĂ©s en warning dans la console. - ⚠ Modification de la configuration analytics : ⋅ dsfr.analytics.mode devient dsfr.analytics.collection et peut maintenant prendre les valeurs MANUAL, LOAD, FULL, HASH (voir doc). ⋅ Ajout du support des SPA activĂ© automatiquement si en mode ANGULAR, REACT ou VUE @@ -491,15 +693,15 @@ Depuis la version 109 de Firefox, l'icone date-picker est en double sur les - [x] Ajout de fichier - File upload - [x] Alertes - Alert - [x] Badge - - [x] Bandeau d'information importante + - [x] Bandeau d'information importante - [x] Bouton FranceConnect - [x] Champ de saisie - Input - [x] Citation - Quote - [x] Contenu mĂ©dias - Responsive mĂ©dias - [x] Gestionnaire de consentement - Consent banner - - [x] Indicateur d'Ă©tape - - [x] Lettre d'information et rĂ©seaux sociaux - Newsletter & Follow us - - [x] Liens d'Ă©vitement - Skiplink + - [x] Indicateur d'Ă©tape + - [x] Lettre d'information et rĂ©seaux sociaux - Newsletter & Follow us + - [x] Liens d'Ă©vitement - Skiplink - [x] Liste dĂ©roulante - Select - [x] Pagination - [x] SĂ©lecteur de langue @@ -511,38 +713,38 @@ Depuis la version 109 de Firefox, l'icone date-picker est en double sur les #### ✹ feat(header,navigation): fermeture de la navigation au clic sur lien ou bouton [(#583)](https://github.com/GouvernementFR/dsfr/pull/583) -Actuellement, la navigation reste prĂ©sente en mobile et en desktop lorsque l'on clique sur un lien ou un bouton qu'elle contient, ce qui pose problĂšme dans le cas des Single-page application. -La fonctionnalitĂ© est maintenant modifiĂ©e pour que tout clic sur un Ă©lĂ©ment `<button>` ou `<a>` entraĂźne la fermeture de la navigation (modale et/ou menu). -L'ajout de l'attribut `data-fr-prevent-conceal` permet de prĂ©server un lien ou un bouton particulier de ce nouveau comportement. +Actuellement, la navigation reste prĂ©sente en mobile et en desktop lorsque l'on clique sur un lien ou un bouton qu'elle contient, ce qui pose problĂšme dans le cas des Single-page application. +La fonctionnalitĂ© est maintenant modifiĂ©e pour que tout clic sur un Ă©lĂ©ment `