Rendre le composant Mise en avant responsive quand il contient un bouton d'action

goulvench commented 4 months ago

Problème

Selon l'emplacement du composant Mise en avant (Callout), la zone de texte peut être très large, ce qui nuit à la lisibilité.

Comportement souhaité

Dans la maquette que je dois intégrer, le bouton d'action est placé à droite à partir du breakpoint LG.

Version avec grille de mise en page

J'ai testé en utilisant les classes de mise en page grille, mais le bouton n'est pas centré verticalement, et sur écrans étroits l'espacement avec le texte n'est pas harmonieux (le margin-top du bouton s'ajoute au padding du texte, ce qui brise le rythme vertical).

<!-- Version avec grille -->
<div class="fr-callout fr-grid-row fr-grid-row__gutters">
  <div class="fr-callout__text fr-col-lg-8">
    Texte de la mise en avant…
  </div>
  <a href="…" class="fr-btn fr-col-lg-4">CTA</a>
</div>

Version sass

J'ai testé avec flex, c'est plus facile à mettre en place sur tout le site, et le bouton peut être centré verticalement.

@media only screen and (min-width: 992px) {
  .fr-callout:has(.fr-btn) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .fr-callout__text {
      max-width: 66%;
    }
    .fr-btn { margin-left: .5rem; }
  }
}

Si le navigateur ne supporte pas :has, le texte reste en pleine largeur, avec le bouton en dessous. Si ce n'est pas souhaité, on peut proposer d'ajouter un modifieur (du type fr-callout-with-btn).

Contexte

La maquette concerne le site collectif-objets.

Capture écran

Messagerie

keryanS commented 4 months ago

Bonjour,

Votre cas d'usage concerne en réalité un détournement du composant. Son usage est limité au contenu éditorial qui est limité à 8 colonnes. Il conviendra plûtot ici d'utiliser une alerte de type information, voire un simple texte.

<div id="alert-1185" class="fr-alert fr-alert--info">
    <h3 class="fr-alert__title">Information</h3>
    <p>La messagerie permet...</p>
    <a href="" target="_blank">Voir la documentation</a>
</div>

Par ailleurs, l'utilisation d'un bouton primaire n'est pas conseillée ici, car il ne s'agit pas d'un bouton principal. Nous essayons d'utiliser un seul bouton primaire par page (hors bouton de recherche). De plus, a priori, il s'agit d'un lien "a" vers une page et non un "button" executant une action dans la page.

keryanS commented 4 months ago

Sauf nouvel élément qui nécessiterait la réouverture de ce ticket, je ferme l'issue suite à la réponse précédente.

Merci de votre implication, Bien à vous.

GouvernementFR / dsfr