Impossible d'utiliser un bouton avec icône dans un groupe de bouton

thom4parisot commented 2 years ago

Quand j'ajoute une icône, ça masque systématiquement le label :

<ul class="fr-btns-group fr-btns-group--inline">
  <li>
    <button class="fr-btn">
      Bouton sans icône
    </button>
  </li>
  <li>
    <button class="fr-btn fr-icon-checkbox-circle-line fr-btn--icon-left">
      Bouton avec icône
    </button>
  </li>
</ul>

<button class="fr-btn fr-icon-checkbox-circle-line fr-btn--icon-left">
  Bouton avec icône (hors groupe)
</button>

Résultat :

Code en action

Je m'attendais à pouvoir utiliser un bouton avec icône dans un groupe de boutons.

J'ai testé avec la version v1.5.1 des ressources CSS paquet npm @gouvfr/dsfr.

lab9fr commented 2 years ago

Bonjour Thomas,

La gestion du positionnement de l'icône sur un bouton dans le contexte d'un groupe se fait au niveau du groupe. Avec le modificateur : fr-btns-group--icon-left, vous obtiendrez le résultat attendu. Cette mise en place permet de s'assurer de l'harmonisation du placement des icônes au sein d'un groupe.

https://codepen.io/lab9/pen/ExQrNLg

thom4parisot commented 2 years ago

Ah oui bien vu. J'aperçois cette classe dans la documentation.

Si c'était présent sous forme d'exemple, ça serait plus parlant et moins "caché".

En tous cas merci pour ce boulot, c'est super à utiliser :-)

GouvernementFR / dsfr

Impossible d'utiliser un bouton avec icône dans un groupe de bouton #349