Closed tristanlemee closed 6 days ago
keryanS
commented
1 month ago Bonjour,
Il nous faudrait plus d'information car le problème semble venir de votre implémentation. Le fil d'arianne fonctionne correctement sur tous les sites, ex : https://www.systeme-de-design.gouv.fr/composants-et-modeles
Si vous utilisez la lib react-dsfr, voyez sur leur répo github. Sinon merci de partager le code ou a minima le site en prod concerné.
keryan, pour l'équipe DSFR
tristanlemee
commented
1 month ago Bonjour,
Site intranet, nous ne pouvons pas le partager. Nous n'utilisons pas la lib react-dsfr, mais effectivement, notre import du DSFR est "fait maison". Cela dit, plusieurs autres moyens d'imports de celui-ci ont été essayé, sans résoudre le problème (mais si vous avez un moyen plus "propre" de le faire, nous sommes preneur)
Dans le RootLayout :
// @ts-expect-error
dynamic(() => import('@gouvfr/dsfr/dist/dsfr.min.css'), { ssr: false });
// @ts-expect-error
dynamic(() => import('@gouvfr/dsfr/dist/core/core.min.css'), { ssr: false });
[....]
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="fr">
<head>
<StartDsfr />
</head>
<body>
{/* ... */}
</body>
</html>
)
}Dans StartDsfr :
"use client";
import { useEffect } from 'react';
export default function StartDsfr() {
useEffect(() => {
// @ts-expect-error
window.dsfr = {
verbose: !(process.env.NODE_ENV === 'production'),
production: process.env.NODE_ENV === 'production',
mode: 'auto'
};
// @ts-expect-error
import('@gouvfr/dsfr/dist/dsfr.module.min.js')
}, [])
return null;
}Le fil d'Ariane :
export default function BreadCrumb({ breadcrumb, libelleCurrent }: { breadcrumb: breadcrumbType[], libelleCurrent: string }) {
return (
<>
{
breadcrumb.length > 0 &&
<nav role="navigation" className="fr-breadcrumb fr-mb-2w" aria-label="vous êtes ici :">
<button className="fr-breadcrumb__button" aria-expanded="false" aria-controls="breadcrumb-documentation">Voir le fil d’Ariane</button>
<div className="fr-collapse" id="breadcrumb-documentation">
<ol className="fr-breadcrumb__list">
{
breadcrumb.map((bc) => (
<li
key={`breadcrumb-${bc.type}-${bc.id}`}
>
<Link
href={`/${bc.type}/${bc.id}`}
className="fr-breadcrumb__link"
>
{bc.libelle}
</Link>
</li>
))
}
<li>
<a className="fr-breadcrumb__link" aria-current="page">{libelleCurrent}</a>
</li>
</ol>
</div>
</nav>
}
</>
)
}Bonjour @tristanlemee,
Il s'agit à priori d'un problème de CSS. Possiblement lié à l'import de core.css après dsfr.css. L'import du core ne doit pas être fait si dsfr est importé en entier, puisque dsfr.css contient déja le core.
Le core arrive avant les composants dans l'ordre du css, il y a sûrement un override qui est fait suite au réimport du core après les composants
Merci de fermer l'issue si la suppression de cette ligne corrige le problème :
dynamic(() => import('@gouvfr/dsfr/dist/core/core.min.css'), { ssr: false });
Keryan, pour l'équipe DSFR
tristanlemee
commented
6 days ago Bonjour,
Le problème venait effectivement de l'import du core.css après le dsfr.css.
Merci pour votre aide. Cordialement,
Décrire le bug
Le fil d'Ariane est invisible dans sa version Desktop. Il est bien présent dans le HTML, il prend bien la place qu'il est censé prendre, mais il est invisible. Si l'on réduit la page (pour passer en Mobile), le Bouton "Voir le fil d'Ariane" apparaît, et si l'on clique dessus, on voit à présent celui-ci (même lorsque l'on retourne en Desktop).
Comportement attendu
Le fil d'Ariane devrait apparaître à l'arrivée sur la page.
Capture d’écran
L'endroit en violet représente la zone qu'il occupe avec les outils de Firefox (mais il est invisible)
Configuration et système utilisé
Informations complémentaires
Projet en NextJS 14, en production, OU la première fois que l'on va sur la page après avoir vidé le cache (navigateur et Next) en dev.