Groupes de boutons - boutons avec icone coupés - Githubissues

GouvernementFR / dsfr

🇫🇷 Official french government's design system (Système de Design de l'État)

https://www.systeme-de-design.gouv.fr/

Other

236 stars 54 forks source link

Groupes de boutons - boutons avec icone coupés #896

Closed xGenovax closed 4 months ago

xGenovax commented 6 months ago

Décrire le bug

Une fois dans un groupe de bouton (inline ou par défaut) les boutons avec texte + icone gauche ou droite sont coupés.

Les étapes pour reproduire le bug

      <ul class="fr-btns-group fr-btns-group--inline">
        <li>
          <button class="fr-btn fr-btn--icon-right fr-icon-checkbox-circle-line">
            Label bouton
          </button>
        </li>
        <li>
          <button class="fr-btn fr-btn--icon-left fr-icon-checkbox-circle-line">
            Label bouton
          </button>
        </li>
      </ul>

Comportement attendu

Le texte des boutons avec texte + icone doit être affiché.

Capture d’écran

www systeme-de-design gouv fr_elements-d-interface_composants_groupe-de-boutons_

Configuration et système utilisé

**Version du DSFR : 1.11.1
**Appareil (mobile, tablette, desktop) : desktop
**Système d’exploitation : windows 10
**Navigateur et version : Firefox, Edge, Chrome

Informations complémentaires

keryanS commented 4 months ago

Bonjour,

Lorsque l'on utilise le groupe de boutons, la gestion du placement de l'icône est déportée sur le groupe. Il faudra donc utiliser fr-btns-group--icon-left, ou fr-btns-group--icon-right sur le groupe, plutôt que sur chaque bouton.

Le but étant d'éviter l'utilisation de différents alignements au sein d'un groupe, afin de garantir une unité.

Bien à vous, Keryan Sanié - pour l'équipe du DSFR